JavaScriptのレンダリング

SPAとJSを多用するページには、実際のブラウザ実行が必要です。Web Scraping APIはこれを1つのフラグの背後で処理します。

レンダリングを有効にする

任意のリクエストにrender_js=1を追加します。Shifterは新しいヘッドレスChromeインスタンスを起動し、URLへナビゲートし、レンダリング後のDOMを返します。

curl "https://scrape.shifter.io/v1?api_key=YOUR_API_KEY&url=https://example.com&render_js=1"

JSレンダリングは、静的フェッチと同じ成功リクエストあたり1クレジットで課金されます。追加料金はありません。

コンテンツの待機

ほとんどのSPAは特定の要素が表示された時点で読み込みが完了します。wait_for_cssを使用して、そのセレクタがレンダリングされるまでブロックします。

curl "https://scrape.shifter.io/v1?api_key=YOUR_API_KEY&url=https://shop.example.com&render_js=1&wait_for_css=.product-price"

リクエストは.product-priceがDOMに存在するとすぐに完了するか、タイムアウト(デフォルト30秒)で失敗します。

タイムアウトの強制

timeout(ミリ秒単位)で、ブラウザがページに費やせる合計時間の上限を設定します。

curl "https://scrape.shifter.io/v1?api_key=YOUR_API_KEY&url=https://slow.example.com&render_js=1&timeout=10000"

これは、完全なレンダリングよりも10秒後に表示されている状態を取得したい、読み込みの遅いダッシュボードのスクレイピングに便利です。

JavaScript命令

js_instructions(URLエンコードされたJSON)を使用して、キャプチャ前にスクロール、クリック、または任意のステップを実行します。よく使われるパターンは以下のとおりです。

無限フィードを読み込むためのスクロール:

[{"action": "scrollTo", "selector": "footer", "timeout": 5000, "block": "start"}]

スクレイピング前にボタンをクリック:

[{"action": "click", "selector": "button.load-more", "timeout": 3000}]

複数のステップを連結:

[
  {"action": "click", "selector": "button.accept-cookies"},
  {"action": "scrollTo", "selector": "div.results"},
  {"action": "wait", "duration": 2000}
]

この配列は、js_instructionsにURLエンコードされた文字列として渡します。

スクリーンショット

screenshot=1を追加することで、DOMの代わりにフルページのスクリーンショットを取得します。レスポンスはバイナリのPNGです。Advancedを参照してください。

レンダリングを省略すべき場合

• 静的HTMLページ(ニュース記事、ブログ投稿、RSS形式のコンテンツ)
• JSON API(スクレイピングエンドポイントではなく、直接フェッチを使用してください)
• ファイルおよびバイナリ

render_jsを省略すると、クレジットは同じですが、レイテンシの面でコストが低くなります。

次のステップ

• 抽出ルール: レンダリングされたページから構造化データを取得します。
• Advanced: ヘッダー、クッキー、スクリーンショット、POST。