設定 API

ComfyUI に設定オブジェクトを提供すると、ユーザーが ComfyUI 設定パネルを開いた際に表示されます。

基本操作

設定項の追加

import { app } from "../../scripts/app.js";

app.registerExtension({
    name: "My Extension",
    settings: [
        {
            id: "example.boolean",
            name: "設定例（ブール値）",
            type: "boolean",
            defaultValue: false,
        },
    ],
});

id はすべての拡張機能間で一意である必要があり、値の取得に使用されます。カテゴリを指定しない場合、id は . で分割され、設定パネル内の表示位置が決定されます。

id に . が含まれていない場合、「その他」カテゴリに表示され、id がセクション見出しとして使用されます。
id に少なくとも 1 つの . が含まれている場合、左側の部分が設定カテゴリとして使用され、2 番目の部分がセクション見出しとして使用されます。それ以降の部分は無視されます。

設定項の読み取り

import { app } from "../../scripts/app.js";

if (app.extensionManager.setting.get('example.boolean')) {
    console.log("設定は有効です。");
} else {
    console.log("設定は無効です。");
}

変更への反応

onChange() イベントハンドラは、ユーザーが設定パネルで設定を変更するとすぐに呼び出されます。これは拡張機能の登録時、つまりページが読み込まれるたびに呼び出されます。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

設定項の書き込み

import { app } from "../../scripts/app.js";

try {
    await app.extensionManager.setting.set("example.boolean", true);
} catch (error) {
    console.error(`設定の変更中にエラーが発生しました：${error}`);
}

追加設定

各設定タイプは ComfyUI フロントエンドのフォームコンポーネントを表示します。attrs フィールドで、そのコンポーネントに追加の Props を渡せます。各タイプがサポートする Props は、タイプに記載しています。例えば、これは数値入力の範囲とステップを制限します：

{
    id: "example.number",
    name: "設定例（数値）",
    type: "number",
    defaultValue: 0,
    attrs: {
        min: 0,
        max: 100,
        step: 5,
    },
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

拡張機能で showButtons、maxFractionDigits、editable、filter などの PrimeVue の Props を渡していた場合は、PrimeVue 削除に伴う移行を参照してください。設定パネルは PrimeVue コンポーネントを使用しなくなったため、これらの Props は効果がありません。

タイプ

ブール値 (Boolean)

これはオン/オフのトグルを表示します。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

テキスト (Text)

これは自由形式のテキストです。

{
    id: "example.text",
    name: "設定例（テキスト）",
    type: "text",
    defaultValue: "Foo",
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

数値 (Number)

これは数値を入力するためのものです。入力には常に増減ボタンが表示されます。サポートされる attrs は min、max、step、formatOptions です。formatOptions は Intl.NumberFormatOptions を受け取るため、maximumFractionDigits で表示する小数点以下の桁数を制御できます。

{
    id: "example.number",
    name: "設定例（数値）",
    type: "number",
    defaultValue: 42,
    attrs: {
        step: 0.1,
        formatOptions: { maximumFractionDigits: 1 },
    },
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

スライダー (Slider)

これにより、ユーザーは直接数値を入力するか、スライダー経由で入力できます。サポートされる attrs は min、max、step です。範囲はサポートされていません。

{
    id: "example.slider",
    name: "設定例（スライダー）",
    type: "slider",
    attrs: {
        min: -10,
        max: 10,
        step: 0.5,
    },
    defaultValue: 0,
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

コンボ (選択リスト)

これにより、ユーザーは値のドロップダウンリストから選択できます。オプションは単純な文字列として、または text と value フィールドを持つオブジェクトとして提供できます。単純な文字列のみを提供する場合、それは両方に使用されます。 searchable: true 属性を指定すると、ユーザーがリストを検索できるようになります。グループと自由形式のテキスト入力はサポートされていません。

{
    id: "example.combo",
    name: "設定例（コンボ）",
    type: "combo",
    defaultValue: "first",
    options: [
        { text: "最初のオプション", value: "first" },
        "2 番目のオプション",
    ],
    attrs: {
        searchable: true,
    },
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

色 (Color)

これにより、ユーザーはカラーピッカーから色を選択するか、16 進数参照を入力できます。形式には 6 桁（アルファ付きの場合は 8 桁）の完全な 16 進数が必要です。3 桁の省略形は機能しません。

{
    id: "example.color",
    name: "設定例（色）",
    type: "color",
    defaultValue: "ff0000",
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

画像 (Image)

これにより、ユーザーは画像をアップロードできます。設定は data URL として保存されます。

{
    id: "example.image",
    name: "設定例（画像）",
    type: "image",
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

隠し (Hidden)

隠し設定は設定パネルに表示されませんが、コードから読み書きできます。

{
    id: "example.hidden",
    name: "設定例（隠し）",
    type: "hidden",
}

その他

カテゴリ

id とは別に、category フィールドを使用して設定のカテゴリを指定できます。これにより、id を変更せずにカテゴリ分類と命名を変更でき、ユーザーがすでに設定した値が失われることを防げます。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    category: ["カテゴリ名", "セクション見出し", "設定ラベル"],
}

ツールチップ

tooltip フィールドで追加のコンテキストヘルプを追加できます。これにより、フィールド名の後に小さな ℹ︎ アイコンが表示され、ユーザーがマウスを乗せたときにヘルプテキストが表示されます。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    tooltip: "これは役立つ情報です",
}

カスタムノードの構築

パッケージと公開

基本操作

設定項の追加

設定項の読み取り

変更への反応

設定項の書き込み

追加設定

タイプ

ブール値 (Boolean)

テキスト (Text)

数値 (Number)

スライダー (Slider)

コンボ (選択リスト)

色 (Color)

画像 (Image)

隠し (Hidden)

その他

カテゴリ

ツールチップ

​基本操作

​設定項の追加

​設定項の読み取り

​変更への反応

​設定項の書き込み

​追加設定

​タイプ

​ブール値 (Boolean)

​テキスト (Text)

​数値 (Number)

​スライダー (Slider)

​コンボ (選択リスト)

​色 (Color)

​画像 (Image)

​隠し (Hidden)

​その他

​カテゴリ

​ツールチップ

基本操作

設定項の追加

設定項の読み取り

変更への反応

設定項の書き込み

追加設定

タイプ

ブール値 (Boolean)

テキスト (Text)

数値 (Number)

スライダー (Slider)

コンボ (選択リスト)

色 (Color)

画像 (Image)

隠し (Hidden)

その他

カテゴリ

ツールチップ