• RAW DATA
  • TARGETED
  • AUTOMATED
  • HUMAN

AIで動的なウェブサイトのスクレイピングを行う方法:Browserless MCPを活用

BrowserlessをAIクライアントに接続すれば、JavaScriptの実行が必要なサイトも扱えるようになります。エージェントが人間と同じように複雑なウェブアプリを操作し、データを取得します。

このページについてAIに聞く

すぐに答え

JavaScriptを使用しているサイトをAIはどうやってスクレイピングするのですか?

AIがリモートのヘッドレスブラウザを使用してスクリプトを実行し、要素が表示されるまで待機します。これにより、標準的なスクレイパーでは取得できないシングルページアプリケーション(SPA)からも、構造化されたデータを抽出できます。

データ抽出の結果

エージェントが生成するもの

スクレイピング要求が成功した際に得られる結果です。

RAW DATA

クリーンなHTMLコンテンツ

JavaScript実行後の、完全にレンダリングされたDOMをAIが取得します。ブラウザ上に表示されている実際のコンテンツが得られます。

TARGETED

特定の要素リスト

エージェントが指定されたCSSセレクターやXPathを抽出します。複雑なウェブページを整理されたデータリストに変換します。

AUTOMATED

JavaScriptの実行

ブラウザがサイト内部のスクリプトを実行して読み込みをトリガーします。ユーザー操作やタイマーによって表示されるデータも捕捉可能です。

HUMAN

手動による確認が必要

強力なボット対策が施されているサイトの場合、AIが失敗を報告します。その際は、CAPTCHAの解除や複雑なナビゲーションを手動で行う必要があります。

ワークフロー

スクレイピング要求が届いた際、AIが行うプロセス

AIがリモートブラウザを制御してウェブサイトをナビゲートします。

  1. ページの読み込み

    エージェントがリモートブラウザを起動し、初期のページ構造を取得します。

    get_html_content
  2. スクリプトの実行

    AIがカスタムJavaScriptを実行し、クリックやスクロール、データの読み込みを指示します。

    scrape_with_js
  3. コンテンツの待機

    特定の要素やネットワークリクエストの読み込みが完了するまで、エージェントが待機します。

    scrape_with_wait
  4. データの抽出

    レンダリングされたページから、指定されたテキストや属性をAIが抽出します。

    scrape_elements

試してみる

以下のプロンプトをコピーして開始してください。

これらのプロンプトを使用して、スクレイピングを開始できます。

出発点

ウェブサイトのURLやCSSセレクターは、実際の対象に合わせて書き換えてください。

Playwright Cloud Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_IIDNcqb1tweuMxUveoUJYpZo2stQfUdThsbX1fHA/mcp

Claude Desktop

以下の手順で数秒で接続できます。

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Playwright Cloud capabilities are ready to use.
設定 · claude_desktop_config.jsonコピー
{
  "mcpServers": {
    "browserless-playwright-cloud-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_IIDNcqb1tweuMxUveoUJYpZo2stQfUdThsbX1fHA/mcp"
    }
  }
}
チャットにコピー04
  • CSSセレクターを使用して、https://example.com/shop から商品名と価格をスクレイピングしてください。

  • https://example.com/dashboard にアクセスし、ローディングアイコンが消えるまで待機してから、HTMLコンテンツを取得してください。

  • https://example.com/map でスクリプトを実行し、すべての結果が表示されるまで「もっと見る」ボタンをクリックしてください。

  • このURLの class='article-body' 内にあるすべてのテキストを抽出してください: https://example.com/news

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

ここから始める

Browserlessを一度接続すれば、あとは指示するだけです。

アカウントの連携は一度だけで完了します。認証情報は暗号化して保持されるため、すぐにAIによるウェブブラウジングを開始できます。

BrowserlessをAIに接続する

FAQ

動作について

  • 01

    AIはCAPTCHAを自動的に回避できますか?

    いいえ。AIはJavaScriptを実行できますが、CAPTCHAの解決や高度なボット検知を自律的に回避することはできません。

  • 02

    AIはウェブサイトの内容を書き換えてしまいますか?

    いいえ。ブラウザはリモート環境で動作し、指示された通りにページの読み取りや操作を行うだけです。ウェブサイト自体のソースコードを書き換えることはできません。

  • 03

    ログインが必要なサイトをスクレイピングできますか?

    はい。ログインページへ移動し、JavaScript経由で認証情報を入力するよう指示を出せば可能です。

  • 04

    AIはデータをファイルに保存してくれますか?

    いいえ。AIはデータを抽出してチャット上に提示します。その情報をファイルやスプレッドシートに保存するのは、ユーザー自身の役割となります。

  • 05

    無限スクロールに対応していますか?

    はい。JavaScriptを使用してページをスクロールし、新しい要素がDOMに読み込まれるのを待機することで対応可能です。

  • Browserlessについて他に質問がありますか? Browserless Connectorの全機能を見る

『Playwright Cloud』を Claude、Cursor、ChatGPT などに接続