# 画面設計書 29-InsertMediaImageTypeSettings画面

## 概要

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

### 本画面の処理概要

InsertMediaImageTypeSettings画面は、Wikipedia記事に挿入する画像のフレームタイプ（Thumbnail/Frameless/Frame/Basic）を選択するための画面である。InsertMediaAdvancedSettings画面から遷移し、ラジオボタン形式のUIでタイプを選択する。

**業務上の目的・背景**：Wikipediaの画像挿入では、画像の表示形式（サムネイル、フレーム付き、フレームレス、基本）を選択できる。ほとんどの場合はサムネイル形式が推奨されるが、特定のケースでは他の形式が適切な場合もある。本画面は、これらのタイプオプションを選択し、フッターでサムネイル推奨の説明を表示する。

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

**主要な操作・処理内容**：
1. タイプオプション（Thumbnail/Frameless/Frame/Basic）から1つを選択
2. チェックマークで選択状態を表示
3. 戻る操作で選択を確定

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

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

## 関連機能

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

## 画面種別

選択画面（単一選択）

## URL/ルーティング

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

## 入出力項目

### 入力項目

特になし（初期選択はThumbnailがデフォルト）

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

| 項目名 | 種別 | データ型 | 説明 |
|--------|------|----------|------|
| selectedImageType | 出力 | ImageType | 選択されたタイプ |

## 表示項目

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

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

### 選択オプション

| 項目名 | 表示内容 | アクセサリ | デフォルト |
|--------|----------|----------|----------|
| Thumbnail | "Thumbnail" | チェックマーク（選択時） | 選択済み |
| Frameless | "Frameless" | チェックマーク（選択時） | - |
| Frame | "Frame" | チェックマーク（選択時） | - |
| Basic | "Basic" | チェックマーク（選択時） | - |

### フッター

| 項目名 | 表示内容 | 備考 |
|--------|----------|------|
| 説明文 | "You can set how the media item appears on the page. This should be the thumbnail format to be consistent with other pages in almost all cases." | InsertMediaLabelTableFooterView |

## イベント仕様

### 1-オプション選択

タイプオプションをタップして選択する。

**処理フロー**：
1. tableView(_:willSelectRowAt:)が呼び出される
2. 前回選択されていたセルのチェックマークを削除
3. tableView(_:didSelectRowAt:)が呼び出される
4. 選択されたセルにチェックマークを追加
5. selectedIndexPathを更新

### 2-戻る操作

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

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

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

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

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

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

## メッセージ仕様

| ID | 種別 | メッセージ内容 | 表示条件 |
|----|------|----------------|----------|
| MSG-01 | 説明 | "You can set how the media item appears on the page..." | 常時表示（フッター） |

## 例外処理

| 例外条件 | 処理内容 |
|----------|----------|
| なし | - |

## 備考

- ImageTypeはInsertMediaSettings.Advanced.ImageTypeのtypealias
- ImagePositionも同じファイルでtypealiasとして定義（再利用の可能性）
- 選択状態はselectedIndexPathで管理
- viewModelsはlazyプロパティで初期化時にThumbnailが選択済み状態
- autolayoutTableViewFooterプロパティでフッターのサイズを自動計算
- InsertMediaLabelTableFooterViewはテーマ対応のカスタムフッタービュー

---

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

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

### 推奨読解順序

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

ImageType enumの定義を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | InsertMediaSettingsViewController.swift | `Wikipedia/Code/InsertMediaSettingsViewController.swift` | 行72-93: ImageType enum |

**読解のコツ**: ImageTypeの各caseがdisplayTitleとrawValue（thumb/frameless/frame/basic）を持つことを理解する。rawValueはWikitextに使用される。

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

InsertMediaImageTypeSettingsViewControllerの構造を理解する。

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

**主要処理フロー**:
1. **行7-8**: ImageTypeとImagePositionのtypealias
2. **行10-15**: selectedImageTypeプロパティ - 選択されたタイプを返す
3. **行17-27**: ViewModel構造体 - imageType, title, isSelected
4. **行29-35**: viewModels - 4つの選択肢（Thumbnail初期選択）
5. **行44**: autolayoutTableViewFooter - フッタービューの設定

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

選択UIとフッターの実装を理解する。

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

**主要処理フロー**:
- **行110-122**: cellForRowAt - チェックマークの設定、selectedIndexPathの更新
- **行128-136**: willSelectRowAt - 前回選択のチェックマーク削除
- **行139-143**: didSelectRowAt - 新しい選択にチェックマーク追加

#### Step 4: フッタービューの自動レイアウトを理解する

autolayoutTableViewFooterプロパティの実装を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | InsertMediaImageTypeSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaImageTypeSettingsViewController.swift` | 行60-73 |

**主要処理フロー**:
- **行60-62**: getterはtableView.tableFooterViewを返す
- **行63-72**: setterでフッターのサイズを自動計算し設定

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

```
InsertMediaImageTypeSettingsViewController
    │
    ├─ UITableView
    │      │
    │      ├─ Row 0: Thumbnail (デフォルト選択)
    │      ├─ Row 1: Frameless
    │      ├─ Row 2: Frame
    │      ├─ Row 3: Basic
    │      │
    │      └─ Footer: InsertMediaLabelTableFooterView
    │             └─ 説明文（サムネイル推奨）
    │
    ├─ selectedIndexPath: IndexPath?
    │      └─ 選択状態の管理
    │
    └─ selectedImageType
           └─ viewModels[selectedIndexPath.row].imageType
```

### データフロー図

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

viewModels
    │
    ├─▶ Thumbnail (isSelected: true)
    ├─▶ Frameless (isSelected: false)
    ├─▶ Frame (isSelected: false)
    └─▶ Basic (isSelected: false)

              │
              ▼
        UITableView表示
              │
ユーザータップ │
              ▼
        willSelectRowAt
              │
              └─▶ 前回選択のチェックマーク削除
              │
              ▼
        didSelectRowAt
              │
              ├─▶ 新しい選択にチェックマーク追加
              └─▶ selectedIndexPath更新

              │
              ▼
        selectedImageType
              │
              └─▶ ImageType (thumbnail/frameless/frame/basic)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| InsertMediaImageTypeSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaImageTypeSettingsViewController.swift` | ソース | 本画面のコントローラ |
| InsertMediaLabelTableFooterView.swift | `Wikipedia/Code/Advanced Settings/InsertMediaLabelTableFooterView.swift` | ソース | フッタービュー |
| InsertMediaAdvancedSettingsViewController.swift | `Wikipedia/Code/Advanced Settings/InsertMediaAdvancedSettingsViewController.swift` | ソース | 親画面 |
| InsertMediaSettingsViewController.swift | `Wikipedia/Code/InsertMediaSettingsViewController.swift` | ソース | ImageType定義 |
| Theme.swift | `Wikipedia/Code/Theme.swift` | ソース | テーマ定義 |
