# スクレイピング後にページをInteract (/ja/features/interact) ページをスクレイピングしてクリーンなデータを取得し、その後 `/interact` を呼び出して、そのページ上でアクションを開始します: ボタンのクリック、フォームへの入力、動的コンテンツの抽出、さらに深いページへの移動が可能です。やりたいことを記述するだけでもよく、完全に制御したい場合はコードを書くこともできます。
報奨金：5,000クレジット /interact に関する質の高いフィードバックに進呈

対象となるには、Firecrawl Feedback Assistant との内容の濃いインタビュー (よく考えられた具体的なユースケースなど) を完了してください。所要時間は数分で、いつでも中断できます。人間にもエージェントにも対応しており (リンクをエージェント用ハーネスに貼り付けるだけです！) 、/interact を使ったことがない場合でも、ご意見をお聞かせください。

インタビューを開始

報奨金の対象となるには、メールアドレスを入力してください。インタビューは毎週末に品質を確認します。

## 適切な操作モデルを選択 [#適切な操作モデルを選択]
| 必要なこと | 使用するもの | 正規ドキュメント | | ------------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 最初にスクレイピングせず、独立したブラウザセッションを開始する | Browser Sandbox / 独立した Interact セッション | [Browser Sandbox](/ja/features/browser), [Create Browser Session](/ja/api-reference/endpoint/browser-create), [Execute Browser Code](/ja/api-reference/endpoint/browser-execute), [List Browser Sessions](/ja/api-reference/endpoint/browser-list), [Delete Browser Session](/ja/api-reference/endpoint/browser-delete) | | `scrapeId` を使ってスクレイピング結果から続行する | スクレイピング後に Interact | [Execute Interact](/ja/api-reference/endpoint/scrape-execute), [Stop Interact](/ja/api-reference/endpoint/scrape-browser-delete) | ワークフローが `POST /v2/scrape` で始まり、レスポンスに `data.metadata.scrapeId` が含まれる場合は、スクレイピングに紐づいた Interact を使用します。独自のライフサイクルを持つ独立したセッションが必要な場合は、Browser Sandbox を使用します。 ページ上で実行したいアクションを記述します Playwright や agent-browser を使って、安全にコード実行で操作できます 埋め込み可能なストリームを通じて、ブラウザーをリアルタイムで確認したり操作したりできます
## 動作の仕組み [#動作の仕組み]
1. `POST /v2/scrape` で URL を**スクレイピング**します。レスポンスには `data.metadata.scrapeId` に `scrapeId` が含まれます。ブラウザの状態を保持したい場合は、このリクエストで `profile` を渡します。 2. `prompt` または Playwright の `code` を指定して `POST /v2/scrape/{scrapeId}/interact` を呼び出し、**Interact**します。ここでは `profile` を渡さないでください。Interact セッションはスクレイピングジョブから `profile` を引き継ぎます。 3. 完了したら、`DELETE /v2/scrape/{scrapeId}/interact` でセッションを**停止**します。書き込み可能な `profile` では、セッションの停止時に変更が保存されます。
## クイックスタート [#クイックスタート]
ページをスクレイピングし、操作し、セッションを停止します: Python Node cURL CLI ```python from firecrawl import Firecrawl app = Firecrawl( # 開始にAPIキーは不要です — より高いレート制限のために追加してください: # api_key="fc-YOUR-API-KEY", ) # 1. Amazonのホームページをスクレイピング result = app.scrape("https://www.amazon.com", formats=["markdown"]) scrape_id = result.metadata.scrape_id # 2. インタラクト — 商品を検索して価格を取得 app.interact(scrape_id, prompt="Search for iPhone 16 Pro Max") response = app.interact(scrape_id, prompt="Click on the first result and tell me the price") print(response.output) # 3. セッションを停止 app.stop_interaction(scrape_id) ``` ```js import { Firecrawl } from 'firecrawl'; const app = new Firecrawl({ // 開始にAPIキーは不要です — レート制限を引き上げるには追加してください: // apiKey: 'fc-YOUR-API-KEY', }); // 1. Scrape Amazon's homepage const result = await app.scrape('https://www.amazon.com', { formats: ['markdown'] }); const scrapeId = result.metadata?.scrapeId; // 2. Interact — search for a product and get its price await app.interact(scrapeId, { prompt: 'Search for iPhone 16 Pro Max' }); const response = await app.interact(scrapeId, { prompt: 'Click on the first result and tell me the price' }); console.log(response.output); // 3. Stop the session await app.stopInteraction(scrapeId); ``` ```bash # 1. Amazonのホームページをスクレイピングする # 開始時にAPI keyは不要 — より高いレート制限を利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: RESPONSE=$(curl -s -X POST "https://api.firecrawl.dev/v2/scrape" \ -H "Content-Type: application/json" \ -d '{"url": "https://www.amazon.com", "formats": ["markdown"]}') SCRAPE_ID=$(echo $RESPONSE | jq -r '.data.metadata.scrapeId') # 2. インタラクト — 商品を検索して価格を取得する curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"prompt": "Search for iPhone 16 Pro Max"}' curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"prompt": "Click on the first result and tell me the price"}' # 3. セッションを停止する curl -s -X DELETE "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" ``` ```bash # 1. AmazonのホームページをスクレイピングするスクレイピングIDは自動的に保存されます） firecrawl scrape https://www.amazon.com # 2. 操作する — 商品を検索して価格を取得する firecrawl interact "Search for iPhone 16 Pro Max" firecrawl interact "Click on the first result and tell me the price" # 3. セッションを停止する firecrawl interact stop ``` ```json title="Response" { "success": true, "cdpUrl": "wss://browser.firecrawl.dev/...", "liveViewUrl": "https://liveview.firecrawl.dev/...", "interactiveLiveViewUrl": "https://liveview.firecrawl.dev/...", "output": "The iPhone 16 Pro Max (256GB) is priced at $1,199.00.", "exitCode": 0, "killed": false } ```
## プロンプトで操作する [#プロンプトで操作する]
ページを操作する最も簡単な方法です。やりたいことを自然言語で記述するだけで、自動的にクリック、入力、スクロール、データの抽出を行います。 Python Node cURL CLI ```python response = app.interact(scrape_id, prompt="What are the customer reviews saying about battery life?") print(response.output) ``` ```js const response = await app.interact(scrapeId, { prompt: 'What are the customer reviews saying about battery life?', }); console.log(response.output); ``` ```bash # 開始するためにAPIキーは不要です — より高いrate limitsを利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{ "prompt": "What are the customer reviews saying about battery life?" }' ``` ```bash firecrawl interact "What are the customer reviews saying about battery life?" ``` レスポンスには、エージェントの回答が含まれる `output` フィールドがあります。 ```json title="Response" { "success": true, "cdpUrl": "wss://browser.firecrawl.dev/...", "liveViewUrl": "https://liveview.firecrawl.dev/...", "interactiveLiveViewUrl": "https://liveview.firecrawl.dev/...", "output": "Customers are generally positive about battery life. Most reviewers report 8-10 hours of use on a single charge. A few noted it drains faster with heavy multitasking.", "stdout": "...", "result": "...", "stderr": "", "exitCode": 0, "killed": false } ```
### プロンプトは小さく、焦点を絞る [#プロンプトは小さく焦点を絞る]
プロンプトは、それぞれが**単一の明確なタスク**であるときに最も効果を発揮します。エージェントに複雑な複数ステップのワークフローを一度に実行させるのではなく、個別の `interact` 呼び出しに分けてください。各呼び出しは同じブラウザセッションを再利用するため、それまでの状態が引き継がれます。
## コードの実行 [#コードの実行]
より細かく制御したい場合は、ブラウザサンドボックスでコードを直接実行できます。`page` 変数 (Playwright の Page オブジェクト) は Node.js と Python で利用できます。Bash モードには [agent-browser](https://github.com/vercel-labs/agent-browser) がプリインストールされています。セッション内でスクリーンショットを撮ることもできます: Node.js では `(await page.screenshot()).toString("base64")`、Python では `await page.screenshot(path="/tmp/screenshot.png")`、Bash では `agent-browser screenshot` を使用してください。
### Node.js (Playwright) [#nodejs-playwright]
デフォルトの言語です。Playwright のコードを直接記述できます。`page` はすでにブラウザに接続されています。 Python Node cURL CLI ```python response = app.interact(scrape_id, code=""" // ボタンをクリックしてナビゲーションを待機 await page.click('#next-page'); await page.waitForLoadState('networkidle'); // 新しいページからコンテンツを取得 const title = await page.title(); const content = await page.$eval('.article-body', el => el.textContent); JSON.stringify({ title, content }); """) print(response.result) ``` ```js const response = await app.interact(scrapeId, { code: ` // ボタンをクリックしてナビゲーションを待機する await page.click('#next-page'); await page.waitForLoadState('networkidle'); // 新しいページからコンテンツを抽出する const title = await page.title(); const content = await page.$eval('.article-body', el => el.textContent); JSON.stringify({ title, content }); `, }); console.log(response.result); ``` ```bash # 開始するためにAPI keyは不要です — より高いrate limitsを利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{ "code": "await page.click(\"#next-page\"); await page.waitForLoadState(\"networkidle\"); const title = await page.title(); JSON.stringify({ title });", "language": "node", "timeout": 30 }' ``` ```bash # 最後のスクレイピングを自動的に使用する firecrawl interact -c " await page.click('#next-page'); await page.waitForLoadState('networkidle'); const title = await page.title(); const content = await page.\$eval('.article-body', el => el.textContent); JSON.stringify({ title, content }); " # またはスクレイピングIDを明示的に渡す # firecrawl interact -c "await page.title()" ```
### Python [#python]
Playwright の Python API を使う場合は、`language` を `"python"` に設定します。 Python Node cURL CLI ```python response = app.interact( scrape_id, code=""" import json await page.click('#load-more') await page.wait_for_load_state('networkidle') items = await page.query_selector_all('.item') data = [] for item in items: text = await item.text_content() data.append(text.strip()) print(json.dumps(data)) """, language="python", ) print(response.stdout) ``` ```js const response = await app.interact(scrapeId, { code: ` import json await page.click('#load-more') await page.wait_for_load_state('networkidle') items = await page.query_selector_all('.item') data = [] for item in items: text = await item.text_content() data.append(text.strip()) print(json.dumps(data)) `, language: 'python', }); console.log(response.stdout); ``` ```bash # 開始にAPIキーは不要です — より高いrate limitsを利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{ "code": "import json\nawait page.click(\"#load-more\")\nawait page.wait_for_load_state(\"networkidle\")\nitems = await page.query_selector_all(\".item\")\ndata = [await i.text_content() for i in items]\nprint(json.dumps(data))", "language": "python" }' ``` ```bash firecrawl interact --python -c " import json await page.click('#load-more') await page.wait_for_load_state('networkidle') items = await page.query_selector_all('.item') data = [await i.text_content() for i in items] print(json.dumps(data)) " ```
### Bash (agent-browser) [#bash-agent-browser]
[agent-browser](https://github.com/vercel-labs/agent-browser) は、60 以上のコマンドがプリインストールされたサンドボックス内の CLI です。要素参照 (`@e1`, `@e2`, ...) 付きのアクセシビリティツリーを提供し、LLM による自動化に最適です。 Python Node cURL CLI ```python # インタラクティブな要素を確認するためにスナップショットを取得する snapshot = app.interact( scrape_id, code="agent-browser snapshot -i", language="bash", ) print(snapshot.stdout) # 出力: # [document] # @e1 [input type="text"] "Search..." # @e2 [button] "Search" # @e3 [link] "About" # @refs を使用して要素を操作する app.interact( scrape_id, code='agent-browser fill @e1 "firecrawl" && agent-browser click @e2', language="bash", ) ``` ```js // インタラクティブな要素を確認するためにスナップショットを取得する const snapshot = await app.interact(scrapeId, { code: 'agent-browser snapshot -i', language: 'bash', }); console.log(snapshot.stdout); // Output: // [document] // @e1 [input type="text"] "Search..." // @e2 [button] "Search" // @e3 [link] "About" // @refs を使用して要素を操作する await app.interact(scrapeId, { code: 'agent-browser fill @e1 "firecrawl" && agent-browser click @e2', language: 'bash', }); ``` ```bash # インタラクティブな要素を確認するためにスナップショットを取得する # 開始するにはAPIキーは不要です — より高いレート制限を利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"code": "agent-browser snapshot -i", "language": "bash"}' # Interact with elements using @refs curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"code": "agent-browser fill @e1 \"firecrawl\" && agent-browser click @e2", "language": "bash"}' ``` ```bash # インタラクティブな要素を確認するためにスナップショットを取得する firecrawl interact --bash -c "agent-browser snapshot -i" # @refs を使用して要素を操作する firecrawl interact --bash -c 'agent-browser fill @e1 "firecrawl" && agent-browser click @e2' ``` 一般的な agent-browser コマンド: | コマンド | 説明 | | ------------------------- | --------------------- | | `snapshot` | 要素参照付きの完全なアクセシビリティツリー | | `snapshot -i` | インタラクティブな要素のみ | | `click @e1` | 参照で要素をクリック | | `fill @e1 "text"` | フィールドをクリアしてテキストを入力 | | `type @e1 "text"` | クリアせずにテキストを入力 | | `press Enter` | キーボードのキーを押す | | `scroll down 500` | 500 ピクセル下にスクロール | | `get text @e1` | テキストコンテンツを取得 | | `get url` | 現在の URL を取得 | | `wait @e1` | 要素が表示されるまで待機 | | `wait --load networkidle` | ネットワークがアイドル状態になるまで待機 | | `find text "X" click` | テキストで要素を見つけてクリック | | `screenshot` | 現在のページのスクリーンショットを撮る | | `eval "js code"` | ページ内で JavaScript を実行 |
## ライブビュー [#ライブビュー]
すべての Interact レスポンスでは、埋め込んでブラウザをリアルタイムで確認できる `liveViewUrl` が返されます。デバッグやデモ、ブラウザ駆動の UI の構築に便利です。 ```json title="Response" { "success": true, "cdpUrl": "wss://browser.firecrawl.dev/...", "liveViewUrl": "https://liveview.firecrawl.dev/...", "interactiveLiveViewUrl": "https://liveview.firecrawl.dev/...", "stdout": "", "result": "...", "exitCode": 0 } ``` ```html