チュートリアル 04 — ブラウザ自動化：AIにWebページを操作させる

目標：OpenClawの組み込みブラウザツールを使用して、AIにWebページの自動閲覧、スクリーンショット、情報抽出、フォーム入力を行わせます。

仕組み

OpenClawは専用のChrome/Chromiumインスタンスを統合しており、AIはツール呼び出しを通じて以下のことができます：

指定したURLへのナビゲーション
スクリーンショットの撮影とページ分析
要素のクリック、フォームの入力
構造化データの抽出

あなたの指示 → AI → browser_navigate / browser_action → Chrome → スクリーンショット/結果 → AI分析 → 返信

前提条件

ChromeまたはChromiumがインストールされていることを確認します：

# macOS
brew install --cask google-chrome
 
# またはChromiumを使用
brew install --cask chromium

基本的な使い方：AIにWebページ情報を取得させる

WebChatまたはTelegramで直接タスクを説明します：

例1：天気を確認する

https://wttr.in/Tokyo を開いてスクリーンショットを撮り、今日の東京の天気を教えてください

例2：GitHubリポジトリ情報の取得

https://github.com/trending を開き、今日GitHubで最もホットな5つのプロジェクト（言語とstar数を含む）をリストアップしてください

例3：オンラインドキュメントを読む

https://docs.python.org/3/library/asyncio.html を開き、asyncioで最もよく使われる5つの関数をまとめてください

応用：フォームの自動入力

https://httpbin.org/forms/post を開いてください
以下の情報を入力してください：
- custname: 田中太郎
- custtel: 09000000000
- custemail: tanaka@example.com
- comments: これはテスト注文です

その後、スクリーンショットで結果を見せてください

応用：大量データの抽出

カスタムSkillと組み合わせて、データ収集Skillを作成します：

~/.openclaw/workspace/skills/データ収集/SKILL.md:

# Webデータ収集の専門家
 
ユーザーはURLと抽出したいデータフィールドを提供します。以下を行ってください：
 
1. browser_navigate でページを開きます
2. browser_snapshot でページコンテンツを取得します
3. ユーザーの要件に従って構造化データを抽出します
4. JSONまたはMarkdownテーブル形式で出力します
 
注意事項：
- ページのスクロールが必要な場合は、複数回スクリーンショットを撮ります
- ページネーションがある場合は、ユーザーにページをめくって収集するか確認します
- ログインが必要な場合はユーザーに知らせます

使用方法：

/データ収集

URL：https://news.ycombinator.com
抽出する内容：タイトル、リンク、スコア、コメント数（最初の10件）

応用：Webページの変化を監視する

Cronジョブ（cronチャンネルの設定が必要）と組み合わせて、定期的にWebページを確認できます：

{
  "channels": {
    "cron": {
      "enabled": true,
      "jobs": [
        {
          "cron": "0 9 * * 1-5",
          "message": "https://github.com/trending を開いてスクリーンショットを撮り、今日のトレンドプロジェクトをまとめて送ってください",
          "channel": "telegram"
        }
      ]
    }
  }
}

これで毎平日朝9時に、AIが自動的にGitHub Trendingをクロールし、Telegram経由で送信します。

ツール一覧

AIがブラウザタスクで使用できるツール：

ツール	機能
`browser_navigate`	URLを開く
`browser_snapshot`	現在のページのスクリーンショット
`browser_action`	クリック、入力、スクロールなどの操作
`browser_upload`	ページにファイルをアップロード

注意事項

ブラウザツールはサンドボックスモードで動作し、日常使用しているブラウザには影響しません
機密アカウントが関わるWebサイトのログインには使用しないでください（AIがスクリーンショットの内容を見ます）
複雑なSPAページ（React/Vueアプリなど）は読み込み待ちが必要な場合があります。指示の中で明記してください

よくある質問

ChromeDriverやSeleniumを別途インストールする必要はありますか？

必要ありません。OpenClawはPlaywrightカーネルを使用してChrome/Chromiumを直接制御するため、ChromeDriverを手動インストールする必要はありません。ChromeまたはChromiumがシステムにインストールされていることを確認するだけで、残りはOpenClawが自動的に処理します。

ブラウザタスクが失敗した場合のデバッグ方法は？

指示に「スクリーンショットを撮ってください」を追加すると、AIが主要なステップでスクリーンショットを撮って進捗を報告し、どこで詰まっているか判断しやすくなります。ゲートウェイのログも確認できます：tail -f /tmp/openclaw/openclaw-$(date +%Y-%m-%d).log | grep browser

ログインが必要なWebサイトにアクセスできますか？

できますが、セキュリティに注意してください。AIはスクリーンショット上のすべてのコンテンツを見ることができ、アカウントのパスワード入力欄やプライバシーデータも含まれます。自分が管理するWebサイトでのみ自動ログインを行い、銀行や決済などの機密アカウントには使用しないでください。

React/Vueなどの動的読み込みSPAページを処理できますか？

できますが、指示の中で待機タイミングを指定する必要があります。例えば「ページを開いた後3秒待ってからスクリーンショットを撮る」や「ページの読み込みが完了してからデータを抽出する」などです。AIは browser_action を使用して待機操作を実行します。スクロール読み込みが必要なページには「3回下にスクロールしてからスクリーンショットを撮る」と指示できます。

ブラウザ自動化は現在使用中のChromeに影響しますか？

影響しません。OpenClawが起動するのは独立したChromiumインスタンス（ヘッドレスモード）であり、日常使用するブラウザとは完全に分離されています。Cookie、アカウント状態は互いに影響しません。

次のステップ

チュートリアル 05 — 複数のモデルを設定し、Claudeが高価な場合は自動的にMiniMaxに切り替える