下部パネルのタブ

下部パネルのタブ API を使用すると、拡張機能から ComfyUI インターフェースの下部パネルにカスタムタブを追加できます。この機能は、ログ表示、デバッグツール、またはカスタムパネルなどの機能を追加する際に非常に便利です。

​

基本的な使い方

app.registerExtension({
  name: "MyExtension",
  bottomPanelTabs: [
    {
      id: "customTab",
      title: "カスタムタブ",
      type: "custom",
      render: (el) => {
        el.innerHTML = '<div>これは私のカスタムタブの内容です</div>';
      }
    }
  ]
});

​

タブの設定

各タブには、id、title、type の他にレンダリング関数が必要です：

{
  id: string,              // タブの固有識別子
  title: string,           // タブ上に表示されるタイトル
  type: string,            // タブの種類（通常は "custom"）
  icon?: string,           // アイコンクラス名（任意）
  render: (element) => void // タブのコンテンツを描画する関数
}

render 関数には DOM 要素が渡され、その要素内にタブのコンテンツを挿入します。

​

対話型要素の追加

ボタンなどの対話型要素も追加できます：

app.registerExtension({
  name: "InteractiveTabExample",
  bottomPanelTabs: [
    {
      id: "controlsTab",
      title: "コントロール",
      type: "custom",
      render: (el) => {
        el.innerHTML = `
          <div style="padding: 10px;">
            <button id="runBtn">ワークフローを実行</button>
          </div>
        `;
        
        // イベントリスナーを追加
        el.querySelector('#runBtn').addEventListener('click', () => {
          app.queuePrompt();
        });
      }
    }
  ]
});

​

React コンポーネントの使用

下部パネルのタブ内に React コンポーネントをマウントすることも可能です：

// 拡張機能内で React の依存関係をインポート
import React from "react";
import ReactDOM from "react-dom/client";

// 単純な React コンポーネント
function TabContent() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div style={{ padding: "10px" }}>
      <h3>React コンポーネント</h3>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

// React コンテンツを含む拡張機能を登録
app.registerExtension({
  name: "ReactTabExample",
  bottomPanelTabs: [
    {
      id: "reactTab",
      title: "React タブ",
      type: "custom",
      render: (el) => {
        const container = document.createElement("div");
        container.id = "react-tab-container";
        el.appendChild(container);
        
        // React コンポーネントをマウント
        ReactDOM.createRoot(container).render(
          <React.StrictMode>
            <TabContent />
          </React.StrictMode>
        );
      }
    }
  ]
});

​

独立した登録

registerExtension の外側でもタブを登録できます：

app.extensionManager.registerBottomPanelTab({
  id: "standAloneTab",
  title: "スタンドアロンタブ",
  type: "custom",
  render: (el) => {
    el.innerHTML = '<div>このタブは独立して登録されました</div>';
  }
});