# 画面設計書 38-ユーザープロフィール画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるユーザープロフィール画面の設計仕様を記述したものです。

### 本画面の処理概要

ユーザープロフィール画面は、ユーザーのプロフィール情報を表示し、各種設定へのアクセスを提供する画面です。自分自身のプロフィールの場合は、テーマ設定、デバイス連携、アクセストークン管理、データエクスポートなどの機能にもアクセスできます。

**業務上の目的・背景**：チームでの協働において、他のメンバーの情報を確認したり、自分のアカウント設定を管理することは重要です。本画面は、ユーザー情報の閲覧と、アカウント関連の各種設定機能への導線を提供します。また、ユーザーが担当しているカードや作成したカードへのショートカットリンクも提供し、ユーザー中心の情報アクセスを可能にします。

**画面へのアクセス方法**：マイメニュー画面のプロフィールリンク、カード詳細画面のユーザーアバター、またはユーザー名のリンクからアクセスできます。

**主要な操作・処理内容**：
1. ユーザーのプロフィール情報（名前、メールアドレス、アバター）を確認
2. ユーザーが担当/作成したカードへのリンク
3. プロフィール編集画面へ遷移（自分の場合のみ）
4. テーマ設定の変更（自分の場合のみ）
5. セッション転送リンク/QRコードの表示（自分の場合のみ）
6. サインアウト（自分の場合のみ）

**画面遷移**：
- 遷移元：マイメニュー画面、カード詳細画面、各種ユーザーリンク
- 遷移先：プロフィール編集画面、カード一覧画面、アクセストークン一覧画面、データエクスポート画面

**権限による表示制御**：
- 自分自身の場合：編集リンク、サインアウト、各種設定セクションが表示
- 他ユーザーの場合：プロフィール情報と担当/作成カードリンクのみ表示
- 未検証ユーザー：「Unverified」ステータス表示
- 無効化ユーザー：「no longer on this account」表示

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 65 | ユーザープロフィール表示 | 主機能 | ユーザーのプロフィール・設定を表示 |
| 3 | サインアウト | 補助機能 | 現在のセッションを終了しログアウト |
| 89 | タイムゾーン設定 | 補助機能 | ユーザーのタイムゾーンを設定 |

## 画面種別

詳細

## URL/ルーティング

- **パス**: `/users/:id`
- **HTTPメソッド**: GET
- **コントローラ**: `UsersController#show`

## 入出力項目

| 項目名 | 項目ID | 入出力 | データ型 | 必須 | 最大長 | 説明 |
|--------|--------|--------|----------|------|--------|------|
| ユーザーID | id | パラメータ | UUID | 必須 | - | 表示対象ユーザーのID |

## 表示項目

| 項目名 | 説明 | データ取得元 |
|--------|------|-------------|
| アバター画像 | ユーザーのプロフィール画像 | @user.avatar |
| ユーザー名 | ユーザーの表示名 | @user.name |
| メールアドレス | ユーザーのメールアドレス | @user.identity.email_address |
| ステータス | 検証状態/無効化状態 | @user.verified?, @user.active? |
| 編集リンク | プロフィール編集へのリンク | 自分の場合のみ |
| 担当カードリンク | アサインされたカード一覧へのリンク | cards_path(assignee_ids) |
| 作成カードリンク | 作成したカード一覧へのリンク | cards_path(creator_ids) |
| サインアウトボタン | ログアウトボタン | 自分の場合のみ |
| テーマ設定 | ライト/ダーク/自動の切り替え | 自分の場合のみ |
| セッション転送 | 他デバイスへのログインリンク | 自分の場合のみ |
| アクセストークン | API用トークン管理リンク | 自分の場合のみ |
| データエクスポート | データエクスポートリンク | 自分の場合のみ |
| アクティビティ | ユーザーの最近のアクティビティ | Turbo Frame |

## イベント仕様

### 1-プロフィール編集へ遷移

プロフィール編集画面へ遷移します。

- **トリガー**: 編集アイコン（鉛筆）をクリック
- **表示条件**: 自分自身のプロフィールの場合のみ
- **遷移先**: `/users/:id/edit`

### 2-担当カード一覧へ遷移

ユーザーにアサインされたカードの一覧へ遷移します。

- **トリガー**: 「Which cards are assigned to me/you?」リンクをクリック
- **遷移先**: `/cards?assignee_ids[]={user_id}&sorted_by=newest`

### 3-作成カード一覧へ遷移

ユーザーが作成したカードの一覧へ遷移します。

- **トリガー**: 「Which cards were added by me/you?」リンクをクリック
- **遷移先**: `/cards?creator_ids[]={user_id}&sorted_by=newest`

### 4-サインアウト

現在のセッションを終了します。

- **トリガー**: 「Sign out of Fizzy on this device」ボタンをクリック
- **処理フロー**:
  1. DELETE `/session` を送信
  2. セッションを削除
  3. ログイン画面へリダイレクト
- **表示条件**: 自分自身のプロフィールの場合のみ

### 5-テーマ変更

表示テーマを変更します。

- **トリガー**: テーマボタン（Light/Dark/Auto）をクリック
- **処理フロー**:
  1. Stimulusコントローラ（theme）でローカルストレージに保存
  2. 即座にUIに反映
- **表示条件**: 自分自身のプロフィールの場合のみ、ネイティブアプリでは非表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | users | SELECT | ユーザー情報を取得 |
| サインアウト | sessions | DELETE | セッションを削除 |

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

#### sessions

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | - | 現在のセッション | サインアウト時 |

## メッセージ仕様

| 種別 | メッセージID | メッセージ内容 | 表示条件 |
|------|------------|---------------|---------|
| 情報 | unverified | Unverified | 未検証ユーザー |
| 情報 | unverified_detail | A sign-in code has been sent to this email address, but the user has not yet logged in to confirm their identity. | 未検証ユーザー |
| 情報 | inactive | {name} is no longer on this account | 無効化ユーザー |
| リンク | assigned_cards | Which cards are assigned to me/you? | 検証済みユーザー |
| リンク | created_cards | Which cards were added by me/you? | 検証済みユーザー |
| ボタン | sign_out | Sign out of Fizzy on this device | 自分の場合 |

## 例外処理

| 例外 | 発生条件 | 処理内容 |
|-----|---------|---------|
| RecordNotFound | ユーザーが存在しないまたは無効 | 404エラーページを表示 |

## 備考

- アバターはActive Storageで管理
- テーマ設定はローカルストレージに保存（サーバーには保存しない）
- セッション転送リンクはQRコード表示機能付き
- ユーザーアクティビティはTurbo Frameで遅延読み込み
- ネイティブアプリでは設定セクションは非表示（hide-on-native）

---

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

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

### 推奨読解順序

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

ユーザーモデルとその関連を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | user.rb | `app/models/user.rb` | Userモデルの定義、includeされるモジュール |
| 1-2 | schema.rb | `db/schema.rb` | usersテーブル（777-789行目）の構造 |

**読解のコツ**: Userモデルは多くのモジュールをincludeしています（Avatar, Named, Role等）。verified?やactive?メソッドで状態を判定。

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

コントローラのshowアクションを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | users_controller.rb | `app/controllers/users_controller.rb` | showアクション、set_user |

**主要処理フロー**:
1. **2行目**: `before_action :set_user` でユーザーを取得
2. **39-40行目**: `Current.account.users.active.find(params[:id])` でアクティブユーザーのみ取得
3. **9-10行目**: showアクションは空（ビューのみをレンダリング）

#### Step 3: ビューレイヤーを理解する

プロフィール画面のテンプレート構造を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.html.erb | `app/views/users/show.html.erb` | メイン画面テンプレート |
| 3-2 | _theme.html.erb | `app/views/users/_theme.html.erb` | テーマ設定パーシャル |
| 3-3 | _transfer.html.erb | `app/views/users/_transfer.html.erb` | セッション転送パーシャル |

**主要処理フロー**:
- **show.html.erb 7-11行目**: 自分の場合のみ編集リンクを表示
- **show.html.erb 32-38行目**: 担当/作成カードリンク
- **show.html.erb 44-46行目**: サインアウトボタン
- **show.html.erb 62行目**: Turbo Frameでアクティビティを遅延読み込み

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

```
UsersController#show
    │
    ├─ set_user
    │      │
    │      └─ Current.account.users.active.find(params[:id])
    │
    └─ render show.html.erb
           │
           ├─ Current.user == @user チェック
           │      │
           │      ├─ true: 編集リンク、設定セクション表示
           │      │
           │      └─ false: プロフィール情報のみ
           │
           ├─ @user.verified? チェック
           │      │
           │      ├─ true: メールアドレス、カードリンク表示
           │      │
           │      └─ false: Unverified表示
           │
           ├─ render _theme.html.erb (自分の場合)
           │
           ├─ render _transfer.html.erb (自分の場合)
           │
           └─ turbo_frame_tag "user_events"
                  │
                  └─ 遅延読み込み: user_events_path(@user)
```

### データフロー図

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

URLパラメータ            UsersController#show
  user_id ──────────────▶ @user 取得
                              │
                        ┌─────┴─────┐
                       自分        他人
                        │           │
                        ▼           ▼
                   フル表示    プロフィールのみ
                        │           │
                        └─────┬─────┘
                              │
                              ▼
                        show.html.erb
                              │
                        ┌─────┼─────┐
                        │     │     │
                   プロフィール 設定  アクティビティ
                        │     │     │
                        │     │     └─ Turbo Frame
                        │     │            (遅延読み込み)
                        │     └─ 自分のみ
                        │
                        └─ 全員表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| users_controller.rb | `app/controllers/users_controller.rb` | コントローラ | ユーザー表示処理 |
| show.html.erb | `app/views/users/show.html.erb` | テンプレート | プロフィール画面 |
| _theme.html.erb | `app/views/users/_theme.html.erb` | パーシャル | テーマ設定 |
| _transfer.html.erb | `app/views/users/_transfer.html.erb` | パーシャル | セッション転送 |
| _access_tokens.html.erb | `app/views/users/_access_tokens.html.erb` | パーシャル | トークン管理リンク |
| _data_export.html.erb | `app/views/users/_data_export.html.erb` | パーシャル | エクスポートリンク |
| user.rb | `app/models/user.rb` | モデル | ユーザーモデル |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義（13-27行目） |
| schema.rb | `db/schema.rb` | スキーマ | usersテーブル定義 |
