# 画面設計書 1-Explore画面

## 概要

本ドキュメントは、Wikipedia iOSアプリのExplore画面（ホーム画面）の設計仕様を記載したものである。

### 本画面の処理概要

Explore画面は、Wikipedia iOSアプリのメインホーム画面であり、ユーザーが最初に目にするフィード形式のコンテンツ表示画面である。

**業務上の目的・背景**：ユーザーがWikipediaの豊富なコンテンツに効率的にアクセスできるようにするため、パーソナライズされたフィード形式でコンテンツを提供する。今日の出来事、おすすめ記事、ニュース、近くの記事、ピックアップ画像など、多様なコンテンツタイプをカード形式で表示し、ユーザーの興味関心を引き出す。

**画面へのアクセス方法**：アプリ起動時に自動的に表示される。タブバーの最初の項目（Explore）をタップすることでいつでもアクセス可能。

**主要な操作・処理内容**：
1. フィードのスクロールによるコンテンツ閲覧
2. 各フィードカードのタップによる詳細画面への遷移
3. プルトゥリフレッシュによるフィード更新
4. 検索バーからの記事検索
5. プロファイルボタンからの設定・アカウント画面への遷移
6. タブボタンからのタブ一覧画面への遷移
7. フィードカードの保存・共有アクション

**画面遷移**：
- 遷移元：タブバー、アプリ起動
- 遷移先：Article画面、News画面、OnThisDay画面、Search画面、プロファイル画面、タブ一覧画面、ExploreFeedSettings画面

**権限による表示制御**：ログイン状態によりプロファイルボタンの表示内容が変化。Year In Review機能のバッジ表示もユーザー状態に依存。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 7 | 探索フィード | 主機能 | フィード形式でパーソナライズされたコンテンツを表示 |
| 8 | 今日の出来事 | 遷移先機能 | フィードカードから今日の出来事詳細画面へ遷移 |
| 10 | ニュース表示 | 遷移先機能 | フィードカードからニュース詳細画面へ遷移 |
| 11 | 記事検索 | 補助機能 | ナビゲーションバーの検索機能から記事検索を実行 |
| 44 | プロファイル画面 | 遷移先機能 | プロファイルボタンタップでプロファイル画面へ遷移 |
| 53 | Year in Review | 遷移先機能 | Year In Review機能への遷移 |
| 61 | タブ一覧 | 遷移先機能 | タブボタンタップでタブ一覧画面へ遷移 |

## 画面種別

一覧（フィード形式）

## URL/ルーティング

- エントリーポイント：`WMFAppViewController`からタブバー経由
- Storyboard ID：`ExploreViewController`
- Objective-C名：`WMFExploreViewController`

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 |
|--------|----------|----------|------|
| フィードコンテンツ | 出力 | WMFContentGroup配列 | 各種フィードカードのデータ |
| 検索テキスト | 入力 | String | 検索バーに入力されたテキスト |
| 選択言語 | 入力 | MWKLanguageLink | 現在選択中の言語 |

## 表示項目

| 項目名 | データソース | 表示条件 | 備考 |
|--------|-------------|----------|------|
| 今日の出来事カード | WMFContentGroup | 該当日のデータが存在する場合 | 複数イベントを表示 |
| おすすめ記事カード | WMFContentGroup | レコメンドデータが存在する場合 | 画像付きカード |
| ニュースカード | WMFContentGroup | ニュースデータが存在する場合 | 最新ニュース表示 |
| 近くの記事カード | WMFContentGroup | 位置情報許可時 | 地図プレビュー付き |
| ピックアップ画像カード | WMFContentGroup | 画像データが存在する場合 | 高解像度画像表示 |
| 続きを読むカード | WMFContentGroup | 閲覧履歴が存在する場合 | 最近閲覧した記事に関連 |

## イベント仕様

### 1-プルトゥリフレッシュ

画面を下にスワイプすることでフィードコンテンツを更新する。`updateFeedSourcesUserInitiated`メソッドが呼び出され、各コンテンツソースから最新データを取得する。

### 2-フィードカードタップ

各フィードカードをタップすると、コンテンツタイプに応じた詳細画面へ遷移する。ArticleコンテンツはArticle画面、NewsはNews画面、OnThisDayはOnThisDay画面へそれぞれ遷移。

### 3-検索バータップ

ナビゲーションバーの検索バーをタップすると、SearchViewControllerが表示され、記事検索が可能になる。

### 4-プロファイルボタンタップ

ナビゲーションバー右側のプロファイルボタンをタップすると、ProfileCoordinatorが起動しプロファイル画面へ遷移。Year In Reviewのバッジが表示されている場合、そちらへの導線も含む。

### 5-タブボタンタップ

タブアイコンをタップすると、TabsOverviewCoordinatorが起動しタブ一覧画面へ遷移。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| フィード更新 | WMFContentGroup | SELECT/INSERT/UPDATE | フィードコンテンツの取得・更新 |
| 記事保存 | WMFArticle | UPDATE | 記事の保存状態更新 |
| 閲覧履歴追加 | WMFArticle | UPDATE | 記事閲覧履歴の記録 |

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

#### WMFContentGroup

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | contentType, date, content | 表示対象日付範囲内のコンテンツ | フィード表示用 |
| UPDATE | isVisible | ユーザー設定による表示/非表示 | フィードカスタマイズ |

## メッセージ仕様

| メッセージID | メッセージ内容 | 表示条件 | 種別 |
|-------------|---------------|----------|------|
| explore-feed-empty | フィードにコンテンツがありません | フィードが空の場合 | 情報 |
| network-error | ネットワークエラーが発生しました | 通信失敗時 | エラー |

## 例外処理

- **ネットワークエラー**：フィード更新失敗時、エラーメッセージを表示しキャッシュデータを表示
- **データなし**：フィードコンテンツが存在しない場合、空状態のビューを表示
- **位置情報エラー**：位置情報が取得できない場合、近くの記事カードを非表示

## 備考

- ExploreViewControllerはColumnarCollectionViewControllerを継承
- フィードコンテンツはCore Dataで永続化
- バックグラウンドフェッチによる自動更新対応

---

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

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

### 推奨読解順序

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

フィード表示に使用されるデータモデルの理解が重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | WMFContentGroup+CoreDataClass.swift | `WMF/Sources/WMF/DataModel/WMFContentGroup+CoreDataClass.swift` | フィードカードのデータモデル、contentTypeによる分類を理解 |
| 1-2 | WMFArticle+CoreDataClass.swift | `WMF/Sources/WMF/DataModel/WMFArticle+CoreDataClass.swift` | 記事データモデル、保存状態や閲覧履歴の管理方法 |

**読解のコツ**: Core Data モデルクラスの`contentType`列挙型で各フィードカードの種別を判別。

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

処理の起点となるViewControllerを特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExploreViewController.swift | `Wikipedia/Code/ExploreViewController.swift` | メインのViewControllerクラス、ライフサイクルメソッドの流れ |

**主要処理フロー**:
1. **viewDidLoad**: 初期設定、フィードの読み込み開始
2. **viewWillAppear**: ナビゲーションバー設定、フィード更新チェック
3. **viewDidAppear**: アナリティクスログ、モーダル表示チェック

#### Step 3: フィード管理層を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ExploreFeedContentController.swift | `Wikipedia/Code/ExploreFeedContentController.swift` | フィードコンテンツの取得・管理ロジック |
| 3-2 | WMFExploreFeedContentSource.swift | `WMF/Sources/WMF/Feed/WMFExploreFeedContentSource.swift` | 各コンテンツソースからのデータ取得 |

#### Step 4: UI表示層を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | ExploreCardCollectionViewCell.swift | `Wikipedia/Code/ExploreCardCollectionViewCell.swift` | フィードカードのセル実装 |
| 4-2 | ColumnarCollectionViewController.swift | `Wikipedia/Code/ColumnarCollectionViewController.swift` | 基底クラスのコレクションビュー実装 |

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

```
ExploreViewController
    │
    ├─ ExploreFeedContentController
    │      ├─ WMFExploreFeedContentSource (各種)
    │      │      └─ WMFSession (API通信)
    │      └─ MWKDataStore (Core Data)
    │
    ├─ ProfileCoordinator
    │      └─ ProfileViewController
    │
    ├─ TabsOverviewCoordinator
    │      └─ TabsOverviewViewController
    │
    └─ SearchViewController
           └─ SearchResultsViewController
```

### データフロー図

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

API Response ───▶ ExploreFeedContentController ───▶ Core Data
                         │
                         ▼
                  WMFContentGroup
                         │
                         ▼
User Pull Refresh ───▶ ExploreViewController ───▶ CollectionView Display
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ExploreViewController.swift | `Wikipedia/Code/ExploreViewController.swift` | ソース | メインViewController |
| ExploreFeedContentController.swift | `Wikipedia/Code/ExploreFeedContentController.swift` | ソース | フィードコンテンツ管理 |
| ExploreCardCollectionViewCell.swift | `Wikipedia/Code/ExploreCardCollectionViewCell.swift` | ソース | フィードカードセル |
| ColumnarCollectionViewController.swift | `Wikipedia/Code/ColumnarCollectionViewController.swift` | ソース | 基底コレクションVC |
| ProfileCoordinator.swift | `Wikipedia/Code/ProfileCoordinator.swift` | ソース | プロファイル遷移管理 |
| TabsOverviewCoordinator.swift | `Wikipedia/Code/TabsOverviewCoordinator.swift` | ソース | タブ一覧遷移管理 |
| WMFContentGroup+CoreDataClass.swift | `WMF/Sources/WMF/DataModel/` | ソース | フィードデータモデル |
