Level 7: Browser Automator — ブラウザ操作・スクレイピング・PDF

Claude Code 自体はブラウザを操作できませんが、MCP（Model Context Protocol）サーバーを経由することでブラウザを制御できます。Puppeteer MCP を設定すると、スクリーンショットの撮影・複数ページからのデータ収集・PDF 変換といった操作を Claude に自然言語で指示できるようになります。

対象読者: ヘッドレス自動化を理解しており、ブラウザ操作の自動化に挑戦したい方。

学習時間の目安: 読了 20分 + 実践 40分

---

ブラウザ自動化の仕組み

Claude Code とブラウザの間には MCP サーバーが仲介します。処理の流れは次のとおりです。

Claude Code
    ↕ MCP プロトコル
Puppeteer MCP Server
    ↕
ブラウザ（Chromium）
    ↕
Web

Claude Code は MCP ツールを通じてブラウザへの操作命令を送り、MCP サーバーが Chromium を介して実際のブラウザ操作を実行します。

Puppeteer MCP の設定方法

.claude/settings.json に puppeteer エントリを追加します。

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Claude Code を再起動するとPuppeteer のブラウザ操作ツールが利用可能になります。設定の確認は /mcp コマンドで行えます。

汎用的な使用例

スクリーンショットの撮影

> https://example.com を開いて、
> トップページのスクリーンショットを screenshots/top-2026-03-29.png に保存してください。

デプロイ前後の差分確認や、定期的な UI 変化の記録に使えます。

複数ページからのデータ収集

> https://news.example.com/tech を開いて、
> 今日公開された記事のタイトルと URL を10件取得してください。
> 結果を JSON 形式 {"articles": [{"title": "...", "url": "..."}]} で返してください。

取得した JSON は jq で加工し、後続のスクリプトで利用できます。

PDF 変換

> https://docs.example.com/api-reference を開いて、
> ページ全体を PDF に変換して output/api-reference.pdf に保存してください。

ドキュメントのアーカイブや、印刷物の自動生成に活用できます。

Playwright MCP の代替選択肢

ブラウザ自動化の MCP には Puppeteer の他に Playwright も選択できます。

項目	Puppeteer MCP	Playwright MCP
対応ブラウザ	Chromium のみ	Chromium / Firefox / WebKit
設定	シンプル	やや複雑
クロスブラウザテスト	不可	可能
用途	データ収集・スクリーンショット	E2E テスト・クロスブラウザ確認

データ収集やスクリーンショット撮影が主目的であれば Puppeteer MCP、クロスブラウザの動作確認や E2E テストが必要であれば Playwright MCP が適しています。

Playwright MCP の設定例：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

汎用的なユースケース例

競合調査: 競合サービスのページ構成・料金表・機能一覧を定期的に収集し、差分をレポートする。

価格モニタリング: EC サイトやクラウドサービスの価格ページを定期的にスクレイピングし、変化があれば通知する。

ドキュメントの同期: 外部ドキュメントサイトの特定ページを PDF に変換して社内共有フォルダに保存する。

フォームのテスト: Web フォームに値を入力して送信し、応答内容が期待通りかを確認する。

注意事項

ブラウザ自動化を使う際は以下の点を必ず確認してください。

• robots.txt の確認: スクレイピングを禁止しているパスへのアクセスは行わない
• 利用規約の確認: サービスの利用規約でスクレイピングが禁止されていないかを確認する
• レート制限の遵守: 短時間に大量のリクエストを送ると IP ブロックやアカウント停止の原因になる
• 個人情報の取り扱い: 収集したデータに個人情報が含まれる場合は適切に管理する

---

FAQ

Q. Puppeteer MCP を設定しても使えない場合は？

npx @modelcontextprotocol/server-puppeteer を単体で実行して起動できるか確認してください。Node.js のバージョンが古い場合は更新が必要なことがあります。

Q. JavaScript で動的に生成されるページも取得できますか？

Puppeteer はブラウザを実際に起動して操作するため、JavaScript レンダリング後のコンテンツも取得できます。

---

実践チュートリアル

このレベルの実践チュートリアル →

次のレベルへ

MCP を通じたブラウザ自動化の仕組みと使い方を理解しました。次は複数のエージェントを並列で動かすオーケストレーターパターンを学びます。

Level 8: Orchestrator — 並列エージェントを指揮する へ進みましょう。