# 画面設計書 48-マイメニュー画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるマイメニュー画面の設計仕様を定義したものです。ユーザーのパーソナルナビゲーションメニューを表示する画面について記載しています。

### 本画面の処理概要

本画面は、ユーザーの個人メニューを表示するサイドナビゲーション画面です。ボード一覧、タグ一覧、ユーザー一覧、各種設定へのリンク、ショートカット、複数アカウント切り替え機能を提供します。

**業務上の目的・背景**：Fizzyでは複数のボードやタグ、ユーザーにまたがる作業を効率的に行うため、よくアクセスする機能へのクイックアクセスが必要です。本画面は、ユーザーが最もよく使う機能（自分のカード、アサインされたカード、ボード、タグなど）への素早いアクセスを提供し、作業効率を向上させます。また、複数のアカウントを持つユーザーは、この画面からアカウントを切り替えることができます。

**画面へのアクセス方法**：ヘッダーのメニューアイコン/ボタンをクリック、または画面からスワイプでアクセスします。Turbo Frameを使用した動的な読み込みにより、現在の画面を離れることなくメニューを表示できます。

**主要な操作・処理内容**：
1. ホーム、自分にアサインされたカード、自分が追加したカードへのクイックアクセス
2. ボード一覧から特定のボードへの遷移
3. タグ一覧からタグフィルタリングへの遷移
4. ユーザー一覧から特定ユーザーの情報への遷移
5. 設定メニュー（アカウント設定、プロフィール、通知設定など）へのアクセス
6. ショートカットによるフィルタリング（ゴールデンカード、停滞カードなど）
7. 複数アカウント間の切り替え

**画面遷移**：
- 遷移元：ヘッダーメニュー（全画面から）
- 遷移先：各種画面（ホーム、ボード詳細、カード一覧、設定など）

**権限による表示制御**：認証済みユーザーのみアクセス可能です。複数アカウントを持つユーザーのみ、アカウント切り替えセクションが表示されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 6 | ボード一覧表示 | 主機能 | マイページのメニューとボード一覧を表示 |
| 90 | ピン留め一覧表示 | 補助機能 | 自分がピン留めしたカードの一覧を表示 |

## 画面種別

一覧（ナビゲーション）

## URL/ルーティング

- パス: `/my/menu`
- HTTPメソッド: GET
- ルート名: `my_menu_path`
- コントローラ: `My::MenusController#show`

## 入出力項目

本画面には入力項目はありません。

## 表示項目

| 項目名 | 説明 | 表示条件 |
|--------|------|----------|
| アカウント名 | 現在のアカウント名 | 複数アカウント所持時 |
| 閉じるボタン | メニューを閉じる | 常時 |
| 検索フィールド | ジャンプ検索 | 常時 |
| ホームリンク | ホーム画面へのリンク（ホットキー1） | 常時 |
| アサインされたカード | 自分にアサインされたカード一覧へのリンク（ホットキー2） | 常時 |
| 追加したカード | 自分が追加したカード一覧へのリンク（ホットキー3） | 常時 |
| ボードセクション | ボード一覧と新規作成リンク | 常時 |
| タグセクション | タグ一覧 | 常時 |
| ユーザーセクション | ユーザー一覧と招待リンク | 常時 |
| 設定セクション | 各種設定へのリンク | 常時 |
| ショートカットセクション | 便利なフィルター | 常時 |
| アカウントセクション | アカウント切り替え | 複数アカウント所持時 |
| フッター | アプリ情報 | 常時 |

## イベント仕様

### 1-閉じるボタン押下

メニューダイアログを閉じます（`dialog#close`アクション）。

### 2-ホームリンク押下

ホーム画面（`root_path`）に遷移します。ホットキー「1」でも同様の動作が可能です。

### 3-アサインされたカードリンク押下

自分にアサインされたカード一覧（`cards_path(assignee_ids: [Current.user.id])`）に遷移します。ホットキー「2」でも同様の動作が可能です。

### 4-追加したカードリンク押下

自分が追加したカード一覧（`cards_path(creator_ids: [Current.user.id])`）に遷移します。ホットキー「3」でも同様の動作が可能です。

### 5-ボード追加リンク押下

ボード新規作成画面（`new_board_path`）に遷移します。

### 6-ボードアイテム押下

選択したボードの詳細画面（`board_path`）に遷移します。

### 7-招待リンク押下

参加コード表示画面（`account_join_code_path`）に遷移します。

### 8-設定リンク押下

各種設定画面（アカウント設定、プロフィール、通知設定など）に遷移します。

### 9-サインアウトボタン押下

セッションを終了し、ログアウトします。

### 10-アカウント切り替えリンク押下

選択したアカウントのランディングページに遷移します。Turboは無効化されています。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | filters | SELECT | ユーザーのフィルター一覧を取得 |
| 画面表示 | boards | SELECT | ユーザーのボード一覧を取得 |
| 画面表示 | tags | SELECT | アカウントのタグ一覧を取得 |
| 画面表示 | users | SELECT | アカウントのユーザー一覧を取得 |
| 画面表示 | accounts | SELECT | ユーザーのアカウント一覧を取得 |

本画面ではデータベースへの更新は行いません。

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

本画面では直接的なデータベース更新はありません。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| MSG-001 | 案内 | Nothing matches that filter | フィルター検索結果が0件の場合 |

## 例外処理

| 例外ケース | 対応 |
|-----------|------|
| 認証されていない | ログイン画面へリダイレクト |

## 備考

- Turbo Frame `my_menu` を使用してコンテンツを読み込む
- `fresh_when` によるHTTPキャッシュが適用されている
- ボード一覧は最近アクセスした順（`ordered_by_recently_accessed`）でソートされる
- タグ、ユーザーはアルファベット順（`alphabetically`）でソートされる
- `collapsible_nav_section` ヘルパーにより、各セクションは折りたたみ可能
- `filter_hotkey_link` ヘルパーにより、数字キーでのクイックアクセスが可能

---

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

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

### 推奨読解順序

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

メニューに表示されるデータの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | user.rb | `app/models/user.rb` | Userモデルとboards、filtersの関連を確認 |
| 1-2 | identity.rb | `app/models/identity.rb` | Identityとaccountsの関連を確認 |
| 1-3 | board.rb | `app/models/board.rb` | ordered_by_recently_accessedスコープを確認 |
| 1-4 | tag.rb | `app/models/tag.rb` | alphabeticallyスコープを確認 |

**読解のコツ**: 各モデルのスコープとアソシエーションを理解することで、どのようなデータが表示されるかがわかります。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | menus_controller.rb | `app/controllers/my/menus_controller.rb` | showアクションとデータ取得ロジックを確認 |

**主要処理フロー**:
1. **行3**: `@filters` - ユーザーのフィルター一覧を取得
2. **行4**: `@boards` - 最近アクセスしたボード一覧を取得
3. **行5**: `@tags` - アカウントのタグ一覧（アルファベット順）を取得
4. **行6**: `@users` - アカウントのアクティブユーザー一覧（アルファベット順）を取得
5. **行7**: `@accounts` - IdentityのアクティブなAccount一覧を取得
6. **行9**: `fresh_when` - HTTPキャッシュの設定

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.html.erb | `app/views/my/menus/show.html.erb` | 全体構造とパーシャルの呼び出しを確認 |
| 3-2 | _jump.html.erb | `app/views/my/menus/_jump.html.erb` | ヘッダーとホットキーリンクの構造を確認 |
| 3-3 | _boards.html.erb | `app/views/my/menus/_boards.html.erb` | ボードセクションの構造を確認 |
| 3-4 | _tags.html.erb | `app/views/my/menus/_tags.html.erb` | タグセクションの構造を確認 |
| 3-5 | _people.html.erb | `app/views/my/menus/_people.html.erb` | ユーザーセクションの構造を確認 |
| 3-6 | _settings.html.erb | `app/views/my/menus/_settings.html.erb` | 設定セクションの構造を確認 |
| 3-7 | _shortcuts.html.erb | `app/views/my/menus/_shortcuts.html.erb` | ショートカットセクションの構造を確認 |
| 3-8 | _accounts.html.erb | `app/views/my/menus/_accounts.html.erb` | アカウント切り替えセクションの構造を確認 |

**主要処理フロー**:
- **show.html.erb 行1**: Turbo Frame `my_menu` でラップ
- **show.html.erb 行2-9**: 各パーシャルの読み込み
- **_jump.html.erb 行22-25**: ホットキーリンク（1, 2, 3）
- **_accounts.html.erb 行1**: `accounts.many?`で複数アカウント時のみ表示

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

```
My::MenusController#show
    │
    ├─ Current.user.filters.all
    │
    ├─ Current.user.boards.ordered_by_recently_accessed
    │
    ├─ Current.account.tags.all.alphabetically
    │
    ├─ Current.account.users.active.alphabetically
    │
    ├─ Current.identity.accounts.active
    │
    └─ show.html.erb レンダリング
           │
           ├─ turbo_frame_tag "my_menu"
           │
           ├─ _jump.html.erb
           │      ├─ アカウント名表示（複数時）
           │      ├─ 閉じるボタン
           │      ├─ ジャンプ検索フィールド
           │      └─ ホットキーリンク（Home, Assigned, Added）
           │
           ├─ _boards.html.erb
           │      └─ ボード一覧とAdd a boardリンク
           │
           ├─ _tags.html.erb
           │      └─ タグ一覧
           │
           ├─ _people.html.erb
           │      └─ ユーザー一覧とInvite peopleリンク
           │
           ├─ _settings.html.erb
           │      └─ 設定リンクとサインアウト
           │
           ├─ _shortcuts.html.erb
           │      └─ フィルターショートカット
           │
           └─ _accounts.html.erb（複数アカウント時）
                  └─ アカウント切り替えリンク
```

### データフロー図

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

なし                  MenusController#show               show.html.erb
    ───────────▶           │
                           ├─▶ フィルター取得
                           │
                           ├─▶ ボード取得（最近アクセス順）
                           │
                           ├─▶ タグ取得（アルファベット順）
                           │
                           ├─▶ ユーザー取得（アルファベット順）
                           │
                           └─▶ アカウント取得
                                     │
                                     └─▶ 各パーシャルへデータを渡す
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| menus_controller.rb | `app/controllers/my/menus_controller.rb` | コントローラ | データ取得・画面制御 |
| show.html.erb | `app/views/my/menus/show.html.erb` | ビュー | メイン画面構造 |
| _jump.html.erb | `app/views/my/menus/_jump.html.erb` | パーシャル | ヘッダー・検索・ホットキー |
| _boards.html.erb | `app/views/my/menus/_boards.html.erb` | パーシャル | ボードセクション |
| _tags.html.erb | `app/views/my/menus/_tags.html.erb` | パーシャル | タグセクション |
| _people.html.erb | `app/views/my/menus/_people.html.erb` | パーシャル | ユーザーセクション |
| _settings.html.erb | `app/views/my/menus/_settings.html.erb` | パーシャル | 設定セクション |
| _shortcuts.html.erb | `app/views/my/menus/_shortcuts.html.erb` | パーシャル | ショートカットセクション |
| _accounts.html.erb | `app/views/my/menus/_accounts.html.erb` | パーシャル | アカウント切り替え |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義（行179） |
