# 画面設計書 27-InsertMediaImagePositionSettings画面

## 概要

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

### 本画面の処理概要

InsertMediaImagePositionSettings画面は、Wikipedia記事に挿入する画像の表示位置（Right/Left/Center）を選択するための画面である。InsertMediaAdvancedSettings画面から遷移し、ラジオボタン形式のUIで位置を選択する。

**業務上の目的・背景**：Wikipediaの記事では、画像の位置が読みやすさに影響する。右寄せ、左寄せ、中央寄せなどの位置を適切に設定することで、記事のレイアウトを最適化できる。本画面は、これらの位置オプションを直感的に選択できるUIを提供する。

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

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

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 28 | メディア挿入 | 補助機能 | 画像位置設定（左寄せ、右寄せなど） |

## 画面種別

選択画面（単一選択）

## URL/ルーティング

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

## 入出力項目

### 入力項目

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

### 出力項目（メソッド）

| 項目名 | 種別 | データ型 | 説明 |
|--------|------|----------|------|
| selectedImagePosition(isTextWrappingEnabled:) | 出力 | ImagePosition | 選択された位置（テキスト折り返し無効時はnone） |

## 表示項目

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

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

### 選択オプション

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

**注意**：テキスト折り返しが無効の場合、selectedImagePositionは.noneを返す

## イベント仕様

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

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

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

### 2-戻る操作

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

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- ImagePositionはInsertMediaSettings.Advanced.ImagePositionのtypealias
- 選択状態はselectedIndexPathで管理
- viewModelsはlazyプロパティで初期化時にRightが選択済み状態
- テキスト折り返しが無効の場合、この画面自体が無効化される（親画面で制御）

---

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

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

### 推奨読解順序

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

ImagePosition enumの定義を理解する。

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

**読解のコツ**: ImagePositionの各caseがdisplayTitleとrawValueを持つことを理解する。

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

InsertMediaImagePositionSettingsViewControllerの構造を理解する。

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

**主要処理フロー**:
1. **行7**: ImagePositionのtypealias
2. **行9-17**: selectedImagePosition(isTextWrappingEnabled:) - テキスト折り返しに応じた位置を返す
3. **行19-28**: ViewModel構造体 - imagePosition, title, isSelected
4. **行31-36**: viewModels - 3つの選択肢（Right初期選択）

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

選択UIの実装を理解する。

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

**主要処理フロー**:
- **行93-106**: cellForRowAt - チェックマークの設定、selectedIndexPathの更新
- **行110-118**: willSelectRowAt - 前回選択のチェックマーク削除
- **行121-125**: didSelectRowAt - 新しい選択にチェックマーク追加

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

```
InsertMediaImagePositionSettingsViewController
    │
    ├─ UITableView
    │      │
    │      ├─ Row 0: Right (デフォルト選択)
    │      ├─ Row 1: Left
    │      └─ Row 2: Center
    │
    ├─ selectedIndexPath: IndexPath?
    │      └─ 選択状態の管理
    │
    └─ selectedImagePosition(isTextWrappingEnabled:)
           │
           ├─ isTextWrappingEnabled = true → 選択された位置
           └─ isTextWrappingEnabled = false → .none
```

### データフロー図

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

viewModels
    │
    ├─▶ Right (isSelected: true)
    ├─▶ Left (isSelected: false)
    └─▶ Center (isSelected: false)

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

              │
              ▼
        selectedImagePosition(isTextWrappingEnabled:)
              │
              └─▶ ImagePosition (right/left/center/none)
```

### 関連ファイル一覧

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