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

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

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

browserjavascriptpuppeteerproduct-update

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

FourAのブラウザタスクは、requestごとに実際のheadless Chromeインスタンスを実行することでこの問題を解決します。

動作原理

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

  1. headless Chromeブラウザを起動
  2. 対象のURLへナビゲート
  3. JavaScriptの実行とDOMの安定化を待機
  4. 必要に応じて特定のCSSセレクターの出現を待機
  5. 完全にレンダリングされたHTMLを返却

すべての処理はFourAのインフラストラクチャ上で完結します。ブラウザのインストール、Puppeteerの設定、Chromeのアップデート管理を一切行うことなく、クリーンなHTMLを取得できます。

ブラウザタスクの使い所

ブラウザタスクを使用すべきケース:

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

singleタスクを使用すべきケース:

  • サーバーサイドレンダリングされたHTMLページ (ニュースサイト、ブログ、Wiki)
  • JSONを直接返すREST API
  • 速度を最優先する場合 (ブラウザタスクの所要時間は2〜10秒、単一タスクは1秒未満)

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

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

waitForセレクターは、ページをキャプチャする前にDOM内に.dashboard-contentが表示されるまで待機するようFourAに指示します。これにより、すべての非同期データが読み込まれた状態を保証します。

パフォーマンス向上のヒント

  • 固定のタイムアウトに頼るのではなく、常に特定のセレクターを指定してwaitForを使用してください。その方が高速かつ確実です。
  • 適切なタイムアウトを設定してください。ほとんどのSPAでは15秒で十分です。バックエンドが極端に遅い場合にのみ増やしてください。
  • デフォルトにはsingleを使用し、responseに必要なコンテンツが含まれていない場合にのみbrowserに切り替えてください。

今後の展開

現在、スクリーンショットの取得、PDF生成、複数ステップのナビゲーション (クリック、スクロール、フォーム入力) など、追加のブラウザ機能を開発中です。これらの追加機能がなくても、ブラウザタスクはすでに最も一般的な課題である「空のシェルではなく、JavaScriptでレンダリングされたページから実際のコンテンツを取得すること」に対応しています。

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