# 画面設計書 21-EditingWelcome画面

## 概要

本ドキュメントは、Wikipedia iOSアプリにおける編集機能のウェルカム画面（EditingWelcomeViewController）の設計仕様を記載したものである。

### 本画面の処理概要

EditingWelcome画面は、ユーザーが初めてWikipedia記事を編集しようとした際に表示される導入画面である。Wikipedia編集における重要な4つの原則をページング形式で紹介し、ユーザーが編集に必要な基本的な知識を習得できるよう設計されている。

**業務上の目的・背景**：Wikipediaの編集は特定のガイドラインに従う必要があり、初めて編集するユーザーに対してこれらの原則を事前に伝えることで、品質の高い編集を促進し、コミュニティとのトラブルを防止する。特に「大胆に編集する」「公平な視点で書く」「信頼できる情報源を引用する」「知識を自由に」という4つの重要な原則を伝えることが目的である。

**画面へのアクセス方法**：Article画面（記事詳細画面）で編集ボタンをタップした際、ユーザーがまだ編集機能のウェルカムを見ていない場合にモーダル表示される。初回表示後は次回以降スキップされる。

**主要な操作・処理内容**：
1. ページをスワイプして4つのウェルカムパネルを閲覧する
2. 各パネルでアニメーションを確認しながら編集原則を学ぶ
3. 最終パネルで「Get Started」ボタンをタップして編集を開始する
4. 任意のタイミングで画面を閉じて編集フローに進む

**画面遷移**：
- 遷移元：Article画面（編集ボタンタップ時）
- 遷移先：EditNotices画面（編集通知画面）、または直接編集画面

**権限による表示制御**：特になし。ログイン有無に関わらず、初回編集時に表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 64 | 編集ウェルカム | 主機能 | 編集機能の紹介画面として4つの原則をページング形式で表示 |

## 画面種別

オンボーディング / ウェルカム画面（ページビューコントローラベース）

## URL/ルーティング

iOSネイティブアプリのため、URLベースのルーティングは存在しない。ViewControllerの直接インスタンス化によりモーダル表示される。

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| theme | 入力 | Theme | 必須 | アプリのテーマ設定 |
| completion | 入力 | Closure | 必須 | 画面終了時に実行されるコールバック |

## 表示項目

### パネル1: Be Bold（大胆に編集する）

| 項目名 | 表示内容 | 備考 |
|--------|----------|------|
| タイトル | "Your voice is important" | WMFLocalizedString使用 |
| サブタイトル | "Be bold but not reckless in updating articles..." | 編集の大胆さと慎重さのバランスを説明 |
| アクションラベル | "Welcome Promise Title" | CommonStrings使用 |
| アニメーション | 記事編集のイメージアニメーション | editAnimatedImageView, plusesAnimatedImageView |

### パネル2: Impartial Tone（公平な視点で書く）

| 項目名 | 表示内容 | 備考 |
|--------|----------|------|
| タイトル | "Write in an impartial tone" | WMFLocalizedString使用 |
| サブタイトル | "We strive for articles to be written in an impartial tone..." | 公平な記述の重要性を説明 |
| アニメーション | 天秤のバランスアニメーション | scaleBarAnimatedImageView等 |

### パネル3: Cite Reliable Sources（信頼できる情報源を引用）

| 項目名 | 表示内容 | 備考 |
|--------|----------|------|
| タイトル | "Cite reliable sources" | WMFLocalizedString使用 |
| サブタイトル | "All content must be verifiable..." | 引用の重要性を説明 |
| アニメーション | ハイライト表示アニメーション | highlightAnimatedImageView, plusesAnimatedImageView |

### パネル4: Set Knowledge Free（知識を自由に）

| 項目名 | 表示内容 | 備考 |
|--------|----------|------|
| タイトル | "Set knowledge free" | WMFLocalizedString使用 |
| サブタイトル | "In order to give everyone access to the world's knowledge..." | 参加の重要性を説明 |
| アクションボタン | "Get Started" | CommonStrings.getStartedTitle |
| アニメーション | 記事が広がるアニメーション | 複数のarticleAnimatedImageViews |

## イベント仕様

### 1-ページスワイプ

ユーザーが左右にスワイプすることで、4つのウェルカムパネル間を移動する。UIPageViewControllerの標準的なスワイプジェスチャーによりページ遷移が行われる。

**処理フロー**：
1. ユーザーがスワイプジェスチャーを実行
2. WelcomePageViewControllerがページ遷移を処理
3. 次のパネルのアニメーションが開始される

### 2-Get Startedボタンタップ

最終パネル（パネル4）の「Get Started」ボタンをタップすると、ウェルカム画面が閉じられる。

**処理フロー**：
1. ユーザーが「Get Started」ボタンをタップ
2. viewWillDisappearが呼び出される
3. completionクロージャが実行される
4. 画面がdismissされ、編集フローが継続

### 3-画面クローズ

ユーザーが画面を閉じる操作（下スワイプまたはナビゲーションバーの閉じるボタン）を行った場合も、completionクロージャが実行される。

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

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

この画面ではデータベースへの直接的な更新は行われない。ただし、ウェルカム画面の表示状態はUserDefaultsまたはアプリの設定で管理される可能性がある。

| 操作（イベント） | 対象 | 操作種別 | 概要 |
|----------------|------|---------|------|
| 画面表示完了 | UserDefaults | UPDATE | ウェルカム表示済みフラグの更新（呼び出し元で管理） |

## メッセージ仕様

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

## 例外処理

| 例外条件 | 処理内容 |
|----------|----------|
| 画像リソースの読み込み失敗 | アニメーションがスキップされ、テキストのみ表示 |
| メモリ不足 | 標準のiOSメモリ警告処理に従う |

## 備考

- WelcomeViewControllerを継承しており、ページングやテーマ適用の共通処理を再利用している
- 各パネルのアニメーションはUIViewPropertyAnimatorを使用して実装されており、スムーズなアニメーション効果を実現している
- ローカライズ対応しており、WMFLocalizedStringを使用して多言語対応している

---

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

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

### 推奨読解順序

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

EditingWelcome画面で使用されるデータソースプロトコルとアニメーション用のViewを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | WelcomeContainerViewControllerDataSource | `Wikipedia/Code/WelcomeContainerViewControllerDataSource.swift` | ウェルカムパネルのデータソースプロトコルを定義 |
| 1-2 | WelcomeAnimatedImageView | `Wikipedia/Code/WelcomeAnimatedImageView.swift` | アニメーション用画像ビューのプロパティと初期化 |

**読解のコツ**: WelcomeContainerViewControllerDataSourceプロトコルがどのようなプロパティを要求しているかを確認することで、各DataSourceクラスの実装意図を理解できる。

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

EditingWelcomeViewControllerの初期化と構成を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | EditingWelcomeViewController.swift | `Wikipedia/Code/EditingWelcomeViewController.swift` | 本画面のメインクラス。4つのDataSourceの初期化を確認 |

**主要処理フロー**:
1. **行4-8**: 4つのDataSource（BeBold, ImpartialTone, CiteReliableSources, SetKnowledgeFree）をプロパティとして保持
2. **行10-16**: initで4つのWelcomeContainerViewControllerを生成し、親クラスに渡す
3. **行26-52**: BeBoldDataSourceでアニメーションとパネルの設定を定義

#### Step 3: 親クラスの処理を理解する

WelcomeViewControllerの共通処理を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | WelcomeViewController.swift | `Wikipedia/Code/WelcomeViewController.swift` | ページビューコントローラの設定、completion処理 |

**主要処理フロー**:
- **行7-11**: initでviewControllersを受け取り、ページビューコントローラを構成
- **行23-26**: viewWillDisappearでcompletionを呼び出し

#### Step 4: 各DataSourceの実装を理解する

4つのウェルカムパネルのデータソース実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | EditingWelcomeViewController.swift | `Wikipedia/Code/EditingWelcomeViewController.swift` | 行26-207: 4つのDataSourceクラスの実装 |

**主要処理フロー**:
- **行26-53**: BeBoldDataSource - 大胆な編集を促すパネル
- **行57-96**: ImpartialToneDataSource - 公平な視点のパネル
- **行100-131**: CiteReliableSourcesDataSource - 信頼できる情報源のパネル
- **行135-207**: SetKnowledgeFreeDataSource - 知識を自由にのパネル

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

```
EditingWelcomeViewController
    │
    ├─ WelcomeViewController (継承)
    │      │
    │      └─ WelcomePageViewController (子VC)
    │             │
    │             └─ WelcomeContainerViewController x 4
    │                    │
    │                    ├─ WelcomeAnimationView
    │                    │      └─ WelcomeAnimatedImageView
    │                    │
    │                    └─ WelcomePanelViewController
    │                           └─ WelcomePanelLabelContentViewController
    │
    ├─ BeBoldDataSource
    ├─ ImpartialToneDataSource
    ├─ CiteReliableSourcesDataSource
    └─ SetKnowledgeFreeDataSource
```

### データフロー図

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

Theme ─────────────────▶ WelcomeViewController ─────────────▶ テーマ適用済み画面
                              │
                              ├─▶ WelcomePageViewController
                              │        │
                              │        └─▶ ページングUI構築
                              │
completion ────────────────▶ viewWillDisappear ─────────────▶ 編集フロー継続
                                     │
                                     └─▶ completion()呼び出し
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| EditingWelcomeViewController.swift | `Wikipedia/Code/EditingWelcomeViewController.swift` | ソース | 本画面のメインクラス、4つのDataSourceを定義 |
| WelcomeViewController.swift | `Wikipedia/Code/WelcomeViewController.swift` | ソース | 親クラス、ページング処理とテーマ適用 |
| WelcomePageViewController.swift | `Wikipedia/Code/WMFWelcomePageViewController.swift` | ソース | ページビューコントローラの実装 |
| WelcomeContainerViewController.swift | `Wikipedia/Code/WMFWelcomeContainerViewController.swift` | ソース | 各パネルのコンテナ |
| WelcomeAnimationView.swift | `Wikipedia/Code/WelcomeAnimationView.swift` | ソース | アニメーション表示用ビュー |
| WelcomeAnimatedImageView.swift | `Wikipedia/Code/WelcomeAnimatedImageView.swift` | ソース | アニメーション画像ビュー |
| WelcomePanelViewController.swift | `Wikipedia/Code/WMFWelcomePanelViewController.swift` | ソース | パネルUIの構成 |
| Theme.swift | `Wikipedia/Code/Theme.swift` | ソース | テーマ定義 |
| CommonStrings.swift | `WMF Framework/CommonStrings.swift` | ソース | 共通文字列定義 |
