# 画面設計書 69-DescriptionHelp画面

## 概要

本ドキュメントは、Wikipedia iOSアプリのDescriptionHelp画面の設計を記載したものです。この画面は記事説明（Description）追加機能のヘルプ画面として、記事説明の書き方やWikidataに関する情報を提供します。

### 本画面の処理概要

DescriptionHelp画面は、記事説明追加機能を使用する際のヘルプ情報を提供する画面です。記事説明とは何か、良い説明の書き方の例、Wikidataについての情報を表示します。

**業務上の目的・背景**：記事説明（Description）はWikidataに保存され、検索結果や記事リストで記事の内容を簡潔に示すために使用されます。ユーザーが適切な記事説明を書けるよう、具体的なガイドラインと例を提供することで、品質の高い説明文の作成を促進します。

**画面へのアクセス方法**：記事説明編集画面からヘルプボタンをタップして遷移します。モーダルで表示されます。

**主要な操作・処理内容**：
1. 記事説明についての説明（About）セクションの表示
2. 説明の書き方のヒント（Tips for creating descriptions）の表示
3. 良い説明の具体例（Mona Lisa, Mount Everest）の表示
4. Wikidataについての詳細情報（More information）の表示
5. 「About Wikidata」リンクでWikidataの紹介ページへ遷移
6. 「Wikidata guide for writing descriptions」リンクでガイドラインページへ遷移
7. 「Done」ボタンで画面を閉じる

**画面遷移**：
- 遷移元：記事説明編集画面
- 遷移先：Wikidataページ（外部WebView）、元の編集画面（Done押下）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 59 | ヘルプ表示 | 主機能 | 説明追加機能のヘルプ |

## 画面種別

ヘルプ / 情報表示

## URL/ルーティング

| 名称 | URL |
|------|-----|
| About Wikidata | https://m.wikidata.org/wiki/Wikidata:Introduction |
| Wikidata Guide | https://m.wikidata.org/wiki/Help:Description#Guidelines_for_descriptions_in_English |

## 入出力項目

| 項目名 | 型 | 入力/出力 | 必須 | 説明 |
|--------|-----|----------|------|------|
| theme | Theme | 入力 | 必須 | 適用するテーマ |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| helpScrollView | 全体 | スクロール可能なコンテンツエリア |
| aboutTitleLabel | 上部 | 「About」見出し |
| aboutDescriptionLabel | aboutTitle下 | 記事説明についての説明文 |
| tipsTitleLabel | 中央上 | 「Tips for creating descriptions」見出し |
| tipsDescriptionLabel | tipsTitle下 | 説明文の書き方のヒント |
| tipsForExampleLabel | 例の前 | 「For example:」ラベル |
| exampleOneTitleLabel | 例1 | 「painting by Leonardo Da Vinci」 |
| exampleOneDescriptionLabel | 例1下 | Mona Lisaの説明例 |
| exampleTwoTitleLabel | 例2 | 「Earth's highest mountain」 |
| exampleTwoDescriptionLabel | 例2下 | Mount Everestの説明例 |
| moreInfoTitleLabel | 下部 | 「More information」見出し |
| moreInfoDescriptionLabel | moreInfoTitle下 | Wikidataについての説明 |
| aboutWikidataLabel | 最下部 | 「About Wikidata」リンク |
| wikidataGuideLabel | 最下部 | 「Wikidata guide for writing descriptions」リンク |
| exampleBackgroundViews | 例エリア | 例の背景ビュー |
| dividerViews | 各セクション間 | 区切り線 |
| imageViews | 各所 | 装飾アイコン |

## イベント仕様

### 1-viewDidLoad

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

- 各ラベルにローカライズ文字列を設定
- updateFonts()でダイナミックタイプに対応したフォント設定

### 2-viewWillAppear

画面表示前の処理。

- configureNavigationBar()でナビゲーションバーを設定
- 「Done」ボタンを右側に配置

### 3-configureNavigationBar

ナビゲーションバーの設定。

- タイトルを「Article description help」に設定
- 「Done」ボタンをtrailing位置に配置
- WMFNavigationBarTitleConfig, WMFNavigationBarCloseButtonConfigを使用

### 4-closeButtonPushed

Doneボタン押下時の処理。

- 画面をdismiss

### 5-showAboutWikidataPage

「About Wikidata」タップ時の処理。

- https://m.wikidata.org/wiki/Wikidata:Introduction へ遷移

### 6-showWikidataGuidePage

「Wikidata guide」タップ時の処理。

- https://m.wikidata.org/wiki/Help:Description#Guidelines_for_descriptions_in_English へ遷移

### 7-traitCollectionDidChange

Dynamic Type変更時の処理。

- updateFonts()でフォントサイズを更新

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| description-help-title | タイトル | Article description help | 常時 |
| description-help-about-title | 見出し | About | 常時 |
| description-help-about-description | 説明 | Article descriptions summarize... | 常時 |
| description-help-tips-title | 見出し | Tips for creating descriptions | 常時 |
| description-help-tips-description | 説明 | Descriptions should ideally fit on one line... | 常時 |
| description-help-tips-for-example | ラベル | For example: | 常時 |
| description-help-tips-example-title-one | 例 | painting by Leonardo Da Vinci | 常時 |
| description-help-tips-example-description-one | 説明 | article description for an article about the Mona Lisa | 常時 |
| description-help-tips-example-title-two | 例 | Earth's highest mountain | 常時 |
| description-help-tips-example-description-two | 説明 | article description for an article about Mount Everest | 常時 |
| description-help-more-info-title | 見出し | More information | 常時 |
| description-help-more-info-description | 説明 | Descriptions are stored and maintained on Wikidata... | 常時 |
| description-help-about-wikidata | リンク | About Wikidata | 常時 |
| description-help-wikidata-guide | リンク | Wikidata guide for writing descriptions | 常時 |

## 例外処理

| 例外条件 | 対処 |
|----------|------|
| URLが無効 | navigate(to:)でエラーハンドリング |

## 備考

- ThemeableViewControllerを継承
- WMFNavigationBarConfiguringプロトコルを実装
- すべてのラベルにダイナミックタイプ対応フォントを設定
- headingLabelsはsecondaryTextカラー、italicLabelsはitalicCalloutスタイル
- exampleBackgroundViewsにdescriptionBackgroundカラーを適用

---

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

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

### 推奨読解順序

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

IBOutletの構造とラベルのグループ分けを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | DescriptionHelpViewController.swift | `Wikipedia/Code/DescriptionHelpViewController.swift` | IBOutletの一覧（個別ラベル、ラベルグループ） |

**読解のコツ**: allLabels, headingLabels, italicLabelsなどのIBOutletCollectionを使用してスタイルを一括適用しています。

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

初期化とUI構築の流れを確認します。

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

**主要処理フロー**:
1. **44-66行目**: viewDidLoad - ローカライズ文字列設定、フォント更新
2. **68-72行目**: viewWillAppear - ナビゲーションバー設定
3. **74-81行目**: configureNavigationBar - タイトルとDoneボタンの設定

#### Step 3: テーマ適用を理解する

テーマに応じたスタイル適用を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | DescriptionHelpViewController.swift | `Wikipedia/Code/DescriptionHelpViewController.swift` | apply(theme:), updateFonts |

**主要処理フロー**:
- **87-108行目**: apply(theme:) - 各UIコンポーネントへのテーマカラー適用
- **115-125行目**: updateFonts - ダイナミックタイプ対応フォント設定

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

```
記事説明編集画面
    |
    +-- DescriptionHelpViewController.init(theme:)
           |
           +-- viewDidLoad()
           |      +-- ローカライズ文字列設定
           |      +-- updateFonts()
           |
           +-- viewWillAppear()
           |      +-- configureNavigationBar()
           |             +-- WMFNavigationBarTitleConfig
           |             +-- WMFNavigationBarCloseButtonConfig
           |
           +-- apply(theme:)
           |      +-- view.backgroundColor
           |      +-- imageViews.tintColor
           |      +-- allLabels.textColor
           |      +-- exampleBackgroundViews.backgroundColor
           |      +-- headingLabels.textColor
           |      +-- dividerViews.backgroundColor
           |
           +-- showAboutWikidataPage() [リンクタップ]
           |      +-- navigate(to: URL)
           |
           +-- showWikidataGuidePage() [リンクタップ]
           |      +-- navigate(to: URL)
           |
           +-- closeButtonPushed() [Doneボタン]
                  +-- dismiss()
```

### データフロー図

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

theme                  --> DescriptionHelpViewController   --> 画面表示
                            |
                            +-- viewDidLoad()
                            |      |
                            |      v
                            |   ローカライズ文字列設定
                            |      |
                            |      v
                            |   updateFonts()
                            |
                            +-- apply(theme:)
                            |      |
                            |      v
                            |   UIカラー適用
                            |
                            +-- showAboutWikidataPage()
                            |      |
                            |      v
                            |   navigate() --> Wikidata紹介ページ
                            |
                            +-- showWikidataGuidePage()
                            |      |
                            |      v
                            |   navigate() --> Wikidataガイドページ
                            |
                            v
                       closeButtonPushed() --> dismiss
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| DescriptionHelpViewController.swift | `Wikipedia/Code/DescriptionHelpViewController.swift` | ソース | ヘルプ画面のViewController |
| DescriptionHelpViewController.xib | `Wikipedia/Code/DescriptionHelpViewController.xib` | NIB | 画面レイアウト |
| ThemeableViewController.swift | `Wikipedia/Code/ThemeableViewController.swift` | ソース | テーマ対応の基底ViewController |
| WMFNavigationBarConfiguring.swift | `WMFComponents/Sources/WMFComponents/` | ソース | ナビゲーションバー設定プロトコル |
| Localizable.strings | `Wikipedia/Localizable/` | 文字列 | ローカライズ文字列 |
