お疲れ様です！

最近、生成AIの進化が本当に著しいと感じる今日この頃です。
「ちょっと目を離した隙に、また新しい技術が…」という状況が日常化していませんか？
特にエンジニアの皆さんは、このスピード感についていくだけで情報収集が大変だろうと想像しています。（私もその一人です）

今回紹介するbrowser-useも「知らない間に進化していたツール」の1つです。
実際に触ってみると、「AIによるブラウザ操作」が想像以上に実用段階に来ていることに驚かされました。
ブログではbrowser-useを使って、実際に会社のホームページから情報を抽出してみたいと思います！

browser-useとは？

browser-useは、生成AI（LLM）と連携し、自然言語の指示でブラウザ操作を自動化するツールです。
例えば「Googleで『東京の天気』を検索し、結果を抽出」といった指示を日本語で与えるだけで、AIエージェントが自動的に検索、クリック、データ収集を実行してくれます

実際に動いているところ

Googleの天気予報は大人の事情でお見せできないので、当社のHPにアクセスして、代表あいさつを開いている様子です。
勝手にブラウザを操作しながら、必要な情報を取得するために自立的に行動している、すごい時代になりましたね、、、

どういう仕組みなの？

簡単に図に起こしてみました。

１．ユーザ

実際にシステムを使う人。「Googleで検索して」など具体的な指示を出します。

２．エージェント(Agent)

ユーザーの指示を解釈し、タスクを実行するための全体フローを管理する役割を持っています。
ブラウザの状態を取得し、LLMとやり取りをしながら、コントローラに指示をしていきます。

３．LLM（大規模言語モデル）

ChatGPTやAnthropicのClaudeなど、自然言語で入力したものに対して答えを生成してくれるAIです。
エージェントから送られてきた内容を元に、次に何をすべきか？を判断するために使用するエンジンとして働いています。

４．コントローラ

エージェントからの指示に基づき、Playwrightを使用しブラウザ操作を実行します。
あらかじめクリックやスクロール、入力などのアクションが準備されており、それらをエージェントが使い分けながら操作を行っていきます。

５．ブラウザ

エージェントへ現在のページ状態（DOMツリー、スクリーンショット）を渡したり、コントローラからの指示を受けます。

動かすための準備

まずは準備していきましょう
ここでは2025/01/26時点での方法をお伝えしています。

事前に準備が必要なもの

• Pythonが動作する環境
• LLMを使うためのAPIキー
  • OpenAI：GPT-4o
  • Anthropic：claude-3.5-sonnet
  • その他対応モデルはコチラに記載されています

環境構築

Browser UseのQuickstartページに記載の通りにセットアップすればスムーズに使えるようになります。
私は動作環境がLinux(WSL2 on ubuntu)のため、躓いたポイントに重きを置いて説明をしていきたいと思います。

公式に従い、uvを使うのがオススメです。（素直に従わなかった私は無駄に苦戦しました。）

# 1. uvをインストールする
curl -LsSf https://astral.sh/uv/install.sh | sh

# 2. python3.11な仮想環境を作成する
# ※browser-useが現時点で3.11でしか動作しないためです
uv venv --python 3.11
source .venv/bin/activate 

# 3. browser-useをインストールする
uv pip install browser-use

# 4. playwrightをインストールする
playwright install

たったこれだけで動きます。素晴らしい。

実行すると日本語が文字化けする問題

ただ、日本語が文字化けしてしまう問題があるので、追加でパッケージをインストールしていきます。
前2つがPlaywrightの文字化けに対応するもので、最後のパッケージは次の豆腐化に対応するために入れています。

# 日本語フォントをインストールする
sudo apt-get install fonts-ipafont-gothic fonts-ipafont-mincho fonts-noto-cjk

（任意）出力ファイルのGIFの日本語が豆腐化する問題へ対応

必須ではありませんが、実行した際にgifに書き込まれるスクリーンショットの日本語が豆腐化してしまうので、これも修正します。

修正①: 日本語フォントをgif生成に使っているフォントリストに加える

• 対象のファイル(インストール後にローカルにあるファイル)
  • .venv/lib/python3.11/site-packages/browser_use/agent/service.py
• 修正箇所:
  • browser_use/agent/service.py#L723

# 修正前
font_options = ['Helvetica', 'Arial', 'DejaVuSans', 'Verdana']

# 修正後
font_options = ["/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc", 'Helvetica', 'Arial', 'DejaVuSans', 'Verdana']

  def _wrap_text(self, text: str, font: ImageFont.FreeTypeFont, max_width: int) -> str:
        """日本語対応のテキストラッピング"""
        lines = []
        for line in text.split('\n'):
            current_line = []
            current_width = 0
            
            for char in line:
                # 文字単位で幅を計算
                char_width = font.getlength(char)
                if current_width + char_width > max_width:
                    lines.append(''.join(current_line))
                    current_line = [char]
                    current_width = char_width
                else:
                    current_line.append(char)
                    current_width += char_width
            
            if current_line:
                lines.append(''.join(current_line))
        
        return '\n'.join(lines)

これらの修正を加えることで、gifに吐き出される日本語文字を文字化けなく出力ができるようになります。

実際に動かしてみた！

ここからは実際に動かしていきたいと思います。
スクレイピングを行いますので、必ずサイトの規約を確認し、コンプライアンスに則って楽しんでいきましょう！
今回は事前に許可を取得したルトラのホームページにアクセスし、次のテーマでタスクを実行させてみたいと思います。

1. 会社概要や事業内容についてまとめる
2. ブログ記事から会社紹介を作成する

今回はAnthropic社のClaude 3.5 Sonnetを利用しました。
ソースコードはコチラを使用していきます。

 
import asyncio

from browser_use import Agent
from browser_use.browser.browser import Browser, BrowserConfig, BrowserContextConfig
from langchain_anthropic import ChatAnthropic

# Anthropicモデルをロード
llm = ChatAnthropic(
    model_name="claude-3-5-sonnet-latest", temperature=0.0, stream_usage=True
)
# ブラウザの設定
browser = Browser(
    config=BrowserConfig(
        headless=True,
        new_context_config=BrowserContextConfig(save_recording_path="./tmp/recordings"),
    )
)
# ブラウザで実行したいタスクを自然言語で指定
task = """
"https://www.rutla.jp/"にアクセスし、事業内容などの会社に関する情報を調査し、まとめてください。
"""


async def main():
    # エージェントを初期化
    agent = Agent(task=task, llm=llm, browser=browser)
    try:
        # タスクを実行
        result = await agent.run(max_steps=100)
    finally:
        # ブラウザのクリーンアップを確実に行う
        if hasattr(agent, "browser"):
            await agent.browser.close()
    return result


# メイン関数を実行
asyncio.run(main())

テーマ１. 会社概要や事業内容についてまとめる

以下のような指示を与えてみたいと思います。

「”https://www.rutla.jp/”にアクセスし、事業内容などの会社に関する情報を調査し、まとめてください。」

指示の中にURLを含めることもでき、直接アクセスするので、検索時に発生するコストもカットできます。

実際に動いている様子（browser-useから出力されたもの）

出力結果

簡単なタスクですが、人間が介入することなくブラウザを操作し、情報収集から内容をまとめたレポート出力まで実施してくれました。

株式会社ルトラの事業内容について以下にまとめます：

1. 主要事業：
– System Engineering Service (SES)による常駐型開発サービスを提供
– ソフトウェア開発とシステム開発の支援
– クライアント指定の勤務地でエンジニアが開発支援を実施

2. 事業の特徴：
– エンジニアは案件を自由に選択可能
– 中途採用のみで即戦力となる経験者を採用
– インフラからアプリケーション開発まで幅広い技術領域をカバー

3. 強みとする3つの要素：
– 向上心とモチベーション：案件選択の自由度が高く、給与が単価に直結
– 技術力と幅広いスキル：未経験者は採用せず、即戦力のエンジニアを配置
– コミュニケーション能力：相互理解と正確な情報伝達を重視

4. 取り扱い技術：
– プログラミング言語：Java、C#、C/C++、PHP、Ruby、Python、Javascript
– インフラ関連：サーバー、ネットワーク

5. ビジネスモデル：
– ルトラのエンジニアとクライアント企業をマッチング
– 労務管理や指揮命令系統はルトラが担当
– クライアントの要望に応じた開発支援を提供

テーマ２. ブログ記事から会社紹介文を作成する

より高度なタスクとして、ルトラのブログ記事を見てもらって、どんな会社か紹介してもらいましょう。

１回目：プロンプト（指示内容）

"https://www.rutla.jp/"にアクセスし、ブログページを探してください。
ブログ記事を３つピックアップし、ルトラという会社がどのようなところか？を纏めてください。

１回目：出力内容

（あれ、ちょっと思っていたのと違った）

お堅い、、、そうじゃないんです、もう一回だけチャンスください！！

２回目：プロンプト（指示内容）

今度は指示をより明確にしてみました。

## ゴール
株式会社ルトラの企業文化を理解するため、事業内容以外の側面（例：社内行事・福利厚生・働き方など）に焦点を当てた会社紹介文を作成する

## 具体的なタスク
1. **情報収集**
   - [ルトラ公式ブログ](https://www.rutla.jp/blog)の最新20記事をスクレイピング
   - 記事タイトルとURLの一覧を作成（日付降順）

2. **記事選定基準**
   - 社内イベント（忘年会/社員旅行など）
   - 福利厚生制度
   - 働き方改革の取り組み
   - オフィス環境
   - 社員インタビュー

3. **コンテンツ分析**
   - 選定した5記事の本文を要約（各150字程度）
   - キーワード抽出（例：心理的安全性/リモートワーク/社員交流）
   - 社員の生の声が反映されている部分を抜粋

4. **アウトプット作成**
   - 3つの観点で企業紹介文を構成（例：①人的環境 ②業務環境 ③成長環境）
   - 具体的事例を交えた説明（「〇〇イベントで〜」など）

## 注意事項
- 著作権遵守のため記事本文を直接引用しない
- 主観的な解釈を避け事実に基づいて記述
- 数値データがある場合は積極的に活用（例：年間イベント実施回数）
- 企業PR文調（客観的かつポジティブ）で統一
- <important>常に日本語を維持し、出力も日本語で固定します</important>

２回目：出力内容

そう！！こういうのを伝えたかった！！！（ルトラは本当に楽しい会社なんです！）

株式会社ルトラの企業文化紹介

【人的環境】
・オンライン・オフラインを組み合わせた活発な社内コミュニケーション
・定期的な全社員懇親会や忘年会の開催によるチームビルディング
・TRPGやリフレッシュなど多様なサークル活動を通じた自主的な社員交流

【業務環境】
・リモートワークと対面のハイブリッド型勤務体制
・各拠点の中心地から15km圏内への引っ越し補助制度（最大10万円）を整備
・社員の自主的な活動を支援する柔軟な組織文化

【成長環境】
・定期的な全社員総会による情報共有と方向性の確認
・社員の趣味や興味を活かしたサークル活動の推進
・心理的安全性を重視した、自由なコミュニケーション環境

特徴的な取り組み：
1. オンライン忘年会でのユニークな企画（逆ビンゴ大会など）
2. 多様なサークル活動（TRPG、リフレッシュ、アクティビティ）
3. 充実した福利厚生（引っ越し補助、サークル活動支援）

※本紹介文は公式ブログの記事を基に作成しており、実際の企業文化を客観的に反映しています。

気になる実行コストは？

私はAnthropicのClaude 3.5 Sonnetを使用しましたので、こちらの価格表を参考に計算してみます。
日本円換算には1USD=155円を使用しています。

テーマ１. 会社概要や事業内容についてまとめる

テーマ2. ブログ記事から会社紹介を作成する

【１回目】

【２回目】

個人的な印象としては、少し高いかな？と思いました。遊んでいたらあっという間にチャージしたクレジットがなくなってしまいました。みなさんもご注意ください！
（もちろん使うAPI次第なところもあるかと思いますので、安くて高性能なものがあれば是非教えてください。）

最後に

すごい時代になったな、と触りながら思ってしまいました。
こんな面白い技術のある、今の時代に生まれて本当に良かったと思いました。

今回は会社HPをターゲットにしてみましたが、まだまだおもしろいことができる可能性を秘めています。
（もちろんお財布と相談しながらですがｗ）
最近は簡単に操作できるGUI版も出ているようで、みなさんも是非触ってみてはいかがでしょうか？

リポジトリ: https://github.com/browser-use/web-ui