# 画面設計書 72-News画面

## 概要

本ドキュメントは、Wikipedia iOSアプリのニュース詳細画面（NewsViewController）の設計を記述したものである。

### 本画面の処理概要

News画面は、Explore画面のフィードに表示されるニュースカードから遷移し、その日のニュースストーリーの詳細一覧を表示する画面である。各ニュースストーリーには関連するWikipedia記事へのリンクが含まれており、ユーザーはニュースに関連する記事を閲覧できる。

**業務上の目的・背景**：Wikipediaアプリは単なる百科事典ではなく、時事情報と知識をつなぐメディアとしての役割も担っている。ニュース機能により、最新の出来事に関連するWikipedia記事への導線を提供し、ユーザーが背景知識を深められるようにしている。これにより、ユーザーエンゲージメントの向上とWikipediaコンテンツの活用促進を図っている。

**画面へのアクセス方法**：Explore画面に表示されるニュースカード（In the news）をタップすることで本画面に遷移する。ニュースカードは日付ごとにグループ化されたニュースストーリーを表示し、カード選択時に詳細一覧が表示される。

**主要な操作・処理内容**：
1. 複数のニュースストーリーを日付ごとのセクションに分けて一覧表示
2. 各ストーリーには関連記事が横スクロール可能なコレクションビューで表示される
3. 記事サムネイルをタップするとArticle画面へ遷移
4. コンテキストメニュー（長押し）で記事のプレビュー表示が可能
5. フッターの戻るボタンで前の画面に戻る

**画面遷移**：
- 遷移元：Explore画面（ニュースカードタップ）
- 遷移先：Article画面（関連記事選択時）

**権限による表示制御**：特になし。全ユーザーが同一の操作・表示を利用可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 10 | ニュース表示 | 主機能 | ニュース詳細表示 |

## 画面種別

一覧（詳細）

## URL/ルーティング

ネイティブ画面のため、URLベースのルーティングは存在しない。ExploreViewControllerからナビゲーションコントローラ経由でプッシュ遷移される。

## 入出力項目

| 項目名 | 型 | 入力/出力 | 説明 |
|--------|-----|----------|------|
| stories | [WMFFeedNewsStory] | 入力 | ニュースストーリーの配列 |
| dataStore | MWKDataStore | 入力 | データストアインスタンス |
| contentGroup | WMFContentGroup? | 入力 | コンテンツグループ（オプション） |
| theme | Theme | 入力 | 適用するテーマ |

## 表示項目

| 項目名 | データソース | 説明 |
|--------|-------------|------|
| セクションヘッダー（日付） | WMFFeedNewsStory.midnightUTCMonthAndDay | 曜日と月日の表示 |
| ニュース概要 | WMFFeedNewsStory（descriptionHTMLを含む） | HTMLフォーマットのニュース概要テキスト |
| 関連記事サムネイル | WMFArticle.imageURL | 関連記事のサムネイル画像 |
| 関連記事タイトル | WMFArticle.displayTitle | 関連記事のタイトル |
| 画像ビュー | NewsCollectionViewCell | 高さ170pxの画像表示エリア |

## イベント仕様

### 1-関連記事タップ

横スクロールの関連記事コレクションビュー内の記事をタップすると、ArticleCoordinatorを経由して該当記事のArticle画面へ遷移する。

### 2-コンテキストメニュー表示

記事を長押しすると、ArticlePeekPreviewViewControllerによるプレビューが表示される。プレビューからさらにタップするとArticle画面へ遷移する。

### 3-フッターボタン押下

collectionViewFooterButtonWasPressedでnavigationController?.popViewController()が呼ばれ、前の画面（Explore画面）に戻る。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 本画面ではデータベース更新は発生しない（読み取りのみ） |

### テーブル別更新項目詳細

本画面は読み取り専用であり、データベース更新は発生しない。

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|---------|---------------|
| in-the-news | ヘッダー | 常時（非表示設定） | CommonStrings.inTheNewsTitle（ナビゲーションバータイトル、実際は非表示） |
| 日付ヘッダー | セクション | 各セクション | "EEEE MMMM d"形式の日付（例：Monday January 28） |

## 例外処理

| 例外ケース | 処理内容 |
|-----------|---------|
| ニュースストーリーなし | セクション0のみ表示（ヘッダー用） |
| 関連記事なし | 空のコレクションビュー表示 |
| 画像読み込み失敗 | プレースホルダー画像を表示 |

## 備考

- ColumnarCollectionViewControllerを継承
- cellImageViewHeightは170pxで固定
- hidesBottomBarWhenPushedがtrueに設定されており、タブバーは非表示になる
- イベントログはcategory: .feed、label: .newsで記録される
- 日付フォーマットは"EEEE MMMM d"を使用（年は表示しない）

---

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

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

### 推奨読解順序

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

まず、画面で扱うデータモデルを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | WMFFeedNewsStory | `WMF Framework/` | ニュースストーリーのデータモデル |
| 1-2 | WMFContentGroup | `WMF Framework/` | フィードコンテンツグループの構造 |

**読解のコツ**: WMFFeedNewsStoryはmidnightUTCMonthAndDayプロパティを持ち、これが日付ヘッダーの表示に使用される。

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

処理の起点となるファイル・関数を特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | NewsViewController.swift | `Wikipedia/Code/NewsViewController.swift` | 本画面のメインViewController |

**主要処理フロー**:
1. **行19-27**: initでstories、dataStore、contentGroup、themeを受け取り初期化
2. **行33-38**: viewDidLoadでセルとヘッダーを登録、選択を無効化
3. **行40-48**: viewWillAppearでナビゲーションバーを設定
4. **行104-126**: numberOfSections、numberOfItemsInSection、cellForItemAtの実装

#### Step 3: セル表示を理解する

ニュースセルの表示ロジックを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | NewsCollectionViewCell.swift | `Wikipedia/Code/NewsCollectionViewCell.swift` | ニュース表示用カスタムセル |
| 3-2 | SideScrollingCollectionViewCell | `Wikipedia/Code/` | 横スクロール機能を持つ親セル |

**主要処理フロー**:
- **NewsCollectionViewCell 行15-25**: descriptionHTMLをAttributedStringに変換して表示
- 横スクロールのコレクションビューで関連記事を表示

#### Step 4: 画面遷移を理解する

記事選択時の遷移処理を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | NewsViewController.swift | `Wikipedia/Code/NewsViewController.swift` | SideScrollingCollectionViewCellDelegate実装 |
| 4-2 | ArticleCoordinator | `Wikipedia/Code/` | 記事画面遷移のコーディネーター |

**主要処理フロー**:
- **行210-219**: sideScrollingCollectionViewCell(_:didSelectArticleWithURL:at:)でArticleCoordinatorを起動

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

```
NewsViewController
    │
    ├─ init(stories:dataStore:contentGroup:theme:) [行19-27]
    │      └─ super.init()
    │
    ├─ viewDidLoad() [行33-38]
    │      ├─ layoutManager.register(NewsCollectionViewCell)
    │      └─ layoutManager.register(NewsCollectionViewHeader)
    │
    ├─ numberOfSections(in:) [行106-108]
    │      └─ stories.count + 1
    │
    ├─ collectionView(_:cellForItemAt:) [行114-126]
    │      ├─ dequeueReusableCell()
    │      └─ newsCell.configure(with: story)
    │
    └─ sideScrollingCollectionViewCell(_:didSelectArticleWithURL:at:) [行211-219]
           └─ ArticleCoordinator.start()
```

### データフロー図

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

stories ──────────────▶ numberOfSections() ─────────▶ セクション数
    │                           │
    │                           ▼
    │                    story(for: section)
    │                           │
    └─────────────────────────▶ ▼
                         NewsCollectionViewCell
                         .configure(with: story)
                                │
                                ▼
                         UICollectionView
                         (ニュースストーリー一覧)
                                │
                                ▼
                         SideScrollingCollectionView
                         (関連記事横スクロール)
                                │
                                ▼
                    ArticleCoordinator.start()
                         (記事画面遷移)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| NewsViewController.swift | `Wikipedia/Code/NewsViewController.swift` | ソース | 本画面のメインViewController |
| NewsCollectionViewCell.swift | `Wikipedia/Code/NewsCollectionViewCell.swift` | ソース | ニュース表示用カスタムセル |
| NewsCollectionViewHeader.swift | `Wikipedia/Code/NewsCollectionViewHeader.swift` | ソース | 日付ヘッダービュー |
| SideScrollingCollectionViewCell.swift | `Wikipedia/Code/SideScrollingCollectionViewCell.swift` | ソース | 横スクロールセルの親クラス |
| ColumnarCollectionViewController.swift | `Wikipedia/Code/ColumnarCollectionViewController.swift` | ソース | カラムレイアウトの基盤 |
| ArticleCoordinator.swift | `Wikipedia/Code/ArticleCoordinator.swift` | ソース | 記事画面遷移のコーディネーター |
| ArticlePeekPreviewViewController.swift | `Wikipedia/Code/ArticlePeekPreviewViewController.swift` | ソース | 記事プレビュー表示 |
| WMFFeedNewsStory | `WMF Framework/` | ソース | ニュースストーリーデータモデル |
