Posted inAI

壊れやすいセレクタの修正はやめよう：Browser UseでレジリエントなAIエージェントを構築する

AI tutorial - IT technology blog
AI tutorial - IT technology blog

セレクタからセマンティックなブラウジングへの移行

以前は、壊れやすいスクレイパーのメンテナンスだけで、月に10時間から15時間ほど費やしていました。私のワークフローは Selenium や Playwright に依存しており、CSSセレクタや XPath 式を細かくマッピングする必要がありました。フロントエンド開発者がクラス名を btn-primary から submit-button に変更するたびに、スクリプトはクラッシュしました。それはまるで、終わりのないモグラ叩きをしているような感覚でした。

LLM（大規模言語モデル）を活用したブラウザ自動化により、このパラダイムがシフトしました。「ID #login-01 の div をクリックする」というコマンドをハードコードする代わりに、「サイトにログインして、直近3件の請求書をダウンロードして」という抽象的なゴールをエージェントに与えることができるようになったのです。これが Browser Use の核心です。これは、Claude 3.5 Sonnet のようなLLMをブラウザに接続するオープンソースライブラリです。AIは単にコードを解析するだけでなく、人間と同じようにページのレイアウトを視覚的・文脈的に解釈します。

このツールを使いこなすことで、硬直したスクリプトから、自己修復型の自動化へと移行できます。本ガイドでは、Browser Use を実装して、Webサイトのデザイン変更にも耐えうるエージェントを構築する方法を解説します。

アプローチの比較：従来型 vs LLM駆動型自動化

なぜ移行する必要があるのでしょうか？その違いは、システムが変化をどのように処理するかにあります。従来のツールは高速ですが脆弱です。対してLLM駆動型のエージェントは低速ですが、驚くほどスマートです。

従来のアプローチ (Selenium/Playwright)

  • ロジック: 厳格なルールベース。UIが1pxでも変わると、スクリプトはしばしば失敗します。
  • セレクタ: 正確なDOMパスが必要です。
  • メンテナンス: 負担大。私の経験では、複雑なスクレイパーは2〜4週間ごとに更新が必要です。
  • 複雑性: 予期しない「ニュースレターへの登録」ポップアップのような非決定的な要素への対応に苦労します。

LLM駆動型のアプローチ (Browser Use)

  • ロジック: ゴール指向。「何を」するかを定義すれば、AIが「どうやって」するかを考えます。
  • セレクタ: セマンティック（意味論的）。LLMは、背後のHTMLに関係なく、虫眼鏡のアイコンが「検索」を意味することを理解します。
  • メンテナンス: 負担小。コードを一行も書き換えることなく、エージェントがUIの変更に適応します。
  • 複雑性: 多段階の推論をこなし、モーダルウィンドウを直感的に閉じることができます。

トレードオフ：AIエージェントをいつ使うべきか

AIエージェントは強力ですが、常に最適な選択肢とは限りません。その知能とオーバーヘッドを天秤にかける必要があります。

メリット

  • レジリエンス（回復力）: サイトがログインボタンを別の場所に移動させても、AIはそれを見つけ出します。
  • 自然言語: テストケースを普通の英語（や日本語）で定義できます。これにより、プログラミングの深い知識がなくても、プロダクトマネージャーやQAリードが自動化スクリプトを作成できます。
  • 視覚的推論: 最新のLLMは、従来のスクリプトを悩ませてきた複雑なUIパターンの識別に長けています。

デメリット

  • コスト: すべてのアクションでトークンを消費します。モデルやステップ数によりますが、1回の複雑な実行で0.05ドルから0.20ドルのコストがかかります。
  • レイテンシ: LLMの推論には時間がかかります。Playwright のスクリプトなら50ミリ秒でクリックを実行できますが、LLMエージェントは実行前に10〜20秒ほど「考える」時間が必要です。
  • 非決定性: エージェントが同じ結果に対して毎回異なる経路をたどることがあり、厳密なデバッグが少し複雑になる場合があります。

推奨されるセットアップ

最良の結果を得るためには、Claude 3.5 Sonnet の使用をお勧めします。GPT-4oも有能ですが、現在、空間推論においては Claude が一歩リードしています。画面上の正しい座標をクリックする能力が著しく優れています。

前提条件

  • Python 3.11 以上
  • Anthropic または OpenAI のAPIキー
  • システムにインストールされた Playwright

インストール

まず仮想環境を作成します。次に、browser-use ライブラリと、使用するLLMに対応した LangChain インテグレーションをインストールします。

pip install browser-use langchain-anthropic playwright
playwright install chromium

実装ガイド：最初のエージェントを構築する

実践的なスクリプトを作成してみましょう。エージェントに実際のサイトを巡回させ、商品を検索し、特定の価格を抽出させます。このタスクでは、ナビゲーション、結果のフィルタリング、データの解析を同時に行う能力をテストします。

1. 環境設定

APIキーを環境変数に保存します。これにより、認証情報を安全に保ち、ソースファイルに含めないようにできます。

export ANTHROPIC_API_KEY="あなたのAPIキーをここに"

2. エージェントスクリプト

実装は驚くほど簡潔です。モデルを初期化し、自然言語のタスクを直接エージェントに渡します。

import asyncio
from browser_use import Agent
from langchain_anthropic import ChatAnthropic

async def main():
    # 一貫性と再現性のあるアクションのために temperature を 0 に設定
    llm = ChatAnthropic(model="claude-3-5-sonnet-20240620", temperature=0)

    task = "ebay.comにアクセスし、'RTX 4090'を検索して、スポンサー枠以外の最初の出品商品の価格を見つけてください。"

    agent = Agent(
        task=task,
        llm=llm,
    )

    result = await agent.run()
    print(f"エージェントの実行結果: {result}")

if __name__ == "__main__":
    asyncio.run(main())

3. Controllerによるカスタムツールの追加

エンタープライズのワークフローでは、単なるブラウジング以上のことが求められることがよくあります。データをデータベースに保存したり、Slack チャンネルに通知したりする必要があるかもしれません。Controller クラスを使用すると、カスタムの Python 関数でエージェントの機能を拡張できます。

from browser_use import Agent, Controller

controller = Controller()

@controller.action('データをローカルファイルに保存する')
def save_to_file(content: str):
    with open('output.txt', 'a') as f:
        f.write(content + '\n')
    return '成功'

agent = Agent(task="AIニュースを要約してファイルに保存してください", llm=llm, controller=controller)

現場からの実践的なアドバイス

これらのエージェントを本番環境で運用することで、信頼性とコスト管理に関するいくつかの教訓を学びました。

ステップ数に厳格な上限を設ける

エージェントは、紛らわしいUIに遭遇するとループに陥ることがあります。必ず max_steps パラメータを設定してください。ほとんどのWebタスクにおいて、20ステップあれば十分です。もしそれで終わらない場合は、プロンプトが曖昧すぎる可能性があります。

エージェントの動作を観察する

デバッグ時は headless=False に設定してください。AIがカーソルを動かし、ページをスクロールし、コンテンツを「読む」ために静止する様子を見ることは、論理エラーのトラブルシューティングに非常に役立ちます。スクリプトが安定してから headless=True に戻しましょう。

プロンプトは具体的に

構造が重要です。「データを取得して」と言う代わりに、「商品名、現在の価格、送料を抽出してください。これを JSON オブジェクトとして返してください」と伝えてみてください。具体性を高めることで推論ステップ数が減り、トークン費用の節約につながります。

結論

手動のDOM操作からAI駆動型エージェントへの切り替えは、現代の DevOps において大幅な効率向上をもたらします。社内ダッシュボードでの高速かつ反復的なタスクには、依然として Playwright のような従来のツールが適しています。しかし、予測不能で煩雑な公開Webサイトのナビゲーションにおいては、Browser Use が明らかに優れています。

まずは小さく始めましょう。毎朝行っている手動タスク（特定の分析ダッシュボードのチェックなど）を特定し、今回紹介したスクリプトを使って自動化してみてください。エージェントがランダムなポップアップをうまく回避するのを目の当たりにすれば、なぜセマンティックなブラウジングがWeb自動化の未来なのかが理解できるはずです。

Share:
Tags: