# 画面設計書 7-エントリ新規作成画面

## 概要

本ドキュメントは、Decap CMS のエントリ新規作成画面の画面設計書である。新規エントリの作成画面であり、Editorコンポーネントに`newRecord`プロップを付与して表示される。空のドラフトが生成され、フィールドに入力して保存する。

### 本画面の処理概要

**業務上の目的・背景**：コンテンツ管理者が新しいコンテンツエントリを作成するための画面である。エントリ編集画面と同じEditorコンポーネントを使用するが、`newRecord=true`により空のドラフトが生成される点が異なる。保存成功後はエントリ編集画面にリダイレクトされ、既存エントリとして編集が継続される。

**画面へのアクセス方法**：コレクション一覧画面の「New {collectionLabel}」ボタン、ヘッダーのQuick Addドロップダウン、ワークフロー画面のNew Postドロップダウン、エディタの「Save and Create New」操作により遷移する。URLは`/collections/:name/new`。

**主要な操作・処理内容**：
1. 空のフォームにフィールド値を入力する
2. 保存ボタンでエントリを保存する
3. 保存後、生成されたslugベースのURLにリダイレクトされる
4. 「Save and Create New」で保存後に新しい空フォームを生成する
5. 「Save and Duplicate」で保存後に現在のエントリを複製して新規フォームを生成する
6. 削除（キャンセル）でコレクション一覧画面に戻る

**画面遷移**：
- 遷移元：コレクション一覧画面（新規作成ボタン）、ヘッダーQuick Add、ワークフロー画面（New Post）、エントリ編集画面（保存して新規作成、複製）
- 遷移先：エントリ編集画面（保存成功後）、コレクション一覧画面（戻るリンク、削除/キャンセル）、エントリ新規作成画面（保存して新規作成）、メディアライブラリ画面（ファイル/画像ウィジェット）

**権限による表示制御**：コレクション設定の`create`フラグがtrueのコレクションでのみアクセス可能。Editorial Workflow有効時はPublish系のボタンが表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 8 | エントリ作成・編集 | 主機能 | 空のドラフト作成処理。createEmptyDraftアクションにより新規エントリの空フォームを生成 |
| 9 | エントリ保存（永続化） | 主機能 | 新規エントリのバリデーション後保存。persistEntryアクションによるバックエンドへの初回保存 |
| 12 | ローカルバックアップ | 補助機能 | 新規エントリ編集中のドラフトのlocalForageへの自動保存・復元処理 |
| 16 | バリデーション | 補助機能 | 新規エントリのフィールド入力値検証 |
| 47 | エディタインターフェース | 主機能 | 新規エントリ用のエディタインターフェース表示 |
| 48 | エディタツールバー | 補助機能 | 新規エントリ用の保存・公開ボタンを提供するツールバー |
| 18 | 未公開エントリの保存 | 補助機能 | Editorial Workflow有効時のブランチベースでの未公開エントリ保存処理 |
| 69 | i18n（多言語）サポート | 補助機能 | i18n有効時の多言語エントリ新規作成 |

## 画面種別

登録（新規作成）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/collections/:name/new` | エントリ新規作成画面 |

### クエリパラメータ

| パラメータ名 | 型 | 説明 |
|-------------|-----|------|
| path | string | ネストコレクションのフィルターパス。createEmptyDraftに渡される |

## 入出力項目

### 入力項目

コレクションのfields定義に基づいて動的に生成される（エントリ編集画面と同じウィジェット群）。全フィールドが初期値（default値が設定されている場合はその値）で表示される。

## 表示項目

| 項目名 | 表示条件 | 説明 |
|--------|---------|------|
| ツールバー | 常時 | 戻るリンク、Publishドロップダウン（Publish Now / Publish and Create New / Publish and Duplicate）、削除ボタン |
| 戻るリンク | 常時 | コレクション一覧画面へ |
| Publishドロップダウン | 常時 | hasWorkflow=false時のシンプル公開コントロール |
| Save + Publishドロップダウン | hasWorkflow=true | Save + ステータス変更 + Publishコントロール |
| 削除ボタン | showDelete=true | 新規エントリ時はキャンセル（コレクション一覧に戻る） |
| コントロールペイン | 常時 | 空のフィールド入力フォーム |
| プレビューペイン | previewEnabled時 | リアルタイムプレビュー |

## イベント仕様

### 1-保存/公開ボタン押下

1. handlePersistEntry（Editor.js 行224-247）が呼ばれる
2. persistEntry(collection)アクションをdispatch
3. ローカルバックアップを削除
4. 保存成功後、生成されたslugに基づくURLにリダイレクト（navigateToEntry）

### 2-保存して新規作成

1. handlePersistEntry({ createNew: true })が呼ばれる
2. persistEntry後にnavigateToNewEntry(collectionName)で新規作成画面に遷移
3. 新しい空のドラフトが生成される

### 3-保存して複製

1. handlePersistEntry({ createNew: true, duplicate: true })が呼ばれる
2. persistEntry後にnavigateToNewEntryし、createDraftDuplicateFromEntryで複製
3. 現在のエントリデータが複製された新規フォームが表示される

### 4-削除（キャンセル）

1. handleDeleteEntry（Editor.js 行297-315）が呼ばれる
2. newEntry=trueの場合、deleteEntryアクションは実行せず直接navigateToCollectionでコレクション一覧に戻る（行306-308）

### 5-コンポーネントマウント時

1. componentDidMount（Editor.js 行84-167）で`createEmptyDraft(collection, location.search)`が呼ばれる
2. location.searchからpathクエリパラメータを取得し、ネストコレクション用のパス情報を設定
3. ローカルバックアップの存在確認

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 保存 | Gitリポジトリ / Redux State | INSERT | 新規エントリファイルをGitリポジトリに作成 |
| フィールド変更 | Redux State (entryDraft) | UPDATE | ドラフトのフィールド値を更新 |
| ローカルバックアップ | localForage | INSERT | ブラウザのlocalForageにドラフトを保存 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|---------|
| editor.editorToolbar.publish | 情報 | 「Publish」ボタンラベル | 公開可能時 |
| editor.editorToolbar.publishNow | 情報 | 「Publish Now」ドロップダウンアイテム | ドロップダウン内 |
| editor.editorToolbar.publishAndCreateNew | 情報 | 「Publish and Create New」 | create=trueの場合 |
| editor.editorToolbar.publishAndDuplicate | 情報 | 「Publish and Duplicate」 | create=trueの場合 |
| editor.editorToolbar.deleteEntry | 情報 | 「Delete Entry」ボタン | showDelete=true |

## 例外処理

| 例外条件 | 処理内容 | 画面表示 |
|---------|---------|---------|
| バリデーションエラー | changeDraftFieldValidationでエラー設定 | フィールドごとにエラーメッセージ表示 |
| 保存失敗 | エラー通知表示 | トースト通知でエラーメッセージ |
| 未保存変更ありでページ離脱 | beforeunloadイベント | ブラウザの離脱確認ダイアログ |

## 備考

- 新規作成画面はEditorコンポーネントの`newRecord=true`モードであり、エントリ編集画面と同じコンポーネントを共有する。
- App.jsのルーティング（行220-223）で`<Editor {...props} newRecord />`として描画される。
- 保存成功後は自動的にエントリ編集画面（`/collections/:name/entries/:slug`）にリダイレクトされる。
- 新規エントリの削除はGitリポジトリへの操作なし（ファイルがまだ存在しないため）で、単にコレクション一覧に戻る。

---

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

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

### 推奨読解順序

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

新規エントリのドラフト構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Editor.js | `packages/decap-cms-core/src/components/Editor/Editor.js` | mapStateToProps（行422）のnewEntry判定。entry=nullの場合のフロー |

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

App.jsのルーティングとEditorの初期化を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | App.js | `packages/decap-cms-core/src/components/App/App.js` | 行220-223の`/collections/:name/new`ルーティング。newRecordプロップの付与 |
| 2-2 | Editor.js | `packages/decap-cms-core/src/components/Editor/Editor.js` | componentDidMount（行102-103）のcreateEmptyDraft呼び出し |

**主要処理フロー**:
1. **行102-103**: `newEntry`判定でcreateEmptyDraft(collection, location.search)
2. **行306-308**: 新規エントリの削除は直接コレクション一覧に遷移

#### Step 3: EditorToolbarの新規エントリ用コントロールを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | EditorToolbar.js | `packages/decap-cms-core/src/components/Editor/EditorToolbar.js` | renderNewEntrySimplePublishControls（行510-549）、renderNewEntryWorkflowPublishControls（行409-448） |

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

```
App.js (Route: /collections/:name/new)
    |
    +-- Editor (newRecord=true)
            |
            +-- componentDidMount
            |       +-- createEmptyDraft(collection, location.search)
            |       +-- retrieveLocalBackup
            |
            +-- EditorInterface
                    +-- EditorToolbar (isNewEntry=true)
                    |       +-- Publish -> persistEntry -> navigateToEntry
                    |       +-- Publish and Create New -> persistEntry -> navigateToNewEntry
                    |       +-- Delete -> navigateToCollection (直接遷移)
                    |
                    +-- SplitPane
                            +-- EditorControlPane (空フォーム)
                            +-- EditorPreviewPane
```

### データフロー図

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

createEmptyDraft    ──▶  空のドラフト生成                    ──▶  Redux State (entryDraft)
(collection, search)      |
                          +-- fields定義から初期値設定

フィールド値入力    ──▶  changeDraftField                   ──▶  entryDraft更新
                                                                  + localForageバックアップ

保存ボタン          ──▶  persistEntry                       ──▶  Gitリポジトリ (新規ファイル)
                         |                                       + slug生成
                         +-- 新規slug生成                         + navigateToEntry
                         +-- backend.persistEntry
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Editor.js | `packages/decap-cms-core/src/components/Editor/Editor.js` | ソース | エディタのメインコンテナ（newRecord=trueモード） |
| EditorInterface.js | `packages/decap-cms-core/src/components/Editor/EditorInterface.js` | ソース | ツールバー+SplitPaneの画面レイアウト |
| EditorToolbar.js | `packages/decap-cms-core/src/components/Editor/EditorToolbar.js` | ソース | 新規エントリ用のツールバーコントロール |
| App.js | `packages/decap-cms-core/src/components/App/App.js` | ソース | ルーティング定義（newRecordプロップ付与） |
| entries.ts | `packages/decap-cms-core/src/actions/entries.ts` | ソース | createEmptyDraft, persistEntryアクション |
