# 画面設計書 86-Chat

## 概要

本ドキュメントは、VirtualizationDemoアプリケーションにおけるChat（チャット）ページの画面設計について記載します。

### 本画面の処理概要

このページは、チャットアプリケーション風のUIで仮想化ListBoxの動作をデモンストレーションします。JSONファイルからチャットメッセージデータを読み込み、送信者名、メッセージ内容、タイムスタンプを持つメッセージバブルとして表示します。大量のチャットメッセージをスムーズにスクロール表示する仮想化技術の実例を示します。

**業務上の目的・背景**：
開発者がAvaloniaの仮想化機能を実際のチャットUIに適用する方法を学ぶことを目的としています。チャットアプリケーションは典型的な大量データ表示のユースケースであり、仮想化によるパフォーマンス最適化が重要です。カスタムItemTemplateを使用したメッセージバブルデザインの実装例も提供します。

**画面へのアクセス方法**：
VirtualizationDemoアプリケーションを起動後、メインウィンドウのHamburgerMenuから「Chat」タブを選択することでアクセスできます。

**主要な操作・処理内容**：
1. アプリケーション起動時にAssets/chat.jsonからチャットデータを読み込み
2. ChatMessageレコード（Sender、Message、Timestamp）をObservableCollectionに格納
3. ListBoxでメッセージを仮想化表示
4. カスタムItemTemplateでメッセージバブル（角丸ボーダー）を表示
5. 各バブルに送信者名（太字）、メッセージ本文、タイムスタンプを配置

**画面遷移**：
- 遷移元：VirtualizationDemo MainWindow（HamburgerMenuナビゲーション）
- 遷移先：なし（同一ウィンドウ内の他タブへはHamburgerMenu経由）

**権限による表示制御**：
特に権限による表示制御はありません。デモ用途のため全ての機能が常に利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 41 | VirtualizingStackPanel | 主機能 | チャットメッセージの仮想化表示 |
| 9 | ListBox | 補助機能 | メッセージリストの表示とスクロール |

## 画面種別

デモ / 表示専用

## URL/ルーティング

HamburgerMenuナビゲーション: "Chat"タブ

## 入出力項目

本画面は表示専用のため、ユーザー入力項目はありません。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| チャットメッセージ一覧 | 出力 | ListBox | JSONファイルから読み込んだメッセージを表示 |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| ListBox | ListBox | 仮想化されたチャットメッセージリスト |
| メッセージバブル | Border | 角丸8pxのメッセージコンテナ（最大幅280px） |
| 送信者名 | TextBlock | 太字で表示される送信者名 |
| メッセージ本文 | TextBlock | TextWrapping="Wrap"でラップされるメッセージテキスト |
| タイムスタンプ | TextBlock | 右寄せ、10pxフォント、薄いグレー色で表示 |

## イベント仕様

### 1-コンストラクタ（ViewModel）

ChatPageViewModelの初期化時にデータを読み込みます。

- **トリガー**：ViewModelのコンストラクタ呼び出し時
- **処理内容**：
  1. ChatFile.Load("Assets/chat.json")でJSONファイルを読み込み
  2. ChatMessage配列をObservableCollectionに変換
  3. Messagesプロパティにセット

### 2-InitializeComponent

ページ初期化時に発生するイベントです。

- **トリガー**：ページのコンストラクタ呼び出し時
- **処理内容**：
  1. XAMLリソースを読み込み
  2. UIコントロールツリーを構築

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

本画面はデータベースを使用しません。JSONファイルからの読み取り専用です。

## メッセージ仕様

本画面はシステムメッセージを表示しません。チャットデータのみを表示します。

## 例外処理

| 例外状況 | 処理内容 |
|----------|----------|
| chat.jsonファイルが存在しない | FileNotFoundExceptionが発生（開発用サンプルのため） |
| JSONパースエラー | JsonExceptionが発生 |

## 備考

- ChatMessageはrecord型として定義（Sender、Message、Timestamp）
- JsonSerializerでデシリアライズ（PropertyNameCaseInsensitive = true）
- ListBoxItemのPaddingを8pxにカスタマイズ
- SystemControlBackgroundAltHighBrushでテーマ対応の背景色

---

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

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

### 推奨読解順序

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

ChatMessageレコードとChatFileクラスの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Chat.cs | `samples/VirtualizationDemo/Models/Chat.cs` | 行1-23で全体構造を確認 |

**読解のコツ**: ChatMessageはrecord型で、Sender、Message、TimestampをコンストラクタパラメータとしてSSています。ChatFile.Loadはstatic methodでJSONファイルを読み込みます。

#### Step 2: ViewModelを理解する

ChatPageViewModelのデータロードロジックを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ChatPageViewModel.cs | `samples/VirtualizationDemo/ViewModels/ChatPageViewModel.cs` | 行1-17で全体を確認 |

**主要処理フロー**:
- **行10-13**: コンストラクタでChatFile.Loadを呼び出し
- **行12**: Path.Combine("Assets", "chat.json")でファイルパス構築
- **行13**: ObservableCollectionに変換してMessagesにセット

#### Step 3: XAMLレイアウトとItemTemplateを理解する

メッセージバブルのデザインを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ChatPageView.axaml | `samples/VirtualizationDemo/Views/ChatPageView.axaml` | 行1-39で全体を確認 |

**主要処理フロー**:
- **行9**: ListBox ItemsSource="{Binding Messages}"
- **行10-14**: ItemContainerThemeでPadding="8"を設定
- **行17-22**: Borderでメッセージバブルをデザイン（CornerRadius="8"、MaxWidth="280"）
- **行24-26**: 送信者名（DockPanel.Dock="Top"、FontWeight="Bold"）
- **行27-31**: タイムスタンプ（DockPanel.Dock="Bottom"、FontSize="10"）
- **行33**: メッセージ本文（TextWrapping="Wrap"）

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

```
ChatPageView (UserControl)
    │
    ├─ コンストラクタ
    │      └─ InitializeComponent()
    │
    └─ ChatPageViewModel (DataContext)
           │
           ├─ コンストラクタ
           │      │
           │      └─ ChatFile.Load("Assets/chat.json")
           │             │
           │             ├─ File.OpenRead(path)
           │             └─ JsonSerializer.Deserialize<ChatFile>()
           │
           └─ Messages (ObservableCollection<ChatMessage>)
                  │
                  └─ ChatMessage (record)
                         ├─ Sender (string)
                         ├─ Message (string)
                         └─ Timestamp (DateTimeOffset)
```

### データフロー図

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

chat.json       ─▶ ChatFile.Load()          ─▶ ChatFile
                        │
                        ▼
                   JsonSerializer
                        │
                        ▼
                   ChatMessage[]            ─▶ ObservableCollection
                        │
                        ▼
                   ListBox ItemsSource     ─▶ メッセージバブル表示
                        │
                        ▼
                   ItemTemplate            ─▶ バブルUI描画
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ChatPageView.axaml | `samples/VirtualizationDemo/Views/ChatPageView.axaml` | テンプレート | チャットページのUIレイアウト |
| ChatPageView.axaml.cs | `samples/VirtualizationDemo/Views/ChatPageView.axaml.cs` | ソース | コードビハインド（InitializeComponentのみ） |
| ChatPageViewModel.cs | `samples/VirtualizationDemo/ViewModels/ChatPageViewModel.cs` | ソース | チャットデータのロードと保持 |
| Chat.cs | `samples/VirtualizationDemo/Models/Chat.cs` | ソース | ChatFileとChatMessageの定義 |
| chat.json | `samples/VirtualizationDemo/Assets/chat.json` | 設定 | チャットメッセージのサンプルデータ |
| MainWindow.axaml | `samples/VirtualizationDemo/MainWindow.axaml` | テンプレート | HamburgerMenuナビゲーションを提供 |
