# 画面設計書 57-WelcomeContainer画面

## 概要

本ドキュメントはWikipedia iOSアプリにおける「WelcomeContainer画面」（ウェルカムコンテナ画面）の設計仕様を定義するものです。

### 本画面の処理概要

**業務上の目的・背景**：
本画面は、ウェルカムフローにおける各ページのコンテナとして機能します。上部にアニメーションビュー、下部にコンテンツパネルを配置する2分割レイアウトを提供し、各ウェルカムページ（Introduction、Exploration、Languages、Analytics）の統一的な見た目と動作を実現します。デバイスサイズに応じたレイアウト調整やフェードインアニメーションを制御し、オンボーディング体験の品質を担保します。

**画面へのアクセス方法**：
本画面はWMFWelcomePageViewControllerのpageControllersとして生成され、ユーザーが直接アクセスするものではありません。

**主要な操作・処理内容**：
1. コンテンツ表示 - 上部にアニメーション、下部にパネルコンテンツを表示
2. フェードインアニメーション - intro以外のページで表示時にフェードインアップ効果
3. 次へボタン - 子ViewController（WMFWelcomePanelViewController）からの次へ要求を親に伝播
4. デバイス調整 - iPhone 5等の小さいデバイスでレイアウト調整

**画面遷移**：
- 遷移元：WMFWelcomePageViewControllerのページとして表示
- 遷移先：なし（ナビゲーションは親ViewControllerに委譲）

**権限による表示制御**：
親画面と同様、初回起動時のみ表示されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 63 | 初回起動ウェルカム | 補助機能 | ウェルカム画面のコンテナ |

## 画面種別

オンボーディング（ページコンテナ）

## URL/ルーティング

本画面は子ViewControllerとして表示されるため、URLルーティングは使用しません。
- Storyboard: Welcome.storyboard
- ViewController: WMFWelcomeContainerViewController

## 入出力項目

| 項目名 | 項目ID | 入出力 | データ型 | 必須 | 最大長 | バリデーション | 備考 |
|--------|--------|--------|----------|------|--------|----------------|------|
| ページタイプ | welcomePageType | 入力（内部） | WMFWelcomePageType | 必須 | - | - | 表示するページの種類 |
| ナビゲーションデリゲート | welcomeNavigationDelegate | 入力（内部） | WMFWelcomeNavigationDelegate? | 任意 | - | - | 次へ要求の通知先 |

## 表示項目

| 項目名 | 表示内容 | データソース |
|--------|----------|--------------|
| 上部コンテナ | アニメーションビュー | WMFWelcomeAnimationViewController |
| 下部コンテナ | パネルコンテンツ | WMFWelcomePanelViewController |

## イベント仕様

### 1-画面表示準備（viewWillAppear）

**トリガー**: 画面表示直前

**処理フロー**:
1. shouldFadeInAndUp()でフェードイン必要性を判定
2. intro以外かつ未アニメーションの場合、wmf_zeroLayerOpacity()で透明化

### 2-画面表示完了（viewDidAppear）

**トリガー**: 画面表示完了時

**処理フロー**:
1. shouldFadeInAndUp()でフェードイン必要性を判定
2. 条件を満たす場合、wmf_fadeInAndUpWithDuration()でフェードインアップ
3. hasAlreadyFadedInAndUpフラグを設定
4. UIAccessibility.post()でスクリーン変更通知

### 3-制約更新（updateViewConstraints）

**トリガー**: AutoLayout制約更新時

**処理フロー**:
1. needsDeviceAdjustmentsフラグを確認
2. iPhone 5（高さ568以下）の場合、アニメーションサイズ縮小、スペーシング調整
3. phoneデバイスの場合、下部配置制約を追加
4. needsDeviceAdjustmentsをfalseに設定

### 4-次へボタン（IBAction）

**トリガー**: 子ViewControllerからの次へ要求

**処理フロー**:
1. welcomeNavigationDelegate?.showNextWelcomePage(self)を呼び出し
2. 親ViewControllerがナビゲーションを処理

### 5-Segue準備（prepare(for:sender:)）

**トリガー**: Storyboard Segue実行時

**処理フロー**:
1. 遷移先がWMFWelcomePanelViewControllerの場合、welcomePageTypeとthemeを設定
2. 遷移先がWMFWelcomeAnimationViewControllerの場合、welcomePageTypeとthemeを設定

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

本画面単体ではデータベース更新を行いません。

## メッセージ仕様

本画面自体にはメッセージ表示機能はありません。

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| welcomeNavigationDelegateがnil | next()アクションは何も実行しない |

## 備考

- ThemeableViewControllerを継承
- Storyboard上で2つのコンテナビュー（上部・下部）を配置
- 上部にはWMFWelcomeAnimationViewController、下部にはWMFWelcomePanelViewControllerをEmbed Segueで配置
- overallContainerStackViewでレイアウトを管理
- overallContainerStackViewCenterYConstraintのpriorityは999（required未満）
- iPhoneの場合、bottom配置制約を追加して下部配置を優先
- iPhone 5向けにtopContainerViewHeightConstraintを30pt縮小
- フェードインアニメーションはintro以外のページで実行
- hasAlreadyFadedInAndUpフラグで重複アニメーションを防止
- UIAccessibility対応でスクリーン変更を通知

---

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

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

### 推奨読解順序

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

画面のプロパティとIBOutletを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | WMFWelcomeContainerViewController.swift | `Wikipedia/Code/WMFWelcomeContainerViewController.swift` | IBOutlet定義（16-20行目）、welcomePageType/welcomeNavigationDelegate（22-23行目） |

**読解のコツ**: Storyboard上のコンテナビューとの接続を理解するため、IBOutletの名前と役割を把握します。

#### Step 2: ライフサイクルとアニメーションを理解する

フェードインアニメーションの制御ロジックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | WMFWelcomeContainerViewController.swift | `Wikipedia/Code/WMFWelcomeContainerViewController.swift` | viewWillAppear（28-33行目）、viewDidAppear（35-42行目）、shouldFadeInAndUp（44-55行目） |

**主要処理フロー**:
- **28-33行目**: フェードイン必要時に透明化
- **35-42行目**: フェードインアップアニメーション実行、VoiceOver通知
- **44-55行目**: ページタイプに応じたフェードイン要否判定（introはfalse）

#### Step 3: デバイス調整を理解する

iPhone 5等の小さいデバイス向けのレイアウト調整を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | WMFWelcomeContainerViewController.swift | `Wikipedia/Code/WMFWelcomeContainerViewController.swift` | updateViewConstraints（57-73行目）、reduceTopAnimationsSizes（75-77行目）、useBottomAlignmentIfPhone（79-84行目） |

**主要処理フロー**:
- **60-66行目**: iPhone 5向けサイズ調整
- **67-68行目**: 通常デバイスでのスペーシング設定
- **79-84行目**: iPhoneでのbottom配置制約追加

#### Step 4: Segue準備を理解する

子ViewControllerへのデータ受け渡しを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | WMFWelcomeContainerViewController.swift | `Wikipedia/Code/WMFWelcomeContainerViewController.swift` | prepare(for:sender:)（86-94行目） |

**主要処理フロー**:
- **87-90行目**: WMFWelcomePanelViewControllerへのデータ設定
- **90-93行目**: WMFWelcomeAnimationViewControllerへのデータ設定

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

```
WMFWelcomeContainerViewController
    │
    ├─ viewWillAppear() [28行目]
    │      └─ shouldFadeInAndUp() [44行目]
    │             └─ 条件判定: intro以外 && 未アニメーション
    │                    └─ wmf_zeroLayerOpacity()
    │
    ├─ viewDidAppear() [35行目]
    │      ├─ shouldFadeInAndUp() [44行目]
    │      │      └─ wmf_fadeInAndUpWithDuration()
    │      │
    │      └─ UIAccessibility.post() [41行目]
    │
    ├─ updateViewConstraints() [57行目]
    │      ├─ needsDeviceAdjustments確認
    │      │
    │      ├─ [iPhone 5の場合]
    │      │      ├─ reduceTopAnimationsSizes() [75行目]
    │      │      └─ bottomContainerViewHeightConstraint調整
    │      │
    │      └─ useBottomAlignmentIfPhone() [79行目]
    │
    ├─ prepare(for:sender:) [86行目]
    │      ├─ WMFWelcomePanelViewController設定
    │      └─ WMFWelcomeAnimationViewController設定
    │
    └─ next() [96行目] ※IBAction
           └─ welcomeNavigationDelegate?.showNextWelcomePage()
```

### データフロー図

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

welcomePageType ─────▶ WMFWelcomeContainerViewController
                              │
welcomeNavigationDelegate     ├─▶ prepare(for:sender:)
                              │         │
                              │         ├─▶ WMFWelcomePanelViewController
                              │         │         └─ パネルコンテンツ表示
                              │         │
                              │         └─▶ WMFWelcomeAnimationViewController
                              │                   └─ アニメーション表示
                              │
                              └─▶ next() IBAction
                                        │
                                        └─▶ welcomeNavigationDelegate
                                                  └─ showNextWelcomePage()
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| WMFWelcomeContainerViewController.swift | `Wikipedia/Code/WMFWelcomeContainerViewController.swift` | ソース | メインViewController |
| WMFWelcomePanelViewController.swift | `Wikipedia/Code/WMFWelcomePanelViewController.swift` | ソース | 下部パネルコンテンツ |
| WMFWelcomeAnimationViewControllers.swift | `Wikipedia/Code/WMFWelcomeAnimationViewControllers.swift` | ソース | 上部アニメーション |
| WMFWelcomePageViewController.swift | `Wikipedia/Code/WMFWelcomePageViewController.swift` | ソース | 親ViewController |
| Welcome.storyboard | `Wikipedia/Storyboards/` | Storyboard | UI定義 |
| ThemeableViewController.swift | `Wikipedia/Code/ThemeableViewController.swift` | ソース | 親クラス |
