# 画面設計書 12-Simple Layout

## 概要

本ドキュメントは、Dear ImGuiのサンプルアプリケーション「Simple Layout」画面の設計仕様を定義する。本画面は、メニュー・サイドバー・メインエリアを持つ基本的なアプリケーションレイアウトのサンプル実装である。

### 本画面の処理概要

本画面は、典型的なデスクトップアプリケーションのUIレイアウトパターンを実演する。左側のサイドバーでアイテムを選択し、右側のメインエリアで詳細情報をタブ形式で表示する構成である。

**業務上の目的・背景**：多くのアプリケーションでは「マスター・ディテール」パターン（一覧から選択して詳細を表示）が採用される。本画面は、ImGuiでこのような一般的なレイアウトを実装する方法を示すことを目的としている。子ウィンドウの分割、リサイズ可能なペイン、タブバーの使用方法を学ぶことができる。

**画面へのアクセス方法**：Demo Windowのメニューバーから「Examples」メニューを選択し、「Simple Layout」を選択することで表示される。または、アプリケーションコード内で`ShowExampleAppLayout(&show_app_layout)`を呼び出すことで直接表示可能。

**主要な操作・処理内容**：
1. 左側サイドバーでオブジェクト（MyObject 0-99）を選択
2. 右側メインエリアで選択されたオブジェクトの詳細を表示
3. タブ（Description / Details）を切り替えて情報を表示
4. メニューバーからの操作（File > Close）
5. RevertボタンとSaveボタンの操作（未実装のプレースホルダー）

**画面遷移**：本画面はDemo Windowの「Examples」メニューから呼び出される。Fileメニューの「Close」（Ctrl+W）でウィンドウを閉じることができる。他の画面への直接的な遷移機能は持たない。

**権限による表示制御**：本画面は権限による表示制御を持たない。すべてのユーザーが同一の機能にアクセス可能である。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 24 | Begin | 主機能 | ウィンドウの開始処理 |
| 25 | End | 主機能 | ウィンドウの終了処理 |
| 26 | BeginChild | 主機能 | サイドバー・メインエリアの子ウィンドウ作成 |
| 27 | EndChild | 主機能 | 子ウィンドウの終了 |
| 150 | BeginMenuBar | 主機能 | メニューバーの開始 |
| 151 | EndMenuBar | 主機能 | メニューバーの終了 |
| 141 | Selectable | 補助機能 | サイドバーの選択可能アイテム |

## 画面種別

一覧・詳細（マスター・ディテールレイアウト）

## URL/ルーティング

N/A（ImGuiはURLベースのルーティングを持たない。`ShowExampleAppLayout()`関数呼び出しによりウィンドウを表示）

## 入出力項目

| 項目名 | 型 | I/O | 必須 | 説明 |
|--------|-----|-----|------|------|
| p_open | bool* | I/O | No | ウィンドウの表示状態を制御するポインタ |
| selected | int (static) | I/O | No | 現在選択されているアイテムのインデックス |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| サイドバーアイテム | Selectable | MyObject 0〜99の選択可能なリスト |
| オブジェクト名 | Text | 選択されたオブジェクトの名前（"MyObject: N"） |
| Descriptionタブ | TextWrapped | オブジェクトの説明文（Lorem ipsum） |
| Detailsタブ | Text | オブジェクトのID情報 |

## イベント仕様

### 1-サイドバーアイテム選択

左側のサイドバーで「MyObject N」をクリックまたはキーボードナビゲーションで選択すると、右側のメインエリアに選択されたオブジェクトの詳細が表示される。Selectable()のImGuiSelectableFlags_SelectOnNavフラグにより、キーボード操作でも選択が可能。

### 2-タブ切り替え

右側メインエリアのタブバーで「Description」または「Details」タブをクリックすると、表示内容が切り替わる。

### 3-File > Close メニュー選択

メニューバーの「File」メニューから「Close」を選択（またはCtrl+W）すると、p_openがfalseに設定され、ウィンドウが閉じられる。

### 4-Revert/Saveボタン押下

下部の「Revert」「Save」ボタンは現在プレースホルダーとして配置されており、押下時の処理は実装されていない。

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

本画面はデータベースを使用しない。選択状態（selected変数）はstatic変数としてメモリ上に保持される。

### 操作別データベース影響一覧

N/A（データベースアクセスなし）

## メッセージ仕様

本画面は固定のメッセージを表示しない。表示されるテキストはすべてサンプルデータである。

| 表示テキスト | 表示場所 | 説明 |
|-------------|---------|------|
| "MyObject: N" | メインエリア上部 | 選択されたオブジェクト名 |
| "Lorem ipsum..." | Descriptionタブ | サンプル説明文 |
| "ID: 0123456789" | Detailsタブ | サンプルID |

## 例外処理

| 状態 | 処理内容 |
|------|----------|
| ウィンドウ非表示時 | Begin()がfalseを返した場合でも、End()は必ず呼び出される |
| メニューバー非表示時 | BeginMenuBar()がfalseを返した場合、EndMenuBar()は呼び出さない |

## 備考

- サイドバーはImGuiChildFlags_Borders | ImGuiChildFlags_ResizeXフラグにより、ボーダー付きでリサイズ可能
- サイドバーの初期幅は150ピクセル
- メインエリアはImGui::BeginGroup()でグループ化され、レイアウトの安定性を確保
- メインエリアの子ウィンドウは-ImGui::GetFrameHeightWithSpacing()で高さを指定し、下部にボタン用のスペースを確保

---

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

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

### 推奨読解順序

#### Step 1: データ構造を理解する

本画面は複雑なデータ構造を使用しない。主にstatic変数のselectedのみを状態として保持する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | imgui_demo.cpp | `imgui_demo.cpp` | 9389行のstatic int selectedが唯一の状態変数 |

**読解のコツ**: ImGuiのImmediate Modeパターンでは、状態はアプリケーション側で保持し、毎フレームUIを再構築する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | imgui_demo.cpp | `imgui_demo.cpp` | ShowExampleAppLayout()関数（9372-9431行）全体を確認 |

**主要処理フロー**:
1. **9374行**: SetNextWindowSizeで初期サイズ500x440を設定
2. **9375行**: Begin()でウィンドウ開始（ImGuiWindowFlags_MenuBarフラグ付き）
3. **9378-9386行**: メニューバーの処理
4. **9388-9400行**: 左側サイドバー（BeginChild "left pane"）
5. **9401行**: SameLine()で左右を横並びに
6. **9404-9428行**: 右側メインエリア（BeginGroup + BeginChild "item view"）

#### Step 3: サイドバー処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | imgui_demo.cpp | `imgui_demo.cpp` | 9391-9399行のサイドバー描画処理 |

**主要処理フロー**:
- **9391行**: BeginChild()でリサイズ可能なサイドバー領域を作成
- **9392-9398行**: forループで100個のSelectableアイテムを生成
- **9396-9397行**: Selectable()で選択状態を判定・更新

#### Step 4: メインエリア処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | imgui_demo.cpp | `imgui_demo.cpp` | 9404-9428行のメインエリア描画処理 |

**主要処理フロー**:
- **9405行**: BeginGroup()でレイアウトをグループ化
- **9406行**: BeginChild()で詳細表示エリアを作成
- **9409-9422行**: BeginTabBar/BeginTabItemでタブ切り替えUI
- **9424-9426行**: Revert/Saveボタンの配置

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

```
ShowExampleAppLayout(bool* p_open)
    |
    +-- ImGui::SetNextWindowSize(500, 440)
    |
    +-- ImGui::Begin("Example: Simple layout", p_open, ImGuiWindowFlags_MenuBar)
            |
            +-- ImGui::BeginMenuBar()
            |       +-- ImGui::BeginMenu("File")
            |               +-- ImGui::MenuItem("Close", "Ctrl+W")
            |
            +-- [Left Pane]
            |   +-- ImGui::BeginChild("left pane", ImVec2(150, 0), ImGuiChildFlags_ResizeX)
            |           +-- for (0..99)
            |                   +-- ImGui::Selectable("MyObject N")
            |
            +-- ImGui::SameLine()
            |
            +-- [Right Pane]
                +-- ImGui::BeginGroup()
                        +-- ImGui::BeginChild("item view")
                        |       +-- ImGui::Text("MyObject: N")
                        |       +-- ImGui::Separator()
                        |       +-- ImGui::BeginTabBar()
                        |               +-- ImGui::BeginTabItem("Description")
                        |               +-- ImGui::BeginTabItem("Details")
                        |
                        +-- ImGui::Button("Revert")
                        +-- ImGui::Button("Save")
```

### データフロー図

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

サイドバークリック -----> Selectable()
                          |
                          +-> selected変数更新 ---------> メインエリア表示更新

タブクリック -----------> BeginTabItem()
                          |
                          +-> 内部状態更新 -------------> タブ内容の表示切り替え

メニュー操作 -----------> MenuItem("Close")
                          |
                          +-> *p_open = false ----------> ウィンドウクローズ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| imgui_demo.cpp | `imgui_demo.cpp` | ソース | ShowExampleAppLayout()関数を含むデモ実装 |
| imgui.h | `imgui.h` | ヘッダー | Begin/End, BeginChild/EndChild, Selectable等の関数宣言 |
| imgui.cpp | `imgui.cpp` | ソース | Begin/End, BeginChild/EndChild, BeginGroup/EndGroupの実装 |
| imgui_widgets.cpp | `imgui_widgets.cpp` | ソース | Selectable, BeginTabBar/BeginTabItem, MenuItemの実装 |
