# 画面設計書 67-公開ボード詳細画面

## 概要

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

### 本画面の処理概要

この画面は、外部公開されたボードを未認証ユーザーでも閲覧できるように表示するパブリックビュー画面である。ボードの名前、説明、カラム構成、トリアージ待ちカード一覧を表示し、各カードの詳細画面へのリンクを提供する。

**業務上の目的・背景**：Fizzyで管理しているプロジェクト情報を外部のステークホルダー（顧客、パートナー、一般ユーザーなど）と共有するためのパブリックインターフェースを提供する。認証なしでアクセスできるため、URLを共有するだけで誰でもボードの状態を確認できる。OGP（Open Graph Protocol）対応により、SNSでのリンク共有時にプレビュー表示される。

**画面へのアクセス方法**：公開ボードのURL（`/public/boards/:key`）に直接アクセス。keyはBoard::Publicationモデルで管理される一意の識別子。外部リンクやSNS共有からのアクセスを想定。

**主要な操作・処理内容**：
1. ボード名と説明の閲覧
2. カラム構成（Maybe?、ユーザー定義カラム、Not Now、Done）の確認
3. トリアージ待ち（Maybe?）カードの一覧表示
4. 各カードの詳細画面への遷移
5. 各カラムの全画面表示への遷移

**画面遷移**：
- 遷移元：外部リンク、SNS共有、検索エンジン
- 遷移先：公開カード詳細画面、公開ボードカラム画面、公開ボードストリーム画面、公開ボードNot Now画面、公開ボードクローズド画面

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 86 | 公開ボード閲覧 | 主機能 | 外部公開されたボードを閲覧 |

## 画面種別

詳細（公開ビュー）

## URL/ルーティング

`GET /public/boards/:id`

- `:id`はBoard::Publicationのkeyを使用

## 入出力項目

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

## 表示項目

| 項目名 | 説明 |
|--------|------|
| ページタイトル | ボード名 |
| OGPメタタグ | og:title, og:description, og:image, og:url, twitter:card等 |
| ボード名 | ヘッダーに表示されるボード名 |
| 公開説明 | ボードの公開説明文（public_description、存在する場合のみ） |
| カラム一覧 | Not Now、Maybe?（ストリーム）、ユーザー定義カラム、Done |
| カード一覧 | 各カラム内のカードプレビュー |
| フッター | Fizzyのコロフォン |

### カラム構成

| カラム種別 | 表示名 | 説明 |
|-----------|--------|------|
| Not Now | Not Now | 延期されたカード |
| Stream | Maybe? | トリアージ待ちカード（メインストリーム） |
| User-defined | （カラム名） | ユーザーが定義したカラム |
| Closed | Done | 完了したカード |

## イベント仕様

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

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

### 2-カラム最大化ボタンクリック

各カラムの全画面表示（公開ボードカラム画面、ストリーム画面、Not Now画面、クローズド画面）に遷移する。

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

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

## メッセージ仕様

（メッセージなし）

## 例外処理

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

## 備考

- HTTPキャッシュ：30秒のpublic cacheが設定されている
- OGP対応：SNS共有時にプレビュー表示されるメタタグを出力
- ボードのpublic_descriptionはリッチテキスト（Action Text）で管理
- レイアウトは`public`レイアウトを使用
- contained-scrollingクラスによりカラム内で個別スクロールが可能

---

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

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

### 推奨読解順序

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

ボードの公開設定とカード取得ロジックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | publishable.rb | `app/models/board/publishable.rb` | 公開機能のConcern、find_by_published_key |
| 1-2 | board.rb | `app/models/board.rb` | ボードモデル、has_rich_text :public_description |
| 1-3 | schema.rb | `db/schema.rb` | board_publicationsテーブル（144-151行目） |

**読解のコツ**:
- `Board::Publication`でkeyを管理し、`find_by_published_key`でボードを検索
- `public_description`はAction Textで管理されるリッチテキスト

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

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

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

**主要処理フロー（base_controller.rb）**:
1. **2行目**: allow_unauthenticated_access - 認証不要
2. **4行目**: set_board, set_card, set_public_cache_expiration - before_action
3. **10-12行目**: set_board - publication.keyでボードを検索
4. **18-20行目**: set_public_cache_expiration - 30秒のpublic cache

**主要処理フロー（boards_controller.rb）**:
1. **3行目**: showアクション - awaiting_triageカードを取得

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

画面構成を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.html.erb | `app/views/public/boards/show.html.erb` | メインテンプレート |
| 3-2 | _columns.html.erb | `app/views/public/boards/show/_columns.html.erb` | カラム構成 |
| 3-3 | _stream.html.erb | `app/views/public/boards/show/_stream.html.erb` | ストリームカラム |
| 3-4 | _not_now.html.erb | `app/views/public/boards/show/_not_now.html.erb` | Not Nowカラム |

**主要処理フロー（show.html.erb）**:
- **4-14行目**: OGPメタタグの設定
- **16-20行目**: ヘッダーにボード名
- **22-26行目**: 公開説明（存在する場合）
- **28行目**: カラム構成パーシャルをレンダリング
- **30-32行目**: フッター

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

```
[外部リンク]
    │
    └─ GET /public/boards/:key
           │
           ├─ Public::BaseController
           │      │
           │      ├─ allow_unauthenticated_access
           │      │
           │      ├─ set_board
           │      │      └─ Board.find_by_published_key(params[:id])
           │      │
           │      ├─ ensure_board_accessible
           │      │      └─ account.cancelled? → 404
           │      │
           │      └─ set_public_cache_expiration
           │             └─ expires_in 30.seconds, public: true
           │
           └─ Public::BoardsController#show
                  │
                  └─ set_page_and_extract_portion_from
                         │
                         └─ @board.cards.awaiting_triage.latest.with_golden_first
```

### データフロー図

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

GET /public/boards/:key ──▶ Public::BoardsController#show ─▶ public/boards/show.html.erb
                                   │
                                   ├─ Board.find_by_published_key
                                   │      │
                                   │      └─ board_publications テーブル
                                   │
                                   └─ @board.cards.awaiting_triage
                                          │
                                          └─ cards テーブル（published + awaiting_triage）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| base_controller.rb | `app/controllers/public/base_controller.rb` | コントローラー | 公開用ベースコントローラー |
| boards_controller.rb | `app/controllers/public/boards_controller.rb` | コントローラー | 公開ボード表示 |
| publishable.rb | `app/models/board/publishable.rb` | Concern | ボード公開機能 |
| show.html.erb | `app/views/public/boards/show.html.erb` | ビュー | メインテンプレート |
| _columns.html.erb | `app/views/public/boards/show/_columns.html.erb` | パーシャル | カラム構成 |
| _stream.html.erb | `app/views/public/boards/show/_stream.html.erb` | パーシャル | ストリームカラム |
| _not_now.html.erb | `app/views/public/boards/show/_not_now.html.erb` | パーシャル | Not Nowカラム |
| _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` | 設定 | ルーティング定義（194-208行目） |
