# 画面設計書 68-公開ボードカラム画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおける公開ボードカラム画面の設計仕様を定義するものである。

### 本画面の処理概要

この画面は、公開ボード内の特定のユーザー定義カラムを全画面表示するための画面である。カラムに属するアクティブなカードを一覧表示し、各カードの詳細画面へのリンクを提供する。未認証ユーザーでもアクセス可能。

**業務上の目的・背景**：公開ボードの特定カラム（進行中、レビュー待ちなど、ユーザーが定義したステータス）に絞って閲覧したいユーザーのニーズに対応する。カラム単位での全画面表示により、特定のステータスにあるタスクの確認が容易になる。

**画面へのアクセス方法**：公開ボード詳細画面の各カラムにある「最大化」ボタン（グリッドアイコン）をクリックしてアクセス。または直接URL（`/public/boards/:board_id/columns/:id`）にアクセス。

**主要な操作・処理内容**：
1. カラム名の表示
2. カラム内のアクティブカード一覧表示（ページネーション対応）
3. 各カードの詳細画面への遷移
4. 公開ボード詳細画面への戻り

**画面遷移**：
- 遷移元：公開ボード詳細画面
- 遷移先：公開カード詳細画面、公開ボード詳細画面

**権限による表示制御**：認証不要（未ログインでもアクセス可能）。ただし、ボードが公開設定されている必要あり。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 86 | 公開ボード閲覧 | 主機能 | 公開ボードのカラム詳細を表示 |

## 画面種別

一覧（公開ビュー）

## URL/ルーティング

`GET /public/boards/:board_id/columns/:id`

- `:board_id`はBoard::Publicationのkey
- `:id`はColumnのID

## 入出力項目

（入力項目なし - 閲覧のみ）

## 表示項目

| 項目名 | 説明 |
|--------|------|
| ページタイトル | 「Column: {カラム名}」形式 |
| 戻るリンク | 公開ボード詳細画面への戻りリンク |
| カード一覧 | カラム内のアクティブカードのプレビュー一覧 |
| ページネーション | 自動ページネーション（スクロール時） |
| 空状態メッセージ | カードがない場合「No cards here」 |
| フッター | Fizzyのコロフォン |

## イベント仕様

### 1-カードクリック

公開カード詳細画面（`/public/boards/:board_id/cards/:id`）に遷移する。

### 2-戻るリンク押下

公開ボード詳細画面（`/public/boards/:board_id`）に遷移する。

### 3-スクロール

自動ページネーションにより、追加のカードを読み込む。

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

（データベース更新なし - 閲覧のみ）

## メッセージ仕様

| メッセージ種別 | メッセージ内容 | 表示条件 |
|---------------|---------------|----------|
| 空状態 | No cards here | カラム内にカードがない場合 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 公開キーが見つからない | 404エラー |
| カラムが見つからない | 404エラー |
| アカウントがキャンセル済み | 404エラー |

## 備考

- HTTPキャッシュ：30秒のpublic cacheが設定されている
- カードはactive（アクティブ）でlatest（最新順）、golden_first（ゴールデンカード優先）で取得
- Turbo Frameを使用した自動ページネーション対応
- 左矢印キーまたはEscキーで戻ることが可能（ホットキー対応）

---

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

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

### 推奨読解順序

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

カラムとカードの関連を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | columns_controller.rb | `app/controllers/public/boards/columns_controller.rb` | showアクション、カード取得ロジック |

**読解のコツ**:
- `@column.cards.active.latest.with_golden_first` でアクティブカードを取得
- `set_column` で`@board.columns.find(params[:id])` によりカラムを取得

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

公開用コントローラーの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | base_controller.rb | `app/controllers/public/base_controller.rb` | 公開用ベースコントローラー |
| 2-2 | columns_controller.rb | `app/controllers/public/boards/columns_controller.rb` | showアクション |

**主要処理フロー（columns_controller.rb）**:
1. **3行目**: before_action :set_column
2. **5行目**: showアクション - activeカードを取得
3. **13-15行目**: set_column - ボード内のカラムを検索

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

画面構成を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.html.erb | `app/views/public/boards/columns/show.html.erb` | メインテンプレート |

**主要処理フロー（show.html.erb）**:
- **1行目**: ページタイトルを「Column: {カラム名}」に設定
- **4-5行目**: 戻るリンク（公開ボード詳細へ）
- **13-24行目**: カード一覧表示（Turbo Frame）
- **16-19行目**: ページネーション付きカード表示
- **21行目**: 空状態メッセージ

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

```
[ユーザー] カラム最大化ボタンクリック
    │
    └─ GET /public/boards/:board_id/columns/:id
           │
           ├─ Public::BaseController
           │      │
           │      ├─ allow_unauthenticated_access
           │      │
           │      ├─ set_board
           │      │
           │      └─ set_public_cache_expiration
           │
           └─ Public::Boards::ColumnsController#show
                  │
                  ├─ set_column
                  │      └─ @board.columns.find(params[:id])
                  │
                  └─ set_page_and_extract_portion_from
                         │
                         └─ @column.cards.active.latest.with_golden_first
```

### データフロー図

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

GET /public/boards/:key/columns/:id
                                      │
                                      ▼
                           Public::Boards::ColumnsController#show
                                      │
                                      ├─ @board = Board.find_by_published_key
                                      │
                                      ├─ @column = @board.columns.find(:id)
                                      │
                                      └─ @column.cards.active.latest
                                             │
                                             ▼
                                    public/boards/columns/show.html.erb
                                             │
                                             └─ render "cards/display/public_previews"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| columns_controller.rb | `app/controllers/public/boards/columns_controller.rb` | コントローラー | 公開カラム表示 |
| base_controller.rb | `app/controllers/public/base_controller.rb` | コントローラー | 公開用ベース |
| show.html.erb | `app/views/public/boards/columns/show.html.erb` | ビュー | カラム詳細画面 |
| _public_previews.html.erb | `app/views/cards/display/_public_previews.html.erb` | パーシャル | カードプレビュー一覧 |
| _public_preview.html.erb | `app/views/cards/display/_public_preview.html.erb` | パーシャル | カードプレビュー |
| _footer.html.erb | `app/views/public/_footer.html.erb` | パーシャル | フッター |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義 |
