# 画面設計書 88-TextSizeChangeExample画面

## 概要

本ドキュメントは、Wikipedia iOSアプリにおけるTextSizeChangeExample画面の設計仕様を定義するものである。この画面は、テキストサイズ設定のプレビューを表示するコンポーネントである。

### 本画面の処理概要

TextSizeChangeExample画面は、外観設定（AppearanceSettings）画面でテキストサイズスライダーを操作した際のプレビューを表示するコンポーネントである。スライダーの変更に連動してサンプルテキストのフォントサイズがリアルタイムに変化し、ユーザーが設定値の効果を視覚的に確認できる。

**業務上の目的・背景**：記事閲覧時のテキストサイズはユーザビリティに大きく影響する設定項目である。特に視力に課題のあるユーザーや、デバイスの画面サイズに応じて最適なサイズを選びたいユーザーにとって重要である。本画面は、テキストサイズの変更がどのような見た目になるかをリアルタイムでプレビューし、ユーザーが最適な設定を選択するのを支援する。

**画面へのアクセス方法**：AppearanceSettings画面の子コンポーネントとして埋め込まれ、テキストサイズ調整セクションの一部として表示される。単独でナビゲーション遷移することはない。

**主要な操作・処理内容**：
1. テキストサイズ変更通知の受信
2. 通知に含まれる倍率に基づくフォントサイズの動的更新
3. サンプルテキストの表示

**画面遷移**：
- 遷移元：AppearanceSettings画面（親コンテナ）
- 遷移先：なし

**権限による表示制御**：特になし。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 47 | 外観設定 | 補助機能 | テキストサイズ設定のプレビュー |
| 62 | テーマ適用 | 関連機能 | テーマに応じた表示 |

## 画面種別

プレビュー（埋め込みコンポーネント）

## URL/ルーティング

iOSネイティブアプリのため、URLルーティングなし。Storyboard/XIBからインスタンス化され、AppearanceSettings画面に埋め込まれる。

## 入出力項目

| 項目名 | 型 | 入力/出力 | 必須 | 説明 |
|--------|------|---------|------|------|
| theme | Theme | 入力 | 必須 | 現在のテーマ設定 |

## 表示項目

| 項目名 | 説明 | 表示形式 |
|--------|------|----------|
| プレビューテキスト | テキストサイズ変更の説明とプレビュー用サンプル文 | UILabel（複数行） |

## イベント仕様

### 1-画面読み込み

viewDidLoad時の初期設定処理。

1. `viewDidLoad()`が呼び出される
2. `apply(theme:)`でテーマを適用
3. `textSizeChangeExampleLabel.text`にローカライズ文字列を設定
4. `FontSizeSliderViewController.WMFArticleFontSizeUpdatedNotification`の監視を登録

### 2-テキストサイズ変更通知受信

FontSizeSliderViewControllerからの通知を受信した際の処理。

1. `textSizeChanged(notification:)`が呼び出される
2. notification.userInfoから`WMFArticleFontSizeMultiplierKey`の値を取得
3. NSNumberからCGFloatに変換
4. ベースフォントサイズ（15pt）に倍率を適用して新しいフォントサイズを計算
5. `textSizeChangeExampleLabel.font`を更新

### 3-画面破棄時のクリーンアップ

deinit時の後処理。

1. `deinit`が呼び出される
2. `NotificationCenter.default.removeObserver(self)`で監視を解除
3. `NSObject.cancelPreviousPerformRequests(withTarget:)`で遅延実行をキャンセル

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

本画面では直接的なデータベース操作は行わない。テキストサイズ設定の永続化はFontSizeSliderViewControllerまたは親画面で管理される。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|----------|
| appearance-settings-text-sizing-example-text | サンプル | Drag the slider to change the article text sizing. Utilize your system text size to resize other text areas in the app. | 常時表示 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| userInfo取得失敗 | 処理をスキップ（nil判定でガード） |
| multiplier型変換失敗 | 処理をスキップ（as? NSNumberでガード） |

## 備考

- FontSizeSliderViewController.WMFArticleFontSizeUpdatedNotificationでフォントサイズ変更を通知
- FontSizeSliderViewController.WMFArticleFontSizeMultiplierKeyで倍率値を取得
- ベースフォントサイズは15ptで、倍率（100%基準）を適用してサイズを計算
- Themeableプロトコルに準拠し、テーマ変更に対応
- cancelPreviousPerformRequestsでdeinit時の安全性を確保

---

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

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

### 推奨読解順序

#### Step 1: 基本構造を理解する

ViewControllerの構成とプロパティを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TextSizeChangeExampleViewController.swift | `Wikipedia/Code/TextSizeChangeExampleViewController.swift` | プロパティ、IBOutlet |

**読解のコツ**: シンプルなViewControllerで、主な役割は通知監視とフォントサイズ更新。

**主要処理フロー**:
- **5行目**: `theme`プロパティ
- **7行目**: `textSizeChangeExampleLabel` IBOutlet

#### Step 2: ライフサイクルを理解する

viewDidLoadでの初期化と通知登録を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | TextSizeChangeExampleViewController.swift | `Wikipedia/Code/TextSizeChangeExampleViewController.swift` | viewDidLoad、deinit |

**主要処理フロー**:
1. **9-15行目**: `viewDidLoad()` - テーマ適用、テキスト設定、通知登録
2. **17-20行目**: `deinit` - 通知解除、遅延実行キャンセル

#### Step 3: 通知ハンドリングを理解する

テキストサイズ変更通知の処理を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | TextSizeChangeExampleViewController.swift | `Wikipedia/Code/TextSizeChangeExampleViewController.swift` | textSizeChanged |

**主要処理フロー**:
- **22-26行目**: `textSizeChanged(notification:)` - 倍率取得とフォントサイズ計算
- **24行目**: `15*CGFloat(truncating: multiplier)/100` - ベースサイズ15pt、倍率100%基準

#### Step 4: テーマ対応を理解する

Themeableプロトコルの実装を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | TextSizeChangeExampleViewController.swift | `Wikipedia/Code/TextSizeChangeExampleViewController.swift` | Themeable extension |

**主要処理フロー**:
- **30-41行目**: `apply(theme:)` - 背景色とテキスト色の設定

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

```
TextSizeChangeExampleViewController
    │
    ├─ viewDidLoad()
    │      ├─ apply(theme:)
    │      ├─ textSizeChangeExampleLabel.text設定
    │      └─ NotificationCenter.addObserver()
    │             └─ WMFArticleFontSizeUpdatedNotification監視
    │
    ├─ textSizeChanged(notification:)
    │      ├─ userInfo取得
    │      ├─ WMFArticleFontSizeMultiplierKey取得
    │      └─ font.withSize(15 * multiplier / 100)
    │
    ├─ deinit
    │      ├─ NotificationCenter.removeObserver(self)
    │      └─ cancelPreviousPerformRequests(withTarget:)
    │
    └─ apply(theme:)
           ├─ view.backgroundColor設定
           └─ textSizeChangeExampleLabel.textColor設定
```

### データフロー図

```
[FontSizeSlider]          [NotificationCenter]        [プレビュー]

スライダー操作 ────────▶ WMFArticleFontSizeUpdated ──▶ textSizeChanged()
                         通知発行                          │
                              │                            │
                              ▼                            ▼
                    userInfo:                      font.withSize()
                    - multiplier: 100〜200等          │
                                                       ▼
                                               ラベルフォント更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TextSizeChangeExampleViewController.swift | `Wikipedia/Code/TextSizeChangeExampleViewController.swift` | ソース | メインViewController |
| FontSizeSliderViewController.swift | `Wikipedia/Code/FontSizeSliderViewController.swift` | ソース | テキストサイズスライダー（通知発行元） |
| AppearanceSettingsViewController.swift | `Wikipedia/Code/AppearanceSettingsViewController.swift` | ソース | 親画面 |
