OpenClaw 完全攻略 Ep.7: ブラウザ自動化で実現するWebスクレイピングとUI操作の完全ガイド

📚 OpenClaw 完全攻略シリーズ｜Ep.7 / 7

本記事では、OpenClawの「ブラウザ自動化」機能を使って、Webスクレイピング・フォーム操作・スクリーンショット取得・E2Eテストを実現する方法を解説します。AIエージェントが人間の代わりにブラウザを操作する実践テクニックをSES現場の視点で紹介します。

なぜAIエージェントに「ブラウザ操作」が必要なのか

前回のEp.6では、cronジョブによるスケジュール自動化を解説しました。定期実行の仕組みが整ったところで、次に課題となるのが「APIが存在しないWebサービスとの連携」です。

SESの現場では、勤怠管理システムへの入力、社内ポータルからの情報取得、クライアント向け管理画面の操作など、ブラウザを介した手作業が日常的に発生します。これらの作業はAPIが提供されていないことが多く、従来のスクリプトでは自動化が困難でした。

OpenClawはPlaywrightベースのブラウザ制御機能を内蔵しており、AIエージェントがWebページのDOM構造を理解しながらインテリジェントにブラウザを操作できます。単なるセレクタ指定のスクリプトとは異なり、ページの意味を理解した上で適応的に操作を行える点が大きな特徴です。

OpenClawブラウザ自動化の全体像

1. OpenClawのブラウザ制御アーキテクチャ

OpenClawのブラウザ自動化は、以下の3つのコンポーネントで構成されています。

1-1. Browser Control Server

OpenClawはバックグラウンドでPlaywrightベースのBrowser Control Serverを起動します。このサーバーがChromiumインスタンスを管理し、エージェントからの操作指示を受け付けます。

# ブラウザのステータス確認
# OpenClawのbrowserツールから実行
browser action=status

起動していない場合はbrowser action=startで起動でき、profileパラメータで分離されたブラウザプロファイルを使い分けることも可能です。

1-2. プロファイルの使い分け

OpenClawでは2種類のブラウザプロファイルが利用できます。

プロファイル	用途	特徴
`openclaw`	自動化専用	分離された環境、Cookieが独立
`chrome`	既存Chrome連携	Chrome拡張経由、ログイン済みセッション活用

SES現場では、すでにログイン済みの業務システムを操作したい場合にchromeプロファイルが威力を発揮します。Chrome拡張のBrowser Relayをインストールし、対象タブでツールバーアイコンをクリックするだけで、OpenClawからそのタブを操作できるようになります。

1-3. スナップショットとアクション

ブラウザ操作の基本フローは「スナップショット取得 → 要素特定 → アクション実行」の3ステップです。

// 1. ページのスナップショットを取得（DOM構造をアクセシビリティツリーで取得）
browser action=snapshot

// 2. 取得したrefを使ってクリック
browser action=act request={kind:"click", ref:"e12"}

// 3. テキスト入力
browser action=act request={kind:"type", ref:"e15", text:"検索キーワード"}

スナップショットはrefs="aria"を指定することで、Playwrightのaria-ref IDを使った安定したセレクタを取得できます。ページ構造が変わっても、アクセシビリティ属性に基づくため壊れにくいのが利点です。

2. 実践：Webスクレイピングの自動化

2-1. 基本的なページ情報の取得

最もシンプルなWebスクレイピングは、web_fetchツールを使ったHTML→Markdown変換です。

# URLからテキストコンテンツを抽出
web_fetch url="https://example.com/target-page" extractMode="markdown"

この方法はJavaScript不要な静的ページで高速に動作しますが、SPAやログインが必要なページには対応できません。

2-2. JavaScript描画ページのスクレイピング

React/Vue/Angularなどで構築されたSPAページの場合は、ブラウザツールを使います。

// 1. ページを開く
browser action=navigate targetUrl="https://spa-app.example.com/dashboard"

// 2. DOMが描画されるまで待機してスナップショット取得
browser action=snapshot

// 3. 必要に応じてJavaScript実行でデータ抽出
browser action=act request={
  kind: "evaluate",
  fn: "document.querySelectorAll('.data-row').forEach(r => console.log(r.textContent))"
}

2-3. ログインが必要なサイトの操作

SES現場で最も多いニーズが、認証が必要な業務システムからの情報取得です。

// ログインページに遷移
browser action=navigate targetUrl="https://internal-system.example.com/login"

// スナップショットでフォーム要素を特定
browser action=snapshot

// ユーザー名・パスワードを入力してログイン
browser action=act request={kind:"fill", ref:"username-field", text:"[email protected]"}
browser action=act request={kind:"fill", ref:"password-field", text:"${PASSWORD}"}
browser action=act request={kind:"click", ref:"login-button"}

⚠️ セキュリティ上の注意: パスワードは環境変数やOpenClawの暗号化されたメモリに保存し、記事やスキルファイルに平文で書かないようにしましょう。詳しくはセキュリティハードニングガイドを参照してください。

3. フォーム操作とデータ入力の自動化

3-1. 勤怠管理システムへの自動入力

SESエンジニアが毎日行う勤怠入力を、OpenClawのcronジョブと組み合わせて自動化する例です。

{
  "cron": {
    "daily-attendance": {
      "schedule": "0 9 * * 1-5",
      "command": "勤怠管理システムにログインして本日の出勤を打刻してください",
      "model": "anthropic/claude-sonnet-4-20250514"
    }
  }
}

エージェントはスナップショットでUIを理解し、適切なボタンを見つけて操作します。Playwrightのfillアクションとclickアクションを組み合わせることで、複雑な入力フォームにも対応可能です。

3-2. 複数フィールドの一括入力

フォームの複数フィールドを順番に入力する方法です。

// 複数フィールドを順番に入力
browser action=act request={kind:"fill", ref:"e10", text:"山田太郎"}
browser action=act request={kind:"fill", ref:"e12", text:"2026-03-03"}
browser action=act request={kind:"select", ref:"e14", values:["出勤"]}
browser action=act request={kind:"click", ref:"submit-btn"}

3-3. ファイルアップロードの自動化

請求書や報告書のアップロードも自動化できます。

// ファイルアップロード
browser action=upload paths=["/path/to/invoice.pdf"] selector="input[type=file]"

4. スクリーンショットとPDF生成

4-1. エビデンス取得の自動化

SES案件では、テスト結果のスクリーンショットやデプロイ後のエビデンス取得が求められることがあります。

// ページ全体のスクリーンショット
browser action=screenshot fullPage=true type="png"

// 特定要素のみキャプチャ
browser action=screenshot element=".test-results"

// PDFとして保存（レポート向き）
browser action=pdf

4-2. 定期スクリーンショットの自動化

cronジョブと組み合わせることで、ダッシュボードの定期キャプチャも実現できます。Ep.6で解説したcron機能と連携させれば、毎朝のダッシュボードスクリーンショットをSlackに自動送信するパイプラインが構築できます。

{
  "cron": {
    "dashboard-capture": {
      "schedule": "0 9 * * *",
      "command": "ダッシュボードのスクリーンショットを取得してSlackに送信"
    }
  }
}

5. E2Eテストとモニタリング

5-1. AIドリブンなE2Eテスト

従来のE2Eテストはセレクタの変更で頻繁に壊れる問題がありましたが、OpenClawのスナップショット機能はアクセシビリティツリーに基づくため、UIの意味を理解した耐性の高いテストが実現できます。

## テストシナリオ: ユーザー登録フロー

1. /signup にアクセス
2. 名前、メールアドレス、パスワードを入力
3. 利用規約のチェックボックスをON
4. 「登録」ボタンをクリック
5. 「登録完了」メッセージが表示されることを確認

OpenClawに自然言語でテストシナリオを渡すだけで、スナップショットからUIを理解し、適切な要素を操作してテストを実行します。セレクタのメンテナンスが不要になるため、SES現場でのテスト自動化コストを大幅に削減できます。

5-2. 死活監視とアラート

Webアプリケーションの死活監視にもブラウザ自動化は有効です。

{
  "cron": {
    "health-check": {
      "schedule": "*/15 * * * *",
      "command": "https://our-app.example.com にアクセスし、ログイン画面が正常に表示されるか確認。エラーがあればSlackに通知"
    }
  }
}

HTTPステータスだけでは検知できないJavaScript描画エラーやレイアウト崩れも、実際にブラウザで描画して確認するため検知可能です。

6. Chrome拡張連携（Browser Relay）

6-1. セットアップ手順

既存のChromeブラウザのタブをOpenClawから操作するには、Browser Relay拡張機能を使います。

Chrome Web StoreからOpenClaw Browser Relay拡張をインストール
操作したいタブを開く
ツールバーのOpenClawアイコンをクリック（バッジがONになる）
OpenClawからprofile="chrome"で操作開始

// Chrome拡張経由でアクティブタブを操作
browser action=snapshot profile="chrome"

6-2. 活用シーン

ログイン済み業務システム: SSOやMFAで保護されたシステムをそのまま操作
開発中のlocalhost: ローカル開発環境のUI操作・テスト
社内Wiki: ナレッジの検索・抽出

7. web_fetchとブラウザ自動化の使い分け

OpenClawにはweb_fetchツールとブラウザ自動化の2つのWeb操作手段があります。状況に応じて適切に使い分けましょう。

条件	web_fetch	ブラウザ自動化
静的HTML	✅ 高速	△ オーバーキル
SPA（JavaScript描画）	❌ 不可	✅ 対応
ログイン必要	❌ 不可	✅ 対応
インタラクション操作	❌ 不可	✅ 対応
スクリーンショット	❌ 不可	✅ 対応
高速な大量取得	✅ 最適	△ 低速

基本方針として、まずweb_fetchを試し、それで対応できない場合にブラウザ自動化を使うのが効率的です。詳しいツールの使い分けについてはカスタムツール追加ガイドも参考にしてください。

8. 実践レシピ：SES現場で使えるブラウザ自動化

8-1. 案件情報の自動収集

複数のSES案件紹介サイトから最新案件を自動収集し、スプレッドシートにまとめる例です。

## スキル: ses-job-scraper

1. 対象サイト3つを順にブラウザで開く
2. 案件一覧ページをスナップショットで取得
3. 案件名・単価・スキル要件を抽出
4. CSVに整形してGoogle Driveにアップロード
5. 新着案件があればSlackに通知

このようなスキルをEp.2のスキル開発ガイドで学んだ手法で構築すれば、案件探しの工数を大幅に削減できます。

8-2. 競合分析の自動化

競合他社のWebサイトの変更を定期監視し、レポートを自動生成する例です。マーケティング自動化パイプライン（Ep.3）と組み合わせれば、競合動向に基づく記事テーマの自動提案まで実現できます。

## 定期タスク: competitor-watch

1. 競合3社のサービスページをスクリーンショット
2. 前回のスクリーンショットと比較（ビジュアルdiff）
3. 変更があった場合はサマリーを生成
4. 週次レポートとしてSlackに送信

まとめ：ブラウザ自動化がSES現場を変える

OpenClawのブラウザ自動化機能は、APIが存在しないWebサービスとの連携を可能にし、SES現場で発生する多くの手作業を削減します。

この記事のポイント:

Browser Control ServerがPlaywrightベースでブラウザを制御
スナップショットでDOMをアクセシビリティツリーとして取得し、AIがUI構造を理解
web_fetchとブラウザ自動化の使い分けで効率的なWeb操作
Chrome拡張連携でログイン済みセッションを活用
cronジョブと組み合わせて定期的なスクレイピング・監視を無人化

OpenClaw 完全攻略シリーズ

出典・参考リンク: