> ## 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.

# 設定

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

## 基本操作

### 設定項の追加

```javascript theme={null}
import { app } from "../../scripts/app.js";

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

`id` はすべての拡張機能間で一意である必要があり、値の取得に使用されます。

[カテゴリを指定](#categories) しない場合、`id` は `.` で分割され、設定パネル内の表示位置が決定されます。

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

### 設定項の読み取り

```javascript theme={null}
import { app } from "../../scripts/app.js";

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

### 変更への反応

`onChange()` イベントハンドラは、ユーザーが設定パネルで設定を変更するとすぐに呼び出されます。

これは拡張機能の登録時、つまりページが読み込まれるたびに呼び出されます。

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

### 設定項の書き込み

```javascript theme={null}
import { app } from "../../scripts/app.js";

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

### 追加設定

設定タイプは [PrimeVue](https://primevue.org/) コンポーネントに基づいています。
PrimeVue ドキュメントに記載されている Props は、`attrs` フィールドに追加することで ComfyUI 設定用に定義できます。

例えば、これは数値入力に増減ボタンを追加します：

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

## タイプ

### ブール値 (Boolean)

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

[ToggleSwitch PrimeVue コンポーネント](https://primevue.org/toggleswitch/) に基づいています。

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

### テキスト (Text)

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

[InputText PrimeVue コンポーネント](https://primevue.org/inputtext/) に基づいています。

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

### 数値 (Number)

これは数値を入力するためのものです。

小数点以下を許可するには、`maxFractionDigits` 属性を 0 より大きい数値に設定します。

[InputNumber PrimeVue コンポーネント](https://primevue.org/inputnumber/) に基づいています。

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

### スライダー (Slider)

これにより、ユーザーは直接数値を入力するか、スライダー経由で入力できます。

[Slider PrimeVue コンポーネント](https://primevue.org/slider/) に基づいています。範囲はサポートされていません。

```javascript theme={null}
{
    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` フィールドを持つオブジェクトとして提供できます。単純な文字列のみを提供する場合、それは両方に使用されます。

`editable: true` 属性を指定してユーザーに自由形式のテキストを入力させたり、`filter: true` 属性を指定して検索可能にしたりできます。

[Select PrimeVue コンポーネント](https://primevue.org/select/) に基づいています。グループはサポートされていません。

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

### 色 (Color)

これにより、ユーザーはカラーピッカーから色を選択するか、16 進数参照を入力できます。

形式には 6 桁の完全な 16 進数が必要です。3 桁の省略形は機能しません。

[ColorPicker PrimeVue コンポーネント](https://primevue.org/colorpicker/) に基づいています。

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

### 画像 (Image)

これにより、ユーザーは画像をアップロードできます。

設定は [data URL](https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data) として保存されます。

[FileUpload PrimeVue コンポーネント](https://primevue.org/fileupload/) に基づいています。

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

### 隠し (Hidden)

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

```javascript theme={null}
{
    id: "example.hidden",
    name: "設定例（隠し）",
    type: "hidden",
}
```

## その他

### カテゴリ

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

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

### ツールチップ

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

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