# 画面遷移図

## 概要

Decap CMS の画面遷移図を mermaid 形式で示す。本CMSはSPA（Single Page Application）であり、React Router（HashHistory）によるクライアントサイドルーティングで画面遷移を管理している。

## 画面遷移図

```mermaid
graph TD
    START((アクセス開始)) --> LOADING[ローディング画面]
    LOADING -->|設定エラー| CONFIG_ERROR[エラー画面<br>設定エラー]
    LOADING -->|設定読み込み完了<br>未認証| AUTH{認証方式判定}
    LOADING -->|設定読み込み完了<br>認証済み| COLLECTION[コレクション一覧画面]

    AUTH -->|git-gateway| LOGIN[ログイン画面<br>NetlifyAuthenticationPage]
    AUTH -->|github/gitlab/bitbucket| PKCE[PKCE認証画面<br>PKCEAuthenticationPage]

    LOGIN -->|ログイン成功| COLLECTION
    LOGIN -->|ログイン失敗| LOGIN
    PKCE -->|認証成功| COLLECTION
    PKCE -->|認証失敗| PKCE

    COLLECTION -->|エントリ選択| EDIT[エントリ編集画面]
    COLLECTION -->|新規作成ボタン| NEW[エントリ新規作成画面]
    COLLECTION -->|サイドバーで<br>コレクション切り替え| COLLECTION
    COLLECTION -->|検索実行| SEARCH[コレクション検索結果画面]
    COLLECTION -->|ネストコレクション<br>フィルター| FILTER[コレクションフィルター画面]
    COLLECTION -->|ヘッダーの<br>Mediaボタン| MEDIA[メディアライブラリ画面]
    COLLECTION -->|ヘッダーの<br>Workflowリンク| WORKFLOW[ワークフロー画面]
    COLLECTION -->|ヘッダーの<br>Quick Add| NEW

    SEARCH -->|エントリ選択| EDIT
    SEARCH -->|サイドバーで<br>コレクション切り替え| COLLECTION
    SEARCH -->|再検索| SEARCH

    FILTER -->|エントリ選択| EDIT
    FILTER -->|新規作成ボタン| NEW
    FILTER -->|サイドバーで<br>コレクション切り替え| COLLECTION

    EDIT -->|戻るリンク| COLLECTION
    EDIT -->|保存して新規作成| NEW
    EDIT -->|削除| COLLECTION
    EDIT -->|ファイル/画像<br>ウィジェット| MEDIA
    EDIT -->|公開取り消し| COLLECTION
    EDIT -->|複製| NEW

    NEW -->|戻るリンク| COLLECTION
    NEW -->|保存成功| EDIT
    NEW -->|保存して新規作成| NEW
    NEW -->|削除（キャンセル）| COLLECTION
    NEW -->|ファイル/画像<br>ウィジェット| MEDIA

    WORKFLOW -->|エントリカード<br>クリック| EDIT
    WORKFLOW -->|新規投稿ボタン| NEW
    WORKFLOW -->|ヘッダーの<br>Contentリンク| COLLECTION
    WORKFLOW -->|ヘッダーの<br>Mediaボタン| MEDIA

    MEDIA -->|閉じる/選択完了| PREV((前の画面に戻る))

    NOTFOUND[404 Not Found画面]
    START2((不正なURL)) --> NOTFOUND

    style START fill:#e8f5e9,stroke:#4caf50
    style START2 fill:#ffebee,stroke:#f44336
    style AUTH fill:#fff3e0,stroke:#ff9800
    style CONFIG_ERROR fill:#ffebee,stroke:#f44336
    style NOTFOUND fill:#ffebee,stroke:#f44336
    style LOADING fill:#e3f2fd,stroke:#2196f3
    style LOGIN fill:#fce4ec,stroke:#e91e63
    style PKCE fill:#fce4ec,stroke:#e91e63
    style COLLECTION fill:#e8f5e9,stroke:#4caf50
    style SEARCH fill:#e8f5e9,stroke:#4caf50
    style FILTER fill:#e8f5e9,stroke:#4caf50
    style EDIT fill:#e3f2fd,stroke:#2196f3
    style NEW fill:#e3f2fd,stroke:#2196f3
    style WORKFLOW fill:#f3e5f5,stroke:#9c27b0
    style MEDIA fill:#fff8e1,stroke:#ffc107
    style PREV fill:#f5f5f5,stroke:#9e9e9e
```

## ルーティング定義

| ルートパス | 画面 | コンポーネント | 備考 |
|-----------|------|--------------|------|
| `/` | （リダイレクト） | - | 最初の非非表示コレクションにリダイレクト |
| `/collections/:name` | コレクション一覧画面 | Collection | メイン画面 |
| `/collections/:name/new` | エントリ新規作成画面 | Editor (newRecord=true) | 新規エントリ作成 |
| `/collections/:name/entries/*` | エントリ編集画面 | Editor | 既存エントリ編集 |
| `/collections/:name/search/:searchTerm` | コレクション検索結果画面 | Collection (isSearchResults, isSingleSearchResult) | コレクション内検索 |
| `/collections/:name/filter/:filterTerm*` | コレクションフィルター画面 | Collection | ネストコレクションフィルター |
| `/search/:searchTerm` | コレクション検索結果画面 | Collection (isSearchResults) | 全体検索 |
| `/workflow` | ワークフロー画面 | Workflow | Editorial Workflow有効時のみ |
| `/edit/:name/:entryName` | （リダイレクト） | - | `/collections/:name/entries/:entryName` にリダイレクト |
| `*` (上記以外) | 404 Not Found画面 | NotFoundPage | フォールバック |

## 補足事項

- メディアライブラリ画面はモーダルダイアログとして表示されるため、URLの変更を伴わない
- 認証画面はバックエンド設定（`config.backend.name`）に応じて動的に切り替わる
- ワークフロー画面は `publish_mode` が `editorial_workflow` の場合のみ利用可能
- ヘッダーの Quick Add ドロップダウンは `create: true` が設定されたコレクションのみ表示
- SettingsDropdown からのログアウト操作は全画面から可能
