コンポーネント

用途

設定行、ボタン、入力欄、状態表示を揃えたいときに使います。Dear ImGuiのContextとアプリの値はそのままアプリ側で管理します。

Galleryの画面

Components — 設定、選択、状態表示 · Galleryの操作映像を開く

最小描画例

#include <imkit/imkit.h>

void DrawApplyButton() {
    if (imkit::ActionButton("Apply", imkit::ActionVariant::Primary)) {
        // The application validates and applies its own document state.
    }
}

例の種別: 既存アプリのフレーム内で呼ぶ関数例です。NewFrameからRenderまでの間に呼び、戻り値の操作はアプリ側で処理します。

アプリへ組み込む

imkit::imkitをlinkします。編集値とIDはアプリ側で保持し、戻り値を操作要求として扱います。

範囲

即時モードの入力部品です。アプリのデータモデル、保存機能、command dispatcherは提供しません。

関連APIとガイド

• Native API一覧
• 部品一覧

---

ImKit のコンポーネントは、Dear ImGui 標準の振る舞いの上に構築された軽量な合成ウィジェットです。 編集されるデータ値、コンポーネントの寿命、および設定の永続化はすべてホストアプリケーションが所有します。

完全な設定パネルの例

ホスト側の状態構造体を参照し、Dear ImGui のフレームループ内で描画する設定パネルの完全な実装例です。関数は保存リクエストを返すのみで、ファイル保存や通知キューの管理は行いません。

#include <imkit/imkit.h>
#include <array>

struct DisplaySettings {
    bool enabled = true;
    int quality = 1;
    char qualitySearch[64]{};
    float exposure = 0.0f;
    char name[128] = "メインディスプレイ";
    bool showSavedNotice = false;
};

bool DrawDisplaySettings(DisplaySettings& settings, const imkit::Theme& theme, double now) {
    imkit::ThemeScope themeScope(theme); // 同一コンテキスト上で生成し、コンテキスト破棄前に破棄
    bool saveRequested = false;

    if (imkit::Begin("ディスプレイ設定")) {
        imkit::Toggle("有効化", &settings.enabled, {&theme});

        if (imkit::BeginSettingRow("quality", "描画品質")) {
            constexpr std::array<const char*, 3> labels{"ドラフト", "標準", "高品質"};
            imkit::SearchableCombo("##quality", &settings.quality, labels,
                                   settings.qualitySearch, sizeof(settings.qualitySearch));
            imkit::EndSettingRow();
        }

        if (imkit::BeginSettingRow("exposure", "露出補正")) {
            imkit::DragFloatWithUnit("##exposure", &settings.exposure, "EV", 0.01f, -8.0f, 8.0f);
            imkit::EndSettingRow();
        }

        imkit::InputTextWithHint("名前", "必須入力", settings.name, sizeof(settings.name));
        const bool invalidName = settings.name[0] == '\0';
        imkit::ValidationMessage("保存する前に名前を入力してください。", invalidName, imkit::ComponentOptions{&theme});

        imkit::BeginDisabled(invalidName);
        saveRequested = imkit::ActionButton("保存", imkit::ActionVariant::Primary, {}, {&theme});
        imkit::EndDisabled();

        if (settings.showSavedNotice &&
            imkit::NotificationCard({"saved", "設定を保存しました", imkit::StatusKind::Success, 0}, now, imkit::ComponentOptions{&theme})) {
            settings.showSavedNotice = false; // ホスト側で通知の消去リクエストを処理
        }
    }
    imkit::End(); // Begin が false を返した場合でも必ず End を呼ぶ
    return saveRequested;
}

主要アクションボタン

if (imkit::ActionButton("適用", imkit::ActionVariant::Primary, {}, {&theme, &animation})) {
    SaveSettings();
}

Primary ボタンは決定領域ごとに1つ配置することを推奨します。Secondary、Ghost、Destructive（破壊的変更）、SubtleDestructive（停止などの控えめな危険操作）の各バリアントにより、標準のボタン動作セマンティクスを損なうことなくユーザーの意図を表現できます。

ブール値と未確定状態

imkit::Toggle("有効", &enabled, {&theme, &animation});
imkit::IndeterminateCheckbox("親から継承", &state);

• Toggle: 値が変更されたときに真を返します。
• IndeterminateCheckbox: クリック時に Mixed（未確定）から Checked（チェック済み）へ遷移します。状態列挙値はホスト側のモデルで管理します。

検索と入力バリデーション

imkit::SearchableCombo("品質", &quality, labels, search, sizeof(search), disabled);
imkit::InputTextWithHint("名前", "必須入力", name, sizeof(name));
imkit::ValidationMessage("名前は必須です", name[0] == 0, imkit::ComponentOptions{&theme});

検索テキストのバッファおよび選択中インデックスはホストが所有します。ValidationMessage は視覚的なエラーフィードバック（赤枠やツールチップ）を描画しますが、入力値自体の拒否や修正は行いません。

設定行と単位付き入力

if (imkit::BeginSettingRow("exposure", "露出補正")) {
    imkit::DragFloatWithUnit("##value", &exposure, "EV", 0.01f, -8.0f, 8.0f);
    imkit::EndSettingRow();
}

EndSettingRow は、BeginSettingRow が true を返したときのみ呼び出してください。Dear ImGui ネイティブの数値精度とパース処理がそのまま維持されます。 3軸のベクトル入力には DragVector3WithUnit("オフセット", values, "cm", 0.1f, -10.0f, 10.0f) を使用します。幅が狭い画面では自動的に縦積みにレイアウトされます。

ラベル付きのインスペクター欄には AxisVector3Field("position", "位置", values, "m", .01f) を使用します。X/Y/Zの色分けと、ネイティブのドラッグ・数値の直接入力を保ち、幅が足りないときは軸を縦に積みます。編集の開始・確定・取消を受け取りたいホストは、最後の AxisVector3Interaction* 引数で受け取れます。CompactIconActionButton は、アトラスのアイコンと見えるラベルに控えめな役割色を組み合わせた、ツール群向けの小型ボタンです。アトラスと操作状態はホストが所有します。

ステータス表示と通知

imkit::StatusBadge("準備完了", imkit::StatusKind::Success, imkit::ComponentOptions{&theme});
if (imkit::NotificationCard({"saved", "保存完了", imkit::StatusKind::Success, 0}, now, imkit::ComponentOptions{&theme})) {
    dismissSavedNotice = true;
}

通知カードの消滅時間およびキューの削除判定はホスト側の責務です。 NotificationCard はユーザーが閉じる操作を行ったときに消去リクエスト（true）を返します。expiresAt = 0 の場合はホストが消去するまで表示が持続します。 各関数の詳細なオーバーロード仕様は 公開API一覧 を参照してください。

状態と操作をまとめる

imkit::CompactActionRowOptions row;
row.statusText = streaming ? "受信中" : "停止";
row.statusKind = streaming ? imkit::StatusKind::Success : imkit::StatusKind::Neutral;
row.primaryLabel = streaming ? "停止" : "接続";
row.primaryVariant = streaming ? imkit::ActionVariant::SubtleDestructive
                               : imkit::ActionVariant::Primary;
row.settingsLabel = "設定";

switch (imkit::CompactActionRow("camera-1", row)) {
case imkit::CompactActionRowRequest::Primary: requestConnectionChange = true; break;
case imkit::CompactActionRowRequest::Settings: openSettings = true; break;
case imkit::CompactActionRowRequest::None: break;
}

CompactActionRow は状態と二つの操作を描画し、操作要求だけを返します。接続状態、コマンド実行、設定画面の寿命はホスト側で管理します。横幅が足りない場合は状態と操作を複数行に折り返します。 各操作は個別に無効化でき、無効理由はそのボタンのツールチップに表示します。SubtleDestructive は停止など、取り消し可能な危険操作に使います。

ImKit 3.2の作業画面

Galleryの Workspace では、WorkspaceTabs、HierarchyGroupHeader／HierarchyRow、BeginInspectorCard／EndInspectorCard、SettingToggleRow、DragVector3WithUnit、ChoiceGroup、CompactActionRowを組み合わせて操作できます。要求を受けてGallery側の値を更新する実装は、既存のImGuiフレームでも利用できます。3.2の宣言と寿命の規則を参照してください。321アイコンと13テーマを利用でき、Contextやアプリのフレーム管理は引き続きホストが担当します。