AIがブラウザを自動操作！Gemini Computer Useの仕組みを理解する【前編】

YaroTech｜生成AIの傾奇者

2025年10月10日 21:28

こんにちは！YaroTechです。

「AIがマウスを動かして、キーボードを打って、ブラウザを自動操作してくれる」

そんな未来のような技術が、ついに現実になりました。Googleが10月7日にリリースしたばかりのGemini 2.5 Computer Useです。

今日は、この最新技術の仕組みを徹底解説します。コードを読んで「こうやって動くんだ！」を理解する回です。明日は実際にWindows環境で動かしてみます！

※見出し画像のプロンプトは一番下におまけで公開中！

🖥️ 実行環境

OS: Windows 11 Pro 24H2（ARM64版）
PC: Microsoft Surface Laptop 7th（Snapdragon X Elite）
AI: Claude Desktop（記事執筆）
参照: Gemini Computer Use公式リポジトリ

🎯 この記事で得られること

✅ Gemini Computer Useの基本的な仕組みが分かる
✅ AIがどうやってブラウザを操作するのか理解できる
✅ 13種類の操作アクションを把握できる
✅ 明日の実践に向けた準備ができる
✅ MCP開発への応用アイデアが得られる

🤖 Gemini Computer Useって何？

一言で言うと

AIが画面を見て、マウスとキーボードを操作してブラウザを自動化してくれる技術です。

従来との違い

従来の自動化：

「このボタンのIDはXXXだから、それをクリック」
HTML構造が変わるとすぐ壊れる
技術知識が必要

Gemini Computer Use：

「画面を見て、検索ボックスがあるからここに入力しよう」
人間のように画面を理解
自然言語で指示するだけ

発表日

2025年10月7日（なんと、たった3日前！）

📸 仕組みの核心：魔法のようなループ

Gemini Computer Useの動き方は、とてもシンプルです：

┌─────────────────────────────────┐
│ 1. スクリーンショットを撮る 📷  │
└───────────┬─────────────────────┘
            ↓
┌─────────────────────────────────┐
│ 2. AIが画像を見て考える 🤔      │
│   「次は何をすればいい？」       │
└───────────┬─────────────────────┘
            ↓
┌─────────────────────────────────┐
│ 3. AIが命令を出す 💡            │
│   「座標(100, 200)をクリック」  │
└───────────┬─────────────────────┘
            ↓
┌─────────────────────────────────┐
│ 4. ブラウザが実際に操作 🖱️      │
└───────────┬─────────────────────┘
            ↓
┌─────────────────────────────────┐
│ 5. また1に戻る（完了まで繰り返し）│
└─────────────────────────────────┘

なぜこれがすごいのか？

人間の操作を完全に模倣しているからです。

画面を見て理解する（視覚）
考えて判断する（思考）
マウスとキーボードで操作する（行動）

まるで人間がパソコンを使っているように、AIが操作してくれるんです。

🛠️ AIができる13の操作

公式コードを読んで分かった、Gemini Computer Useができる操作は全部で13種類です：

📍 マウス操作系（3種類）

1. click_at - クリック

指定した座標をクリック
例：「座標(500, 300)をクリック」

2. hover_at - マウス移動

指定した座標にマウスを移動
メニューを表示したいときなどに使う

3. drag_and_drop - ドラッグ＆ドロップ

ファイルを移動したり、選択範囲を作ったりする

⌨️ キーボード操作系（2種類）

4. type_text_at - テキスト入力

指定座標でテキストを入力
検索ボックスやフォームへの入力に

5. key_combination - ショートカットキー

Ctrl+C（コピー）やCtrl+V（貼り付け）など
複数キーの組み合わせに対応

📜 スクロール系（2種類）

6. scroll_document - ページ全体スクロール

上下に画面をスクロール
長いページを読むときに

7. scroll_at - 指定位置でスクロール

特定の場所だけスクロール
サイドバーやボックス内のスクロールに

🌐 ブラウザ操作系（4種類）

8. navigate - URL移動

指定したURLに移動
例：「https://www.google.comへ移動」

9. go_back - 戻る

ブラウザの「戻る」ボタンと同じ

10. go_forward - 進む

ブラウザの「進む」ボタンと同じ

11. search - 検索

検索バーで検索実行

⏱️ その他（2種類）

12. wait_5_seconds - 待機

ページの読み込みを待つ
動的コンテンツの表示待ちに

13. open_web_browser - ブラウザ起動

最初にブラウザを開く

🎯 座標の魔法：どんな画面サイズでも動く仕組み

ここが技術的に面白いポイントです！

問題

画面サイズは人それぞれ違います：

デスクトップ: 1920×1080
ノートPC: 1366×768
タブレット: 1024×768

同じ座標を指定しても、画面サイズが違うとボタンの位置が変わってしまいます。

解決策：正規化

Gemini Computer Useは0-1000の範囲で座標を指定します。

AIが指定する座標: (500, 500)
↓
実際のピクセル座標に変換:
- 1920×1080の画面 → (960, 540)
- 1366×768の画面 → (683, 384)

どんな画面サイズでも、相対的な位置が保たれるんです！

これなら、1つのスクリプトがどんな環境でも動きます。

🧠 コードの中身を覗いてみた

GitHubで公開されているコードを読んでみました。

main.py - メインプログラム（85行）

とてもシンプルでした！

主な役割：
1. コマンドライン引数を受け取る
   - やってほしいこと（--query）
   - 環境（--env）
   - 最初に開くURL（--initial_url）

2. ブラウザ環境を作る
   - Playwright: ローカルでブラウザ動かす
   - Browserbase: クラウドで動かす

3. AIエージェントを起動
   - agent_loop()でループ開始

agent.py - AIエージェント（417行）

こっちが本体です。重要な部分を抜粋：

ループの心臓部

def agent_loop(self):
    status = "CONTINUE"
    while status == "CONTINUE":
        status = self.run_one_iteration()

シンプル！「完了」と言われるまで、永遠にループします。

1回の反復処理

def run_one_iteration(self):
    # 1. AIに聞く
    response = self.get_model_response()
    
    # 2. AIの返事から「やること」を抽出
    function_calls = self.extract_function_calls(candidate)
    
    # 3. やることがなければ終了
    if not function_calls:
        return "COMPLETE"
    
    # 4. やることを実行
    for function_call in function_calls:
        fc_result = self.handle_action(function_call)
    
    # 5. 結果をAIに返す
    self._contents.append(結果)
    
    # 6. 続ける
    return "CONTINUE"

これが魔法のループの正体です！

スクリーンショット管理

面白い工夫が：

MAX_RECENT_TURN_WITH_SCREENSHOTS = 3

最新3ターン分だけスクリーンショットを保持して、古いのは削除します。

理由：メモリ節約のため！

画像データは重いので、全部保存していたらすぐにメモリがパンクします。

🔒 安全機能：危険な操作は確認

重要な機能がもう1つ：

def _get_safety_confirmation(self, safety: dict) -> str:
    print("Safety service requires explicit confirmation!")
    print(safety["explanation"])
    decision = input("Do you wish to proceed? [Yes]/[No]\n")
    if decision.lower() in ("n", "no"):
        return "TERMINATE"
    return "CONTINUE"

危険な操作（例：購入ボタン、個人情報送信）の前に、ユーザーに確認を求めます。

これなら安心ですね！

💡 MCPへの応用アイデア

今回の仕組みを理解して、思いついたことがあります。

現状のMCP（Screenshot、BrowserAutomation）の課題

スクリーンショットは撮れる
- でも1MB近い画像データ
- Claudeに読み込ませると重すぎる
ブラウザは操作できる
- でも要素のセレクタを指定する必要がある
- HTML構造が変わると壊れる

Gemini Computer Useの良いところ

画像を見て判断
- 「この画面の検索ボックスはどこ？」
- AIが自動で見つける
座標で操作
- HTML構造に依存しない
- 画面が変わっても柔軟に対応

理想の組み合わせ

Screenshot MCP
  ↓
画像をAIが分析
  ↓
「ここをクリックすべき」と判断
  ↓
Browser Automation MCPで実行

このループを実現できれば、人間のように柔軟に操作できるMCPが作れそうです！

（これは明日の実践を終えてから、本格的に考えてみます）

📋 明日の実践に向けて：必要なもの

明日、実際に動かすために必要なものを整理しておきます。

1. Gemini APIキー 🔑

Google AI Studioから無料で取得できます：
https://aistudio.google.com/app/apikey

注意：39桁の英数字です。大切に保管してください。

2. Python環境 🐍

Python 3.xがインストールされていればOKです。

3. 必要なライブラリ

明日インストールします：

google-genai（Gemini APIクライアント）
playwright（ブラウザ自動化）
その他依存関係

4. 作業時間

セットアップ＋動作確認で30分〜1時間くらいを見ています。

🔗 関連記事

今回の内容に関連する過去記事もぜひご覧ください：

ブラウザ自動化関連：

ChatGPTエージェントに対抗！ブラウザ操作MCPを自作してみたら想像以上に大変だった件 - Day23でブラウザ自動化MCPを自作した体験談。Playwrightの基本から実装の苦労まで詳しく解説しています。

AI自動化の最前線：

衝撃！ChatGPT Plusでもエージェント解禁！勝手にブラウザ操作してパワポ作成まで全自動でやってくれた件 - Day21でChatGPTのエージェント機能を試した記録。AI自動化の可能性を実感できます。

AI使い分け術：

【プロンプト公開】生成AI3兄弟の得意技を使い分けて生産性3倍！チャッピー、ジミー、クロ助の活用術 - Day38でChatGPT、Gemini、Claudeの使い分け方を紹介。今回のGeminiの新機能も、この文脈で理解できます。

📝 まとめ

今日はGemini Computer Useの仕組みを徹底解説しました。

分かったこと

✅ 魔法のループ：画面を見る→考える→操作する→また見る
✅ 13の操作：クリック、入力、スクロール、ナビゲーションなど
✅ 座標の工夫：どんな画面サイズでも動く正規化
✅ 安全機能：危険な操作は必ず確認
✅ シンプルなコード：意外と理解しやすい構造

今日の収穫

コードを読んで、「こうやって動くんだ！」が完全に理解できました。

特に座標の正規化とスクリーンショット管理の工夫は、自分でMCPを作るときにも参考になりそうです。

明日は実際にWindows環境で動かしてみます。ブラウザが自動で動く様子を、動画やスクリーンショットでお見せできると思います！

🚀 次回予告

Day93: AIがブラウザを自動操作！Gemini Computer Useを動かしてみた【後編】

明日は今日理解した仕組みを、実際に動かします！

Windows（ARM64）環境でのセットアップ
実際にブラウザが自動で動く様子
ハマったポイントと解決策
スクリーンショット＆動画付き

Surface Laptop（ARM64）で問題なく動くのか？
それとも何か問題が起きるのか？

実際に試した結果を、正直にレポートします！

🎨 おまけ：見出し画像作成プロンプト

今日の見出し画像のベースはチャッピー（ChatGPT）に下記プロンプトで作成してもらいました！：

柔らかな照明で撮影された超現実的でプロフェッショナルな写真を作成してください。

詳細なアニメの美意識の画像を作成してください。表情豊かな瞳、なめらかな網掛けセルの色使い、はっきりした線画を使用します。アニメのシーンに典型的な身ぶりと雰囲気で、心情と登場人物の存在を強調してください。

下記条件のnote見出し画像をサイズは横長で作成してください。サイズは必ず横長で作成してください。
## 🎨 見出し画像案

### デザインコンセプト
- **背景**: 深い青から明るい水色へのグラデーション（デジタル・テクノロジー感）
- **メインビジュアル**: 
  - 中央にブラウザウィンドウのシルエット（イラスト風）
  - その周りに円形の矢印でループを表現
  - マウスカーソルとキーボードのアイコン
  - スクリーンショットを示す四角い枠
- **テキスト要素**: 
  - 上部: "Gemini Computer Use"（シンプルなフォント・白）
  - 中央: "AIがブラウザを自動操作！"（太字・大きめ・白）
  - 下部: "仕組みを理解する【前編】"（中サイズ・白）
- **装飾**: 
  - 流れるようなライン
  - ギアのアイコン（自動化を表現）
  - 小さな光の点でキラキラ感

### 作成手順
1. スライドサイズ（1536×1024px）横長 
2. 背景に深い青（#0066CC）から明るい水色（#66CCFF）へのグラデーション
3. 中央にブラウザウィンドウのシルエット（白の半透明）
4. ウィンドウの周りに4つの矢印で円を描く（ループを表現）
5. マウスカーソル、キーボード、スクリーンショット枠を配置
6. テキストを3段構成で配置：
   - 上部: "Gemini Computer Use"（24pt、白、細字）
   - 中央: "AIがブラウザを自動操作！"（48pt、白、太字）
   - 下部: "仕組みを理解する【前編】"（32pt、白、中字）
7. ギアアイコンを左上と右下に配置（自動化イメージ）
8. 小さな光の点を散りばめる（キラキラ感）
9. YaroTechロゴを右下に12ptで控えめに配置

このプロンプトをChatGPTに渡すだけで、同じようなクオリティの見出し画像が作れます！

#YaroTech #Gemini #ComputerUse #AI #生成AI #ブラウザ自動化 #MCP #Python #効率化 #プログラミング #働き方を変えるツール

いいなと思ったら応援しよう！

記事がお役に立てたなら嬉しいです！いただいたチップは、新しいMCPツールの検証や、より深い実践実験の資金として大切に使わせていただきます。あなたの応援が次の「AI活用の感動」を生み出す原動力になります✨ 一緒に羽ばたき続けましょう！