# Dear ImGui 業務運用マニュアル

## 目次

**【基本操作】**
1. [システム概要](#1-システム概要)
2. [初期化・終了手順](#2-初期化終了手順)
3. [Demo Window（リファレンス画面）](#3-demo-windowリファレンス画面)

**【開発フローに沿った機能】**
4. [【STEP1】ウィンドウ管理機能](#4-step1ウィンドウ管理機能)
5. [【STEP2-3】ウィジェット配置・入力処理](#5-step2-3ウィジェット配置入力処理)
6. [【STEP3-4】レイアウト・描画機能](#6-step3-4レイアウト描画機能)
7. [【STEP4-5】デバッグ・最適化ツール](#7-step4-5デバッグ最適化ツール)

**【サポート機能】**
8. [スタイルエディタ](#8-スタイルエディタ)
9. [コンソール・ログ機能](#9-コンソールログ機能)
10. [フォント管理](#10-フォント管理)

**【運用ガイド】**
11. [日常開発の流れ](#11-日常開発の流れ)
12. [よくある質問と対処法](#12-よくある質問と対処法)
13. [トラブルシューティング](#13-トラブルシューティング)

---

## 1. システム概要

### 1.1 Dear ImGuiとは

Dear ImGuiは、C++向けの軽量でブロートフリーなグラフィカルユーザーインターフェース（GUI）ライブラリです。Immediate Mode GUI（IMGUI）パラダイムを採用し、状態の同期や保持を最小限に抑えたシンプルな設計が特徴です。

主に以下の用途で使用されます：
- ゲームエンジンの開発ツール
- リアルタイム3Dアプリケーションのデバッグ画面
- 組み込みアプリケーションのUI
- コンテンツ作成ツール

### 1.2 本システムで行う主要業務

本システムは、主に以下の開発業務を支援します：

| 業務カテゴリ | 具体的な業務内容 |
|------------|----------------|
| **GUI構築** | ウィンドウ作成、ウィジェット配置、レイアウト設計 |
| **入力処理** | テキスト入力、スライダー操作、ボタンクリック処理 |
| **デバッグ** | メトリクス確認、IDスタック調査、ログ表示 |
| **スタイル調整** | カラー設定、フォント設定、外観カスタマイズ |
| **パフォーマンス最適化** | 描画コマンド確認、頂点数監視 |

### 1.3 開発フロー概要

本システムにおけるGUI開発は、以下の流れで進行します：

```
┌─────────────────────────────────────────────────────────────────┐
│                        開発フロー                               │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  【STEP 1】コンテキスト作成・初期化                             │
│      ↓                                                          │
│  【STEP 2】ウィンドウ作成・ウィジェット配置                     │
│      ↓                                                          │
│  【STEP 3】入力処理・イベントハンドリング                       │
│      ↓                                                          │
│  【STEP 4】レンダリング・描画処理                               │
│      ↓                                                          │
│  【STEP 5】デバッグ・最適化・終了処理                           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

**役割別の業務概要：**

| 役割 | 主な業務 |
|------|---------|
| **アプリケーション開発者** | ウィンドウ作成、ウィジェット配置、イベント処理、レイアウト設計 |
| **ツール開発者** | デバッグツール作成、カスタムウィジェット実装、スタイル調整 |

### 1.4 主な機能

| 機能 | 説明 | 開発フローでの位置 |
|------|------|------------------|
| ウィンドウ管理 | 移動可能・リサイズ可能なウィンドウの作成 | STEP 1-2 |
| 入力ウィジェット | テキスト入力、スライダー、ボタン、チェックボックス等 | STEP 2-3 |
| レイアウト機能 | 子ウィンドウ、タブ、ツリー、テーブル | STEP 2-3 |
| 描画システム | 頂点バッファ、コマンドリスト、クリッピング | STEP 4 |
| デバッグツール | Metrics Window、Debug Log、ID Stack Tool | STEP 5 |
| スタイルエディタ | カラー、サイズ、フォント設定 | 随時利用 |

### 1.5 ユーザー種別

システムには以下のユーザー種別があります：

| ユーザー種別 | 説明 |
|-------------|------|
| アプリケーション開発者 | ImGuiを使用してGUIを構築する開発者 |
| ツール開発者 | ImGuiを使用してデバッグツールや開発支援ツールを作成する開発者 |
| ライブラリ統合者 | ImGuiを既存のプロジェクトに統合する開発者 |

### 1.6 対応プラットフォーム

対応プラットフォーム：
- Windows（Win32 API）
- macOS/iOS（Metal、OpenGL）
- Linux（X11、Wayland）
- Android
- Webブラウザ（Emscripten）

対応グラフィックスAPI：
- OpenGL 3.x/ES/WebGL
- DirectX 11/12
- Vulkan
- Metal

---

## 2. 初期化・終了手順

### 2.1 初期化方法

ImGuiを使用するには、以下の手順で初期化を行います。

**基本的な初期化コード：**

```cpp
// 1. コンテキストを作成
ImGui::CreateContext();

// 2. IO設定を取得して必要に応じて設定
ImGuiIO& io = ImGui::GetIO();
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;  // キーボードナビゲーション有効化

// 3. プラットフォームバックエンドを初期化
ImGui_ImplXXXX_Init(...);  // 例: ImGui_ImplGlfw_Init()

// 4. レンダラーバックエンドを初期化
ImGui_ImplXXXX_Init(...);  // 例: ImGui_ImplOpenGL3_Init()
```

**入力項目：**

| 項目 | 入力内容 |
|------|---------|
| shared_font_atlas | フォントアトラスを共有する場合に指定（オプション） |

**注意点：**
- CreateContext()は必ずバックエンド初期化の前に呼び出してください
- DLL境界を跨ぐ場合はSetCurrentContext()とSetAllocatorFunctions()の呼び出しが必要です

### 2.2 フレームループ

毎フレームで以下の処理を行います：

```cpp
// フレームの開始
ImGui_ImplXXXX_NewFrame();  // レンダラーバックエンド
ImGui_ImplXXXX_NewFrame();  // プラットフォームバックエンド
ImGui::NewFrame();

// ここでGUI構築コードを記述
// ImGui::Begin()、ImGui::End()、各種ウィジェット等

// フレームの終了
ImGui::Render();
ImGui_ImplXXXX_RenderDrawData(ImGui::GetDrawData());
```

### 2.3 終了処理

```cpp
// バックエンドのシャットダウン
ImGui_ImplXXXX_Shutdown();  // レンダラーバックエンド
ImGui_ImplXXXX_Shutdown();  // プラットフォームバックエンド

// コンテキストの破棄
ImGui::DestroyContext();
```

---

## 3. Demo Window（リファレンス画面）

### 3.1 Demo Windowの表示

Demo Windowは、ImGuiのすべての機能を実際に動作するサンプルとして示すウィンドウです。

**表示方法：**
1. メインループ内で`ImGui::ShowDemoWindow()`を呼び出します
2. Demo Windowが表示されます

```cpp
// デモウィンドウを表示
ImGui::ShowDemoWindow();
```

### 3.2 Demo Windowの構成

Demo Windowには以下のセクションが含まれます：

| セクション | 内容 |
|-----------|------|
| Help | ライブラリの基本的な使い方 |
| Configuration | io.ConfigFlags等の設定オプション |
| Widgets | Button、Checkbox、Slider等のウィジェットデモ |
| Layout | ウィンドウレイアウトのデモ |
| Popups | ポップアップとモーダルのデモ |
| Tables | テーブル機能のデモ |
| Inputs | キーボード・マウス入力のデモ |

### 3.3 Examplesメニュー

メニューバーの「Examples」から以下のサンプルアプリケーションにアクセスできます：

- Console：コマンド入力・履歴・補完機能のデモ
- Log：ログ表示・フィルタリングのデモ
- Simple Layout：マスター・ディテールレイアウトのデモ
- Property Editor：プロパティエディタのデモ
- Assets Browser：アセットブラウザのデモ

### 3.4 Toolsメニュー

メニューバーの「Tools」から以下のデバッグツールにアクセスできます：

- Metrics/Debugger：内部状態・パフォーマンス情報
- Debug Log：デバッグログ
- ID Stack Tool：IDスタック調査ツール
- Style Editor：スタイル編集ツール
- About Dear ImGui：バージョン情報

---

## 4. 【STEP1】ウィンドウ管理機能

> **開発フローでの位置**: コンテキスト作成後、最初にウィンドウを作成してUIの基盤を構築するステップです。

### 4.1 ウィンドウを作成する

**基本的なウィンドウ作成：**

```cpp
// ウィンドウの開始
if (ImGui::Begin("My Window"))
{
    // ウィンドウ内のコンテンツ
    ImGui::Text("Hello, World!");
}
ImGui::End();  // 必ずEnd()を呼び出す
```

**注意点：**
- Begin()がfalseを返した場合でも、必ずEnd()を呼び出してください
- ウィンドウ名はIDとして使用されるため、一意である必要があります

### 4.2 ウィンドウフラグの設定

ウィンドウの動作を制御するフラグを指定できます：

| フラグ | 効果 |
|--------|------|
| ImGuiWindowFlags_NoTitleBar | タイトルバーを非表示 |
| ImGuiWindowFlags_NoResize | リサイズ不可 |
| ImGuiWindowFlags_NoMove | 移動不可 |
| ImGuiWindowFlags_NoScrollbar | スクロールバーを非表示 |
| ImGuiWindowFlags_MenuBar | メニューバーを表示 |
| ImGuiWindowFlags_NoCollapse | 折りたたみ不可 |

**使用例：**

```cpp
ImGuiWindowFlags flags = ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove;
ImGui::Begin("Fixed Window", nullptr, flags);
// ...
ImGui::End();
```

### 4.3 ウィンドウサイズ・位置の設定

```cpp
// 次のウィンドウのサイズを設定（初回のみ）
ImGui::SetNextWindowSize(ImVec2(400, 300), ImGuiCond_FirstUseEver);

// 次のウィンドウの位置を設定
ImGui::SetNextWindowPos(ImVec2(100, 100), ImGuiCond_FirstUseEver);
```

### 4.4 子ウィンドウの作成

スクロール可能な領域を作成するには子ウィンドウを使用します：

```cpp
ImGui::BeginChild("Child Window", ImVec2(200, 150), ImGuiChildFlags_Borders);
// 子ウィンドウ内のコンテンツ
ImGui::EndChild();
```

---

## 5. 【STEP2-3】ウィジェット配置・入力処理

> **開発フローでの位置**: ウィンドウ内にウィジェットを配置し、ユーザーからの入力を処理するステップです。

### 5.1 基本ウィジェット

**テキスト表示：**

```cpp
ImGui::Text("Static text");
ImGui::TextColored(ImVec4(1,0,0,1), "Red text");
ImGui::TextWrapped("Long text that wraps...");
```

**ボタン：**

```cpp
if (ImGui::Button("Click Me"))
{
    // ボタンがクリックされた時の処理
}
```

**チェックボックス：**

```cpp
static bool checked = false;
ImGui::Checkbox("Enable feature", &checked);
```

### 5.2 入力ウィジェット

**テキスト入力：**

```cpp
static char text[256] = "";
ImGui::InputText("Name", text, sizeof(text));
```

**数値入力：**

```cpp
static int i = 0;
ImGui::InputInt("Integer", &i);

static float f = 0.0f;
ImGui::InputFloat("Float", &f);
```

**スライダー：**

```cpp
static float value = 0.5f;
ImGui::SliderFloat("Volume", &value, 0.0f, 1.0f);
```

### 5.3 カラーピッカー

```cpp
static float color[4] = {1.0f, 0.0f, 0.0f, 1.0f};
ImGui::ColorEdit4("Color", color);
```

### 5.4 コンボボックス

```cpp
static int current_item = 0;
const char* items[] = { "Option 1", "Option 2", "Option 3" };
ImGui::Combo("Select", &current_item, items, IM_ARRAYSIZE(items));
```

### 5.5 リスト・選択

```cpp
static int selected = 0;
for (int i = 0; i < 10; i++)
{
    char label[32];
    sprintf(label, "Item %d", i);
    if (ImGui::Selectable(label, selected == i))
        selected = i;
}
```

---

## 6. 【STEP3-4】レイアウト・描画機能

> **開発フローでの位置**: ウィジェットを適切に配置し、描画処理を行うステップです。

### 6.1 レイアウト制御

**同一行に配置：**

```cpp
ImGui::Button("Button 1");
ImGui::SameLine();
ImGui::Button("Button 2");
```

**グループ化：**

```cpp
ImGui::BeginGroup();
ImGui::Button("Button 1");
ImGui::Button("Button 2");
ImGui::EndGroup();
```

**インデント：**

```cpp
ImGui::Indent();
ImGui::Text("Indented text");
ImGui::Unindent();
```

### 6.2 タブバー

```cpp
if (ImGui::BeginTabBar("MyTabBar"))
{
    if (ImGui::BeginTabItem("Tab 1"))
    {
        ImGui::Text("Content of Tab 1");
        ImGui::EndTabItem();
    }
    if (ImGui::BeginTabItem("Tab 2"))
    {
        ImGui::Text("Content of Tab 2");
        ImGui::EndTabItem();
    }
    ImGui::EndTabBar();
}
```

### 6.3 ツリーノード

```cpp
if (ImGui::TreeNode("Parent"))
{
    ImGui::Text("Child content");
    if (ImGui::TreeNode("Nested"))
    {
        ImGui::Text("Nested content");
        ImGui::TreePop();
    }
    ImGui::TreePop();
}
```

### 6.4 テーブル

```cpp
if (ImGui::BeginTable("MyTable", 3))
{
    ImGui::TableNextColumn();
    ImGui::Text("Column 1");
    ImGui::TableNextColumn();
    ImGui::Text("Column 2");
    ImGui::TableNextColumn();
    ImGui::Text("Column 3");
    ImGui::EndTable();
}
```

### 6.5 カスタム描画

```cpp
ImDrawList* draw_list = ImGui::GetWindowDrawList();
ImVec2 p = ImGui::GetCursorScreenPos();

draw_list->AddLine(ImVec2(p.x, p.y), ImVec2(p.x + 100, p.y + 100),
                   IM_COL32(255, 0, 0, 255), 2.0f);
draw_list->AddRectFilled(ImVec2(p.x, p.y), ImVec2(p.x + 50, p.y + 50),
                         IM_COL32(0, 255, 0, 128));
```

---

## 7. 【STEP4-5】デバッグ・最適化ツール

> **開発フローでの位置**: GUIの動作を確認し、パフォーマンスを最適化するステップです。

### 7.1 Metrics/Debugger Window

内部状態とパフォーマンス情報を確認できます。

**表示方法：**
1. Demo Windowのメニューバーから「Tools」→「Metrics/Debugger」を選択
2. または`ImGui::ShowMetricsWindow()`を呼び出す

**確認できる情報：**
- フレームレート（FPS）
- 頂点数・インデックス数
- ウィンドウ数・メモリ割り当て数
- 描画リストの詳細
- フォント情報

### 7.2 Debug Log Window

デバッグログを確認できます。

**表示方法：**
1. Metrics WindowのToolsセクションで「Show Debug Log」を有効化
2. または`ImGui::ShowDebugLogWindow()`を呼び出す

### 7.3 ID Stack Tool Window

ID衝突の問題を調査できます。

**表示方法：**
1. Metrics WindowのToolsセクションで「Show ID Stack Tool」を有効化
2. または`ImGui::ShowIDStackToolWindow()`を呼び出す

**使用方法：**
1. 「Start Item Picker」ボタンをクリック
2. 調査したいUI要素をクリック
3. IDスタックの詳細が表示されます

### 7.4 パフォーマンス最適化のポイント

| 項目 | 最適化方法 |
|------|----------|
| 描画呼び出し | ウィンドウをまとめて描画バッチを減らす |
| 頂点数 | 複雑な図形の描画を控える |
| テキスト描画 | 頻繁に変化しないテキストはキャッシュを検討 |
| リスト表示 | ImGuiListClipperを使用して表示範囲のみ描画 |

---

## 8. スタイルエディタ

### 8.1 スタイルエディタにアクセスする

**表示方法：**
1. Demo Windowのメニューバーから「Tools」→「Style Editor」を選択
2. または`ImGui::ShowStyleEditor()`を呼び出す

### 8.2 プリセットスタイルの選択

Colorsセレクタで以下のプリセットを選択できます：
- Dark（デフォルト）
- Light
- Classic

### 8.3 カラーの編集

1. 「Colors」タブを選択
2. 各カラー項目の右にあるカラーボックスをクリック
3. カラーピッカーで色を調整
4. 変更は即座に反映されます

### 8.4 サイズの調整

1. 「Sizes」タブを選択
2. 以下の項目を調整：
   - WindowPadding（ウィンドウ内のパディング）
   - FramePadding（フレーム内のパディング）
   - ItemSpacing（アイテム間のスペース）
   - WindowRounding（ウィンドウの角丸）
   - FrameRounding（フレームの角丸）

### 8.5 設定のエクスポート

1. 「Colors」タブの「Export」ボタンをクリック
2. 設定がC++コード形式でクリップボードにコピーされます
3. コードをアプリケーションに貼り付けて使用します

---

## 9. コンソール・ログ機能

### 9.1 Consoleサンプル

コマンド入力・履歴・補完機能を持つデバッグコンソールのサンプルです。

**表示方法：**
1. Demo Windowのメニューバーから「Examples」→「Console」を選択

**主要機能：**
- コマンド入力とEnterで実行
- TABキーでコマンド補完
- 上下矢印キーでコマンド履歴参照
- Filterテキストボックスでログフィルタリング

**利用可能なコマンド：**
- HELP：コマンド一覧を表示
- HISTORY：コマンド履歴を表示
- CLEAR：ログをクリア

### 9.2 Logサンプル

ログ表示・フィルタリング機能のサンプルです。

**表示方法：**
1. Demo Windowのメニューバーから「Examples」→「Log」を選択

**主要機能：**
- ログメッセージの時系列表示
- テキストフィルタによるリアルタイム絞り込み
- 自動スクロール機能
- クリップボードへのコピー

---

## 10. フォント管理

### 10.1 デフォルトフォントの使用

ImGuiはデフォルトで組み込みフォントを使用します。追加の設定は不要です。

### 10.2 カスタムフォントの追加

```cpp
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontFromFileTTF("path/to/font.ttf", 16.0f);
```

### 10.3 日本語フォントの設定

```cpp
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontFromFileTTF("path/to/NotoSansJP-Regular.ttf", 18.0f, nullptr,
                              io.Fonts->GetGlyphRangesJapanese());
```

### 10.4 フォントアトラスの確認

1. Metrics Windowを開く
2. 「Fonts」セクションを展開
3. フォントアトラスのテクスチャを確認できます

---

## 11. 日常開発の流れ

本セクションでは、開発フローに沿った日常開発の流れを説明します。

```
開発フロー概要（再掲）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【STEP 1】コンテキスト作成・初期化 → 2章参照
    ↓
【STEP 2】ウィンドウ作成・ウィジェット配置 → 4-5章参照
    ↓
【STEP 3】入力処理・イベントハンドリング → 5章参照
    ↓
【STEP 4】レンダリング・描画処理 → 6章参照
    ↓
【STEP 5】デバッグ・最適化・終了処理 → 7章参照
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

### 11.1 【開発者】STEP1: プロジェクトセットアップ

新規プロジェクトでImGuiを使用する際の手順：

1. ソースファイル（imgui*.cpp、imgui*.h）をプロジェクトに追加
2. バックエンドファイルを追加（例：imgui_impl_glfw.cpp、imgui_impl_opengl3.cpp）
3. CreateContext()で初期化
4. バックエンドを初期化

### 11.2 【開発者】STEP2: UIの設計・実装

1. Demo Windowを参照して必要なウィジェットを確認
2. Begin/Endでウィンドウを作成
3. 必要なウィジェットを配置
4. レイアウトを調整

### 11.3 【開発者】STEP3: イベント処理の実装

1. ボタンクリック、チェックボックス変更等のイベントを処理
2. 入力値の検証とエラー処理
3. アプリケーションロジックとの連携

### 11.4 【開発者】STEP4-5: デバッグと最適化

1. Metrics Windowでパフォーマンスを確認
2. 問題がある場合はID Stack Toolで調査
3. 必要に応じてスタイルを調整
4. テストを実施

---

## 12. よくある質問と対処法

### 12.1 初期化に関するQ&A

**Q: CreateContext()を呼び出しても何も表示されません**

A: 以下を確認してください：
1. バックエンドが正しく初期化されているか
2. NewFrame()とRender()が毎フレーム呼び出されているか
3. RenderDrawData()で描画データが処理されているか

### 12.2 ウィジェットに関するQ&A

**Q: ボタンをクリックしても反応しません**

A: 以下を確認してください：
1. Begin()がtrueを返しているか確認
2. ウィンドウが他のウィンドウに隠れていないか
3. ウィンドウがクリップ領域外に出ていないか

**Q: IDが衝突していると言われます**

A: 以下を確認してください：
1. 同じラベルを持つウィジェットがないか
2. ループ内でPushID/PopIDを使用しているか

```cpp
for (int i = 0; i < 10; i++)
{
    ImGui::PushID(i);
    ImGui::Button("Button");
    ImGui::PopID();
}
```

### 12.3 レイアウトに関するQ&A

**Q: ウィジェットが意図した位置に配置されません**

A: 以下を確認してください：
1. SameLine()を使用して横並びにしているか
2. Indent()/Unindent()でインデントを調整しているか
3. SetCursorPos()で位置を明示的に指定しているか

---

## 13. トラブルシューティング

### 13.1 エラーメッセージと対処法

| エラーメッセージ | 原因 | 対処法 |
|----------------|------|--------|
| IM_ASSERT failed | コンテキスト未初期化 | CreateContext()を呼び出す |
| IM_ASSERT: NewFrame() | NewFrameが呼ばれていない | NewFrame()を毎フレーム呼び出す |
| IM_ASSERT: BeginCount | Begin/Endの対応が不正 | Begin()に対応するEnd()を確認 |

### 13.2 よくあるトラブルと解決方法

**描画されない：**
1. バックエンドの初期化を確認
2. Render()とRenderDrawData()の呼び出しを確認
3. フォントアトラスがビルドされているか確認

**クリックが効かない：**
1. IsAnyItemHovered()でホバー状態を確認
2. 他のウィンドウに隠れていないか確認
3. IO設定（ConfigFlags）を確認

**パフォーマンスが悪い：**
1. Metrics Windowで頂点数・描画呼び出しを確認
2. リストにはListClipperを使用
3. 不要なウィンドウは非表示にする

### 13.3 サポートへの連絡方法

- GitHub Issues: https://github.com/ocornut/imgui/issues
- Discord: Dear ImGui コミュニティサーバー
- ドキュメント: docs/ディレクトリ内の各ファイル

---

## 改訂履歴

| 版数 | 改訂日 | 改訂内容 |
|-----|--------|---------|
| 1.0 | 2026-02-22 | 初版作成 |

---

*本マニュアルは、Dear ImGuiのエンドユーザー（開発者）向け業務運用マニュアルです。*
*ライブラリの更新により、APIや動作が変更される場合があります。*
