# 画面設計書 40-設定画面

## 概要

本ドキュメントは、Actual Budget アプリケーションの設定画面の設計仕様を記述したものである。

### 本画面の処理概要

設定画面は、アプリケーション全体の設定とユーザー固有の設定を管理する画面である。テーマ、日付/数値フォーマット、言語、認証、暗号化、予算タイプ、バックアップ、エクスポートなどの設定項目を提供する。

**業務上の目的・背景**：ユーザーが自分の好みや運用要件に合わせてアプリケーションをカスタマイズできるようにする。外観（テーマ）、地域設定（日付形式、数値形式、言語）、セキュリティ（認証、暗号化）、予算管理方式（エンベロープ/トラッキング）など、多岐にわたる設定を一箇所で管理できる。

**画面へのアクセス方法**：サイドバーの「設定」メニューをクリック、または直接 `/settings` URLにアクセスする。

**主要な操作・処理内容**：
1. テーマ設定：ライト/ダーク/オート/ミッドナイト/カスタムテーマの選択
2. フォーマット設定：数値形式、日付形式、週の開始曜日の設定
3. 言語設定：表示言語の選択
4. 認証設定：サーバー認証の管理
5. 暗号化設定：エンドツーエンド暗号化の有効化/無効化
6. 予算タイプ設定：エンベロープ予算/トラッキング予算の切り替え
7. バックアップ設定：自動バックアップの管理（Electron版のみ）
8. エクスポート：予算データのエクスポート
9. 高度な設定：キャッシュリセット、同期リセット、取引修復、実験的機能

**画面遷移**：サイドバーから直接アクセス。予算ファイル一覧への遷移（closeBudget）が可能。

**権限による表示制御**：特に権限による制御はない。一部の機能は環境（Electron版のみ）や実験的フラグに依存する。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | アプリケーション設定 | 主機能 | 各種設定の管理 |

## 画面種別

設定画面

## URL/ルーティング

- `/settings` - 設定画面

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 必須 | 説明 |
|--------|----------|---------|------|------|
| テーマ | 入力 | string | Yes | 'light', 'dark', 'auto', 'midnight', 'custom:*' |
| ダークテーマ | 入力 | string | No | autoテーマ時のダークテーマ選択 |
| 数値形式 | 入力 | string | Yes | 数値の表示形式 |
| 小数非表示 | 入力 | boolean | No | 小数点以下を非表示にするか |
| 日付形式 | 入力 | string | Yes | 日付の表示形式 |
| 週開始曜日 | 入力 | string | Yes | 週の開始曜日（0-6） |
| 言語 | 入力 | string | Yes | 表示言語コード |
| 更新通知 | 入力 | boolean | No | 新バージョン通知を表示するか |
| 暗号化キー | 入力 | string | No | E2E暗号化のキー |
| 予算タイプ | 入力 | string | Yes | 'rollover'（エンベロープ）または'report'（トラッキング） |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|---------|------|
| Aboutセクション | component | バージョン情報、更新通知 |
| ThemeSettingsセクション | component | テーマ設定 |
| FormatSettingsセクション | component | 数値/日付フォーマット設定 |
| CurrencySettingsセクション | component | 通貨設定（実験的機能） |
| LanguageSettingsセクション | component | 言語設定 |
| AuthSettingsセクション | component | 認証設定 |
| EncryptionSettingsセクション | component | 暗号化設定 |
| BudgetTypeSettingsセクション | component | 予算タイプ設定 |
| Backupsセクション | component | バックアップ設定（Electron版のみ） |
| ExportBudgetセクション | component | エクスポート設定 |
| AdvancedToggleセクション | component | 高度な設定（折りたたみ） |

## イベント仕様

### 1-テーマ変更

ThemeSettingsのSelectでテーマを変更すると、`switchTheme`関数が呼び出され、グローバル設定が更新される。カスタムテーマ選択時は`setInstalledThemeJson`が呼び出される。

### 2-数値形式変更

FormatSettingsの「Numbers」Selectで形式を変更すると、`setNumberFormatPref`により同期設定が更新される。

### 3-小数非表示切り替え

「Hide decimal places」チェックボックスを切り替えると、`setHideFractionPref`により同期設定が更新される。

### 4-日付形式変更

FormatSettingsの「Dates」Selectで形式を変更すると、`setDateFormatPref`により同期設定が更新される。

### 5-週開始曜日変更

FormatSettingsの「First day of the week」Selectで曜日を変更すると、`setFirstDayOfWeekIdxPref`により同期設定が更新される。

### 6-言語変更

LanguageSettingsで言語を変更すると、i18nの言語設定と同期設定が更新される。

### 7-更新通知切り替え

Aboutセクションの「Display a notification when updates are available」チェックボックスを切り替えると、`setNotifyWhenUpdateIsAvailablePref`により設定が更新される。

### 8-予算ファイル切り替え

モバイル画面幅で「Switch file」ボタンを押すと、`closeBudget`アクションがディスパッチされ、予算ファイル一覧画面へ遷移する。

### 9-予算タイプ変更

BudgetTypeSettingsで予算タイプを変更すると、エンベロープ予算とトラッキング予算が切り替わる。

### 10-暗号化設定

EncryptionSettingsで暗号化を有効化/無効化すると、E2E暗号化の設定が更新される。

### 11-データエクスポート

ExportBudgetで「Export」ボタンを押すと、予算データがエクスポートされる。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 設定変更 | prefs（ローカル/同期） | UPDATE | 各種設定値を更新 |
| キャッシュリセット | ローカルキャッシュ | DELETE | キャッシュをクリア |
| 同期リセット | 同期データ | DELETE | 同期データをリセット |
| 取引修復 | transactions | UPDATE | 取引データを修復 |

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

#### prefs（同期設定）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | dateFormat | 'MM/dd/yyyy', 'dd/MM/yyyy'等 | 日付形式 |
| UPDATE | numberFormat | 'comma-dot', 'dot-comma'等 | 数値形式 |
| UPDATE | hideFraction | 'true'/'false' | 小数非表示 |
| UPDATE | firstDayOfWeekIdx | '0'-'6' | 週開始曜日 |
| UPDATE | budgetType | 'rollover'/'report' | 予算タイプ |

#### prefs（グローバル設定）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | theme | 'light', 'dark', 'auto', 'midnight' | テーマ |
| UPDATE | preferredDarkTheme | 'dark', 'midnight' | autoテーマ時のダークテーマ |
| UPDATE | notifyWhenUpdateIsAvailable | true/false | 更新通知 |
| UPDATE | floatingSidebar | true/false | フローティングサイドバー |
| UPDATE | installedCustomTheme | JSON | カスタムテーマ |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|---------|
| MSG_UP_TO_DATE | 情報 | You're up to date! | 更新通知有効かつ最新版の場合 |
| MSG_NEW_VERSION | 情報 | New version available: {version} | 新バージョンがある場合 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| バージョン情報取得失敗 | エラーメッセージは表示せず、更新通知を非表示 |
| 設定保存失敗 | 通知で警告を表示 |

## 備考

- 設定項目は縦方向にスクロール可能なリスト形式で表示
- モバイル画面幅ではフローティングサイドバー設定が適用されない
- Electron版のみバックアップ設定が表示される
- 実験的機能フラグにより通貨設定の表示/非表示が切り替わる
- カスタムテーマ機能は実験的フラグで制御
- 高度な設定はAdvancedToggleで折りたたみ表示
- prefs-updatedイベントをリッスンして設定変更を検知

---

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

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

### 推奨読解順序

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

まず、設定画面のメインコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.tsx | `packages/desktop-client/src/components/settings/index.tsx` | `Settings`関数コンポーネントがエントリーポイント |

**主要処理フロー**:
1. **173-263行**: `Settings`関数 - メインコンポーネント
2. **175-179行**: 各種フックでの設定値取得
3. **181-183行**: closeBudget - 予算ファイル切り替え
4. **185-192行**: prefs-updatedイベントリスナー
5. **202-261行**: 設定セクションのレンダリング

#### Step 2: 各設定セクションを理解する

個別の設定コンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Themes.tsx | `packages/desktop-client/src/components/settings/Themes.tsx` | テーマ設定 |
| 2-2 | Format.tsx | `packages/desktop-client/src/components/settings/Format.tsx` | フォーマット設定 |
| 2-3 | LanguageSettings.tsx | `packages/desktop-client/src/components/settings/LanguageSettings.tsx` | 言語設定 |
| 2-4 | AuthSettings.tsx | `packages/desktop-client/src/components/settings/AuthSettings.tsx` | 認証設定 |
| 2-5 | Encryption.tsx | `packages/desktop-client/src/components/settings/Encryption.tsx` | 暗号化設定 |
| 2-6 | BudgetTypeSettings.tsx | `packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx` | 予算タイプ設定 |

#### Step 3: 高度な設定を理解する

折りたたみ内の設定コンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Reset.tsx | `packages/desktop-client/src/components/settings/Reset.tsx` | キャッシュ/同期リセット |
| 3-2 | RepairTransactions.tsx | `packages/desktop-client/src/components/settings/RepairTransactions.tsx` | 取引修復 |
| 3-3 | Experimental.tsx | `packages/desktop-client/src/components/settings/Experimental.tsx` | 実験的機能 |

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

```
Settings (エントリーポイント)
    │
    ├─ useGlobalPref('floatingSidebar')
    │
    ├─ useMetadataPref('budgetName')
    │
    ├─ useFeatureFlag('currency')
    │
    ├─ listen('prefs-updated')
    │      └─ loadPrefs
    │
    ├─ 予算名表示 + Switch fileボタン（モバイル）
    │      └─ closeBudget
    │
    ├─ About
    │      ├─ useServerVersion
    │      ├─ useSelector(state.app.versionInfo)
    │      ├─ useGlobalPref('notifyWhenUpdateIsAvailable')
    │      └─ getLatestAppVersion
    │
    ├─ ThemeSettings
    │      ├─ useTheme
    │      ├─ usePreferredDarkTheme
    │      ├─ useFeatureFlag('customThemes')
    │      ├─ useGlobalPref('installedCustomTheme')
    │      └─ ThemeInstaller（カスタムテーマ）
    │
    ├─ FormatSettings
    │      ├─ useSyncedPref('firstDayOfWeekIdx')
    │      ├─ useDateFormat
    │      ├─ useSyncedPref('dateFormat')
    │      ├─ useSyncedPref('numberFormat')
    │      └─ useSyncedPref('hideFraction')
    │
    ├─ CurrencySettings（実験的フラグ時）
    │      └─ useSyncedPref('defaultCurrencyCode')
    │
    ├─ LanguageSettings
    │
    ├─ AuthSettings
    │
    ├─ EncryptionSettings
    │
    ├─ BudgetTypeSettings
    │
    ├─ Backups（Electron版のみ）
    │
    ├─ ExportBudget
    │
    └─ AdvancedToggle
           ├─ AdvancedAbout
           │      ├─ useMetadataPref('id')
           │      └─ useMetadataPref('groupId')
           ├─ ResetCache
           ├─ ResetSync
           ├─ RepairTransactions
           └─ ExperimentalFeatures
```

### データフロー図

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

設定変更 ─────────────────▶ 各設定コンポーネント
                              │
                              ├──▶ useGlobalPref
                              │         │
                              │         ▼
                              │    グローバル設定（ローカル）
                              │
                              ├──▶ useSyncedPref
                              │         │
                              │         ▼
                              │    同期設定（サーバー同期）
                              │
                              └──▶ useMetadataPref
                                        │
                                        ▼
                                   メタデータ設定

prefs-updated ────────────▶ listen
                              │
                              ▼
                           loadPrefs
                              │
                              ▼
                        Redux state更新
                              │
                              ▼
                        画面再レンダリング

Switch file ──────────────▶ closeBudget
                              │
                              ▼
                        予算ファイル一覧へ遷移

テーマ変更 ───────────────▶ switchTheme
                              │
                              ▼
                        useGlobalPref更新
                              │
                              ▼
                        CSS変数更新
                              │
                              ▼
                        UI色変更
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/desktop-client/src/components/settings/index.tsx` | ソース | メインコンポーネント |
| Themes.tsx | `packages/desktop-client/src/components/settings/Themes.tsx` | ソース | テーマ設定 |
| Format.tsx | `packages/desktop-client/src/components/settings/Format.tsx` | ソース | フォーマット設定 |
| LanguageSettings.tsx | `packages/desktop-client/src/components/settings/LanguageSettings.tsx` | ソース | 言語設定 |
| AuthSettings.tsx | `packages/desktop-client/src/components/settings/AuthSettings.tsx` | ソース | 認証設定 |
| Encryption.tsx | `packages/desktop-client/src/components/settings/Encryption.tsx` | ソース | 暗号化設定 |
| BudgetTypeSettings.tsx | `packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx` | ソース | 予算タイプ設定 |
| Backups.tsx | `packages/desktop-client/src/components/settings/Backups.tsx` | ソース | バックアップ設定 |
| Export.tsx | `packages/desktop-client/src/components/settings/Export.tsx` | ソース | エクスポート設定 |
| Reset.tsx | `packages/desktop-client/src/components/settings/Reset.tsx` | ソース | リセット機能 |
| RepairTransactions.tsx | `packages/desktop-client/src/components/settings/RepairTransactions.tsx` | ソース | 取引修復 |
| Experimental.tsx | `packages/desktop-client/src/components/settings/Experimental.tsx` | ソース | 実験的機能 |
| Currency.tsx | `packages/desktop-client/src/components/settings/Currency.tsx` | ソース | 通貨設定 |
| ThemeInstaller.tsx | `packages/desktop-client/src/components/settings/ThemeInstaller.tsx` | ソース | カスタムテーマインストーラー |
| UI.tsx | `packages/desktop-client/src/components/settings/UI.tsx` | ソース | 共通UIコンポーネント |
