# 画面設計書 60-WelcomePanel画面

## 概要

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

### 本画面の処理概要

**業務上の目的・背景**：
本画面は、ウェルカムフローにおける各ステップのコンテンツパネルとして機能します。WMFWelcomeContainerViewControllerの下部コンテナに配置され、ページタイプ（intro、exploration、languages、analytics）に応じた適切なコンテンツViewControllerを埋め込みます。タイトルラベル、スクロール可能なコンテンツエリア、開始ボタン（最終ページのみ）を提供し、ウェルカムフローの各ステップで一貫したUIレイアウトを実現します。また、上下のグラデーションフェードでスクロールの視覚的フィードバックを提供します。

**画面へのアクセス方法**：
本画面はWMFWelcomeContainerViewControllerからEmbed Segueで表示され、ユーザーが直接アクセスするものではありません。

**主要な操作・処理内容**：
1. タイトル表示 - ページタイプに応じたタイトルを表示
2. コンテンツ表示 - containerController（Introduction、Exploration、Languages、Analytics）を埋め込み
3. 開始ボタン - 最終ページ（analytics）のみ表示、タップでウェルカムフロー完了
4. スクロールインジケータ - コンテンツがスクロール可能な場合に自動フラッシュ

**画面遷移**：
- 遷移元：WMFWelcomeContainerViewController（Embed Segue）
- 遷移先：なし（開始ボタンは親ViewControllerに通知）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 63 | 初回起動ウェルカム | 補助機能 | 各ウェルカムステップのパネル |

## 画面種別

オンボーディング（コンテンツパネル）

## URL/ルーティング

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

## 入出力項目

| 項目名 | 項目ID | 入出力 | データ型 | 必須 | 最大長 | バリデーション | 備考 |
|--------|--------|--------|----------|------|--------|----------------|------|
| ページタイプ | welcomePageType | 入力（内部） | WMFWelcomePageType | 必須 | - | - | 表示するページの種類 |

## 表示項目

| 項目名 | 表示内容 | データソース |
|--------|----------|--------------|
| タイトルラベル | ページタイプに応じたタイトル | ローカライズ文字列 |
| コンテンツエリア | 各ページのコンテンツ | containerController |
| 開始ボタン | "Get started" | CommonStrings.getStartedTitle |
| スクロールビュー | グラデーションフェード付き | WMFWelcomePanelGradientScrollView |

### タイトルの内容（ページタイプ別）

| ページタイプ | タイトル | ローカライズキー |
|-------------|---------|-----------------|
| intro | "The free encyclopedia" | welcome-intro-free-encyclopedia-title |
| exploration | "New ways to explore" | welcome-explore-new-ways-title |
| languages | "Search in over 300 languages" | welcome-languages-search-title |
| analytics | "Data & Privacy" | welcome-data-privacy-title |

## イベント仕様

### 1-viewDidLoad

**トリガー**: 画面読み込み完了時

**処理フロー**:
1. iPhone 5向けにタイトルフォントサイズ調整（高さ568以下）
2. embedContainerControllerView()でコンテンツ埋め込み
3. updateUIStrings()でタイトル設定
4. 開始ボタンコンテナの表示/非表示設定（analyticsのみ表示）
5. Dynamic Type設定

### 2-viewDidAppear

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

**処理フロー**:
1. スクロールビューのコンテンツがバウンズより大きいか確認
2. 大きい場合、1.5秒後にスクロールインジケータをフラッシュ

### 3-コンテンツ埋め込み（embedContainerControllerView）

**トリガー**: viewDidLoad時

**処理フロー**:
1. containerControllerを取得（lazyプロパティ）
2. テーマ適用
3. addChild()で子ViewControllerとして追加
4. containerViewにAutoLayout制約で追加
5. didMove(toParent:)で完了通知

### 4-テーマ適用

**トリガー**: apply(theme:)

**処理フロー**:
1. 親クラスのapply(theme:)呼び出し
2. scrollViewにテーマ適用（グラデーション色更新）
3. nextButton.backgroundColorをtheme.colors.linkに設定
4. 子ViewControllerにテーマ伝播

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| welcome-intro-free-encyclopedia-title | タイトル | "The free encyclopedia" | intro時 |
| welcome-explore-new-ways-title | タイトル | "New ways to explore" | exploration時 |
| welcome-languages-search-title | タイトル | "Search in over 300 languages" | languages時 |
| welcome-data-privacy-title | タイトル | "Data & Privacy" | analytics時 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| containerControllerがnil | コンテンツ埋め込みをスキップ |

## 備考

- ThemeableViewControllerを継承
- containerControllerはlazyプロパティで、ページタイプに応じて適切なViewControllerを生成
  - intro: WMFWelcomeIntroductionViewController
  - exploration: WMFWelcomeExplorationViewController
  - languages: WMFWelcomeLanguageTableViewController
  - analytics: WMFWelcomeAnalyticsViewController
- WMFWelcomePanelGradientScrollViewは独自のThemeable対応スクロールビュー
- スクロールビューの上下にグラデーションフェード（fadeHeight: 8pt）を表示
- 開始ボタン（nextButton）はAutoLayoutSafeMultiLineButtonを使用
- nextButtonContainerViewで開始ボタンをラップし、表示/非表示を制御
- iPhone 5向けにタイトルフォントをWMFFont.for(.title1)に縮小
- コンテンツがスクロール可能な場合、1.5秒後にインジケータをフラッシュ

---

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

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

### 推奨読解順序

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

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

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

**読解のコツ**: containerView、scrollView、nextButtonの関係を理解することが重要です。

#### Step 2: コンテンツ生成を理解する

containerControllerのlazyプロパティと各コンテンツViewControllerを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | WMFWelcomePanelViewController.swift | `Wikipedia/Code/WMFWelcomePanelViewController.swift` | containerController lazy var（55-66行目） |

**主要処理フロー**:
- **56-66行目**: ページタイプに応じたViewControllerを返すswitch文
- **58行目**: intro → WMFWelcomeIntroductionViewController
- **60行目**: exploration → WMFWelcomeExplorationViewController
- **62行目**: languages → WMFWelcomeLanguageTableViewController
- **64行目**: analytics → WMFWelcomeAnalyticsViewController

#### Step 3: 初期化処理を理解する

viewDidLoadでの設定とコンテンツ埋め込みを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | WMFWelcomePanelViewController.swift | `Wikipedia/Code/WMFWelcomePanelViewController.swift` | viewDidLoad（28-44行目）、embedContainerControllerView（46-53行目）、updateUIStrings（68-81行目） |

**主要処理フロー**:
- **31-33行目**: iPhone 5向けフォント調整
- **36行目**: コンテンツ埋め込み
- **37行目**: UIStrings更新
- **41行目**: 開始ボタン表示制御（analyticsのみ表示）

#### Step 4: スクロールビューとグラデーションを理解する

WMFWelcomePanelGradientScrollViewの実装を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | WMFWelcomePanelViewController.swift | `Wikipedia/Code/WMFWelcomePanelViewController.swift` | WMFWelcomePanelGradientScrollView class（102-142行目） |

**主要処理フロー**:
- **103-107行目**: Themeable実装でグラデーション色更新
- **110-131行目**: top/bottomGradientViewの初期化
- **133-141行目**: グラデーションフレームの更新

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

```
WMFWelcomePanelViewController
    │
    ├─ viewDidLoad() [28行目]
    │      ├─ フォント調整（iPhone 5）
    │      │
    │      ├─ embedContainerControllerView() [46行目]
    │      │      └─ containerController [55行目] (lazy)
    │      │             ├─ WMFWelcomeIntroductionViewController
    │      │             ├─ WMFWelcomeExplorationViewController
    │      │             ├─ WMFWelcomeLanguageTableViewController
    │      │             └─ WMFWelcomeAnalyticsViewController
    │      │
    │      ├─ updateUIStrings() [68行目]
    │      │      └─ タイトル設定（ページタイプ別）
    │      │
    │      └─ nextButtonContainerView.isHidden設定
    │
    ├─ viewDidAppear() [83行目]
    │      └─ スクロールインジケータフラッシュ
    │
    └─ apply(theme:) [4行目]
           ├─ scrollView.apply(theme:)
           ├─ nextButton.backgroundColor設定
           └─ 子VCへテーマ伝播
```

### データフロー図

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

welcomePageType ────▶ WMFWelcomePanelViewController
                              │
                              ├─▶ containerController生成
                              │         │
                              │         ├─▶ intro: WMFWelcomeIntroductionVC
                              │         ├─▶ exploration: WMFWelcomeExplorationVC
                              │         ├─▶ languages: WMFWelcomeLanguageTableVC
                              │         └─▶ analytics: WMFWelcomeAnalyticsVC
                              │
                              ├─▶ titleLabel表示
                              │
                              └─▶ scrollView（グラデーション付き）
                                        └─ コンテンツ表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| WMFWelcomePanelViewController.swift | `Wikipedia/Code/WMFWelcomePanelViewController.swift` | ソース | メインViewController |
| WMFWelcomeIntroductionViewController.swift | `Wikipedia/Code/WMFWelcomeIntroductionViewController.swift` | ソース | introコンテンツ |
| WMFWelcomeExplorationViewController.swift | `Wikipedia/Code/WMFWelcomeExplorationViewController.swift` | ソース | explorationコンテンツ |
| WMFWelcomeLanguageTableViewController.swift | `Wikipedia/Code/WMFWelcomeLanguageTableViewController.swift` | ソース | languagesコンテンツ |
| WMFWelcomeAnalyticsViewController.swift | `Wikipedia/Code/WMFWelcomeAnalyticsViewController.swift` | ソース | analyticsコンテンツ |
| WMFWelcomeContainerViewController.swift | `Wikipedia/Code/WMFWelcomeContainerViewController.swift` | ソース | 親ViewController |
| ThemeableViewController.swift | `Wikipedia/Code/ThemeableViewController.swift` | ソース | 親クラス |
| Welcome.storyboard | `Wikipedia/Storyboards/` | Storyboard | UI定義 |
