# 画面設計書 78-FormattedText

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるFormattedText（フォーマット済みテキスト描画）ページの画面設計を定義するものです。このページは、Avaloniaフレームワークが提供するFormattedTextクラスを使用して、部分的な書式設定（フォントサイズ、太字、イタリック、色変更）を適用したリッチテキスト描画を視覚的にデモンストレーションします。

### 本画面の処理概要

**業務上の目的・背景**：アプリケーション開発において、テキストの一部にのみ異なる書式を適用したい場合（ハイライト表示、重要テキストの強調等）、FormattedTextクラスを使用することで柔軟なテキストレンダリングが可能になります。本画面は、FormattedTextの主要機能（SetFontSize、SetFontWeight、SetForegroundBrush、SetFontStyle）と、テキストからジオメトリを生成する機能（BuildGeometry、BuildHighlightGeometry）を開発者が学習できるようにすることを目的としています。

**画面へのアクセス方法**：RenderDemoアプリケーションを起動後、左側のHamburgerMenuから「FormattedText」タブを選択することでアクセスできます。

**主要な操作・処理内容**：
1. FormattedTextオブジェクトを作成し、部分的な書式を設定
2. 左側にDrawTextでFormattedTextを直接描画
3. 右側にBuildGeometry()で生成したジオメトリを描画
4. BuildHighlightGeometry()でテキストのアウトラインを描画

**画面遷移**：
- 遷移元：RenderDemo MainWindow（HamburgerMenuより選択）
- 遷移先：なし（デモページのため画面遷移機能は持たない）

**権限による表示制御**：本画面はデモ用途のため、権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 81 | FormattedText | 主機能 | FormattedText描画のデモ。テキストレイアウトと測定 |

## 画面種別

デモ / リッチテキストレンダリング表示

## URL/ルーティング

本アプリケーションはデスクトップアプリケーションのため、URLルーティングは使用しません。
HamburgerMenuのタブ選択により画面切り替えが行われます。

## 入出力項目

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

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|-----|------|
| なし | - | - | 表示専用画面 |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| FormattedText描画 | DrawText | 左側、書式設定されたテキスト |
| Geometryテキスト | DrawGeometry | 右側、グラデーション塗りつぶし |
| ハイライトジオメトリ | DrawGeometry | 右側、テキストアウトライン |

## イベント仕様

### 1-フレーム描画時

Renderメソッドでテキストの描画処理を行います。

**処理フロー**:
1. Render(DrawingContext)が呼ばれる
2. FormattedTextオブジェクトを作成
   - テキスト："Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor"
   - カルチャー：en-us
   - フォント：Verdana
   - サイズ：32
   - 色：黒
   - MaxTextWidth=300、MaxTextHeight=240
3. 部分的な書式を設定
   - SetFontSize(36, 0, 5) - 最初の5文字を大きく
   - SetFontWeight(Bold, 6, 11) - 6文字目から11文字分を太字
   - SetForegroundBrush(gradient, 6, 11) - 同範囲にグラデーション
   - SetFontStyle(Italic, 28, 28) - 28文字目から28文字分をイタリック
4. DrawText(formattedText, (10, 0))で左側に描画
5. BuildGeometry()でジオメトリを生成し右側に描画
6. BuildHighlightGeometry()でアウトラインを描画

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

本画面はデモ表示専用のため、データベース操作は行いません。

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | データベース操作なし |

## メッセージ仕様

本画面はデモ表示専用のため、メッセージ表示機能はありません。

| メッセージID | 種別 | 内容 | 表示条件 |
|-------------|------|------|---------|
| なし | - | - | - |

## 例外処理

| 例外 | 対処 |
|------|------|
| レンダリングエラー | Avaloniaフレームワークの標準エラーハンドリングに委譲 |

## 備考

- FormattedTextのMaxTextWidth/MaxTextHeightを設定すると、テキストが自動的に折り返される
- SetFontSizeの値はポイント単位で指定し、(96.0/72.0)でピクセルに変換
- LinearGradientBrushはOrangeからTealへのグラデーション
- BuildGeometry()はテキストの塗りつぶし領域をPathGeometryとして返す
- BuildHighlightGeometry()はテキストの境界ボックスをPathGeometryとして返す
- ImmutablePenを使用してアウトラインを描画（線幅2）

---

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

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

### 推奨読解順序

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

FormattedTextクラスの構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | FormattedTextPage.axaml.cs | `samples/RenderDemo/Pages/FormattedTextPage.axaml.cs` | FormattedTextの生成と書式設定を確認 |

**読解のコツ**: FormattedTextはコンストラクタでテキスト、カルチャー、フロー方向、タイプフェイス、フォントサイズ、ブラシを指定します。その後、Setメソッドで部分的な書式を追加します。

#### Step 2: XAMLを確認する

シンプルなXAML構造を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | FormattedTextPage.axaml | `samples/RenderDemo/Pages/FormattedTextPage.axaml` | 空のUserControlであることを確認 |

**主要処理フロー**:
- XAMLはほぼ空で、描画はすべてコードビハインドのRenderメソッドで行われる

#### Step 3: Renderメソッドを理解する

描画処理の詳細を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | FormattedTextPage.axaml.cs | `samples/RenderDemo/Pages/FormattedTextPage.axaml.cs` | Renderメソッドの処理フローを確認 |

**主要処理フロー**:
- **行22-24**: テスト用文字列の定義
- **行27-33**: FormattedTextオブジェクトの作成
- **行39**: SetFontSizeで先頭5文字を拡大（36pt）
- **行42**: SetFontWeightで太字設定
- **行44-50**: LinearGradientBrush作成（Orange→Teal）
- **行53**: SetForegroundBrushでグラデーション適用
- **行56**: SetFontStyleでイタリック設定
- **行58**: DrawTextで左側に描画
- **行60**: BuildGeometryでジオメトリ生成
- **行62**: DrawGeometryでグラデーション塗りつぶし
- **行64**: BuildHighlightGeometryでアウトライン生成
- **行66**: DrawGeometryでアウトライン描画

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

```
MainWindow
    |
    +-- HamburgerMenu (controls:HamburgerMenu)
           |
           +-- TabItem[Header="FormattedText"]
                  |
                  +-- FormattedTextPage (UserControl)
                         |
                         +-- Render(DrawingContext)
                                |
                                +-- new FormattedText(...)
                                |      |
                                |      +-- SetFontSize(36, 0, 5)
                                |      +-- SetFontWeight(Bold, 6, 11)
                                |      +-- SetForegroundBrush(gradient, 6, 11)
                                |      +-- SetFontStyle(Italic, 28, 28)
                                |
                                +-- context.DrawText(formattedText)
                                |
                                +-- formattedText.BuildGeometry()
                                |      |
                                |      +-- context.DrawGeometry(gradient)
                                |
                                +-- formattedText.BuildHighlightGeometry()
                                       |
                                       +-- context.DrawGeometry(pen)
```

### データフロー図

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

テキスト文字列      --> FormattedText        --> 書式付きテキスト
+ 書式設定              コンストラクタ
                        + Setメソッド

FormattedText       --> DrawText             --> テキスト描画（左側）
                    --> BuildGeometry        --> ジオメトリ描画（右側）
                    --> BuildHighlightGeometry --> アウトライン描画

LinearGradientBrush --> 塗りつぶし           --> Orange→Tealグラデ
(Orange→Teal)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| FormattedTextPage.axaml | `samples/RenderDemo/Pages/FormattedTextPage.axaml` | XAML | UIレイアウト（空のUserControl） |
| FormattedTextPage.axaml.cs | `samples/RenderDemo/Pages/FormattedTextPage.axaml.cs` | C# | FormattedText描画の実装 |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | XAML | ホスト画面（HamburgerMenuでページを管理） |
