第7章 · Claude on the Web

Computer Use (ブラウザ自動操作)

Computer Use
→ で次のスライド · F でフルスクリーン · N で講師ノート · Esc で終了

重要キーワード

Computer Use
コンピュータ操作
Claude が画面を見て・マウス/キーボードを操作する API
Screenshot
スクリーンショット
現在画面を画像として取得する操作
Action
アクション
click / type / scroll などの操作プリミティブ
Sandboxing
サンドボックス化
操作対象を隔離環境に閉じ込めて安全性を確保
RPA
ロボティック・プロセス・オートメーション
GUI を介した業務自動化技術 (UiPath / Selenium 等)

Computer Use とは

Computer Use は Claude が コンピュータ画面を視認し、マウス・キーボードを操作する 機能です。 スクリーンショット → アクション の循環でブラウザや GUI アプリを操作します。

動作モデル

wzxhzdk:0

→ 人が「画面を見て、考えて、操作する」のと同じプロセスを Claude が再現。

主なアクション

  • screenshot - 現在画面を取得
  • left_click(x, y) / right_click / double_click
  • type(text) - テキスト入力
  • key(key_combination) - Enter / Tab / Cmd+S 等
  • scroll(direction, amount)
  • mouse_move(x, y)
  • wait(seconds) - ページ読み込み待ちなど

API での使い方 (概略)

wzxhzdk:0

実際の操作は 自分が用意したサンドボックス VM に対して行います。Anthropic はモデルを提供するだけで、操作対象 VM の構築・実装は利用側の責任。

クラウド版 Claude Code と Computer Use の関係

クラウド版 Claude Code = Computer Use + 長時間実行 + ファイル/コード環境 + パッケージ化
つまり クラウド版 Claude Code は内部で Computer Use を使ってブラウザを操作しています。 **「自分で Computer Use を実装するのは クラウド版 Claude Code を自前で作るに近い」** ので、特殊な要件 (社内 VPN・特定 GUI アプリ) でない限り クラウド版 Claude Code を使う方が現実的。

クラウド版 Claude Code で十分な場合 vs Computer Use を直接使う場合

シーン 推奨
公開 Web のスクレイピング クラウド版 Claude Code (組み込み済み)
認証必要な SaaS 操作 クラウド版 Claude Code + Connector
社内 GUI アプリの操作 Computer Use 直接 (自前 VM)
RPA 置き換え (社内 ERP / CRM) Computer Use 直接
End-to-End テスト自動化 Computer Use 直接 (CI 統合)
アクセシビリティテスト Computer Use 直接

RPA (UiPath/Selenium) からの移行

IDE 拡張

  • VS Code: Claude Code 公式拡張。
  • JetBrains: 公式拡張 (IntelliJ, PyCharm 等)。
  • Cursor / Zed / Windsurf: Claude モデル対応。

Python ライブラリ

  • anthropic-sdk-python: 公式 SDK
  • LangChain: マルチプロバイダ対応のフレームワーク
  • LlamaIndex: RAG/検索特化フレームワーク
  • Instructor: 構造化出力 (Pydantic 連携)
  • Pydantic AI: 型安全 LLM アプリ
  • DSPy: プロンプト自動最適化
  • MCP SDK: MCP サーバー/クライアント

TypeScript / Node.js

  • @anthropic-ai/sdk: 公式
  • LangChain.js: Python 版の TS ポート
  • Vercel AI SDK: Next.js との統合
  • MCP TypeScript SDK

MCP サーバー

GitHub, Slack, Notion, Linear, Postgres, Filesystem, Brave Search ... 数百種類が公開済み。 https://github.com/modelcontextprotocol/servers で一覧。

ベンチマーク / Eval

  • promptfoo: ローカル eval
  • LangSmith: トレース + eval (LangChain 系)
  • Helicone: ログ/モニタリング
  • Langfuse: オープンソースな観測基盤
  • Ragas: RAG 専用評価
  • Inspect: 安全性評価 (UK AI Safety Institute)

Observability

  • OpenTelemetry: 業界標準のトレース
  • Helicone / Langfuse / LangSmith: LLM 専用
  • Datadog APM: 既存システム統合

LLM ゲートウェイ / プロキシ

  • LiteLLM: マルチプロバイダ統一 API
  • OpenRouter: 多くのモデルへの単一 API
  • Portkey: ガードレール + ルーティング

Hugging Face エコシステム

  • ローカル embedding モデル
  • 日本語対応のオープンモデル
  • Tokenizer ツール

コミュニティで活発な話題 (2026)

  • Computer Use / Agent SDK の事例増加
  • MCP の急速な普及
  • Code Review エージェントの実用化
  • 多並列クラウドエージェント (Claude Code on the web) の業務適用

Use Case (実例)

UC: 古い社内 CRM のデータ抽出 (毎週 4 時間 → 30 分に)

従来: 担当者が CRM にログイン → 各案件の情報をコピー → スプレッドシートに転記 (毎週 4 時間)

Computer Use 化:

wzxhzdk:0

所要時間: 30 分 / 週、構築コスト 1 日

UC: Web アプリ E2E テスト

wzxhzdk:1

→ Selenium 等の従来ツールよりも シナリオを自然言語で書ける のが強み。 UI が変わってもテストコードを書き換えなくて済む。

UC: 古い VBA Excel マクロ業務の置き換え

wzxhzdk:2

→ Excel ネイティブ操作 (Computer Use で LibreOffice 経由でも可)。

サンドボックス構築 (リファレンス実装)

Anthropic 公式は Docker ベースのリファレンス実装を公開しています:

docker run -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \
  -v $HOME/.anthropic:/home/computeruse/.anthropic \
  -p 5900:5900 -p 8501:8501 -p 6080:6080 -p 8080:8080 \
  -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest

→ Linux + Firefox + Streamlit UI が立ち上がる。Web UI から自然言語で指示できる。

サンドボックス設計の要件

  1. 隔離: 操作対象を本番環境から分離 (Docker / VM / 専用マシン)
  2. ネットワーク: outbound を必要最小限にホワイトリスト
  3. 認証: 操作対象サービスの認証情報を環境変数で安全に渡す
  4. ログ: 画像 + アクション履歴を全保存 (監査・デバッグ用)
  5. タイムアウト: 1 タスクあたり最大時間を設定
  6. 人間承認: 重要操作 (送信・削除等) は人間に確認を求める設計

セキュリティと倫理のチェックリスト

技術面

  • [ ] サンドボックス VM で隔離
  • [ ] 機密情報・本番データへのアクセス禁止
  • [ ] outbound ネットワークをホワイトリスト
  • [ ] 画像 + アクション履歴をログ保存
  • [ ] 人間承認を組み込み (重要操作前)
  • [ ] 緊急停止機構 (kill switch)

倫理・規約面

  • ❌ CAPTCHA 突破は禁止 (規約違反、倫理的にも NG)
  • ❌ 他人のアカウントへの不正操作 (法的リスク)
  • ❌ スクレイピングで robots.txt を無視
  • ❌ レート制限を踏み越える大量アクセス
  • ✅ 対象サービスの利用規約を遵守

苦手・注意点

課題 対策
遅い (1 操作に画像 + 思考) バッチ処理を許容、急ぎは従来 RPA
誤クリック 重要操作前に人間承認
CAPTCHA で詰まる 想定して避ける UI 経路を設計
モバイル UI で苦戦 デスクトップ UI を優先
複雑な状態 (タブ多数) タスクをシンプルなシナリオに分割
レート制限 適切な wait を入れる
▶ Computer Use シナリオ設計
私の会社では古い社内 CRM (Web GUI) のデータ抽出に毎週 4 時間かけています。Claude の Computer Use を使う前提で、この自動化のステップ・サンドボックス構成・必要なガードレール・期待効果と各リスクへの対策を設計してください。
Hands-on Exercise

演習: RPA 置き換え案を作る

あなたの会社で 「人が GUI 操作で繰り返している」 業務を 3 つ挙げ、それぞれ Computer Use で自動化する場合の:

  1. 期待効果 (時間短縮、ミス削減)
  2. 必要な権限・データ
  3. サンドボックス構成 (Docker / 専用 VM / 既存環境)
  4. リスクと緩和策 (誤操作・機密漏洩)
  5. 従来 RPA との比較 (UiPath/Selenium で同じことをした場合との優劣)

を表でまとめてください。

▶ Playground を開いて実行
Hands-on Exercise

演習: サンドボックス起動 (リファレンス実装)

Anthropic 公式の Computer Use Quickstart Docker イメージを起動してみてください (ローカル実行)。

手順: 1. Docker をインストール 2. ANTHROPIC_API_KEY を取得 3. 公式 Docker を起動: docker run -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \\ -p 8080:8080 -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest 4. ブラウザで http://localhost:8080 を開く 5. 自然言語で指示 (「Wikipedia で東京駅を検索」など)

観察ポイント: - スクリーンショット → 思考 → アクションのループが見えるか - レイテンシ (1 操作 何秒くらいか) - 失敗時の挙動 (誤クリック、リトライ)

▶ Playground を開いて実行

理解度チェック

5 問のクイズで理解度を確認しましょう。

クイズを開く
🎉

まとめ

お疲れ様でした!