ビジョンLLMウェブスクレイピング：DOMではなくスクリーンショットを読む

ビジョンモデルはあなたのHTMLを読み取るのではなく、ページの画像を読み取ります。これによって「スクレイピング」の意味が変わります。値を持つセレクターを狩る代わりに、モデルにスクリーンショットを渡して何が見えるかを尋ねます。スクレイピングブラウザは、Chrome DevTools Protocolを介してクラウドでそのスクリーンショットを取得し、多-modalモデルがピクセルを構造化データに変換します。

DOMがあなたに抵抗しているときに手を伸ばすべきツールがこれです — 画像として埋め込まれた価格、基になるテーブルのないチャート、キャンバスレンダリングされたウィジェット、または意味がタグの中ではなく位置に存在するレイアウト。 このガイドはスクレイピングブラウザに接続し、レンダリングされたページのスクリーンショットをキャプチャし、ビジョンモデルが画像からJSONを返すようにし、すべてのステップはライブで実行されます。

なぜDOMではなくスクリーンショットを読むのか

セレクタに基づくスクレイピングは、必要なデータがマークアップ内の値であると仮定しますが、多くの場合そうではありません。ストアフロントは価格を画像としてレンダリングしてボットを退け、ダッシュボードはテキストを持たないキャンバス要素に数字を描画し、マーケティングページは比較を視覚的なレイアウト全体にエンコードすることがあります。その場合、HTMLは値が空であるか、セレクターが指し示すものよりも脆弱になるほど絡み合っています。

ビジョンモデルはマークアップを迂回します。人が見ているもの、すなわちレンダリングされたページを見て、画像から値を読み取ります。スクリーンショットは忠実でなければならないため、実際のブラウザから取得されます。スクレイピングブラウザはページをサーバー側でレンダリングし、そのスクリプトを実行し、ユーザーが見るであろうフレームをキャプチャします。したがって、モデルは半分構築されたページではなく、完成したページについて考察します。

前提条件

Python 3.9以降が必要です。playwrightクライアントとrequests、およびブラウザセッション用のScrapeless APIキーと多-modalモデル用のキーが必要です。Scrapelessキーはapp.scrapeless.comの無料プランで取得できます。両方のキーは環境変数に保管し、接続URLおよび認証ヘッダーで移動させ、ソースには決して移動させません。

インストール

pip install playwright requests

設定

export SCRAPELESS_API_KEY="your_scrapeless_api_key"
export OPENROUTER_API_KEY="your_model_api_key"

スクレイピングブラウザでスクリーンショットをキャプチャ

CDPを介してクラウドブラウザに接続し、ページを開いてビュー ポートをキャプチャします。スクリーンショットは、ページをレンダリングした同じChromiumによって生成されたPNGであり、モデルが受け取るのは訪問者が見るのと全く同じものです。このキャプチャは、Chrome DevTools Protocolを通じて行われ、PNG画像形式でバイトを返します。

import os
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

print("スクリーンショットのバイト数:", len(png))
print("PNG署名はOK:", png[:8] == b"\x89PNG\r\n\x1a\n")

実行結果は、実際の画像が返ってきたことを確認します：

スクリーンショットのバイト数: 55462
PNG署名はOK: True

無料プランでAPIキーを取得: app.scrapeless.com

ビジョンモデルでスクリーンショットを読む

PNGをbase64データURLとしてエンコードし、希望するスキーマとともに多-modalモデルに送信し、応答をJSONに制限します。モデルはレンダリングされたページを読み取り、フィールドを返します — セレクターもDOMのトラバーサルもありません。Base64はBase64データエンコーディング標準に従い、これが画像がJSONリクエスト内でどのように移動するかを示します。完全なキャプチャおよび読み取りパイプライン：

import os, base64, json, requests
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

img = "data:image/png;base64," + base64.b64encode(png).decode()
resp = requests.post(
    "https://openrouter.ai/api/v1/chat/completions",
    ヘッダー={"認証": f"Bearer {os.environ['OPENROUTER_API_KEY']}", "コンテンツタイプ": "application/json"},
    json={"モデル": "google/gemini-2.5-flash-lite",
          "メッセージ": [{"役割": "ユーザー", "内容": [
              {"タイプ": "テキスト", "テキスト": 'この引用ページのスクリーンショットから、最初の3つの引用のために '
                                       'JSONを返してください{"quotes":[{"author":..., "text":...}]} '
                                       '見ることができます。JSONのみを返してください。'},
              {"タイプ": "画像URL", "画像URL": {"url": img}}]}],
          "応答形式": {"タイプ": "json_object"}, "温度": 0},
    タイムアウト=120,
)
resp.raise_for_status()
quotes = json.loads(resp.json()["choices"][0]["message"]["content"])["quotes"]
print("画像から抽出した引用:", len(quotes))
print("画像からの最初の著者:", quotes[0]["author"])

モデルはピクセルを読み取り、記録を返します：

画像から抽出した引用: 3
画像からの最初の著者: アルバート・アインシュタイン

画像はHTMLとして解析されることはありませんでした。著者名はスクリーンショット内のレンダリングされたテキストから来ているため、このアプローチは同じ値を画像タグやキャンバスの背後に隠すページでも機能します。

ビジョンがそのコストを正当化する場合とそうでない場合

ビジョンスクレイピングは無料ではありません — 画像は同じ値を保持するHTMLのスニペットよりもはるかに多くのトークンを消費し、モデルは小さな文字や低コントラストのテキストを誤って読み取ることがあります。したがって、慎重に使用してください。視覚的に価値がある場合、すなわち画像内に焼き付けられたテキスト、グラフやキャンバスウィジェット、ページにレンダリングされたPDF、または意味を空間的に示すレイアウトのときに、効果があります。データがDOM内のクリーンなテキストである場合、セレクタはより安価で迅速かつ正確であり、マークアップから読み取るのがより良い選択です。Scraping Browserとビジョンモデルを組み合わせる強みは、同じレンダリングされたセッションに対して両方を切り替えられることです — 信頼できる場所でDOMを解析し、信頼できない場所でスクリーンショットを撮り読み取ります。

結論

ビジョンモデルスクレイピングは、人がページを読む方法でページを読み取ります。Scrapeless Scraping Browserはターゲットをレンダリングし、CDPを介してクラウド内に忠実なスクリーンショットをキャプチャし、マルチモーダルモデルがその画像を構造化されたJSONに変換します。上記の実行で抽出された3つの引用と著者「アルバート・アインシュタイン」は、コード内にセレクタなしでピクセルから取得されました。DOMが値を運べないところで使用し、クリーンなテキストをすでに持っているページの部分にはセレクタを保持してください — LLMスクレイパーとは何かにおける説明が、モデルが抽出においてどこにフィットするかを示しています。Scraping Browser製品ページで機能を確認し、価格ページで画像のボリュームに対して価値を量り、スケールで実行する前に考慮してください。

コミュニティに参加して無料プランを請求し、抽出パイプラインを構築している他の開発者とアイデアを交換してください: Discord · Telegram。

よくある質問

Q: HTMLを解析するのではなく、スクリーンショットでスクレイピングすべき時は？

価値がテキストではなく視覚的な場合、すなわち画像として表示される価格、キャンバス上に描かれた数字、基礎となるテーブルのないグラフ、または位置によって意味を符号化するレイアウトの場合にビジョンを使用してください。データがDOM内のクリーンなテキストである場合、CSSセレクタはより安価で正確です。

Q: ローカルのものではなく、Scraping Browserでスクリーンショットをキャプチャする理由は？

モデルはスクリーンショットが示すものしか読み取れません。Scraping Browserはサーバー側でページをレンダリングし、そのスクリプトを実行し、クラウドのChromiumから完成したフレームをキャプチャするため、画像は完全にレンダリングされたページになります。ローカルのヘッドレスブラウザからの半分読み込まれたものではありません。

Q: 画像はどのようにリクエストに入りますか？

PNGバイトはdata:image/png;base64,... URLにbase64エンコードされ、そのテキストプロンプトに付随する image_url コンテンツ部分として送信されます。モデルは指示と同じJSONリクエスト内で画像をインラインで受け取ります。

Q: モデルは信頼できる構造を返しますか？

応答をJSONオブジェクトに制約し、明示的なスキーマを提供します。この例のように。モデルは、要求したフィールドのみを返します。小さな文字や低コントラストのテキストの視覚的な読み取りには注意を払って、正確でなければならない値を検証してください。

Q: これはDOMスクレイピングよりも高価ですか？

はい。画像は同等のHTMLスニペットよりもトークンをはるかに多く消費するため、ビジョンスクレイピングはページごとにコストが高くなります。視覚的データという実際の問題を解決する場所で使用し、テキストがすでに入手可能な場所ではDOMを解析してください。

Q: 2つのアプローチを混在させることはできますか？
はい、それはしばしば正しいデザインです。単一のスクレイピングブラウザセッションは、クリーンなマークアップに存在するフィールドのためにDOMを解析し、そうでない領域のスクリーンショットを撮ることで、ページの各部分を最も安価で信頼性の高い方法で読み取ることができます。