Arcade Controller Button Placement

Gemini in Chrome（サイドパネルや右クリック）に指示を出し、出力されたJSONを反映できます。このページ内のデータと指示書は自動的にGeminiが読み取れるようDOMに仕込まれています。

DOM Context Status Pre-injected (0 buttons)

1

ステップ 1: Gemini に指示する

ChromeのGeminiサイドパネルを開いて「このページのボタンをスト6向けに調整して」と話しかけるか、下のプロンプトをコピーしてご利用ください。

指示サンプル:

あなたはアーケードコントローラーの人間工学・配置の専門家です。
現在開いているWebページ（600x400キャンバス）のボタン配置データは以下の通りです:

[]

【要望】
ストリートファイター6向け（親指パリィ/インパクト用ボタン追加）に調整して

【制約・出力フォーマット】
- 座標はキャンバス内（x: 30〜570, y: 30〜370）に収めてください。
- 直径（diameter）は24または30を指定してください。
- 必ず以下の形式のJSONコードブロック（```json ... ```）のみを出力してください。余計な解説文は不要です。

```json
{
  "app": "arcade-controller-button-placement",
  "version": 1,
  "buttons": [
    { "id": 1, "x": 100, "y": 200, "label": "LP", "diameter": 30 }
  ]
}
```

2

ステップ 2: 回答JSONを貼り付けて反映

WebMCP (Web Model Context Protocol) とは？

WebMCP は W3C および Google Chrome チーム主導の最新 Web 標準 ([Chrome for Developers Documentation](https://developer.chrome.com/docs/ai/webmcp?hl=ja), [webmcp.dev](https://webmcp.dev/)) です。

AI エージェントが画面のスクリーンショット解析や DOM の「クリック位置推測」を行う代わりに、Web アプリが機械読み取り可能な「構造化ツール (Tools)」を直に公開し、確実・高速に操作・自動化を行える仕組みです。

このアケコン配置ツールで得られる 4 大メリット

1. 自然言語での完全自動アケコンレイアウト作成: 「24mmボタンでHitbox風の配置を作成して」「右側にExtraボタンを追加して」などの音声・テキスト指示だけでボタン位置が完璧に描画されます。
2. 画素ズレ・DOM構造変化の影響を受けない正確なCAD操作: 画面解像度やボタン配置のピクセル座標をAIが直に計算・指定するため、1mm単位で正確な配置変更が可能です。
3. 一括操作とパラメータの一括変更: 「すべてのボタンを30mmから24mmに変更する」「2行4列のグリッドを作る」といった複数操作をAIが安全に一括実行します。
4. 瞬時のURL共有出力: 作成した配置からLZ圧縮済みの共有URLをAIが自動生成してユーザーに返却できます。

WebMCP 対応の恩恵を確認する 3 つの手段

方法 1アプリ内「AI / WebMCP デバッガー」で即座に体験 (おすすめ)

ヘッダーの「AI / WebMCP デバッガー」ボタンを押すと、登録されたツール一覧やシミュレーターが開きます。サンプル指示（例：「Hitbox配置をロードし全ボタンを24mmに変更」）を選択して実行すると、AIがどのツールを呼んで配置が更新されたかをログ付きで確認できます。

方法 2ブラウザ開発者ツール (DevTools Console) での確認

F12 キー（または Cmd+Option+I）で開発者コンソールを開き、以下を実行できます:

// 登録されているツール一覧を確認
window.WebMCP.getTools()

// ボタン追加ツールを直接プログラム呼び出し
window.WebMCP.executeTool('add_button', { label: 'TestAI', diameter: 24, x: 300, y: 120 })

方法 3Chrome Flag / WebMCP 拡張機能 / Claude Desktop 連携

Chrome 146+ の試験運用フラグ (chrome://flags/#enable-experimental-web-platform-features または WebMCP 拡張機能) を有効にすると、navigator.modelContext 経由でブラウザ内AIエージェントや Claude Desktop (npx @jason.today/webmcp --mcp) から本アプリを操作できます。

アーケードコントローラーボタン配置

レイアウトプレビュー

Gemini in Chrome Assistant Instruction for Arcade Layout Builder

Current Button Configuration JSON:

Required JSON Output Format: