# 画面設計書 77-コマンドプロンプト画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおける「コマンドプロンプト画面」の設計仕様を記述したものである。

### 本画面の処理概要

コマンドプロンプト画面は、リッチテキストエディタ内でスラッシュコマンド（/command）を入力する際に表示されるオートコンプリート機能を提供するAPI画面である。ユーザーが「/」を入力すると、利用可能なコマンド一覧がポップアップ表示され、コマンドを選択することでエディタにコマンドが挿入される。

**業務上の目的・背景**：リッチテキストエディタでは、テキスト入力以外にも様々な特殊操作（メンション、タグ付け、コマンド実行等）が可能である。コマンドプロンプトは、これらの特殊操作を「/」で始まるスラッシュコマンドとして統一的に提供することで、ユーザーが直感的に機能を発見・利用できるようにする。SlackやNotionなどのモダンなプロダクティビティツールで採用されているUIパターン。

**画面へのアクセス方法**：リッチテキストエディタ（Lexxyエディタ）内で「/」を入力するとプロンプトが表示される。URLは `/prompts/commands` であり、Ajax（Fetch API）経由で非同期に呼び出される。

**主要な操作・処理内容**：
1. 利用可能なコマンド一覧の表示
2. フロントエンドでのクライアントサイドフィルタリング（コマンド名、説明による検索）
3. コマンド選択によるエディタへのコマンド挿入

**画面遷移**：
- 遷移元：カード編集画面、コメント入力欄等のリッチテキストエディタ
- 遷移先：なし（コマンドがエディタに挿入される）

**権限による表示制御**：認証必須。コマンド一覧は静的に定義されており、全ユーザーに同一の内容が表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 53 | 全文検索 | 主機能 | コマンド入力用のプロンプト |

## 画面種別

APIレスポンス画面（オートコンプリートプロンプト）

## URL/ルーティング

| パス | HTTPメソッド | コントローラ#アクション |
|------|-------------|----------------------|
| `/prompts/commands` | GET | - |

注: 現行実装ではルーティングが未定義の可能性があり、静的テンプレートまたはフロントエンドで処理される可能性がある。

## 入出力項目

### 入力項目

本APIはパラメータを受け取らない（全コマンドを返却）。

### 出力項目

| 項目 | 説明 |
|------|------|
| コマンド候補リスト | lexxy-prompt-item要素のリスト |

## 表示項目

### コマンド候補アイテム（lexxy-prompt-item）

| 項目 | 属性 | 説明 |
|------|------|------|
| search | 属性 | コマンド説明 + コマンド名（フロントエンド検索用） |
| メニュー表示（menu） | テンプレート | `<code>コマンド</code> 説明` 形式 |
| エディタ挿入時表示（editor） | テンプレート | コマンド文字列（末尾スペースをnbspに変換） |

## イベント仕様

### 1-コマンド一覧取得

画面初回アクセス時にAjax経由でAPI呼び出しが行われる。

- リクエスト: `GET /prompts/commands`
- レスポンス: HTMLフラグメント（lexxy-prompt-itemのリスト）

### 2-コマンド選択

候補リストからコマンドを選択すると、エディタにコマンドが挿入される。

- 挿入形式: コマンド文字列（例: `/search `, `/mention @`）
- 末尾のスペースは `&nbsp;` に変換される

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

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

本画面はデータベースアクセスを伴わない静的コンテンツである。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | データベースアクセスなし |

## メッセージ仕様

本画面では特定のメッセージ表示はない。

## 例外処理

| 条件 | 処理内容 |
|------|---------|
| 未認証アクセス | ログイン画面へリダイレクト |

## 備考

- コマンドリストは静的に定義されており、`@commands` 配列として渡される
- 各コマンドは `[command, description, editor_version]` のタプル形式
- `editor_version` のスペースは `&nbsp;` に変換されてエディタに挿入される
- レイアウトなし
- Lexxyエディタのスラッシュコマンド機能と連携

---

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

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

### 推奨読解順序

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

コマンドデータの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | _command.html.erb | `app/views/prompts/commands/_command.html.erb` | コマンドタプル（command, description, editor_version）の構造 |

**読解のコツ**: `@commands` は `[コマンド名, 説明, エディタ挿入版]` の配列のコレクション。コントローラーまたはフロントエンドで定義される。

#### Step 2: ビューレイヤーを理解する

テンプレートの構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.html.erb | `app/views/prompts/commands/index.html.erb` | コマンドコレクションのレンダリング |
| 2-2 | _command.html.erb | `app/views/prompts/commands/_command.html.erb` | 個別コマンドの表示形式 |

**主要処理フロー**:
- **index.html.erb 1行目**: `render partial: "prompts/commands/command", collection: @commands`
- **_command.html.erb 1行目**: `command, description, editor_version = command` - タプルの展開
- **_command.html.erb 3行目**: `search` 属性に `description` と `command` を設定
- **_command.html.erb 8行目**: `editor_version.gsub(/ +$/, "&nbsp;")` - 末尾スペースをnbspに変換

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

```
GET /prompts/commands
    │
    └─ index.html.erb
           │
           └─ _command.html.erb (collection)
                  │
                  ├─ command (コマンド名)
                  ├─ description (説明文)
                  └─ editor_version (エディタ挿入版)
```

### データフロー図

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

(なし) ─────▶ コマンドリスト（静的定義）
                       │
                       ▼
                   @commands
                       │
                       ▼
               index.html.erb
                       │
                       ▼
              lexxy-prompt-item (HTML)
                       │
                       ▼
              フロントエンド
              (search属性でフィルタリング)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.html.erb | `app/views/prompts/commands/index.html.erb` | テンプレート | メインビュー |
| _command.html.erb | `app/views/prompts/commands/_command.html.erb` | パーシャル | コマンド候補アイテム |
