> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-recommend-assets-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# トップバーメニュー

トップバーメニュー API により、拡張機能は ComfyUI のトップメニューバーにカスタムメニュー項目を追加できます。これは、高度な機能やあまり頻繁に使用されないコマンドへのアクセスを提供するのに役立ちます。

## 基本用法

```javascript theme={null}
app.registerExtension({
  name: "MyExtension",
  // コマンドの定義
  commands: [
    { 
      id: "myCommand", 
      label: "マイコマンド", 
      function: () => { alert("コマンドが実行されました！"); } 
    }
  ],
  // コマンドをメニューに追加
  menuCommands: [
    { 
      path: ["拡張機能", "マイ拡張機能"], 
      commands: ["myCommand"] 
    }
  ]
});
```

コマンドの定義方法は、[コマンドとキーバインド API](./javascript_commands_keybindings) と同じパターンに従います。コマンドの定義に関する詳細については、そのページを参照してください。

## コマンド設定

各コマンドには、`id`、`label`、`function` が必要です：

```javascript theme={null}
{
  id: string,              // コマンドの一意の識別子
  label: string,           // コマンドの表示名
  function: () => void     // コマンドがトリガーされたときに実行される関数
}
```

## メニュー設定

`menuCommands` 配列は、メニュー構造内のコマンドの配置場所を定義します：

```javascript theme={null}
{
  path: string[],          // メニュー階層を表す配列
  commands: string[]       // この場所に追加するコマンド ID の配列
}
```

`path` 配列はメニュー階層を指定します。例えば、`["ファイル", "エクスポート"]` は、「ファイル」メニュー下の「エクスポート」サブメニューにコマンドを追加します。

## メニュー例

### 既存のメニューへの追加

```javascript theme={null}
app.registerExtension({
  name: "MenuExamples",
  commands: [
    { 
      id: "saveAsImage", 
      label: "画像として保存", 
      function: () => { 
        // キャンバスを画像として保存するコード
      } 
    },
    { 
      id: "exportWorkflow", 
      label: "ワークフローをエクスポート", 
      function: () => { 
        // ワークフローをエクスポートするコード
      } 
    }
  ],
  menuCommands: [
    // ファイルメニューに追加
    { 
      path: ["ファイル"], 
      commands: ["saveAsImage", "exportWorkflow"] 
    }
  ]
});
```

### サブメニュー構造の作成

```javascript theme={null}
app.registerExtension({
  name: "SubmenuExample",
  commands: [
    { 
      id: "option1", 
      label: "オプション 1", 
      function: () => { console.log("オプション 1"); } 
    },
    { 
      id: "option2", 
      label: "オプション 2", 
      function: () => { console.log("オプション 2"); } 
    },
    { 
      id: "suboption1", 
      label: "サブオプション 1", 
      function: () => { console.log("サブオプション 1"); } 
    }
  ],
  menuCommands: [
    // ネストされたメニュー構造を作成
    { 
      path: ["拡張機能", "マイツール"], 
      commands: ["option1", "option2"] 
    },
    { 
      path: ["拡張機能", "マイツール", "詳細"], 
      commands: ["suboption1"] 
    }
  ]
});
```

### 複数のメニュー場所

同じコマンドを複数のメニュー場所に追加できます：

```javascript theme={null}
app.registerExtension({
  name: "MultiLocationExample",
  commands: [
    { 
      id: "helpCommand", 
      label: "ヘルプを取得", 
      function: () => { window.open("https://docs.example.com", "_blank"); } 
    }
  ],
  menuCommands: [
    // ヘルプメニューに追加
    { 
      path: ["ヘルプ"], 
      commands: ["helpCommand"] 
    },
    // 拡張機能メニューにも追加
    { 
      path: ["拡張機能"], 
      commands: ["helpCommand"] 
    }
  ]
});
```

コマンドは、設定などの他の ComfyUI API と連携して動作できます。設定 API の詳細については、[設定 API](./javascript_settings) ドキュメントを参照してください。