# 画面設計書 64-DescriptionWelcomePanel画面

## 概要

本ドキュメントは、Wikipedia iOSアプリのDescriptionWelcomePanel画面の設計を記載したものです。この画面は記事説明（Description）追加機能のオンボーディングにおいて、タイトル、説明テキスト、ボタンなどのパネルコンテンツを表示します。

### 本画面の処理概要

DescriptionWelcomePanel画面は、記事説明追加機能の紹介画面において、主要なテキストコンテンツと操作ボタンを提供するパネルとして機能します。

**業務上の目的・背景**：記事説明（Description）は記事の内容を簡潔に要約するもので、Wikidataに保存されます。ユーザーがこの機能を正しく理解し、適切な説明を追加できるよう、記事説明とは何か、どのような形式で書くべきかを分かりやすく説明する必要があります。本画面はその教育コンテンツを表示するためのパネルです。

**画面へのアクセス方法**：DescriptionWelcomeContainerViewControllerの子ViewControllerとして、Storyboard Segue経由で埋め込まれます。

**主要な操作・処理内容**：
1. pageTypeに応じたタイトルの表示（「Article descriptions」または「Keep it short」）
2. DescriptionWelcomeContentsViewControllerを埋め込んで詳細説明を表示
3. フッターに「Contributions are stored on Wikidata...」のプロミステキストを表示
4. 「Start editing」ボタンの表示と押下時のアクションハンドリング
5. スクロール可能なコンテンツが画面を超える場合のスクロールインジケータ表示

**画面遷移**：
- 遷移元：DescriptionWelcomeContainerViewController（Segue）
- 遷移先：記事説明編集画面（Start editingボタン押下時、nextButtonAction経由）

**権限による表示制御**：特になし。すべてのユーザーに対して同一の表示が行われます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 65 | 説明追加ウェルカム | 補助機能 | 説明追加機能の各ステップ |

## 画面種別

オンボーディング / パネル

## URL/ルーティング

該当なし（Storyboard Segue経由で初期化）

## 入出力項目

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

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| titleLabel | 上部 | ページタイトル |
| containerView | 中央 | DescriptionWelcomeContentsVCを埋め込むコンテナ |
| scrollView | 全体 | スクロール可能なコンテンツエリア |
| scrollViewGradientView | スクロールエリア | スクロールグラデーション表示 |
| bottomLabel | 下部 | Wikidataに関するプロミステキスト |
| nextButton | 最下部 | 「Start editing」ボタン |
| nextButtonContainerView | 最下部 | ボタンを格納するコンテナ（explorationページのみ表示） |

## イベント仕様

### 1-viewDidLoad

画面がロードされた際の初期化処理。

- apply(theme:)でテーマを適用
- embedContainerControllerView()でDescriptionWelcomeContentsVCを埋め込み
- updateUIStrings()でローカライズ文字列を設定
- pageTypeが.explorationの場合のみnextButtonContainerViewを表示
- wmf_configureSubviewsForDynamicType()でダイナミックタイプ対応

### 2-embedContainerControllerView

コンテンツViewControllerの埋め込み処理。

- DescriptionWelcomeContentsViewControllerをStoryboardからインスタンス化
- pageTypeを引き渡し
- addChild, wmf_addSubviewWithConstraintsToEdges, didMove(toParent:)の順で埋め込み
- テーマを適用

### 3-updateUIStrings

ローカライズ文字列の設定。

- pageType.introの場合：titleLabel = "Article descriptions"
- pageType.explorationの場合：titleLabel = "Keep it short"
- bottomLabel = CommonStrings.welcomePromiseTitle（Wikidataプロミス）
- nextButton = "Start editing"

### 4-viewDidAppear

画面表示後の処理。

- スクロールコンテンツが画面を超える場合、1.5秒後にスクロールインジケータをフラッシュ表示

### 5-performNextButtonAction

IBAction - Start editingボタン押下時の処理。

- nextButtonAction?(sender)を呼び出し
- 親ViewControllerで設定されたクロージャを実行

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| description-welcome-descriptions-title | 情報 | Article descriptions | pageType == .intro |
| description-welcome-concise-title | 情報 | Keep it short | pageType == .exploration |
| welcome-promise-title | 情報 | Contributions are stored on Wikidata... | 常時 |
| description-welcome-start-editing-button | ボタン | Start editing | pageType == .exploration |

## 例外処理

| 例外条件 | 対処 |
|----------|------|
| Storyboardからの初期化失敗 | fatalErrorまたはnil返却 |

## 備考

- Themeable対応により、テーマ変更時に各UI要素の色が更新される
- ScrollViewGradientViewはスクロール可能領域の終端を視覚的に示す
- ダイナミックタイプに対応しており、システムのテキストサイズ設定に追従

---

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

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

### 推奨読解順序

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

ページタイプとUI要素の関係を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | DescriptionWelcomePanelViewController.swift | `Wikipedia/Code/DescriptionWelcomePanelViewController.swift` | IBOutletの一覧とpageTypeによる分岐 |

**読解のコツ**: pageTypeによってtitleLabelのテキストとnextButtonContainerViewの表示/非表示が切り替わります。

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

ViewControllerの初期化フローを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | DescriptionWelcomePanelViewController.swift | `Wikipedia/Code/DescriptionWelcomePanelViewController.swift` | viewDidLoad, embedContainerControllerView |

**主要処理フロー**:
1. **27-40行目**: viewDidLoad - テーマ適用、コンテナ埋め込み、文字列設定
2. **42-49行目**: embedContainerControllerView - 子VCの埋め込み
3. **51-62行目**: updateUIStrings - ローカライズ文字列の設定
4. **71-73行目**: performNextButtonAction - ボタンアクションの実行

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

埋め込まれる詳細説明コンテンツを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | DescriptionWelcomeContentsViewController.swift | `Wikipedia/Code/DescriptionWelcomeContentsViewController.swift` | 説明テキストの表示 |

**主要処理フロー（Contents）**:
- **15-19行目**: viewDidLoad - 文字列設定とテーマ適用
- **22-29行目**: updateUIStrings - pageTypeに応じた説明テキスト

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

```
DescriptionWelcomeContainerViewController
    |
    +-- prepare(for:sender:) [Segue]
           |
           +-- DescriptionWelcomePanelViewController
                  |
                  +-- viewDidLoad()
                  |      +-- apply(theme:)
                  |      +-- embedContainerControllerView()
                  |      |      +-- DescriptionWelcomeContentsViewController
                  |      +-- updateUIStrings()
                  |
                  +-- viewDidAppear()
                  |      +-- wmf_flashVerticalScrollIndicatorAfterDelay()
                  |
                  +-- performNextButtonAction() [ボタン押下]
                         +-- nextButtonAction?(sender)
```

### データフロー図

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

pageType            --> DescriptionWelcomePanelVC          --> UI表示
theme                      |
nextButtonAction           +-- embedContainerControllerView()
                           |      |
                           |      v
                           |   DescriptionWelcomeContentsVC
                           |      |
                           |      v
                           |   descriptionLabel表示
                           |
                           +-- updateUIStrings()
                           |      |
                           |      v
                           |   titleLabel, bottomLabel表示
                           |
                           v
                    nextButton押下 --> nextButtonAction実行
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| DescriptionWelcomePanelViewController.swift | `Wikipedia/Code/DescriptionWelcomePanelViewController.swift` | ソース | パネルコンテンツViewController |
| DescriptionWelcomeContentsViewController.swift | `Wikipedia/Code/DescriptionWelcomeContentsViewController.swift` | ソース | 説明テキストViewController |
| DescriptionWelcomeContainerViewController.swift | `Wikipedia/Code/DescriptionWelcomeContainerViewController.swift` | ソース | 親コンテナViewController |
| ScrollViewGradientView.swift | `Wikipedia/Code/ScrollViewGradientView.swift` | ソース | スクロールグラデーションビュー |
| AutoLayoutSafeMultiLineButton.swift | `Wikipedia/Code/AutoLayoutSafeMultiLineButton.swift` | ソース | 複数行対応ボタン |
| DescriptionWelcome.storyboard | `Wikipedia/Storyboards/` | Storyboard | 画面レイアウト定義 |
| Localizable.strings | `Wikipedia/Localizable/` | 文字列 | ローカライズ文字列 |
