# 画面設計書 63-DescriptionWelcomeContainer画面

## 概要

本ドキュメントは、Wikipedia iOSアプリのDescriptionWelcomeContainer画面の設計を記載したものです。この画面は記事説明（Description）追加機能のオンボーディングフローにおいて、パネルコンテンツと画像を格納するコンテナとして機能します。

### 本画面の処理概要

DescriptionWelcomeContainer画面は、記事説明追加機能の紹介画面のコンテナとして機能し、上部に画像ビュー、下部にパネルコンテンツを配置するレイアウトを提供します。

**業務上の目的・背景**：Wikipediaでは記事に短い説明（Description）を追加する機能があり、これはWikidataに保存されます。この機能を初めて使用するユーザーに対して、記事説明とは何か、どのように書くべきかを教育するオンボーディングフローが必要です。本画面はそのオンボーディングの各ステップを表示するためのコンテナとして設計されています。

**画面へのアクセス方法**：記事説明の編集を初めて行う際に、DescriptionWelcomePageViewControllerからページング形式で表示されます。または記事編集画面から直接アクセスすることもあります。

**主要な操作・処理内容**：
1. pageTypeに応じて適切なコンテンツ（intro/exploration）を表示
2. 上部コンテナにDescriptionWelcomeImageViewControllerを埋め込み
3. 下部コンテナにDescriptionWelcomePanelViewControllerを埋め込み
4. フェードイン・スライドアップアニメーションによる画面表示（explorationページ時）
5. iPhoneでは下部固定レイアウト、iPadでは中央配置

**画面遷移**：
- 遷移元：DescriptionWelcomePageViewController、記事編集画面
- 遷移先：次のウェルカムページ（ページング）、記事説明編集画面（Start editing押下）

**権限による表示制御**：特になし。記事説明編集機能を使用するすべてのユーザーに対して同一の表示が行われます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 65 | 説明追加ウェルカム | 主機能 | 説明追加機能の紹介 |

## 画面種別

オンボーディング / コンテナ

## URL/ルーティング

該当なし（StoryboardからSegue経由でインスタンス化）

## 入出力項目

| 項目名 | 型 | 入力/出力 | 必須 | 説明 |
|--------|-----|----------|------|------|
| pageType | DescriptionWelcomePageType | 入力 | 必須 | 表示するページタイプ（intro/exploration） |
| welcomeNavigationDelegate | DescriptionWelcomeNavigationDelegate? | 入力 | 任意 | ナビゲーションデリゲート |
| nextButtonAction | ((UIButton) -> Void)? | 入力 | 任意 | 次へボタンのアクションハンドラ |
| theme | Theme | 入力 | 必須 | 適用するテーマ |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| topContainerView | 上部 | 画像を表示するコンテナビュー |
| bottomContainerView | 下部 | パネルコンテンツを表示するコンテナビュー |
| overallContainerStackView | 全体 | 上下のコンテナを格納するStackView |

## イベント仕様

### 1-viewWillAppear

画面表示前の処理。

- shouldFadeInAndUp()がtrueかつ未アニメーションの場合、透明度を0に設定
- introページでは即座に表示、explorationページではフェードイン準備

### 2-viewDidAppear

画面表示後の処理。

- shouldFadeInAndUp()がtrueかつ未アニメーションの場合、フェードイン・スライドアップアニメーションを実行（0.4秒、0.1秒ディレイ）
- hasAlreadyFadedInAndUpフラグをtrueに設定して再アニメーションを防止

### 3-updateViewConstraints

制約更新時の処理。

- needsDeviceAdjustmentsがtrueの場合、useBottomAlignmentIfPhone()を実行
- iPhoneでは下部固定レイアウト、iPadでは中央配置

### 4-prepare(for:sender:)

Segue実行前の処理。

- DescriptionWelcomePanelViewControllerへのSegue時、nextButtonAction、pageType、themeを引き渡し
- DescriptionWelcomeImageViewControllerへのSegue時、pageTypeを引き渡し

### 5-next(withSender:)

IBAction - 次へボタン押下時の処理。

- welcomeNavigationDelegate?.showNextWelcomePage(self)を呼び出し
- デリゲート経由で次のページへ遷移

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

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

この画面ではデータベース操作は発生しません。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| - | - | - | この画面自体にはメッセージなし（子ViewControllerで表示） |

## 例外処理

| 例外条件 | 対処 |
|----------|------|
| overallContainerStackViewCenterYConstraintの優先度が1000 | assertでクラッシュ（開発時に検出） |

## 備考

- Storyboardから初期化される設計（wmf_viewControllerFromDescriptionWelcomeStoryboard()）
- overallContainerStackViewCenterYConstraintの優先度は999に設定し、iPhoneの下部固定制約と競合しないようにする必要がある
- pageTypeは.introと.explorationの2種類
- .introでは即座に表示、.explorationではフェードイン・スライドアップアニメーション

---

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

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

### 推奨読解順序

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

ページタイプの定義と画面構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | DescriptionWelcomePageViewController.swift | `Wikipedia/Code/DescriptionWelcomePageViewController.swift` | DescriptionWelcomePageType enumの定義 |
| 1-2 | DescriptionWelcomeContainerViewController.swift | `Wikipedia/Code/DescriptionWelcomeContainerViewController.swift` | IBOutletの構造（topContainerView, bottomContainerView） |

**読解のコツ**: DescriptionWelcomePageTypeは.introと.explorationの2種類で、表示内容とアニメーション有無を制御します。

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

ViewControllerのライフサイクルとSegueの流れを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | DescriptionWelcomeContainerViewController.swift | `Wikipedia/Code/DescriptionWelcomeContainerViewController.swift` | viewWillAppear, viewDidAppear, prepare(for:sender:) |

**主要処理フロー**:
1. **21-26行目**: viewWillAppear - フェードイン準備
2. **28-34行目**: viewDidAppear - アニメーション実行
3. **36-43行目**: shouldFadeInAndUp - アニメーション要否判定
4. **60-68行目**: prepare(for:sender:) - 子VCへのデータ引き渡し

#### Step 3: 子ViewControllerを理解する

埋め込まれる子ViewControllerの役割を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | DescriptionWelcomePanelViewController.swift | `Wikipedia/Code/DescriptionWelcomePanelViewController.swift` | パネルコンテンツの表示 |
| 3-2 | DescriptionWelcomeImageViewController.swift | `Wikipedia/Code/DescriptionWelcomeImageViewController.swift` | イメージの表示 |
| 3-3 | DescriptionWelcomeContentsViewController.swift | `Wikipedia/Code/DescriptionWelcomeContentsViewController.swift` | 説明テキストの表示 |

**主要処理フロー（Panel）**:
- **27-40行目**: viewDidLoad - UIの初期化、コンテナコントローラーの埋め込み
- **51-62行目**: updateUIStrings - pageTypeに応じたローカライズ文字列の設定

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

```
DescriptionWelcomePageViewController
    |
    +-- containerControllerForWelcomePageType(:)
           |
           +-- DescriptionWelcomeContainerViewController
                  |
                  +-- prepare(for:sender:) [Segue]
                         |
                         +-- DescriptionWelcomePanelViewController
                         |      +-- DescriptionWelcomeContentsViewController
                         |
                         +-- DescriptionWelcomeImageViewController
```

### データフロー図

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

pageType            --> DescriptionWelcomeContainerVC      --> 画面表示
theme                      |
nextButtonAction           +-- Segue
                           |
                           v
                    DescriptionWelcomePanelVC
                           |
                           +-- DescriptionWelcomeContentsVC
                           |
                           v
                    テキスト・ボタン表示
                           |
                           v
                    DescriptionWelcomeImageVC --> 画像表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| DescriptionWelcomeContainerViewController.swift | `Wikipedia/Code/DescriptionWelcomeContainerViewController.swift` | ソース | コンテナViewController |
| DescriptionWelcomePanelViewController.swift | `Wikipedia/Code/DescriptionWelcomePanelViewController.swift` | ソース | パネルコンテンツViewController |
| DescriptionWelcomeImageViewController.swift | `Wikipedia/Code/DescriptionWelcomeImageViewController.swift` | ソース | 画像表示ViewController |
| DescriptionWelcomeContentsViewController.swift | `Wikipedia/Code/DescriptionWelcomeContentsViewController.swift` | ソース | 説明テキストViewController |
| DescriptionWelcomePageViewController.swift | `Wikipedia/Code/DescriptionWelcomePageViewController.swift` | ソース | ページングを制御する親ViewController |
| DescriptionWelcome.storyboard | `Wikipedia/Storyboards/` | Storyboard | 画面レイアウト定義 |
