# 画面設計書 30-カードコメント詳細画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるカードコメント詳細画面の設計を記述したものです。カードコメント詳細画面は、カードのコメントを表示するTurbo Frameコンポーネントです。

### 本画面の処理概要

**業務上の目的・背景**：チームでタスク管理を行う際、カードに対するディスカッションや進捗報告、質問などをコメントとして残すことで、コミュニケーションの履歴を保持できます。この画面は個別のコメントを表示し、リアクションの追加や編集画面への遷移機能を提供します。

**画面へのアクセス方法**：カード詳細画面のコメント一覧から個別のコメントを表示、または `/cards/:card_id/comments/:id` に直接アクセスします。通常はカード詳細画面のコメント一覧の一部として表示されます。

**主要な操作・処理内容**：
1. コメント内容の表示（リッチテキスト）
2. コメント作成者とタイムスタンプの表示
3. コメントへのリアクション追加
4. コメント編集画面への遷移（作成者のみ）
5. コメント履歴の表示切替

**画面遷移**：
- 遷移元：カード詳細画面（インライン表示）
- 遷移先：カードコメント編集画面（編集ボタンクリック時）、ユーザープロフィール画面（ユーザー名クリック時）

**権限による表示制御**：ログインユーザーのみアクセス可能です。編集ボタンはコメント作成者にのみ表示されます（`only_visible_to_you`データ属性）。システムユーザーのコメントは特別なスタイリングが適用されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 45 | コメント一覧表示 | 主機能 | カードのコメント詳細を表示 |
| 51 | コメントにリアクション | 補助機能 | コメントに絵文字リアクションを追加 |

## 画面種別

詳細（インライン）

## URL/ルーティング

| HTTPメソッド | URL | コントローラー#アクション |
|-------------|-----|------------------------|
| GET | `/cards/:card_id/comments/:id` | `cards/comments#show` |

## 入出力項目

本画面は表示専用のため、直接的な入力項目はありません。

## 表示項目

| 項目名 | データソース | 説明 |
|-------|-------------|------|
| アバター | comment.creator | コメント作成者のアバター画像 |
| 作成者名 | comment.creator.name | コメント作成者の名前（リンク） |
| 作成日時 | comment.created_at | コメントの作成日時（相対表示） |
| コメント本文 | comment.body | リッチテキスト形式のコメント内容 |
| リアクション | comment.reactions | コメントに付けられたリアクション一覧 |
| 編集ボタン | - | 作成者のみ表示 |
| 履歴ボタン | 固定文字列 | Full history |

## イベント仕様

### 1-編集ボタンクリック

コメント作成者が編集ボタンをクリックすると、編集画面に遷移します。

**処理内容**：
1. `edit_card_comment_path`へのリンク
2. Turbo Frameまたはフルページで編集画面を読み込み

### 2-履歴ボタンクリック

履歴ボタンをクリックすると、コメントの編集履歴が表示されます。

**処理内容**：
1. `toggle-class#toggle`アクションが発火
2. クラスのトグルで履歴表示を切り替え

### 3-作成者名クリック

コメント作成者の名前をクリックすると、ユーザープロフィール画面に遷移します。

**処理内容**：
1. `comment.creator`へのリンク
2. Turbo Frameで`_top`（フルページ遷移）

### 4-タイムスタンプクリック

コメントの作成日時をクリックすると、コメントへのパーマリンクに遷移します。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | comments | SELECT | コメント情報の取得 |
| 画面表示 | reactions | SELECT | コメントのリアクション一覧を取得 |

本画面は表示専用のため、データベースへの書き込みは発生しません。

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

#### comments

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | * | id = params[:id], card_id = @card.id | コメントの取得 |

## メッセージ仕様

本画面では明示的なメッセージ表示はありません。

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| カードが存在しない | 404エラーページを表示 |
| コメントが存在しない | 404エラーページを表示 |
| カードへのアクセス権限がない | 404エラーページを表示 |

## 備考

- Turbo Frameで読み込まれ、`turbo_frame_tag comment, :container`でフレームを識別します
- システムユーザーのコメントには`comment-by-system`クラスが適用されます
- コメント本文は`lexxy-content`クラスでリッチテキストスタイリングされます
- `syntax-highlight`コントローラーでコードブロックのシンタックスハイライトが適用されます
- `retarget-links`コントローラーでコメント内のリンクの動作を制御します
- `turbo-permanent`属性により、Turbo Navigation時にコメント本文が保持されます
- アバターは`avatar_tag`ヘルパーで生成され、スクリーンリーダーでは非表示です
- 日時表示は`local_datetime_tag`ヘルパーで、ユーザーのタイムゾーンに合わせて表示されます
- コメントはキャッシュされ、コメント内容の変更時に自動的に無効化されます

---

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

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

### 推奨読解順序

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

まず、コメント機能に関連するモデル構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | comment.rb | `app/models/comment.rb` | Commentモデル、リレーション、自動ウォッチ |
| 1-2 | schema.rb | `db/schema.rb` | commentsテーブル（252-260行目） |

**読解のコツ**: Commentモデルはリッチテキスト（`has_rich_text :body`）を使用し、Reactionsを持ちます。コメント作成時に自動的にカードをウォッチします。

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

処理の起点となるコントローラーを特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | comments_controller.rb | `app/controllers/cards/comments_controller.rb` | showアクションの処理 |
| 2-2 | card_scoped.rb | `app/controllers/concerns/card_scoped.rb` | CardScopedモジュール |

**主要処理フロー**:
1. **4行目**: `before_action :set_comment` - コメントの取得
2. **21-22行目**: `show` - ビューの描画
3. **46-48行目**: `set_comment` - カードに属するコメントの取得

#### Step 3: ビューテンプレートを理解する

画面の表示内容を構成するビューファイルを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.html.erb | `app/views/cards/comments/show.html.erb` | パーシャルレンダリング |
| 3-2 | _comment.html.erb | `app/views/cards/comments/_comment.html.erb` | コメント表示のUI |

**主要処理フロー**:
- **1行目**: パーシャルをレンダリング
- パーシャル内でキャッシュ、Turbo Frame、コメント詳細を表示

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

```
GET /cards/:card_id/comments/:id
    |
    +-- Cards::CommentsController#show
           |
           +-- CardScoped#set_card (before_action)
           |      +-- Current.user.accessible_cards.find_by!
           |
           +-- set_comment (before_action)
           |      +-- @card.comments.find(params[:id])
           |
           +-- render 'cards/comments/show'
                  +-- render 'cards/comments/_comment'
                         |
                         +-- cache comment
                         +-- turbo_frame_tag comment, :container
                         +-- avatar_tag
                         +-- link_to creator
                         +-- local_datetime_tag
                         +-- comment.body
                         +-- render 'reactions/reactions'
```

### データフロー図

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

リクエスト               CommentsController                HTML
card_id ──────────────▶ set_card ─────────────────────▶ @card
comment_id ───────────▶ set_comment ──────────────────▶ @comment
                              |
                              ▼
                        render _comment
                              |
                        ┌─────┴─────────┐
                        ▼               ▼
                    comment.body    comment.reactions
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| comments_controller.rb | `app/controllers/cards/comments_controller.rb` | ソース | コメント機能コントローラー |
| card_scoped.rb | `app/controllers/concerns/card_scoped.rb` | ソース | カード取得の共通処理 |
| show.html.erb | `app/views/cards/comments/show.html.erb` | テンプレート | コメント表示のビュー |
| _comment.html.erb | `app/views/cards/comments/_comment.html.erb` | テンプレート | コメントパーシャル |
| comment.rb | `app/models/comment.rb` | ソース | Commentモデル |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義 |
| schema.rb | `db/schema.rb` | 設定 | データベーススキーマ |
