視覚ベースのWeb抽出：JSON化してSheetsに保存
このSOPは、XPath/CSSセレクタに依存せず、スクリーンショットを一次情報として商品データを抽出します。Google Sheets にURLを管理し、ScrapingBee でフルページのスクショを取得、Gemini（Gemini 1.5 Pro）に読ませて厳格なJSONで返します。
曖昧なページ（動的価格、文字が小さい、バリエーション）ではHTML抽出にフォールバックし、同じJSONスキーマで再実行します。トークン節約のため、HTMLをコンパクトなMarkdownに変換してからモデルに渡すのが有効です。EC向けですが、ディレクトリ/マーケットプレイス/SaaS料金ページにも応用できます。 [file:81][web:82]
対象ユーザー
解決できる課題
課題
DOM変更でセレクタが壊れ続ける。
動的ページの収集は運用保守が重い。
HTMLを丸ごとLLMに投げるとコストが高い。
解決策
スクショを安定面として抽出し、必要時のみHTMLへフォールバック。
視覚抽出でレイアウト変更への耐性を上げ、メンテ工数を削減。
HTML→Markdown圧縮＋厳格JSONでトークンと手戻りを削る。
このツールキットで達成できること
DOMが変わっても回り続ける抽出手法で、スプレッドシートに信頼できるJSONを落とします。
セレクタ依存を外す
視覚抽出は「見えている情報」を読むため、小さなDOM変更で壊れにくいです。
HTMLフォールバックで精度確保
スクショが曖昧な場合、HTMLが決定的なフォールバックになります。
Markdown圧縮でトークン最適化
生HTMLよりMarkdownの方がトークンが少なく、厳格JSONで後処理も減ります。
ワークフロー概要
Step 1: Google SheetsにURLを投入する
Google Sheets に url、product_name、target_fields、status などの列を用意し、運用として追跡・監査できる形にします。
スクレイピング対象URLのSheetsキュー
行キューとして共有しやすく、非エンジニアがURL追加と結果レビューを回せるため採用します。
Step 2: フルページのスクショを取得する
ScrapingBee でURLごとにフルページスクショを取得し、モデルが視覚的に読める状態を作ります（レンダリング後の要素も含む）。 [web:82]
商品ページのフルスクショ
ScrapingBeeはフルページ取得できるScreenshot APIが強みで、DOMが不安定でも視覚モデルに安定した入力（ピクセル）を渡せます。
Step 3: Gemini視覚でJSONを抽出する
スクショを Gemini に渡し、厳格スキーマ（商品名、価格、通貨、在庫、バリエーション）でJSONを返させます。JSONでなければ弾いて制約を強めて再試行します。 [file:81]
商品スクショから抽出した構造化JSON
レンダリング結果の視覚レイアウトを読めるため、HTML構造が不揃いでも耐性が高い点で採用します。
Step 4: 曖昧な場合はHTMLへフォールバック
ピクセル情報だけでは確信が持てない場合、HTMLを取得してトークン節約のためにMarkdownへ圧縮し、同じスキーマで再抽出します。 [file:81]
抽出用のHTML→Markdown圧縮ビュー
Step 5: 結果をGoogle Sheetsへ書き戻す
抽出したJSON項目を Google Sheets に追記し、実行タイムスタンプも残して価格/在庫の変化を追います。 [file:81]
商品項目＋タイムスタンプ付きのSheets表
追記で監査ログが残り、表形式で価格監視とQAが簡単になるため採用します。
類似ワークフロー
他のツールをお探しですか？これらの代替ワークフローをご覧ください。
ニュースソースを継続的にAIニュース動画へ変換し、複数チャネルへ配信するための方法です。GPT-4oでキャプションを作成し、HeyGenでアバター動画を生成し、PostizでInstagram・Facebook・YouTubeへ一括配信します。
1つのBriefから媒体別投稿を作成し、GPT-4oとGeminiで最適化します。Gmailで二重承認し、Bufferで配信予約、Telegramでステータス共有します。
「独りメディア工場」は、クリエイティブなアイデアを数時間で 4K 実写級動画に変換するコンテンツ制作ワークフローです。GPT-4o、Sora、ElevenLabs を連携させることで、高価な撮影機材なしで映画のような動画制作を自動化し、クリエイターの生産性を 90% 向上させます。
よくある質問
はい。スクショ取得→Gemini に厳格JSON出力→Google Sheets に貼り付け、で成立します。
DOM変更でセレクタは壊れやすい一方、スクショはレンダリング結果として安定しやすいからです。
コストと曖昧性です。画像は処理コストが上がり、小さい文字や重なりで確信度が落ちるため、HTMLフォールバックが重要です。 [file:81]
セレクタが不安定なページだけスクショを使い、テキスト回退はHTMLをMarkdownに圧縮し、厳格JSONでリトライを減らします。 [file:81]
ケースバイケースです。各国法令・利用規約・robotsの指針に従ってください。テンプレート自体も法規確認を明示しています。 [file:81]
DOMが安定しているなら従来のセレクタ抽出が最も軽いです。Gemini は例外処理の整形だけに使うのが現実的です。 [file:81]