ドキュメント › ハウツー › 動的ウェブサイトのスクレイピング

動的ウェブサイトのスクレイピング

動的Webサイトは、初期ページ読み込み後にJavaScriptを使用してコンテンツを読み込みます。このガイドでは、FourAのブラウザendpointを使用してこれらのサイトからデータを収集する方法を示します。

課題

JavaScriptを多用するWebサイトに標準のHTTP requestを送信すると、HTMLシェルは取得できますが、実際のコンテンツは取得できません。必要なデータ(製品リスト、価格、検索結果)は、ページがブラウザでレンダリングされた後にJavaScriptによって読み込まれます。

これは、React、Vue、Angular、Next.jsなどの最新フレームワークでますます一般的になっています。

解決策: ブラウザrequest

FourAのブラウザendpoint (POST /api/browser/) は、次の処理を行うChromeブラウザインスタンスでURLを開きます。

  1. ページを読み込む
  2. すべてのJavaScriptを実行する
  3. コンテンツがレンダリングされるのを待つ
  4. 完全にレンダリングされたHTMLを返す

ステップ1: 必要なものを特定する

requestを行う前に、ブラウザでターゲットページにアクセスし、DevTools (F12) を使用して、コンテンツが読み込まれたことを確認できるテキストまたは要素を見つけます。例:

  • JavaScriptのレンダリング後に表示される製品名
  • レンダリングされたHTML内のproduct-gridなどのCSSクラス
  • データが読み込まれたときにのみ表示される"results"などのテキスト文字列

ステップ2: ブラウザrequestを送信する

curl -X POST https://eu.api.foura.ai/api/browser/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/products",
    "timeout_ms": 15000,
    "checkText": "product-grid"
  }'

checkText オプションは、レンダリングされたページに "product-grid" という文字列が含まれているかを検証するよう FourA に指示します。タイムアウト前に表示されない場合、request は失敗し、コンテンツが読み込まれなかったことが通知されます。

ステップ 3: HTMLを解析する

response には、完全にレンダリングされた HTML が body フィールドに含まれます。任意のライブラリを使用して解析します。

Python (BeautifulSoup)

import requests
from bs4 import BeautifulSoup

resp = requests.post("https://eu.api.foura.ai/api/browser/", headers={
    "X-API-Key": "YOUR_API_KEY",
    "Content-Type": "application/json"
}, json={
    "url": "https://example.com/products",
    "timeout_ms": 15000,
    "checkText": "product-grid"
})

html = resp.json()["body"]
soup = BeautifulSoup(html, "html.parser")

for product in soup.select(".product-card"):
    name = product.select_one(".product-name").text.strip()
    price = product.select_one(".product-price").text.strip()
    print(f"{name}: {price}")

Node.js (cheerio)

import * as cheerio from 'cheerio';

const resp = await fetch('https://eu.api.foura.ai/api/browser/', {
  method: 'POST',
  headers: { 'X-API-Key': 'YOUR_API_KEY', 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://example.com/products',
    timeout_ms: 15000,
    checkText: 'product-grid'
  })
});

const { body: html } = await resp.json();
const $ = cheerio.load(html);

$('.product-card').each((i, el) => {
  console.log($(el).find('.product-name').text(), $(el).find('.product-price').text());
});

トラブルシューティング

依然として空のコンテンツが取得される場合

  • ページが実際にJavaScriptレンダリングを使用しているか確認する (「ページのソースを表示」とDevToolsを比較)
  • timeout_msを増やす: 一部のページは読み込みに時間がかかります
  • ページが認証やcookieを必要とするか確認する (cookiesパラメータを使用)

CAPTCHAページが表示される場合

  • 単一/HTTPリクエストの場合、自動IPローテーションのためにproxy endpoint (POST /api/proxy/) に切り替えます。
  • proxy経由でブラウザリクエストをルーティングするには、ブラウザendpointのproxyパラメータを渡します。proxy endpointは単一/HTTPリクエストのみをラップし、ブラウザリクエストはラップしません。

proxyパラメータは、以前のレスポンスが返した不透明なproxy IDを受け取ります。独自のproxyアドレスを指定することはできません。最初にPOST /api/proxy/ (またはPOST /api/auto/) 呼び出しを1回実行し、それが返すproxyフィールドを読み取り、それを固定します:

# Step 1: let FourA find a working exit. The response carries "proxy": "A1B2C3".
curl -X POST "https://eu.api.foura.ai/api/proxy/" \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"maxTries": 5, "request": {"method": "GET", "url": "https://example.com/products"}}'

# Step 2: render through that same exit.
curl -X POST "https://eu.api.foura.ai/api/browser/" \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com/products", "proxy": "A1B2C3", "timeout_ms": 20000}'

IDの代わりにアドレスを送信すると、400 Invalid proxy format として返されます。完全なパターンは、リクエスト間での proxy の再利用に記載されています。

次のステップ

最終更新日: 2026年8月12日
競合価格の監視 →