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

​
基本用法

app.registerExtension({
  name: "MyExtension",
  // コマンドの定義
  commands: [
    { 
      id: "myCommand", 
      label: "マイコマンド", 
      function: () => { alert("コマンドが実行されました！"); } 
    }
  ],
  // コマンドをメニューに追加
  menuCommands: [
    { 
      path: ["拡張機能", "マイ拡張機能"], 
      commands: ["myCommand"] 
    }
  ]
});
コマンドの定義方法は、コマンドとキーバインド API と同じパターンに従います。コマンドの定義に関する詳細については、そのページを参照してください。

​
コマンド設定

各コマンドには、id、label、function が必要です： 
{
  id: string,              // コマンドの一意の識別子
  label: string,           // コマンドの表示名
  function: () => void     // コマンドがトリガーされたときに実行される関数
}

​
メニュー設定

menuCommands 配列は、メニュー構造内のコマンドの配置場所を定義します： 
{
  path: string[],          // メニュー階層を表す配列
  commands: string[]       // この場所に追加するコマンド ID の配列
}
path 配列はメニュー階層を指定します。例えば、["ファイル", "エクスポート"] は、「ファイル」メニュー下の「エクスポート」サブメニューにコマンドを追加します。

​
メニュー例

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

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

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

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"] 
    }
  ]
});

​
複数のメニュー場所

同じコマンドを複数のメニュー場所に追加できます： 
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 ドキュメントを参照してください。