# 画面設計書 11-ボード新規作成画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおける「ボード新規作成画面」の設計書です。新しいカンバンボードを作成するための画面仕様を定義します。

### 本画面の処理概要

本画面では、ユーザーが新しいカンバンボードを作成するためのフォームを提供します。ボード名を入力して作成ボタンを押下することで、新しいボードがシステムに登録されます。

**業務上の目的・背景**：チームやプロジェクト単位でタスクやカードを管理するためのボードを新規作成する必要があります。ボードはFizzyにおける最も基本的な組織単位であり、カードの集合体として機能します。ユーザーは業務の性質や目的に応じて複数のボードを作成し、タスク管理を効率化できます。

**画面へのアクセス方法**：マイメニュー画面やホーム画面のナビゲーションから「新規ボード作成」リンクをクリックしてアクセスします。URLは `/boards/new` です。

**主要な操作・処理内容**：
1. ボード名を入力フィールドに入力する
2. 「Create board」ボタンをクリックしてボードを作成する
3. キャンセルする場合は「Cancel and go back」リンクでホーム画面に戻る

**画面遷移**：
- 遷移元：マイメニュー画面、ホーム画面（アクティビティ一覧）
- 遷移先：作成成功時はボード詳細画面、キャンセル時はホーム画面（root_path）

**権限による表示制御**：ログイン済みユーザーであれば誰でもボードを作成できます。特別な権限制御はありません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 7 | ボード作成 | 主機能 | 新しいカンバンボードを作成 |

## 画面種別

登録画面（フォーム）

## URL/ルーティング

| HTTP Method | URL | Controller#Action |
|-------------|-----|-------------------|
| GET | /boards/new | boards#new |
| POST | /boards | boards#create |

## 入出力項目

| 項目名 | 項目ID | 入力/出力 | データ型 | 必須 | 最大長 | 説明 |
|--------|--------|-----------|----------|------|--------|------|
| ボード名 | name | 入力 | String | 必須 | - | 作成するボードの名前 |

## 表示項目

| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| ページタイトル | H1見出し | 「Create a new board」と表示 |
| 入力フィールド | テキストフィールド | ボード名入力欄、プレースホルダー「Name it...」 |
| 作成ボタン | ボタン | 「Create board」と矢印アイコン |
| キャンセルリンク | リンク（hidden） | 「Cancel and go back」（ESCキーで表示） |

## イベント仕様

### 1-フォーム送信（Create board押下）

**トリガー**: 「Create board」ボタンクリック、またはEnterキー押下

**事前条件**:
- ボード名が入力されていること（空欄でないこと）

**処理内容**:
1. フォームバリデーション（空欄チェック）
2. BoardsController#createアクションの実行
3. Boardモデルの新規レコード作成
4. all_accessをtrueに設定してボードを作成

**事後処理**:
- HTML形式: 作成されたボードの詳細画面（/boards/:id）にリダイレクト
- JSON形式: HTTPステータス201（Created）と、Locationヘッダーにボード詳細URLを返却

### 2-キャンセル（ESCキー押下）

**トリガー**: ESCキー押下、またはキャンセルリンククリック

**処理内容**:
- フォーム入力をキャンセルし、ホーム画面（root_path）に遷移

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| Create board押下 | boards | INSERT | 新規ボードレコードを作成 |
| Create board押下 | accesses | INSERT | 作成者へのアクセス権レコードを作成 |

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

#### boards

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | id | UUID自動生成 | 主キー |
| INSERT | name | フォーム入力値 | ボード名 |
| INSERT | account_id | Current.user.account.id | 作成者のアカウントID |
| INSERT | creator_id | Current.user.id | 作成者のユーザーID |
| INSERT | all_access | true | デフォルトで全員アクセス可能 |
| INSERT | created_at | 現在日時 | 作成日時 |
| INSERT | updated_at | 現在日時 | 更新日時 |

#### accesses

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | id | UUID自動生成 | 主キー |
| INSERT | board_id | 作成されたボードのID | |
| INSERT | user_id | Current.user.id | 作成者 |
| INSERT | account_id | Current.user.account.id | |
| INSERT | involvement | access_only | デフォルト値 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| M001 | バリデーションエラー | Board names can't be blank | ボード名が空欄の場合 |

## 例外処理

| 例外種別 | 発生条件 | 処理内容 |
|---------|----------|----------|
| バリデーションエラー | ボード名が空欄 | フォーム送信を防止し、カスタムバリデーションメッセージを表示 |
| 認証エラー | 未ログイン状態でアクセス | ログイン画面にリダイレクト |

## 備考

- ボード作成時はデフォルトで `all_access: true` が設定され、アカウント内の全ユーザーがアクセス可能となります
- フォームは `bridged_form_with` ヘルパーを使用しており、モバイルアプリとのブリッジ連携に対応しています
- 空送信防止のために `form#preventEmptySubmit` アクションが設定されています
- タッチデバイスではコンパクト表示（`compact-on-touch`）が適用されます

---

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

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

### 推奨読解順序

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

まず、ボードがどのようなデータ構造を持つか理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | board.rb | `app/models/board.rb` | Boardモデルの定義、関連モジュール（Accessible, Cards等）のinclude、belongs_to関連を確認 |
| 1-2 | schema.rb | `db/schema.rb` | boardsテーブルの定義（155-164行目）、カラム構成と制約を確認 |
| 1-3 | access.rb | `app/models/access.rb` | アクセス権モデル、involvementのenum定義を確認 |

**読解のコツ**: Railsのモデルは多くのconcernモジュールをincludeしています。まずはbelongs_toとhas_manyの関連を把握し、concernは必要に応じて参照してください。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | routes.rb | `config/routes.rb` | 29行目の `resources :boards` でルーティング定義を確認 |
| 2-2 | boards_controller.rb | `app/controllers/boards_controller.rb` | new/createアクションの実装を確認 |

**主要処理フロー**:
1. **24-25行目**: `new`アクション - 空のBoardインスタンスを生成
2. **28-34行目**: `create`アクション - ボード作成とリダイレクト処理
3. **94-96行目**: `board_params` - Strong Parametersによるパラメータ許可

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

フォームのレンダリングとユーザー入力の受け取り方を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | new.html.erb | `app/views/boards/new.html.erb` | フォーム構造、Stimulus controller設定を確認 |

**主要処理フロー**:
- **1行目**: ページタイトル設定
- **5-15行目**: bridged_form_withによるフォーム生成、form Stimulusコントローラー連携
- **7行目**: text_fieldの設定（required、autofocus、バリデーションメッセージ）

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

```
ブラウザ（GET /boards/new）
    │
    ├─ BoardsController#new
    │      └─ @board = Board.new
    │
    └─ app/views/boards/new.html.erb
           └─ bridged_form_with model: @board
                  └─ form.text_field :name

ブラウザ（POST /boards）
    │
    └─ BoardsController#create
           ├─ Board.create!(board_params.with_defaults(all_access: true))
           │      └─ Board model callbacks
           │             └─ Access record creation（Accessible concern）
           └─ redirect_to board_path(@board)
```

### データフロー図

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

ボード名 ───────▶ BoardsController ─────▶ boards テーブル
(name)                    │                    │
                          │                    └──▶ accesses テーブル
                          │
                          └──▶ redirect_to board_path
                                    │
                                    ▼
                               ボード詳細画面
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| new.html.erb | `app/views/boards/new.html.erb` | テンプレート | ボード作成フォームのビュー |
| boards_controller.rb | `app/controllers/boards_controller.rb` | コントローラー | new/createアクションの実装 |
| board.rb | `app/models/board.rb` | モデル | ボードモデル定義 |
| access.rb | `app/models/access.rb` | モデル | アクセス権モデル定義 |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義 |
| schema.rb | `db/schema.rb` | 設定 | データベーススキーマ定義 |
