CSSセレクタもDOM操作も不要 — スクリーンショットだけでブラウザとAndroidを動かすGeminiエージェントの作り方

6月26日、Romin Iraniが「Mastering Gemini Computer Use : A Comprehensive Hands-on Guide」と題した記事を公開した。この記事では、Geminiがスクリーンショットをもとにブラウザやモバイルを操作するAIエージェントを、5段階のステップと5つの実ユースケースで実装する方法について詳しく紹介されている。

「セレクタ不要」のUI自動化という発想

SeleniumやPuppeteerでUIテストを書いた経験があるエンジニアなら、CSSセレクタやXPathの脆さを身に染みて知っているはずだ。クラス名が変わった瞬間にスクリプトが壊れる。APIを持たないレガシー業務アプリはそもそも自動化の対象外になる。

Gemini Computer Useはこの問題に対してシンプルな回答を示す。HTMLのパースもDOM操作も行わず、スクリーンショットを見て次のアクションを決める。人間がモニターを見て操作するのと同じアプローチだ。

ループの構造は以下の3ステップで完結する：

Observe — 現在の画面をスクリーンショットとして取得
Think — Geminiに送り、次のアクションを判断させる
Act — クリック・入力・スクロールを実行し、再びスクリーンショットを撮って繰り返す

モデルがテキストを返した時点でループ終了。関数呼び出しではなく通常の応答が返ってきたら、タスク完了と判断する。

脳・目・手の分離設計

このアーキテクチャの肝は、「脳」は常に同じだが「手」は入れ替え可能という設計にある。

🧠 BRAIN（常に同じ）
   Gemini
   "このスクリーンショットを見て、何をすべきか判断せよ"
          │
          ▼ click(x=396, y=185) を返す
          │
┌─────────┼─────────┐
▼         ▼         ▼
🖐 Browser   🖐 Mobile   🖐 Enterprise
Playwright   ADB         CDP Sandbox

モデルはPlaywrightを使っているのかADBを使っているのかを知らない。スクリーンショットを受け取り、座標を返すだけだ。environmentパラメータにENVIRONMENT_BROWSER / ENVIRONMENT_MOBILE / ENVIRONMENT_DESKTOPのいずれかを渡すことで、モデルが使える操作の種類が変わる。

座標系の仕様

モデルが返す座標は0〜999の正規化座標だ。ピクセル座標への変換は次式で行う：

pixel = int(normalized / 1000 * screen_dimension)

1280×800のビューポートで座標(500, 500)を指定した場合、実際のピクセル座標は(640, 400)——画面中央になる。

各関数呼び出しにはintentフィールドが含まれ、「何をしようとしているか」を文字列で示す。デバッグ時に何が起きているかを追跡するのに役立つ。また、購入・送信・削除などセンシティブな操作に対してはsafety_decisionオブジェクトが返り、明示的な確認を求める設計になっている。

Thinking Modeによる推論の可視化

ThinkingConfig(include_thoughts=True)を有効にすると、各アクションの前にモデルの推論プロセスを確認できる。エージェントが意図しない操作をした場合の原因調査に直結する機能だ。複雑なUIで「なぜそのボタンをクリックしようとしたのか」をトレースしたい場面や、アーキテクチャの動作検証にも活用できる。

Gemini API vs Vertex AI：1行の差

実装パスは2つある。

Gemini API（プロトタイピング向け）
APIキーを取得してSDKをインストールするだけで動く。実行環境（ブラウザ操作ならPlaywright、Android操作ならADB）は自前で用意する。

Vertex AI Enterprise Platform（本番向け）
IAMベースの認証、マネージドブラウザサンドボックス、VPCサービスコントロール、監査ログが加わる。そして重要なのが、コードの差分はクライアント初期化の1行だけという点だ。

# Before — Gemini API（プロトタイピング）
client = genai.Client(api_key="YOUR_KEY")

# After — Vertex AI（本番）
client = genai.Client(
    vertexai=True,
    project="my-project",
    location="us-central1",
)

プロトタイプから本番への移行コストが極めて低い。

5ステップの構成と実ユースケース

記事では以下の段階的な実装ステップが解説されている：

ステップ	内容	学習ポイント
01	スクリーンショットをGeminiに送って画面を説明させる（Hello Screenshot）	マルチモーダル入力の基本。画像をAPIに渡す最小構成を掴む
02	1枚のスクリーンショットから1アクションを実行	関数呼び出しの構造と正規化座標の扱いを理解する
03	Playwrightを使ったフル自律ブラウザエージェント	Observe→Think→Actのループ実装とループ終了条件の設計
04	ADB経由のAndroidエージェント	「手」の差し替えによるモバイル対応。ブラウザ版との差分を確認する
05	Vertex AI + マネージドサンドボックスによるエンタープライズ構成	認証・監査ログ・VPC制御を加えた本番移行の最小変更量を学ぶ

実ユースケースとして紹介されているのは、QAテスト自動化・価格比較・モバイルテスト・Webリサーチ・フォーム自動入力の5つだ。すべてコードがGitHubリポジトリに含まれており、手元で実行できる。

「手」はPlaywrightである必要はない

記事内で明示されているが、PlaywrightはSeleniumやPuppeteerに置き換え可能だ。Playwrightを採用している理由は「速く、PythonのAPIがきれいで、ヘッドレスモードの扱いが楽で、スクリーンショット取得が組み込まれているから」であり、技術的な必然ではない。モバイル用途ではADBが同じ役割を担う。

なお、Playwrightはマシン上のChromeではなく、自前でパッチを当てたChromiumバイナリ（約150MB）を使う。playwright install chromiumでダウンロードされ、~/Library/Caches/ms-playwright/などに配置される。

セットアップの最小構成

ブラウザ系のステップのみを試す場合、必要なのはPython 3.10+とGemini APIキーだけだ。requirements.txtは意図的に最小限に絞られている：

google-genai>=2.7.0
playwright==1.55.0
pydantic>=2.0
rich
termcolor
python-dotenv

Androidや Vertex AIを使わないなら、追加のセットアップは不要だ。

詳細はMastering Gemini Computer Use : A Comprehensive Hands-on Guideを参照していただきたい。