# 画面設計書 45-一般設定画面

## 概要

本ドキュメントは、Chatwootの一般設定画面の設計仕様を定義するものである。

### 本画面の処理概要

アカウントの基本情報を管理・設定する画面。アカウント名、デフォルト言語、カスタムドメイン、サポートメールアドレスなどの一般設定を編集できる。また、アカウントID、ビルド情報の表示、アカウント削除機能も提供する。

**業務上の目的・背景**：アカウントの一般設定は、組織全体に影響する基本的な設定を集約する画面である。アカウント名は顧客やエージェントに表示される識別名であり、言語設定はダッシュボードのデフォルト言語を決定する。カスタムドメイン機能を使用することで、独自ドメインからのメール返信が可能となり、ブランドの一貫性を維持できる。

**画面へのアクセス方法**：サイドメニューの「設定」から「一般設定」を選択することでアクセスする。管理者権限を持つユーザーのみがアクセス可能。

**主要な操作・処理内容**：
1. アカウント名の編集
2. デフォルト言語の変更
3. カスタムドメインの設定（機能フラグ有効時）
4. サポートメールアドレスの設定（機能フラグ有効時）
5. 音声文字起こし設定（Captain機能有効時）
6. アカウントIDの確認
7. アカウント削除（Chatwoot Cloud版のみ）

**画面遷移**：
- 遷移元：設定メニュー
- 遷移先：特になし（単独設定画面）

**権限による表示制御**：管理者（administrator）のみがアクセス可能。一部の設定項目は機能フラグ（inbound_emails, custom_reply_domain, custom_reply_email, Captain）により表示/非表示が制御される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 8 | アカウント作成・管理 | 主機能 | アカウントの一般設定管理 |
| 10 | カスタム属性定義 | 補助機能 | カスタム属性の設定 |

## 画面種別

編集

## URL/ルーティング

```
/app/accounts/:accountId/settings/account
```

- パラメータ:
  - `accountId`: アカウントID

## 入出力項目

### 入力項目

| 項目名 | 型 | 必須 | バリデーション | 説明 |
|--------|-----|------|--------------|------|
| アカウント名 | String | ○ | required | アカウントの表示名 |
| デフォルト言語 | Select | ○ | required | アカウントのデフォルト言語 |
| ドメイン | String | - | - | カスタムメールドメイン |
| サポートメール | String | - | - | サポート用メールアドレス |

## 表示項目

### ヘッダー

| 項目名 | 型 | 説明 |
|--------|-----|------|
| タイトル | String | 「一般設定」 |

### 一般セクション

| 項目名 | 型 | 説明 |
|--------|-----|------|
| アカウント名入力 | Input | アカウント名の編集フィールド |
| 言語選択 | Select | 利用可能な言語のドロップダウン |
| ドメイン入力 | Input | カスタムドメイン入力（機能フラグ有効時） |
| サポートメール入力 | Input | サポートメールアドレス入力（機能フラグ有効時） |
| 更新ボタン | Button | 設定を保存 |

### 音声文字起こしセクション（Captain有効時）

| 項目名 | 型 | 説明 |
|--------|-----|------|
| 音声文字起こし設定 | Component | 音声文字起こしの有効/無効設定 |

### アカウントIDセクション

| 項目名 | 型 | 説明 |
|--------|-----|------|
| アカウントID | String | 現在のアカウントID（読み取り専用） |

### アカウント削除セクション（Cloud版のみ）

| 項目名 | 型 | 説明 |
|--------|-----|------|
| 削除ボタン | Button | アカウント削除の開始 |

### ビルド情報セクション

| 項目名 | 型 | 説明 |
|--------|-----|------|
| バージョン情報 | String | Chatwootのビルドバージョン |

## イベント仕様

### 1-設定更新イベント

**トリガー**: 更新ボタンクリックまたはフォーム送信

**処理フロー**:
1. ユーザーが設定を変更し更新ボタンをクリック
2. `updateAccount`メソッドが呼び出される
3. Vuelidateによるバリデーション実行（`v$.$touch()`）
4. バリデーションエラーがあればエラーメッセージ表示
5. `accounts/update`アクションがディスパッチされる
6. APIエンドポイント`PATCH /api/v1/accounts/:id`にリクエスト
7. 成功時：成功メッセージ表示、言語設定の反映
8. 失敗時：エラーメッセージ表示

### 2-言語変更の反映

**トリガー**: 設定更新成功後

**処理フロー**:
1. ユーザーのUI設定にlocaleがある場合はそれを使用
2. ない場合はアカウントのlocaleを使用
3. `$root.$i18n.locale`を更新してUI言語を切り替え

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 設定更新 | accounts | UPDATE | アカウント情報の更新 |

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

#### accounts

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | name | フォーム入力値 | アカウント名 |
| UPDATE | locale | 選択された言語コード | デフォルト言語 |
| UPDATE | domain | フォーム入力値 | カスタムドメイン |
| UPDATE | support_email | フォーム入力値 | サポートメール |

## メッセージ仕様

| 種別 | メッセージキー | メッセージ内容 |
|------|---------------|---------------|
| エラー | GENERAL_SETTINGS.FORM.ERROR | 入力内容にエラーがあります |
| 成功 | GENERAL_SETTINGS.UPDATE.SUCCESS | 設定が正常に更新されました |
| エラー | GENERAL_SETTINGS.UPDATE.ERROR | 設定の更新に失敗しました |

## 例外処理

| 例外状態 | 処理内容 |
|----------|---------|
| バリデーションエラー | エラーメッセージ表示、フォーム送信中止 |
| API通信エラー | エラートースト表示 |
| 権限不足 | 403エラー、アクセス拒否画面表示 |
| データ取得中 | ローディングスピナー表示 |

## 備考

- 言語設定はユーザーごとのUI設定（uiSettings.locale）が優先される
- カスタムドメイン機能はinbound_emails機能フラグとcustom_reply_domain機能フラグの両方が有効な場合のみ表示
- サポートメール機能はcustom_reply_email機能フラグが有効な場合のみ表示
- 音声文字起こし設定はCaptain機能フラグが有効な場合のみ表示
- アカウント削除はChatwoot Cloud版でのみ利用可能

---

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

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

### 推奨読解順序

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

まず、アカウントデータの構造とVuexストアの状態管理を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | accounts.js | `app/javascript/dashboard/store/modules/accounts.js` | state構造、getAccount getter、update action |

**読解のコツ**:
- `getAccount(id)`でアカウント情報を取得
- `update`アクションでアカウント情報を更新
- `uiFlags.isUpdating`で更新中状態を管理

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

処理の起点となるVueコンポーネントを確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Index.vue | `app/javascript/dashboard/routes/dashboard/settings/account/Index.vue` | メインコンポーネント |

**主要処理フロー**:
1. **L33-39**: setup - composables使用（useUISettings, useConfig, useAccount, useVuelidate）
2. **L40-48**: data - ローカル状態の初期定義
3. **L49-57**: validations - Vuelidate検証ルール
4. **L58-96**: computed - Vuex gettersマッピングと機能フラグ判定
5. **L97-143**: methods - initializeAccount、updateAccount

#### Step 3: 子コンポーネントを理解する

各セクションを担当するコンポーネント。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AccountId.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AccountId.vue` | アカウントID表示 |
| 3-2 | BuildInfo.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/BuildInfo.vue` | ビルド情報表示 |
| 3-3 | AccountDelete.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AccountDelete.vue` | アカウント削除 |
| 3-4 | AudioTranscription.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AudioTranscription.vue` | 音声文字起こし設定 |

#### Step 4: API層を理解する

バックエンドとの通信。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | account.js | `app/javascript/dashboard/api/account.js` | アカウントAPI |

#### Step 5: バックエンドを理解する

Rails側のコントローラ。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | accounts_controller.rb | `app/controllers/api/v1/accounts_controller.rb` | update action |

**主要処理フロー**:
- **L46-52**: update - アカウント情報の更新

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

```
Index.vue (settings/account)
    │
    ├─ mounted()
    │      └─ initializeAccount()
    │             └─ getAccount(accountId)
    │
    ├─ updateAccount()
    │      ├─ v$.$touch() - バリデーション
    │      │
    │      └─ accounts/update dispatch
    │             └─ AccountAPI.update()
    │                    └─ PATCH /api/v1/accounts/:id
    │
    ├─ SectionLayout (子コンポーネント)
    │      └─ 一般設定フォーム
    │
    ├─ AudioTranscription (子コンポーネント - Captain有効時)
    │
    ├─ AccountId (子コンポーネント)
    │
    ├─ AccountDelete (子コンポーネント - Cloud版のみ)
    │
    └─ BuildInfo (子コンポーネント)
```

### データフロー図

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

初期化       ───▶  initializeAccount()       ───▶  フォーム初期値設定
                            │
フォーム入力  ───▶  v$.name.$touch()         ───▶  バリデーション結果
                            │
更新ボタン    ───▶  accounts/update dispatch  ───▶  API更新
                            │
API応答      ───▶  locale更新                ───▶  UI言語切り替え
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Index.vue | `app/javascript/dashboard/routes/dashboard/settings/account/Index.vue` | ソース | メイン画面コンポーネント |
| AccountId.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AccountId.vue` | ソース | アカウントID表示 |
| BuildInfo.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/BuildInfo.vue` | ソース | ビルド情報表示 |
| AccountDelete.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AccountDelete.vue` | ソース | アカウント削除機能 |
| AudioTranscription.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AudioTranscription.vue` | ソース | 音声文字起こし設定 |
| SectionLayout.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue` | ソース | セクションレイアウト |
| accounts.js (store) | `app/javascript/dashboard/store/modules/accounts.js` | ソース | Vuexストアモジュール |
| account.js (api) | `app/javascript/dashboard/api/account.js` | ソース | APIクライアント |
| accounts_controller.rb | `app/controllers/api/v1/accounts_controller.rb` | ソース | Railsコントローラ |
| account.rb | `app/models/account.rb` | ソース | モデル定義 |
