OpenClaw でブラウザ自動化を実現する方法
OpenClaw を使ってブラウザタスクを自動化する方法：Web スクレイピング、フォーム入力、スクリーンショット取得、データ抽出、マルチステップ Web ワークフローまで、すべて AI で実現します。
最終更新: 2026-03-31
構築するもの
OpenClaw でブラウザ操作を自動化するセットアップを構築します：
- Web サイトの操作 — ページの表示、ボタンのクリック、フォームの入力、コンテンツのスクロール
- データの抽出 — Web ページ、テーブル、ダッシュボードから構造化データをスクレイピング
- スクリーンショットの取得 — レポート用にフルページまたは特定要素のスクリーンショットをキャプチャ
- マルチステップワークフロー — ブラウザ操作を連鎖させて複雑な自動化シーケンスを実行
このガイドを完了すれば、自然言語で指示するだけであらゆるブラウザタスクを自動化できるようになります。
AI によるブラウザ自動化が必要な理由
従来のブラウザ自動化ツール（Selenium、Puppeteer、Playwright）は強力ですが、ワークフローごとにコードを書いてメンテナンスする必要があります。Web サイトのレイアウトが変わればスクリプトが壊れ、新しいワークフローが必要になれば新しいスクリプトを書かなければなりません。
AI 駆動のブラウザ自動化はこれを根本的に変えます：
- 自然言語で指示 — セレクターやクリックハンドラーを書く代わりに、やりたいことを言葉で伝えるだけ
- 自己修復機能 — UI が変更されてもスクリプトの更新なしに AI が適応
- コードメンテナンス不要 — ワークフローは実装ではなく意図で定義
- 迅速なプロトタイピング — 数時間ではなく数分で新しい自動化をセットアップ
- 視覚的理解 — AI がページレイアウトを解釈し、スクリーンショットからテキストを読み取り、見たものに基づいて判断
前提条件
- OpenClaw がインストール・設定済み（スタートガイド）
- Chrome または Chromium がシステムにインストール済み
- Node.js 18+
ステップ 1：必要な Skills をインストール
# 1. ブラウザ制御 npx clawhub@latest install browser-use # 2. Web データ抽出 npx clawhub@latest install web-scraper # 3. スクリーンショット取得 npx clawhub@latest install screenshot
ステップ 2：ブラウザのセットアップを確認
browser-use Skill には Chrome/Chromium のインストールが必要です：
clawhub inspect browser-use
このコマンドで互換性のあるブラウザの有無を確認し、検出されたパスを表示します。Chrome が自動検出されない場合は、Skill の設定でパスを手動で指定してください。
ステップ 3：ブラウザ自動化の実例
例 1：ダッシュボードからデータを抽出
毎朝 Web ダッシュボードから指標を取得する場合：
Open https://analytics.example.com, log in with my saved credentials, navigate to the Daily Metrics page, and extract the table showing yesterday's KPIs into a Markdown table.
browser Skill がログイン、ナビゲーション、データ抽出を処理します。結果はクリーンな Markdown テーブルとして出力され、レポートや Slack にそのまま貼り付けられます。
例 2：競合他社の料金ページを監視
Go to competitor.com/pricing, take a screenshot of the pricing table, and extract all plan names, prices, and feature lists into JSON format.
出力：
{
"plans": [
{
"name": "Starter",
"price": "$29/month",
"features": ["5 users", "10GB storage", "Email support"]
},
{
"name": "Professional",
"price": "$79/month",
"features": ["25 users", "100GB storage", "Priority support", "API access"]
},
{
"name": "Enterprise",
"price": "Custom",
"features": ["Unlimited users", "Unlimited storage", "24/7 support", "SSO", "Audit logs"]
}
]
}
例 3：フォームに入力
Open the internal expense report form at expenses.company.com, fill in: date = today, category = "Software", amount = $49.99, description = "ClawHub Pro subscription", then submit.
例 4：マルチステップの調査ワークフロー
1. Search Google for "best CI/CD tools 2026 comparison" 2. Open the top 3 results 3. Extract the main comparison points from each article 4. Compile into a summary table
ステップ 4：レポート用スクリーンショット
screenshot Skill でレポートやモニタリング用のビジュアルエビデンスをキャプチャします：
# フルページスクリーンショット clawhub run screenshot --url "https://status.example.com" --full-page # 特定の要素 clawhub run screenshot --url "https://grafana.example.com/d/api-latency" --selector ".panel-container" # 複数ページ clawhub run screenshot --urls "url1,url2,url3" --output "./screenshots/"
定期的なビジュアルモニタリング
cron と組み合わせて毎日のスナップショットを取得します：
clawhub run cron --schedule "0 9 * * *" --task "screenshot --url https://status.example.com --output ~/snapshots/{{date}}.png"
応用編：複雑なワークフロー
ブラウザ操作の連鎖
確実に実行する必要があるマルチステップワークフローの場合：
# .openclaw/browser-workflow.yml
workflow:
name: "Daily Metrics Collection"
steps:
- action: navigate
url: "https://analytics.example.com"
- action: login
credentials: "analytics_dashboard"
- action: click
target: "Daily Report tab"
- action: wait
condition: "table is fully loaded"
- action: extract
target: "metrics table"
format: "csv"
- action: screenshot
target: "full page"
- action: save
output: "~/reports/{{date}}-metrics.csv"
認証の処理
ログインが必要なサイトの場合：
credentials:
analytics_dashboard:
url: "https://analytics.example.com/login"
username_field: "#email"
password_field: "#password"
# 認証情報は OpenClaw のセキュア認証ストアに保存
clawhub credentials set analytics_dashboard でログイン情報を安全に保存します。
SPA と動的コンテンツへの対応
モダンなシングルページアプリケーションはコンテンツを動的に読み込みます。browser Skill は以下の処理を自動的に行います：
- ネットワークリクエストの完了を待機
- ページが完全にレンダリングされたことを検出
- コンテンツが読み込まれていない場合にリトライ
特に読み込みが遅いページでは、明示的な待機条件を設定できます：
Navigate to the dashboard and wait until the chart labeled "Revenue" is visible before taking a screenshot.
トラブルシューティング
ブラウザが起動しない
- Chrome/Chromium がインストール済みか確認：
which google-chromeまたはwhich chromium - Skill 設定のパスを確認：
clawhub inspect browser-use - ヘッドレスサーバーでは、設定で
--no-sandboxフラグが有効になっていることを確認
ページコンテンツが読み込まれない
- 一部のページには JavaScript が必要です。browser Skill はフルブラウザを実行するため、デフォルトで対応しています
- Cookie 同意バナーがコンテンツをブロックしていないか確認
- マシンから URL にアクセスできるか確認（VPN、ファイアウォール）
スクリーンショットが空白または不完全
- キャプチャ前に待機時間を追加：ページがまだレンダリング中の可能性があります
- スクロールが必要なページには
--full-pageフラグを使用 - ページに認証が必要かどうか確認
抽出データが正しくない
- 抽出する要素をより具体的に指定
- 視覚的な参照を使用：「2番目のセクションのテーブル」や「右側の料金カード」など
- 複雑なページでは、まずスクリーンショットを撮ってページの状態を確認してから抽出
よくある質問
いいえ。従来の自動化ツールでは、明示的なセレクター（`document.querySelector('.price-table')`）を使ったコードを書く必要があります。OpenClaw のブラウザ自動化は AI を使ってページを視覚的・意味的に理解します。自然言語でやりたいことを説明するだけで、ページとのインタラクション方法を AI が判断します。そのため、UI の変更に強く、セットアップも大幅に速くなります。
はい。browser Skill は認証が必要なサイトの認証情報管理をサポートしています。`clawhub credentials set` で認証情報を安全に保存すると、Skill がログインフローを自動的に処理します。標準的なユーザー名・パスワードフォーム、OAuth リダイレクト、Basic 認証に対応しています。
Web スクレイピングの合法性は、サイトの利用規約、収集するデータの種類、管轄地域によって異なります。一般的に、公開データを個人利用目的でスクレイピングすることは許容されています。必ずサイトの `robots.txt` と利用規約を確認してください。許可なく個人データ、著作権で保護されたコンテンツ、認証の背後にあるデータをスクレイピングしないでください。OpenClaw は CAPTCHA やアクセス制限をバイパスしません。
browser Skill は CAPTCHA を自動的に解決しません。サイトが CAPTCHA を表示した場合、ワークフローは一時停止して通知します。定期的にアクセスするサイトでは、手動で一度ログインしてセッション Cookie を保存することで、繰り返しの CAPTCHA を回避できます。
はい。browser Skill はヘッドレスモードをサポートしており、ウィンドウを表示せずに Chrome を実行します。ディスプレイのないサーバーではこれがデフォルトです。設定で `headless: true` を指定するか、`--headless` フラグを渡してください。ヘッドレスモードでもすべての機能が同じように動作します。
各ブラウザインスタンスは約 200-500MB の RAM を使用します。複数のワークフローを同時に実行する場合は、それに比例したメモリ使用量を見込んでください。CPU 使用率はページのレンダリングやスクリーンショット取得時にスパイクしますが、待機中は低くなります。スケジュールされたタスクでは、実行ごとにブラウザが起動・終了するため、リソースは実行中のみ使用されます。