# 画面設計書 28-InsertMediaImageSizeSettings画面

## 概要

本ドキュメントは、Wikipedia iOSアプリにおける画像サイズ設定画面（InsertMediaImageSizeSettingsViewController）の設計仕様を記載したものである。

### 本画面の処理概要

InsertMediaImageSizeSettings画面は、Wikipedia記事に挿入する画像のサイズ（デフォルトまたはカスタム）を設定するための画面である。InsertMediaAdvancedSettings画面から遷移し、カスタムサイズを選択した場合は幅と高さをピクセル単位で入力できる。

**業務上の目的・背景**：Wikipediaの記事では、画像サイズが記事のレイアウトと読みやすさに影響する。デフォルトサイズ（220x124px）で十分な場合と、特定のサイズが必要な場合がある。本画面は、これらのサイズオプションを柔軟に設定できるUIを提供する。

**画面へのアクセス方法**：InsertMediaAdvancedSettings画面で「Image size」行をタップ

**主要な操作・処理内容**：
1. カスタムサイズスイッチをON/OFFで切り替え
2. カスタムサイズON時に幅と高さを入力
3. 戻る操作で設定を確定

**画面遷移**：
- 遷移元：InsertMediaAdvancedSettings画面
- 遷移先：なし（戻り遷移のみ）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 28 | メディア挿入 | 補助機能 | 画像サイズ設定（サムネイル、フルサイズなど） |

## 画面種別

設定画面（入力フォーム）

## URL/ルーティング

iOSネイティブアプリのため、URLベースのルーティングは存在しない。

## 入出力項目

### 入力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| width | 入力 | Int | カスタム時必須 | 画像の幅（ピクセル） |
| height | 入力 | Int | カスタム時必須 | 画像の高さ（ピクセル） |

### 出力項目（プロパティ）

| 項目名 | 種別 | データ型 | 説明 |
|--------|------|----------|------|
| selectedImageSize | 出力 | ImageSize | 選択されたサイズ（defaultまたはcustom(width:height:)） |

## 表示項目

### ナビゲーションバー

| 項目名 | 表示内容 | 備考 |
|--------|----------|------|
| タイトル | "Image size" | ImageSize.displayTitle |
| 左ボタン | Back | 標準の戻るボタン |

### 設定項目

| 行 | 項目名 | 表示内容 | アクセサリ | 備考 |
|----|--------|----------|----------|------|
| 0 | Custom | "Custom" | UISwitch | デフォルトOFF |
| 1 | Width | "Width" + 入力フィールド + "px" | TextField | カスタムOFF時は無効 |
| 2 | Height | "Height" + 入力フィールド + "px" | TextField | カスタムOFF時は無効 |

### デフォルト値

| 項目 | デフォルト値 | 備考 |
|------|-------------|------|
| デフォルトサイズ | 220x124px | ImageSize.defaultWidth, defaultHeight |
| 単位名 | "px" | ImageSize.unitName |

## イベント仕様

### 1-カスタムスイッチ変更

カスタムサイズのON/OFFを切り替える。

**処理フロー**：
1. customSwitch.addTargetで登録されたreloadDataが呼び出される
2. tableView.reloadData()でテーブル全体を更新
3. ONの場合、Width/Heightセルが有効化され入力可能に
4. OFFの場合、Width/Heightセルが無効化

### 2-幅/高さ入力

カスタムサイズの幅または高さを入力する。

**処理フロー**：
1. InsertMediaCustomImageSizeSettingTableViewCellのテキストフィールドに入力
2. textFieldsGroupedByMeasure辞書に参照を保持
3. selectedImageSizeプロパティ取得時にテキストフィールドから値を読み取り

### 3-戻る操作

設定を確定して親画面に戻る。

**処理フロー**：
1. ナビゲーションの戻るボタンまたはスワイプジェスチャー
2. 親画面（InsertMediaAdvancedSettings）がviewWillAppearでtableViewをリロード
3. selectedImageSizeで設定値を取得

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

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

この画面ではローカルデータベースへの更新は行われない。

| 操作（イベント） | 対象 | 操作種別 | 概要 |
|----------------|------|---------|------|
| なし | - | - | - |

## メッセージ仕様

| ID | 種別 | メッセージ内容 | 表示条件 |
|----|------|----------------|----------|
| - | - | この画面では特別なメッセージは表示されない | - |

## 例外処理

| 例外条件 | 処理内容 |
|----------|----------|
| 数値以外の入力 | Int変換失敗時はdefaultサイズを返す |
| 空欄入力 | Int変換失敗時はdefaultサイズを返す |

## 備考

- ImageSizeはInsertMediaSettings.Advanced.ImageSizeのtypealias
- Measureはprivateなenumでwidthとheightのケースを持つ
- textFieldsGroupedByMeasure辞書で幅/高さフィールドへの参照を管理
- InsertMediaCustomImageSizeSettingTableViewCellはカスタムセル（nibファイルあり）
- カスタムスイッチがOFFの場合、selectedImageSizeは.defaultを返す

---

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

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

### 推奨読解順序

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

ImageSize enumとViewModel構造体を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | InsertMediaSettingsViewController.swift | `Wikipedia/Code/InsertMediaSettingsViewController.swift` | 行96-130: ImageSize enum |
| 1-2 | InsertMediaImageSizeSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaImageSizeSettingsViewController.swift` | 行27-57: ViewModel構造体群 |

**読解のコツ**: ImageSizeが.defaultと.custom(width:height:)の2種類であること、Measure enumがwidthとheightの2種類であることを理解する。

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

InsertMediaImageSizeSettingsViewControllerの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | InsertMediaImageSizeSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaImageSizeSettingsViewController.swift` | 全体 |

**主要処理フロー**:
1. **行10**: ImageSizeのtypealias
2. **行12-23**: selectedImageSizeプロパティ - スイッチ状態とテキストフィールドから値を構築
3. **行25**: textFieldsGroupedByMeasure辞書
4. **行59-63**: customSwitchの設定とreloadDataアクション
5. **行69-75**: viewModels - 3つの行を定義

#### Step 3: テーブルビュー実装を理解する

2種類のセルの使い分けを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | InsertMediaImageSizeSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaImageSizeSettingsViewController.swift` | 行123-156 |

**主要処理フロー**:
- **行132-141**: ImageSizeViewModel用 - 標準セルにUISwitchを配置
- **行142-151**: MeasureViewModel用 - カスタムセル、customSwitch.isOnで有効/無効切替

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

```
InsertMediaImageSizeSettingsViewController
    │
    ├─ UITableView
    │      │
    │      ├─ Row 0: Custom (UISwitch)
    │      │      └─ customSwitch
    │      │             └─ reloadData()
    │      │
    │      ├─ Row 1: Width (InsertMediaCustomImageSizeSettingTableViewCell)
    │      │      └─ textField → textFieldsGroupedByMeasure[.width]
    │      │
    │      └─ Row 2: Height (InsertMediaCustomImageSizeSettingTableViewCell)
    │             └─ textField → textFieldsGroupedByMeasure[.height]
    │
    └─ selectedImageSize
           │
           ├─ customSwitch.isOn = false → .default
           └─ customSwitch.isOn = true → .custom(width, height)
```

### データフロー図

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

customSwitch.isOn
    │
    ├─▶ false ─────────────────────────────────▶ .default (220x124px)
    │
    └─▶ true
           │
           ├─▶ textFieldsGroupedByMeasure[.width]
           │        └─▶ Int(text) → width
           │
           └─▶ textFieldsGroupedByMeasure[.height]
                    └─▶ Int(text) → height
           │
           └─────────────────────────────────▶ .custom(width, height)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| InsertMediaImageSizeSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaImageSizeSettingsViewController.swift` | ソース | 本画面のコントローラ |
| InsertMediaCustomImageSizeSettingTableViewCell.swift | `Wikipedia/Code/Advanced Settings/InsertMediaCustomImageSizeSettingTableViewCell.swift` | ソース | カスタムセル |
| InsertMediaCustomImageSizeSettingTableViewCell.xib | `Wikipedia/Code/Advanced Settings/InsertMediaCustomImageSizeSettingTableViewCell.xib` | XIB | カスタムセルのレイアウト |
| InsertMediaAdvancedSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaAdvancedSettingsViewController.swift` | ソース | 親画面 |
| InsertMediaSettingsViewController.swift | `Wikipedia/Code/InsertMediaSettingsViewController.swift` | ソース | ImageSize定義 |
| Theme.swift | `Wikipedia/Code/Theme.swift` | ソース | テーマ定義 |
