Browser-useとLangChainで市場調査を自動化するAIエージェントを構築する

Artificial Intelligence tutorial - IT technology blog
Artificial Intelligence tutorial - IT technology blog

競合のサイトデザイン変更によるスクリプトの「破損」の悩みから解放される

30個のブラウザタブを開いてメカニカルキーボードの価格を比較したり、競合の機能を調査したりするのは苦行です。開発者なら、ターゲットサイトの class="btn-price"class="price-v2" に変わっただけで、SeleniumのCSSセレクタを修正するために徹夜した経験があるでしょう。従来のデータスクレイピングスクリプトは、HTML構造のわずかな変化で非常に壊れやすいものです。

私が最近導入して成功した、より実用的な解決策は Browser-useLangChain の組み合わせです。クリックする座標を指定するような硬直したコードを書く代わりに、「最も売れている5つの製品を探して比較表を作成して」と命令するだけで済みます。AIが自らインターフェースを観察し、行動を推論し、実際のユーザーのように操作します。

なぜ従来のWebスクレイピングではなくAIエージェントを使うべきなのか?

それぞれの方法に利点がありますが、構造が複雑であったり、頻繁に更新されたりするWebサイトを扱う場合、AIエージェントは圧倒的な優位性を示します。

  • 従来のスクレイピング (Selenium, Puppeteer): 速度は非常に速く、リソース消費も少ないです。しかし、サイトのUIが更新されるたびに、コードのメンテナンスに何時間も費やすことになります。
  • Headless Browser + LLM (Firecrawl, Jina): WebをMarkdownに変換してAIに読み取らせます。静的な情報の取得には適していますが、キャプチャの解決、多階層メニューのクリック、スライダーの操作などには無力です。
  • Agentic Browser Control (Browser-use): AIが実際にDOMツリーとスクリーンショットを「見」ます。自己適応能力があります。「決済」ボタンが赤から緑に変わっても、エージェントはそれを認識して正確にクリックします。

実際の効率比較表

評価項目 従来のスクレイピング Browser-use + LangChain
導入の難易度 容易(日本語/英語のプロンプトを使用)
適応能力 低い(スクリプトエラーが起きやすい) 非常に高い(AIが変更を自動処理)
運用コスト ほぼゼロ 1タスクあたり$0.05 – $0.2(トークン消費)
完了速度 数秒 30 – 60秒(AIの思考時間が必要)

私からのアドバイス: 何百万件ものレコードをスクレイピングするためにAIエージェントを使わないでください。市場調査、UI/UXのテスト、あるいは日々の競合価格の監視など、知性を必要とするタスクに活用しましょう。

Browser-useとLangChainを組み合わせた時の威力

Browser-useは「目」と「手」の役割を果たし、LLMをPlaywrightブラウザに直接接続します。一方でLangChainは、記憶(Memory)とツール統合(Tools)の機能を備えた「脳」を提供します。この組み合わせにより、GPT-4oやClaude 3.5 Sonnetなどのモデルを柔軟に切り替えることが可能になります。

実際の経験から言うと、Claude 3.5 Sonnetは現在最も有力な選択肢です。このモデルは視覚的なタスクやブラウザのナビゲーションロジックを非常にスムーズに処理し、空白領域を「空クリック」するような状況がほとんどありません。

市場調査エージェントの実装ガイド

開始するには、Python 3.11以上とOpenAIまたはAnthropicのAPIキーが必要です。

1. 環境構築

# 仮想環境の作成
python -m venv venv
source venv/bin/activate

# ライブラリのインストール
pip install browser-use langchain-anthropic playwright

# コアブラウザのインストール
playwright install

2. エージェント制御コードの記述

以下のスクリプトは、CSSセレクタを一切使わずに、エージェントにAmazonへアクセスさせ、商品を検索してデータを抽出させる指示を出します。

from langchain_anthropic import ChatAnthropic
from browser_use import Agent
import asyncio
import os

os.environ["ANTHROPIC_API_KEY"] = "your-api-key-here"

async def run_market_research():
    # UIの読み取り能力が最も高いClaude 3.5 Sonnetを使用
    llm = ChatAnthropic(model="claude-3-5-sonnet-20241022")

    task = """
    1. amazon.comにアクセス
    2. 'mechanical keyboard wireless'を検索
    3. 評価が4.5星以上のモデルのみを選択
    4. 最初の3つの商品の名前と価格を取得
    5. 結果をテーブル形式で返す
    """

    agent = Agent(task=task, llm=llm)
    result = await agent.run()
    print(result)

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

実行すると、ブラウザが自動的に開き、キー入力やスクロールが行われるのがわかります。まるで本物の助手があなたの代わりに操作しているような感覚です。

エージェントをスムーズに動かし、コストを抑えるための最適化のコツ

AIエージェントを使うのは非常に快適ですが、工夫をしないとAPIの請求額が急増してしまいます。実際のプロジェクトで得た3つの教訓を紹介します。

スクリーンショット送信(Vision)の制御

エージェントがスクリーンショットを撮ってLLMに送信するたびに、少なからぬトークンを消費します。テキスト主体のWebサイトでは、継続的に画像を送信するのではなく、DOMツリーの読み取りを優先するようにエージェントを設定してください。これにより、実行コストを最大40%削減できます。

インテリジェントなログイン処理

実行のたびにエージェントにログイン手順を踏ませないでください。browser_context の保存機能を利用しましょう。一度手動でログインしてセッションを保存しておけば、エージェントはそのセッションを使用して、セキュリティ層や煩わしい広告ポップアップを回避できます。

タスクの細分化 (Task Decomposition)

命令が長すぎると、AIは道を見失いやすくなります。「キーボード市場全体を調査して」と頼む代わりに、「リンクのリストを取得して」、次に「各リンクにアクセスして詳細を取得して」というように、小さなステップに分割しましょう。細分化することでデバッグが容易になり、エージェントの動作もより正確になります。

おわりに

AIエージェントはもはや遠い理論ではありません. Browser-useとLangChainを使うことで、私は毎週の価格レポート作成にかかる時間を約2〜3時間節約できました。時折、特殊すぎるWebサイトでAIが「迷子」になることもありますが、これは非常にポテンシャルの高い方向性です。まずは小さなタスクから始めて、その真の威力を体感してみてください。

Share: