# 画面設計書 30-言語選択画面

## 概要

本ドキュメントは、Bagisto eコマースモバイルアプリにおける言語選択画面の設計仕様を記述したものです。アプリ内で表示されるUIの言語を選択・変更する機能を提供します。

### 本画面の処理概要

本画面は、アプリ内で表示されるUIの言語を選択するための設定画面です。選択した言語はSharedPreferencesに保存され、アプリ全体のUI表示に反映されます。言語変更時はアプリが再起動されます。

**業務上の目的・背景**：グローバルeコマースにおいて、複数言語のサポートは重要な機能です。ユーザーが母国語でアプリを利用できることで、ユーザビリティが向上し、購買体験が改善されます。

**画面へのアクセス方法**：設定メニューまたはナビゲーションドロワーから「言語」をタップしてアクセスします。

**主要な操作・処理内容**：
1. 画面初期化時に利用可能な言語リストを取得する
2. 現在選択されている言語をハイライト表示する
3. 言語をタップして新しい言語を選択する
4. 選択確定後、アプリを再起動して変更を反映する

**画面遷移**：設定メニューまたはドロワーから本画面に遷移します。言語変更後はスプラッシュ画面に遷移してアプリが再起動されます。

**権限による表示制御**：特別な権限は不要です。ログイン状態に関係なくアクセス可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 69 | 言語切替 | 主機能 | 表示言語の切替処理（選択後アプリ再起動） |

## 画面種別

選択

## URL/ルーティング

ルート名: `languageScreen`（routes定義による）

## 入出力項目

本画面は入力パラメータを受け取りません。

## 表示項目

### 言語リスト

| 項目名 | データ型 | 説明 |
|--------|---------|------|
| 選択状態アイコン | Icon | 選択時: radio_button_checked、未選択時: radio_button_off |
| 言語名 | String | 言語の名称（例: English, 日本語） |

### 表示フォーマット

各言語は言語名のみで表示されます（例: English, 日本語）。

## イベント仕様

### 1-画面初期化イベント

画面初期化時（initState）に言語リストと現在の選択状態を取得します。

処理フロー：
1. GlobalData.languageData?.localesから言語リストを取得
2. getCode()を呼び出し
3. SharedPreferencesから現在の言語コードを取得
4. 言語コードが空の場合は最初の言語を選択、それ以外は保存されたコードを使用

### 2-言語選択イベント

言語アイテムタップ時の処理です。

処理フロー：
1. GestureDetectorのonTapが呼び出される
2. GlobalData.localeを更新
3. appStoragePref.setCustomerLanguageで言語コードを保存
4. appStoragePref.setLanguageNameで言語名を保存
5. setStateでselectedCodeを更新
6. Hive.deleteBoxFromDisk("getCategoriesDrawerData")でカテゴリキャッシュを削除
7. Hive.deleteBoxFromDisk("recentProducts")で最近見た商品キャッシュを削除
8. RestartWidget.restartApp()でアプリを再起動
9. Navigator.pushNamedAndRemoveUntilでスプラッシュ画面に遷移

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 本画面ではサーバー側のデータベース操作は行わない |

言語設定はクライアント側のSharedPreferencesに保存され、API呼び出し時のパラメータとして使用されます。

### ローカルストレージ（SharedPreferences）

| 操作 | キー | 値 | 備考 |
|-----|-----|-----|------|
| 保存 | customerLanguage | 選択された言語コード | en, ja等 |
| 保存 | languageName | 選択された言語名 | English, 日本語等 |

### Hiveキャッシュ

| 操作 | ボックス名 | 内容 | 備考 |
|-----|-----------|------|------|
| 削除 | recentProducts | 最近見た商品 | 言語変更時に削除 |
| 削除 | getCategoriesDrawerData | カテゴリドロワー | 言語変更時に削除 |

## メッセージ仕様

| メッセージ種別 | メッセージキー | 表示内容 | 表示条件 |
|--------------|--------------|---------|---------|
| タイトル | StringConstants.language | 言語 | AppBarタイトル |

## 例外処理

| 例外状況 | 処理内容 | ユーザーへの表示 |
|---------|---------|----------------|
| 言語データなし | 空のListView表示 | 空の画面 |
| 言語コード取得失敗 | 最初の言語を選択 | デフォルトで選択 |

## 備考

- 言語リストはGlobalData.languageData?.localesから取得（Localesモデル）
- デフォルト言語は言語リストの最初の項目
- 言語変更後はキャッシュをクリアしてアプリを再起動
- RestartWidgetはアプリ全体を再構築するためのウィジェット
- GlobalData.localeはアプリ全体で参照される言語コード
- Hiveは高速なNoSQLデータベースで、キャッシュストレージとして使用
- StringConstants.language.localized()でローカライズされたタイトルを表示

---

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

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

### 推奨読解順序

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

まず、言語データの構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | currency_language_model.dart | `lib/data_model/currency_language_model.dart` | CurrencyLanguageList、Localesの構造 |

**読解のコツ**: CurrencyLanguageListがList<Locales>を持ち、各Localesがid、name、codeを持ちます。通貨データと共通のモデルを使用しています。

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

処理の起点となるファイル・関数を特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | language_view.dart | `lib/screens/language/language_view.dart` | Languageクラスがエントリーポイント |

**主要処理フロー**:
1. **17-22行目**: initStateでGlobalData.languageData?.localesから言語リスト取得、getCode()を呼び出し
2. **24-83行目**: buildメソッドでScaffold、AppBar、言語リスト構築
3. **31-81行目**: ListView.builderによる言語リスト表示
4. **36-54行目**: GestureDetectorのonTapで言語選択処理
5. **86-95行目**: getCode()で現在の言語コードを取得

#### Step 3: グローバルデータを理解する

アプリ全体で使用されるグローバルデータを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | main.dart | `lib/main.dart` | GlobalData、RestartWidgetの定義 |

#### Step 4: ストレージ層を理解する

データの永続化と取得を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | app_storage_pref.dart | `lib/utils/app_storage_pref.dart` | setCustomerLanguage、getCustomerLanguageの実装 |

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

```
Language (language_view.dart)
    │
    ├─ initState()
    │      ├─ GlobalData.languageData?.locales取得
    │      └─ getCode()
    │             └─ appStoragePref.getCustomerLanguage()
    │
    ├─ build()
    │      ├─ AppBar (タイトル表示)
    │      └─ ListView.builder
    │             └─ GestureDetector (各言語行)
    │                    └─ onTap処理
    │
    └─ onTap処理
           ├─ GlobalData.locale更新
           ├─ appStoragePref.setCustomerLanguage()
           ├─ appStoragePref.setLanguageName()
           ├─ setState()
           ├─ Hive.deleteBoxFromDisk("getCategoriesDrawerData")
           ├─ Hive.deleteBoxFromDisk("recentProducts")
           ├─ RestartWidget.restartApp()
           └─ Navigator.pushNamedAndRemoveUntil(splash)
```

### データフロー図

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

GlobalData.languageData ───▶ initState()                     ───▶ 言語リスト表示
                                 │
                                 ▼
                         getCode()
                                 │
                                 ▼
SharedPreferences        ───▶ appStoragePref.getCustomerLanguage() ───▶ 現在選択のハイライト
(customerLanguage)               │
                                 ▼
                         selectedCode設定

言語タップ               ───▶ onTap()                         ───▶ 言語変更
                                 │
                                 ▼
                         GlobalData.locale更新
                                 │
                                 ▼
                         SharedPreferences保存
                          ├─ customerLanguage
                          └─ languageName
                                 │
                                 ▼
                         Hiveキャッシュ削除
                          ├─ getCategoriesDrawerData
                          └─ recentProducts
                                 │
                                 ▼
                         RestartWidget.restartApp()          ───▶ アプリ再起動
                                 │
                                 ▼
                         スプラッシュ画面遷移               ───▶ アプリ再初期化
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| language_view.dart | `lib/screens/language/language_view.dart` | ソース | 画面本体のStatefulWidget |
| currency_language_model.dart | `lib/data_model/currency_language_model.dart` | ソース | 通貨・言語データモデル |
| main.dart | `lib/main.dart` | ソース | GlobalData、RestartWidget定義 |
| app_storage_pref.dart | `lib/utils/app_storage_pref.dart` | ソース | SharedPreferencesラッパー |
| index.dart | `lib/screens/account/utils/index.dart` | ソース | 共通インポートファイル |
