# 画面設計書 58-WelcomeIntroduction画面

## 概要

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

### 本画面の処理概要

**業務上の目的・背景**：
本画面は、ウェルカムフローの最初のページとして表示される導入画面です。Wikipediaの基本的な概念と価値を新規ユーザーに伝え、「自由な百科事典」としてのWikipediaの特徴（協調的な編集、300以上の言語、4000万以上の記事）を紹介します。また、Wikipediaについてさらに詳しく学びたいユーザー向けに「Learn more」ボタンを提供し、アプリの使い始めにふさわしい情報提供を行います。

**画面へのアクセス方法**：
本画面はWMFWelcomePanelViewControllerのcontainerControllerとして生成され、ユーザーが直接アクセスするものではありません。welcomePageType == .introの時に表示されます。

**主要な操作・処理内容**：
1. 説明テキストの閲覧 - Wikipediaの概要説明を読む
2. Learn moreボタン押下 - Wikipediaについての詳細情報をアラートで表示

**画面遷移**：
- 遷移元：WMFWelcomePanelViewController（.introタイプ時）
- 遷移先：なし（アラート表示のみ）

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

## 関連機能

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

## 画面種別

オンボーディング（導入コンテンツ）

## URL/ルーティング

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

## 入出力項目

本画面には入出力項目はありません。

## 表示項目

| 項目名 | 表示内容 | データソース |
|--------|----------|--------------|
| 説明ラベル | Wikipediaの概要説明 | ローカライズ文字列（welcome-intro-free-encyclopedia-description） |
| Learn moreボタン | "Learn more about Wikipedia" | ローカライズ文字列（welcome-intro-free-encyclopedia-more） |

### 説明テキストの内容

"Wikipedia is written collaboratively by volunteers and consists of more than 40 million articles in over 300 languages."

## イベント仕様

### 1-Learn moreボタンタップ

**トリガー**: learnMoreButtonタップ（IBAction: showLearnMoreAlert）

**処理フロー**:
1. UIAlertControllerをalertスタイルで生成
2. タイトル: "About Wikipedia"
3. メッセージ: Wikipediaについての詳細説明
4. "Got it"ボタン（cancel style）でdismiss
5. アラートを表示

### 2-テーマ適用

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

**処理フロー**:
1. 親クラスのapply(theme:)を呼び出し
2. learnMoreButtonのtitleColorをtheme.colors.linkに設定

### 3-フォント更新

**トリガー**: traitCollectionDidChange

**処理フロー**:
1. updateFonts()を呼び出し
2. learnMoreButton.titleLabel.fontをWMFFont.for(.mediumFootnote)に設定

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| welcome-intro-free-encyclopedia-description | 情報 | Wikipediaの概要説明 | 常時表示 |
| welcome-intro-free-encyclopedia-more | - | "Learn more about Wikipedia" | 常時表示 |
| welcome-intro-free-encyclopedia-more-about | アラートタイトル | "About Wikipedia" | Learn moreタップ時 |
| welcome-intro-free-encyclopedia-more-description | アラート本文 | Wikipediaの詳細説明 | Learn moreタップ時 |

### アラート本文の内容

"Wikipedia is a global project to build free encyclopedias in all languages of the world. Virtually anyone with Internet access is free to participate by contributing neutral, cited information."

## 例外処理

本画面には特別な例外処理はありません。

## 備考

- ThemeableViewControllerを継承
- Storyboard上でWMFWelcomePanelViewControllerのcontainerViewに埋め込み
- view.backgroundColor = .clearで透明背景
- Dynamic Type対応（view.wmf_configureSubviewsForDynamicType()）
- learnMoreButtonのフォントはWMFFont.for(.mediumFootnote)
- 「Got it」ボタンはCommonStrings.gotItButtonTitleを使用

---

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

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

### 推奨読解順序

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

IBOutletと画面構成を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | WMFWelcomeIntroductionViewController.swift | `Wikipedia/Code/WMFWelcomeIntroductionViewController.swift` | IBOutlet定義（12-13行目） |

**読解のコツ**: descriptionLabelとlearnMoreButtonの2つのUIコンポーネントのみで構成されるシンプルな画面です。

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

viewDidLoadでのテキスト設定とDynamic Type対応を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | WMFWelcomeIntroductionViewController.swift | `Wikipedia/Code/WMFWelcomeIntroductionViewController.swift` | viewDidLoad（15-25行目） |

**主要処理フロー**:
- **17行目**: 背景を透明に設定
- **19行目**: descriptionLabelにローカライズテキスト設定
- **21行目**: learnMoreButtonにローカライズテキスト設定
- **23行目**: フォント更新
- **24行目**: Dynamic Type設定

#### Step 3: Learn moreアラートを理解する

アラート表示のロジックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | WMFWelcomeIntroductionViewController.swift | `Wikipedia/Code/WMFWelcomeIntroductionViewController.swift` | showLearnMoreAlert（36-43行目） |

**主要処理フロー**:
- **37-40行目**: UIAlertController生成（タイトル、メッセージ設定）
- **41行目**: "Got it"アクション追加
- **42行目**: アラート表示

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

```
WMFWelcomeIntroductionViewController
    │
    ├─ viewDidLoad() [15行目]
    │      ├─ descriptionLabel.text設定
    │      ├─ learnMoreButton.setTitle設定
    │      ├─ updateFonts() [32行目]
    │      └─ wmf_configureSubviewsForDynamicType()
    │
    ├─ apply(theme:) [4行目]
    │      ├─ super.apply(theme:)
    │      └─ learnMoreButton.setTitleColor
    │
    ├─ traitCollectionDidChange() [27行目]
    │      └─ updateFonts() [32行目]
    │
    └─ showLearnMoreAlert() [36行目] ※IBAction
           ├─ UIAlertController生成
           ├─ UIAlertAction追加（Got it）
           └─ present()
```

### データフロー図

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

（なし） ──────────▶ WMFWelcomeIntroductionViewController
                              │
                              ├─▶ descriptionLabel表示
                              │         └─ Wikipediaの概要説明
                              │
                              └─▶ [Learn moreタップ]
                                        │
                                        └─▶ UIAlertController
                                                  └─ 詳細説明アラート表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| WMFWelcomeIntroductionViewController.swift | `Wikipedia/Code/WMFWelcomeIntroductionViewController.swift` | ソース | メインViewController |
| WMFWelcomePanelViewController.swift | `Wikipedia/Code/WMFWelcomePanelViewController.swift` | ソース | 親ViewController |
| ThemeableViewController.swift | `Wikipedia/Code/ThemeableViewController.swift` | ソース | 親クラス |
| Welcome.storyboard | `Wikipedia/Storyboards/` | Storyboard | UI定義 |
| CommonStrings.swift | `Wikipedia/Code/CommonStrings.swift` | ソース | 共通文字列（gotItButtonTitle） |
| WMFFont | `WMFComponents/` | ソース | フォント定義 |
