mcpField
C
claude-computer-use-advanced

claude-computer-use-advanced

github.com/adaptationioエージェントワークフロー35 回インストール
リポジトリ

claude-computer-use-advanced について

スクリーンショット、マウス操作、キーボード入力を使って、Claude computer useでデスクトップ画面を自動操作する方法を扱うスキルです。UIワークフロー、アプリのテスト、画面からの情報抽出を行うエージェント向けです。

主な機能

  1. 01スクリーンショットによる画面分析
  2. 02座標指定のマウス操作
  3. 03テキスト入力とキーボードショートカット
  4. 04Opus 4.5での画面詳細の拡大表示
  5. 05複数ステップのUI操作と確認

活用シーン

  1. 01フォーム入力やデータ登録
  2. 02アプリのUIテスト
  3. 03画面上の情報の抽出
  4. 04APIのないアプリの操作自動化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/adaptationio/skrillz --skill claude-computer-use-advanced

インストール後、Claude Code で/claude-computer-use-advancedを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/
advanced-patterns.md
computer-use-api.md
security-deployment.md
scripts/
form-filling-agent-template.py

詳細

Claude Computer Use Advanced

概要

Claude のコンピューター操作ツールを使用すると、AI エージェントがデスクトップ環境をプログラムから操作できます。このスキルでは、高度な UI 自動化ワークフローの構築、アプリケーションのテスト、画面からのデータ抽出、複数のオペレーティングシステムにわたるアプリケーションの制御に役立つ手法を紹介します。

コンピューター操作は、AI の能力における大きな進歩です。API に頼るのではなく、人間と同じように、画面を見て、要素をクリックし、テキストを入力し、キーボードショートカットを使って、Claude があらゆるソフトウェアを操作できます。これにより、グラフィカルインターフェースを備えたほぼすべてのデスクトップタスクを自動化できます。

主な機能:

  • スクリーンショットを撮影し、視覚的な内容を分析する
  • 正確な座標を使用して画面上の要素をクリックする
  • テキストを入力し、フォームを送信する
  • キーボードショートカットや特殊キーを押す
  • スクロール、ドラッグなどの複雑なマウス操作を行う
  • ズームツールを使って画面の特定領域を調べる(Opus 4.5 のみ)
  • 複数ステップの自動化ワークフローを実行する
  • アプリケーションやソフトウェアをプログラムから制御する

主なモデル:

  • Claude Opus 4.5(computer_20251124):視覚認識の精度を高めるズームツールを備えた最新バージョン
  • Claude 4 / Sonnet 3.7(computer_20250124):すべてのアクションをサポートする安定版

使用する場面

次のような一般的なシナリオでコンピューター操作を使用します。

デスクトップの自動化

  • 繰り返し作業の一括処理
  • フォーム入力とデータ入力のワークフロー
  • ファイルやフォルダーの管理
  • 設定とセットアップの自動化
  • 複数のアプリケーションにまたがるワークフロー

アプリケーションのテスト

  • 自動 UI テストフレームワーク
  • クロスプラットフォームのテストワークフロー
  • ビジュアルリグレッションテスト
  • ユーザー操作のシミュレーション
  • 品質保証の自動化

画面分析とデータ抽出

  • アプリケーションからのテキストやデータの抽出
  • 視覚的なレイアウトやデザインの分析
  • API のないシステムからのコンテンツの読み取り
  • スクリーンショットの分析と理解
  • 画面からの OCR のようなテキスト抽出

アプリケーションの制御と統合

  • API のないレガシーアプリケーションの制御
  • クローズドシステム向けの自動化エージェントの作成
  • RPA(ロボティック・プロセス・オートメーション)ワークフローの構築
  • 複数アプリケーションにまたがるプロセスのオーケストレーション
  • ソフトウェアのテストと検証

コンピューター操作のタスク

タスク 1:スクリーンショットの撮影

スクリーンショットはコンピューター操作の基盤です。次に何をすべきかを判断するために、Claude は画面を見る必要があります。

使用する場面:

  • ワークフローの最初のアクションとして
  • 要素をクリックする前(座標を取得するため)
  • 現在のアプリケーションの状態を分析するため
  • 画面に表示されている内容を把握するため
  • 操作後に結果を確認するため

仕組み: スクリーンショットアクションはディスプレイ全体をキャプチャし、Base64 でエンコードされた画像として返します。その後、Claude はスクリーンショットを分析してインターフェースを理解し、要素を特定して、次のアクションを判断できます。

基本的な例:

action = {
    "type": "screenshot"
}

座標系:

  • 原点(0, 0)は画面の左上です
  • X は右方向に増加します
  • Y は下方向に増加します
  • 座標はディスプレイ上のピクセル位置を示します

ベストプラクティス:

  1. 初期状態を確認するため、必ずスクリーンショットから始めます
  2. 重要な操作の後にスクリーンショットを撮影して、成功を確認します
  3. 要素の位置を正確に特定するには、ズームツール(Opus 4.5)を使用します
  4. 座標を計画する際は、ディスプレイの解像度を考慮します
  5. 標準解像度:1280x800(推奨:1024x768)

タスク 2:要素のクリック

クリックは、ボタン、リンク、チェックボックス、メニュー項目など、クリック可能なあらゆるインターフェース要素を操作する基本的な方法です。

使用する場面:

  • ボタンを押してフォームを送信する
  • メニューを開いてオプションを選択する
  • リンクをクリックして移動する
  • チェックボックスやラジオボタンを切り替える
  • リストやドロップダウンから項目を選択する

仕組み: クリック操作は x,y 座標を受け取り、その位置でマウスクリックを実行します。Claude はスクリーンショットを使って要素の位置を特定し、クリックします。

基本的な例:

action = {
    "type": "left_click",
    "coordinate": [640, 400]  # x, y from screenshot
}

座標の精度:

  • クリック可能な要素の中心を狙います
  • 正確な座標が必要な場合はズームツール(Opus 4.5)を使います
  • クリックに失敗した場合は、もう一度スクリーンショットを撮って調整します
  • 小さな要素を正確にクリックするには、拡大した領域が必要な場合があります

高度なクリックの種類:

  • left_click:標準のシングルクリック
  • right_click:コンテキストメニューを開く
  • double_click:テキストを選択するか、ダブルクリック操作を実行する
  • middle_click:一部のアプリケーションで使用する中クリック
  • click_holding:ドラッグ操作のためにクリックしたままにする

ベストプラクティス:

  1. クリックする前にスクリーンショットを撮り、正しい座標を見つけます
  2. ボタンやリンクの境界を目視で確認します
  3. 精度を高めるために、要素の中心の座標を使います
  4. 操作後にスクリーンショットを撮り、クリックが成功したことを確認します
  5. クリックに失敗した場合は、座標を調整して再試行します

タスク 3:テキスト入力とフォーム入力

テキスト入力を使うと、フォーム、検索ボックス、コマンドプロンプト、テキストフィールドにデータを入力できます。

使用する場面:

  • テキストでフォームフィールドに入力する
  • 検索クエリを入力する
  • コマンドやコードを入力する
  • 認証情報を入力する(セキュアな環境でのみ)
  • テキストエリアやフィールドに入力する

仕組み: 入力操作は、キーボード入力を一文字ずつ送信します。テキストフィールドをクリックした後など、現在のカーソル位置にテキストが入力されます。

基本的な例:

# Click text field first
action = {"type": "left_click", "coordinate": [500, 300]}

# Then type text
action = {
    "type": "type",
    "text": "Hello, World!"
}

テキスト入力のワークフロー:

  1. スクリーンショットを撮ってフォームを確認します
  2. 入力先のテキストフィールドをクリックします
  3. テキストを入力します
  4. 必要に応じて Enter または Tab を押して、送信または次のフィールドに移動します
  5. スクリーンショットを撮って入力内容を確認します

特殊文字:

# Use key action for special characters
action = {"type": "key", "key": "Return"}       # Enter key
action = {"type": "key", "key": "Tab"}          # Tab key
action = {"type": "key", "key": "BackSpace"}    # Delete character
action = {"type": "key", "key": "ctrl+a"}       # Select all
action = {"type": "key", "key": "ctrl+c"}       # Copy
action = {"type": "key", "key": "ctrl+v"}       # Paste

ベストプラクティス:

  1. テキストフィールドを必ず先にクリックして、フォーカスを当てます
  2. 必要に応じて Ctrl+A と Delete で既存のテキストを消去します
  3. Tab を使ってフォームフィールド間を移動します
  4. Enter を押してフォームを送信します
  5. 操作の合間にスクリーンショットを撮って、入力内容を確認します

タスク 4:キーボード操作と特殊キー

キーボード操作を使うと、テキスト入力以外のキー、ショートカット、特殊な入力を正確に制御できます。

使用する場面:

  • キーボードショートカットを押す(Ctrl+C、Ctrl+V など)
  • 特殊キーを使う(Enter、Tab、Escape、矢印キー)
  • キーボードでメニューやダイアログを操作する
  • アプリケーション固有のホットキーを使う
  • フォーカスやナビゲーションを制御する

仕組み: キー操作は、キーボードのキーまたはキーの組み合わせを押します。単一のキーや、Ctrl+A のようなキーの組み合わせを送信できます。

一般的なキー:

# Navigation
{"type": "key", "key": "Return"}      # Enter key
{"type": "key", "key": "Tab"}         # Tab to next field
{"type": "key", "key": "BackSpace"}   # Delete character
{"type": "key", "key": "Delete"}      # Delete forward
{"type": "key", "key": "Escape"}      # Escape/Cancel

# Arrows
{"type": "key", "key": "Up"}
{"type": "key", "key": "Down"}
{"type": "key", "key": "Left"}
{"type": "key", "key": "Right"}

# Shortcuts
{"type": "key", "key": "ctrl+a"}      # Select all
{"type": "key", "key": "ctrl+c"}      # Copy
{"type": "key", "key": "ctrl+v"}      # Paste
{"type": "key", "key": "ctrl+z"}      # Undo
{"type": "key", "key": "ctrl+s"}      # Save
{"type": "key", "key": "alt+Tab"}     # Switch windows

キーを押したままにする(ドラッグ操作の場合):

{"type": "key", "key": "shift", "held": True}  # Hold shift while clicking

ベストプラクティス:

  1. 使用できる場合はキーボードショートカットを使います
  2. フォームフィールドを一つずつクリックする代わりに、Tab で移動します
  3. Escape を押してダイアログを閉じたり、操作をキャンセルしたりします
  4. 矢印キーを組み合わせてナビゲーションします
  5. 選択したテキストを置き換える前に Ctrl+A を使います

タスク 5:ズームツールの使用方法(Opus 4.5 専用)

ズームツールは、Claude Opus 4.5 専用の強力な機能です。画面の特定の領域を全解像度で確認できるため、要素の位置を正確に特定し、視覚的に分析できます。

できること: ズームツールは画面の矩形領域をキャプチャし、縮小せずに全解像度で返します。これにより、Claude は細部を確認し、小さな文字を読み、要素の境界を正確に特定し、クリック座標を精密に判断できます。

使用する場面:

  • 小さな UI 要素の位置を正確に特定する
  • 細かい文字を読む
  • アイコンの詳細を分析する
  • ボタンの正確な位置を特定する
  • 要素が密集したインターフェースを扱う
  • クリック座標の精度を高める

仕組み: 座標 [x1, y1, x2, y2] で定義された矩形領域を指定します。

  • (x1, y1) = 領域の左上隅
  • (x2, y2) = 領域の右下隅

基本的な例:

# Zoom into a specific region to see details
action = {
    "type": "zoom",
    "coordinate": [400, 200, 800, 400]  # [x1, y1, x2, y2]
}

ズームのワークフロー例:

# 1. Take full screenshot to understand layout
{"type": "screenshot"}

# 2. Identify region with uncertain element location
# Need to find exact position of "Submit" button

# 3. Zoom into that region for precise view
{"type": "zoom", "coordinate": [300, 350, 700, 450]}

# 4. With precise view, identify exact coordinates
# See "Submit" button at pixel position [550, 385]

# 5. Click with confidence
{"type": "left_click", "coordinate": [550, 385]}

領域の選択:

  • 個々の要素には小さな領域(50x50)
  • コントロールのグループには中くらいの領域(200x200)
  • 画面全体までの大きな領域
  • 対象要素の周囲に十分な余白を確保する

視覚認識の精度向上によるメリット:

  • Opus 4.5 の視覚認識が向上し、文字をより正確に読み取れます
  • ズームにより、詳細を確認するための全解像度が得られます
  • 要素の境界をより正確に特定できます
  • 要素が密集した UI や複雑な UI の操作に役立ちます
  • クリック座標の誤りを減らせます

ベストプラクティス:

  1. 最初のスクリーンショットで要素がはっきり見えない場合は、ズームを使用します
  2. 要素の周囲すべてに 20~30 ピクセルの余白を含めてズームします
  3. スクリーンショットに表示された領域の座標をそのまま使用します
  4. 精度が重要な場合にのみズームします
  5. スクリーンショットと組み合わせて、効率を最適化します

タスク 6:複数ステップの自動化ワークフロー

複雑な自動化には、複数のステップにまたがるアクションの調整が必要です。このタスクでは、高度なワークフローの実行方法を説明します。

使用する場面:

  • 複数のアプリケーションにまたがるワークフロー
  • 複雑なデータ入力プロセス
  • 複数のステップからなるテスト手順
  • 順次実行する自動化タスク
  • 条件付きワークフロー(これが発生したら、次にこれを実行)

仕組み: エージェントのループは一連のアクションを実行し、スクリーンショットを使って結果を把握して次のステップを判断します。ワークフローが完了するまでループを続けます。

基本的なエージェントループのパターン:

# Pseudo-code for agent loop
actions = []

# Step 1: Take screenshot to see initial state
actions.append({"type": "screenshot"})

# Step 2: Analyze screenshot and click button
actions.append({"type": "left_click", "coordinate": [100, 50]})

# Step 3: Take screenshot to see result
actions.append({"type": "screenshot"})

# Step 4: Fill form based on new state
actions.append({"type": "left_click", "coordinate": [200, 200]})
actions.append({"type": "type", "text": "Form data"})

# Step 5: Submit
actions.append({"type": "left_click", "coordinate": [200, 300]})

# Step 6: Verify with screenshot
actions.append({"type": "screenshot"})

エラーからの復旧:

# If a click misses or action fails:
# 1. Take screenshot
# 2. Re-evaluate coordinates
# 3. Retry with adjusted position
# 4. Use zoom for precision if needed
# 5. Continue workflow

ワークフローの状態追跡:

  • 完了したステップを追跡する
  • 抽出した重要なデータを記憶する
  • 現在のアプリケーションの状態に関するコンテキストを維持する
  • スクリーンショットを状態確認のチェックポイントとして使用する
  • 検証用に中間結果を保存する

ベストプラクティス:

  1. ワークフローの区切りでスクリーンショットを撮ります
  2. フィードバックを使って、各主要ステップを検証します
  3. 予期しない状態にも適切に対処します
  4. エラーには try/catch に似たパターンを使用します
  5. デバッグ用に重要な状態遷移をログに記録します

タスク 7:アプリケーション制御とシステム操作

コンピューター操作では、UI のクリックだけでなく、アプリケーションの制御、システムインターフェースの操作、システムレベルのタスクの実行も可能です。

使用する場面:

  • ウィンドウやアプリケーション間の移動
  • ファイルシステムの操作(ファイルやフォルダーを開くなど)
  • システム設定の構成
  • アプリケーションの起動と管理
  • 複数のウィンドウにまたがるワークフロー

仕組み: 標準的なマウスやキーボードの操作は、どのアプリケーションでも使えます。

  • デスクトップ、タスクバー、メニュー項目のクリック
  • ファイルダイアログを開いてフォルダーを移動する
  • 「ファイル」「編集」「表示」メニューを使用する
  • システムレベルの操作を実行する
  • 複数のウィンドウを管理する

アプリケーションの移動例:

# Open application menu
{"type": "left_click", "coordinate": [500, 10]}  # Menu bar

# Take screenshot to see menu
{"type": "screenshot"}

# Click menu item
{"type": "left_click", "coordinate": [520, 100]}

# Wait for dialog to open
{"type": "screenshot"}

# Interact with dialog
{"type": "left_click", "coordinate": [300, 300]}

ファイルシステムの移動:

# Open File > Open dialog with keyboard shortcut
{"type": "key", "key": "ctrl+o"}

# Take screenshot to see file dialog
{"type": "screenshot"}

# Navigate to folder (multiple methods)
# Method 1: Type path directly
{"type": "type", "text": "/path/to/folder"}

# Method 2: Double-click folders in explorer
{"type": "double_click", "coordinate": [400, 200]}

# Select and open file
{"type": "left_click", "coordinate": [400, 250]}
{"type": "key", "key": "Return"}

複数ウィンドウのワークフロー:

# Switch between windows
{"type": "key", "key": "alt+Tab"}

# Take screenshot to verify window
{"type": "screenshot"}

# Interact with new window
{"type": "left_click", "coordinate": [500, 400]}

ベストプラクティス:

  1. 使用できる場合はキーボードショートカットを使います
  2. 視覚的なスクリーンショットを参考にメニューを操作します
  3. メニューのレイアウトが異なる場合も適切に対処します
  4. ファイルダイアログは慎重に操作します
  5. ウィンドウを切り替えた後にスクリーンショットを撮ります

クイックスタートの例

以下は、Web フォームへの入力を行う簡単な自動化ワークフローの完全な例です。

import anthropic
import base64

client = anthropic.Anthropic(api_key="your-api-key")

# Define the computer use tool
tools = [
    {
        "name": "computer",
        "type": "computer_20251124",  # Opus 4.5 with zoom
        "display_width_px": 1024,
        "display_height_px": 768,
        "display_number": ":1"
    }
]

# Start with a screenshot
messages = [
    {
        "role": "user",
        "content": "Fill out the contact form with name 'John Doe' and email '[email protected]', then submit it."
    }
]

# Add the screenshot action
messages.append({
    "role": "user",
    "content": [
        {
            "type": "text",
            "text": "First, take a screenshot to see the current state of the screen."
        }
    ]
})

# Create the request with beta header
response = client.messages.create(
    model="claude-opus-4-5-20250929",
    max_tokens=1024,
    tools=tools,
    messages=messages,
    headers={"anthropic-beta": "computer-use-2025-11-24"}
)

# Process the response - it will contain tool use actions
for content_block in response.content:
    if content_block.type == "tool_use":
        action = content_block.input

        # Execute the action and get result
        if action["type"] == "screenshot":
            # Return screenshot (base64 encoded)
            result = capture_screenshot()  # Your implementation
        elif action["type"] == "left_click":
            # Execute click
            result = click_at_coordinates(action["coordinate"])
        elif action["type"] == "type":
            # Type text
            result = type_text(action["text"])

        # Continue with the agent loop
        # ... (add result back to messages and continue)

API リファレンス

API の仕様、パラメーター、レスポンス形式、高度な使用パターンの詳細については、以下を参照してください。

  • references/computer-use-api.md - すべてのツールバージョンとアクションタイプを網羅した API ドキュメント

高度なパターン

高度な自動化パターン、複数ステップのワークフロー、ズームツールのテクニック、ベストプラクティスについては、以下を参照してください。

  • references/advanced-patterns.md - 高度な自動化、エラー処理、最適化

セキュリティとデプロイ

セキュリティに関する考慮事項、安全なデプロイの実践方法、運用ガイドラインについては、以下を参照してください。

  • references/security-deployment.md - セキュリティ、コンテナ化、監視、責任ある使用

セキュリティと制限事項

セキュリティに関する考慮事項:

  1. 分離:最小限の権限を設定した分離済みの仮想マシンまたはコンテナにデプロイしてください。
  2. ネットワーク制御:ドメインの許可リストを使用して、インターネットへのアクセスを制限してください。
  3. 認証情報:絶対に必要な場合を除き、機密性の高い認証情報を提供しないでください。
  4. 確認:重要な判断については、人間の承認を求めてください。
  5. 入力の検証:プロンプトインジェクションを防ぐため、すべてのユーザー入力を検証してください。

既知の制限事項:

  1. 遅延:時間に敏感な対話型タスクには適していません。
  2. 画像認識の精度:コンピュータービジョンによって、要素や座標を誤認識することがあります。
  3. アプリケーションのサポート:スプレッドシートや専門的なアプリケーションでは、動作が不安定になることがあります。
  4. アカウント管理:ソーシャルプラットフォーム上でのアカウント作成やコンテンツ共有は、確実に行えません。
  5. プロンプトインジェクション:ウェブベースの環境では、プロンプトインジェクションの影響を受ける可能性があります。
  6. 解像度:推奨される最大解像度は 1280x800 です。
  7. トークンコスト:画像処理により、スクリーンショットの分だけトークンを消費します。

関連スキル

  • anthropic-expert - Claude のコンピューター操作とツール使用の機能の概要
  • claude-opus-4-5-guide - ズームツールの機能強化を含む Opus 4.5 の機能
  • multi-ai-research - サードパーティアプリケーションの調査パターン

詳細はこちら:まず上記のクイックスタートの例を試し、その後、リファレンスガイドで高度なパターンと完全な API ドキュメントを確認してください。

コメント