← すべての記事
プロダクトアップデート 読了時間 1 分

Browser Tasks: JavaScriptを多用したサイトをスクレイピングする方法

現代のウェブサイトの70%以上は、コンテンツのレンダリングにJavaScriptを必要とします。HTTP requestが空を返す場合に、FourAのbrowser tasksを使って完全なページを取得する方法を解説します。

browserjavascriptpuppeteerproduct-update

現代のウェブサイトの70%以上は、コンテンツのレンダリングをJavaScriptに依存しています。標準的なHTTP requestでは、初期のHTMLシェルしか取得できません。実際のデータはJavaScriptの実行後にロードされるため、従来のスクレイピングツールでは空のページが返されてしまいます。

FourAのbrowser tasksは、すべてのrequestに対して実際のheadless Chromeインスタンスを実行することで、この問題を解決します。

仕組み

type: "browser"を指定してタスクを送信すると、FourAは以下の処理を行います。

  1. headless Chromeブラウザを起動する
  2. 対象のURLに遷移する
  3. JavaScriptが実行され、DOMが安定するのを待つ
  4. オプションで、特定のCSS selectorが表示されるのを待つ
  5. 完全にレンダリングされたHTMLを返す

プロセス全体はFourAのインフラストラクチャ上で行われます。ブラウザのインストール、Puppeteerの設定、Chromeのアップデート管理を行うことなく、クリーンなHTMLを受け取ることができます。

Browser Tasksを使用すべきケース

browser tasksを使用すべき場合:

  • シングルページアプリケーション（React、Vue、Angular）
  • 遅延読み込みコンテンツ（無限スクロール、「もっと読み込む」ボタンなど）を含むページ
  • cookieの同意や初期のJSセットアップが必要なサイト
  • クライアントサイドの認証フローの背後にあるコンテンツ

singleタスクで十分な場合:

  • サーバーサイドでレンダリングされるHTMLページ（ニュースサイト、ブログ、Wikiなど）
  • JSONを直接返すREST API
  • 速度が最優先される場合（browser tasksは2〜10秒かかるのに対し、singleタスクは1秒未満です）

例：Reactアプリのスクレイピング

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "type": "browser",
    "options": {
      "waitFor": ".dashboard-content",
      "timeout": 15000
    }
  }'

waitFor selectorは、ページをキャプチャする前にDOM内に.dashboard-contentが表示されるまで待機するようFourAに指示します。これにより、すべての非同期データが確実にロードされます。

パフォーマンスに関するヒント

  • 常に特定のselectorを指定してwaitForを使用してください。タイムアウトに依存するよりも、その方が高速かつ信頼性が高くなります。
  • 適切なtimeoutを設定してください。 15秒あればほとんどのSPAに対応できます。バックエンドが本当に遅い場合にのみ、この値を増やしてください。
  • デフォルトではsingleを使用し、レスポンスに必要なコンテンツが含まれていない場合にのみbrowserに切り替えてください。

今後の展望

私たちは、スクリーンショットのキャプチャ、PDF生成、マルチステップナビゲーション（クリック、スクロール、フォーム入力）など、追加のブラウザ機能の開発に取り組んでいます。しかし、これらの追加機能がなくても、browser tasksは最も一般的なペインポイントである「空のシェルの代わりに、JavaScriptでレンダリングされたページから実際のコンテンツを取得する」という課題をすでに解決しています。

タスクタイプの完全な比較については、ドキュメントを参照してください。