# 画面設計書 4-コレクション検索結果画面

## 概要

本ドキュメントは、Decap CMS のコレクション検索結果画面の画面設計書である。コレクション内または全コレクションを対象とした検索結果を表示する画面の仕様を定義する。Collectionコンポーネントの`isSearchResults`プロップにより検索結果モードに切り替えて表示される。

### 本画面の処理概要

**業務上の目的・背景**：コンテンツ管理者が大量のエントリの中から目的のエントリを素早く見つけるために、全文検索機能を提供する。単一コレクション内検索と全コレクション横断検索の両方をサポートし、検索結果から直接エントリ編集画面に遷移できる。

**画面へのアクセス方法**：コレクション一覧画面のサイドバーにあるCollectionSearchコンポーネントから検索を実行すると遷移する。単一コレクション内検索の場合は`/collections/:name/search/:searchTerm`、全体検索の場合は`/search/:searchTerm`のURLに遷移する。

**主要な操作・処理内容**：
1. 検索結果のエントリ一覧を表示する
2. エントリをクリックしてエントリ編集画面に遷移する
3. サイドバーでコレクションを切り替えてコレクション一覧画面に戻る
4. 再検索を実行する

**画面遷移**：
- 遷移元：コレクション一覧画面（検索実行時）
- 遷移先：エントリ編集画面（エントリ選択）、コレクション一覧画面（サイドバーでコレクション切り替え）、コレクション検索結果画面（再検索）

**権限による表示制御**：認証済みユーザーのみアクセス可能。特別な権限制御はない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 33 | エントリ検索 | 主機能 | 検索クエリに基づくエントリ全文検索結果の表示。EntriesSearchコンポーネントによる検索結果一覧描画 |
| 22 | コレクション表示 | 補助機能 | 検索結果のコレクション表示。isSearchResultsプロップで検索結果モードに切り替え |
| 73 | ヘッダー | 補助機能 | ヘッダーナビゲーションによるコレクション一覧画面への遷移やメディアライブラリの操作 |

## 画面種別

一覧（検索結果）

## URL/ルーティング

| パス | 説明 | コンポーネントプロップ |
|------|------|---------------------|
| `/collections/:name/search/:searchTerm` | 単一コレクション内検索 | isSearchResults=true, isSingleSearchResult=true |
| `/search/:searchTerm` | 全コレクション横断検索 | isSearchResults=true |

## 入出力項目

### URLパラメータ

| パラメータ名 | 型 | 説明 |
|-------------|-----|------|
| name | string | コレクション名（単一コレクション検索時のみ） |
| searchTerm | string | 検索クエリ文字列 |

## 表示項目

| 項目名 | 表示条件 | 説明 |
|--------|---------|------|
| サイドバー | 常時 | isSingleSearchResultの場合はコレクションがアクティブ表示 |
| 検索結果見出し | 常時 | 「Search results for "{searchTerm}"」または「Search results for "{searchTerm}" in {collectionLabel}」 |
| 検索結果エントリ一覧 | 常時 | EntriesSearchコンポーネントによるエントリカード表示 |
| ヘッダー | 常時 | 通常のヘッダーナビゲーション |

## イベント仕様

### 1-エントリ選択

1. 検索結果一覧からエントリをクリック
2. React Routerにより`/collections/:name/entries/:slug`に遷移
3. エントリ編集画面が表示される

### 2-再検索

1. サイドバーのCollectionSearchで新しいクエリを入力して送信
2. `searchCollections(query, collection)`アクションが実行
3. 新しい検索結果画面に遷移

### 3-コレクション切り替え

1. サイドバーのコレクションリンクをクリック
2. React Routerにより`/collections/:name`に遷移
3. コレクション一覧画面が表示される

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 検索実行 | Redux State (entries) | SELECT | 検索クエリに基づくエントリの全文検索 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|---------|
| collection.collectionTop.searchResults | 情報 | 全体検索結果見出し | isSearchResults=trueかつisSingleSearchResult=false |
| collection.collectionTop.searchResultsInCollection | 情報 | コレクション内検索結果見出し | isSearchResults=trueかつisSingleSearchResult=true |

## 例外処理

| 例外条件 | 処理内容 | 画面表示 |
|---------|---------|---------|
| 空の検索クエリ | デフォルトコレクションにリダイレクト | App.js 行200-206でリダイレクト |
| 検索結果が0件 | EntriesSearchコンポーネントで空状態を表示 | 検索結果なしのメッセージ |

## 備考

- この画面はCollectionコンポーネントの`isSearchResults`プロップで切り替えられるモードであり、独立したコンポーネントではない。
- 単一コレクション検索（`isSingleSearchResult=true`）の場合、EntriesSearchに渡すcollectionsが該当コレクションのみにフィルタリングされる（Collection.js 行71-77）。
- 検索結果画面ではCollectionTopとCollectionControlsは非表示となり、SearchResultContainerが代わりに表示される（Collection.js 行125-150）。

---

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

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

### 推奨読解順序

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

検索結果のデータ構造とisSearchResultsプロップの役割を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Collection.js | `packages/decap-cms-core/src/components/Collection/Collection.js` | propTypes（行47-56）のisSearchResults, isSingleSearchResult |

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

App.jsのルーティングで検索結果画面がどう呼ばれるかを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | App.js | `packages/decap-cms-core/src/components/App/App.js` | 行230-243のルーティング。isSearchResults, isSingleSearchResultプロップの付与 |

**主要処理フロー**:
1. **行230-234**: `/collections/:name/search/:searchTerm`でCollection + isSearchResults + isSingleSearchResult
2. **行240-243**: `/search/:searchTerm`でCollection + isSearchResults
3. **行200-206**: 空検索のリダイレクト処理

#### Step 3: 検索結果の描画を理解する

Collection.jsのisSearchResults時の描画分岐を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Collection.js | `packages/decap-cms-core/src/components/Collection/Collection.js` | renderメソッド（行125-150）のisSearchResults分岐。renderEntriesSearch（行70-78） |

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

```
App.js (Route: /collections/:name/search/:searchTerm)
    |
    +-- Collection (isSearchResults=true, isSingleSearchResult=true)
            |
            +-- Sidebar (collection=activeCollection)
            +-- CollectionMain
                    +-- SearchResultContainer
                    |       +-- SearchResultHeading
                    +-- EntriesSearch
                            +-- 検索結果エントリ一覧
```

### データフロー図

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

URLパラメータ        ──▶  Collection.mapStateToProps          ──▶  画面表示
(:name, :searchTerm)      |                                       |
                          +-- isSearchResults判定                  +-- SearchResultHeading
                          +-- isSingleSearchResult判定            +-- EntriesSearch
                                                                       +-- エントリカード一覧
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Collection.js | `packages/decap-cms-core/src/components/Collection/Collection.js` | ソース | 検索結果表示のメインコンポーネント（isSearchResultsモード） |
| EntriesSearch.js | `packages/decap-cms-core/src/components/Collection/Entries/EntriesSearch.js` | ソース | 検索結果エントリ一覧の描画 |
| Sidebar.js | `packages/decap-cms-core/src/components/Collection/Sidebar.js` | ソース | サイドバーコンポーネント |
| App.js | `packages/decap-cms-core/src/components/App/App.js` | ソース | ルーティング定義 |
