# 画面設計書 23-Widgets

## 概要

本ドキュメントは、Dear ImGuiのデモセクション「Widgets」の設計書です。Demo Window内の折りたたみセクションとして、ImGuiが提供するすべての基本ウィジェットのデモンストレーションを行います。

### 本画面の処理概要

**業務上の目的・背景**：本セクションは、Dear ImGuiで利用可能なウィジェット（UI部品）の包括的なリファレンスとして機能します。ボタン、チェックボックス、スライダー、テキスト入力、カラーピッカー、ツリーノード、リストボックス、タブなど、GUIアプリケーション構築に必要なすべての基本要素を網羅しています。開発者はこのセクションを参照することで、各ウィジェットの使用方法、オプション、組み合わせパターンを学習できます。

**画面へのアクセス方法**：Demo Windowの「Widgets」CollapsingHeaderをクリックすることでセクションが展開されます。DemoWindowWidgets関数がShowDemoWindow()から呼び出されることで表示されます。

**主要な操作・処理内容**：
1. Basic - 基本ウィジェット（Button, Checkbox, RadioButton, Slider, InputText等）
2. Bullets - ビュレットポイントの表示
3. Collapsing Headers - 折りたたみ可能なヘッダー
4. Combo Boxes - コンボボックス（ドロップダウン）
5. Color/Picker Widgets - カラーエディタとカラーピッカー
6. Data Types - 様々なデータ型の入力
7. Disable Blocks - ウィジェットの無効化
8. Drag and Drop - ドラッグ＆ドロップ
9. Drags and Sliders - ドラッグとスライダーの詳細
10. Fonts - フォント関連
11. Images - 画像表示
12. List Boxes - リストボックス
13. Multi-Components - 複数コンポーネント
14. Plotting - グラフ描画
15. Progress Bars - プログレスバー
16. Querying Statuses - ウィジェット状態の問い合わせ
17. Selectables - 選択可能アイテム
18. Selection and Multi-Select - 選択とマルチセレクト
19. Tabs - タブバー
20. Text - テキスト表示
21. Text Filter - テキストフィルタリング
22. Text Input - テキスト入力
23. Tooltips - ツールチップ
24. Tree Nodes - ツリーノード
25. Vertical Sliders - 垂直スライダー

**画面遷移**：Demo Windowの一部として表示されます。CollapsingHeaderで折りたたみ/展開可能です。各サブセクションはTreeNodeで階層化されています。

**権限による表示制御**：DisableSectionsフラグによりセクション全体を無効化（グレーアウト）することができます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 92 | Button | 主機能 | ボタンウィジェットのデモ |
| 96 | Checkbox | 主機能 | チェックボックスのデモ |
| 98 | RadioButton | 主機能 | ラジオボタンのデモ |
| 112 | SliderFloat | 主機能 | スライダーのデモ |
| 106 | DragFloat | 主機能 | ドラッグスライダーのデモ |
| 120 | InputText | 主機能 | テキスト入力のデモ |
| 103 | BeginCombo | 主機能 | コンボボックスのデモ |
| 129 | ColorEdit3 | 主機能 | カラーエディタのデモ |
| 135 | TreeNode | 主機能 | ツリーノードのデモ |
| 141 | Selectable | 主機能 | 選択可能アイテムのデモ |
| 145 | BeginListBox | 補助機能 | リストボックスのデモ |
| 148 | PlotLines | 補助機能 | 折れ線グラフのデモ |
| 149 | PlotHistogram | 補助機能 | ヒストグラムのデモ |
| 99 | ProgressBar | 補助機能 | プログレスバーのデモ |

## 画面種別

デモセクション（CollapsingHeader）

## URL/ルーティング

N/A（Dear ImGuiはImmediate Mode GUIライブラリのため、URL/ルーティングの概念は適用されません）

## 入出力項目

| 項目名 | 型 | 入力/出力 | 説明 |
|--------|-----|----------|------|
| demo_data | ImGuiDemoWindowData* | 入力 | デモウィンドウの共有データ |
| disable_all | bool | 入力 | セクション全体の無効化フラグ |

## 表示項目

### Basic セクション
| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| Button | Button | クリック可能なボタン |
| Checkbox | Checkbox | チェックボックス |
| RadioButton | RadioButton | ラジオボタングループ |
| ColoredButtons | Button | HSVカラーで色付けされたボタン |
| ArrowButton | ArrowButton | 矢印ボタン（方向キー） |
| Tooltip | Button + SetItemTooltip | ツールチップ付きボタン |
| LabelText | LabelText | ラベル付きテキスト |
| InputText | InputText | テキスト入力ボックス |
| InputInt/Float | InputInt/InputFloat | 数値入力ボックス |
| DragInt/Float | DragInt/DragFloat | ドラッグ入力 |
| SliderInt/Float | SliderInt/SliderFloat | スライダー |
| ColorEdit3/4 | ColorEdit3/ColorEdit4 | カラーエディタ |
| Combo | Combo | コンボボックス |
| ListBox | ListBox | リストボックス |

### Color/Picker セクション
| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| ColorEdit3/4 | ColorEdit | RGBカラー編集 |
| ColorPicker3/4 | ColorPicker | フルカラーピッカー |
| ColorButton | ColorButton | カラーボタン |
| Palette | ColorButton群 | カスタムパレット |

### Tabs セクション
| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| TabBar | BeginTabBar | タブバーのデモ |
| TabItem | BeginTabItem | 各タブアイテム |

## イベント仕様

### 1-ボタンクリック

Button()がtrueを返した場合、クリックが検出されます。サンプルでは静的変数clickedをインクリメントし、奇数回クリック時にメッセージを表示します。

### 2-チェックボックス変更

Checkbox()は、チェック状態が変更されるとtrueを返し、第2引数のbool変数が更新されます。

### 3-スライダー操作

SliderFloat/Int()は、ドラッグ操作中に継続的にtrueを返し、値が更新されます。Ctrl+クリックで直接数値入力も可能です。

### 4-カラーピッカー操作

ColorEdit3/4()をクリックすると、カラーピッカーポップアップが表示されます。右クリックでオプションメニューが開きます。

### 5-ツリーノード展開/折りたたみ

TreeNode()がtrueを返した場合、ノードが展開されています。TreePop()で終了処理が必要です。

### 6-タブ切り替え

BeginTabItem()がtrueを返した場合、そのタブが選択されています。タブクリックで切り替えが発生します。

## データベース更新仕様

N/A（本デモセクションはデータベースを使用しません。すべてのデータはローカル変数またはstatic変数で管理されます）

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|--------------|------|----------|----------------|
| MSG-001 | 情報 | ボタンクリック時 | "Thanks for clicking me!" |

## 例外処理

| 例外状況 | 処理内容 |
|----------|----------|
| CollapsingHeaderが折りたたまれている場合 | 早期リターンで処理をスキップ |
| disable_allがtrueの場合 | BeginDisabled()/EndDisabled()でグレーアウト |

## 備考

- 各サブセクションは独立した関数（DemoWindowWidgetsBasic等）に分割されている
- IMGUI_DEMO_MARKERマクロでセクションにマーカーが設定されており、デバッガでの追跡が容易
- HelpMarker()関数で各ウィジェットの使い方を説明するツールチップを表示
- 多くのウィジェットがstatic変数を使用して状態を保持（Immediate Modeの特徴）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: エントリーポイントを理解する

処理の起点となる関数を特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | imgui_demo.cpp | `imgui_demo.cpp` | DemoWindowWidgets関数（行4289-4334）がエントリーポイント |

**主要処理フロー**:
1. **行4292**: CollapsingHeader("Widgets")で折りたたみセクションを開始
2. **行4296-4298**: disable_allフラグによる無効化処理
3. **行4300-4330**: 各サブセクション関数の呼び出し

#### Step 2: Basicサブセクションを理解する

最も基本的なウィジェットのデモを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | imgui_demo.cpp | `imgui_demo.cpp` | DemoWindowWidgetsBasic関数（行826-1035）を理解する |

**主要処理フロー**:
- **行831-841**: Button()とクリックカウント
- **行843-851**: Checkbox()とRadioButton()
- **行857-869**: カラーボタン（HSV使用）
- **行879-888**: ArrowButton（リピート対応）
- **行902-938**: InputText、InputInt、InputFloat
- **行943-957**: DragInt、DragFloat
- **行962-984**: SliderInt、SliderFloat、SliderAngle
- **行990-1001**: ColorEdit3、ColorEdit4
- **行1006-1013**: Combo
- **行1017-1025**: ListBox

#### Step 3: カラーウィジェットを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | imgui_demo.cpp | `imgui_demo.cpp` | DemoWindowWidgetsColorAndPickers関数（行1094-1290）を理解する |

**主要処理フロー**:
- **行1099-1110**: ImGuiColorEditFlagsの各オプション
- **行1112-1122**: ColorEdit3、ColorEdit4
- **行1124以降**: ColorPicker、ColorButton、パレット実装

#### Step 4: サブセクション関数の一覧を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | imgui_demo.cpp | `imgui_demo.cpp` | 各サブセクション関数（行823-4334）の役割を把握 |

**サブセクション関数一覧**:
- DemoWindowWidgetsBasic (行826)
- DemoWindowWidgetsBullets (行1041)
- DemoWindowWidgetsCollapsingHeaders (行1063)
- DemoWindowWidgetsColorAndPickers (行1094)
- DemoWindowWidgetsComboBoxes (行1295)
- DemoWindowWidgetsDataTypes (行1392)
- DemoWindowWidgetsDisableBlocks (行1527)
- DemoWindowWidgetsDragAndDrop (行1542)
- DemoWindowWidgetsDragsAndSliders (行1700)
- DemoWindowWidgetsFonts (行1757)
- DemoWindowWidgetsImages (行1773)
- DemoWindowWidgetsListBoxes (行1866)
- DemoWindowWidgetsMultiComponents (行1931)
- DemoWindowWidgetsPlotting (行1978)
- DemoWindowWidgetsProgressBars (行2054)
- DemoWindowWidgetsQueryingStatuses (行2091)
- DemoWindowWidgetsSelectables (行2292)
- DemoWindowWidgetsSelectionAndMultiSelect (行2690)
- DemoWindowWidgetsTabs (行3438)
- DemoWindowWidgetsText (行3582)
- DemoWindowWidgetsTextFilter (行3701)
- DemoWindowWidgetsTextInput (行3728)
- DemoWindowWidgetsTooltips (行3948)
- DemoWindowWidgetsTreeNodes (行4047)
- DemoWindowWidgetsVerticalSliders (行4217)

### プログラム呼び出し階層図

```
ShowDemoWindow()
    |
    +-- DemoWindowWidgets(demo_data)
            |
            +-- ImGui::CollapsingHeader("Widgets")
            |
            +-- ImGui::BeginDisabled() [if disable_all]
            |
            +-- DemoWindowWidgetsBasic()
            |       |
            |       +-- TreeNode("Basic")
            |               +-- Button() / Checkbox() / RadioButton()
            |               +-- ArrowButton()
            |               +-- InputText() / InputInt() / InputFloat()
            |               +-- DragInt() / DragFloat()
            |               +-- SliderInt() / SliderFloat()
            |               +-- ColorEdit3() / ColorEdit4()
            |               +-- Combo() / ListBox()
            |
            +-- DemoWindowWidgetsBullets()
            +-- DemoWindowWidgetsCollapsingHeaders()
            +-- DemoWindowWidgetsComboBoxes()
            +-- DemoWindowWidgetsColorAndPickers()
            +-- DemoWindowWidgetsDataTypes()
            +-- DemoWindowWidgetsDisableBlocks()
            +-- DemoWindowWidgetsDragAndDrop()
            +-- DemoWindowWidgetsDragsAndSliders()
            +-- DemoWindowWidgetsFonts()
            +-- DemoWindowWidgetsImages()
            +-- DemoWindowWidgetsListBoxes()
            +-- DemoWindowWidgetsMultiComponents()
            +-- DemoWindowWidgetsPlotting()
            +-- DemoWindowWidgetsProgressBars()
            +-- DemoWindowWidgetsQueryingStatuses()
            +-- DemoWindowWidgetsSelectables()
            +-- DemoWindowWidgetsSelectionAndMultiSelect()
            +-- DemoWindowWidgetsTabs()
            +-- DemoWindowWidgetsText()
            +-- DemoWindowWidgetsTextFilter()
            +-- DemoWindowWidgetsTextInput()
            +-- DemoWindowWidgetsTooltips()
            +-- DemoWindowWidgetsTreeNodes()
            +-- DemoWindowWidgetsVerticalSliders()
            |
            +-- ImGui::EndDisabled() [if disable_all]
```

### データフロー図

```
[入力]                      [処理]                           [出力]

demo_data -----------> CollapsingHeader判定 ------------> セクション展開/折りたたみ
                              |
ユーザー操作 -----------> 各ウィジェット処理 ------------> 状態変更
(クリック/ドラッグ等)         |                                |
                              |                                v
                              |                           static変数更新
                              |                           (Immediate Mode)
                              v
                         画面描画 -----------------------> 視覚的フィードバック
                         (フレームごと)                    (色変更/値表示等)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| imgui_demo.cpp | `imgui_demo.cpp` | ソース | DemoWindowWidgets関数および全サブセクション関数（行823-4334） |
| imgui.h | `imgui.h` | ヘッダー | ウィジェットAPI定義 |
| imgui_widgets.cpp | `imgui_widgets.cpp` | ソース | ウィジェットの実装 |
