# 機能設計書 7-テーマカスタマイズ取得

## 概要

本ドキュメントは、ECモバイルアプリケーションにおけるテーマカスタマイズ取得機能の設計仕様を定義する。BagistoのCMSで設定されたホーム画面のレイアウト設定（スライダー、バナー、商品カルーセル、カテゴリカルーセル、サービス情報等）を取得する。

### 本機能の処理概要

**業務上の目的・背景**：ECサイト運営者がバックエンドのCMS管理画面からホーム画面のレイアウトやコンテンツを動的に変更できるようにする。これにより、キャンペーン時のバナー変更やおすすめ商品の入れ替えをアプリの再ビルドなしに実現する。

**機能の利用シーン**：ホーム画面の初期表示時に呼び出され、取得したテーマ設定に基づいてUIコンポーネントを動的に構成する。

**主要な処理内容**：
1. GraphQL APIを通じたテーマカスタマイズデータの取得
2. 取得データの解析（タイプ別の設定抽出）
3. 言語別の翻訳コンテンツの選択
4. 各カルーセル用のフィルタ条件の抽出

**関連システム・外部連携**：Bagisto（Laravel製ECプラットフォーム）のGraphQL APIと連携し、themeCustomization queryを呼び出す。

**権限による制御**：本機能は認証不要で呼び出し可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 2 | ホーム画面 | 主画面 | テーマ設定に基づくコンテンツ表示 |

## 機能種別

データ取得 / API連携

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| - | - | - | 入力パラメータなし | - |

### 入力データソース

- なし（固定queryを実行）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| themeCustomization | List<ThemeCustomization> | テーマカスタマイズ設定のリスト |
| themeCustomization[].id | String | カスタマイズID |
| themeCustomization[].type | String | カスタマイズタイプ（image_carousel, product_carousel, category_carousel, static_content, footer_links, services_content） |
| themeCustomization[].name | String | カスタマイズ名 |
| themeCustomization[].translations | List<Translations> | 言語別設定 |
| translations[].localeCode | String | 言語コード |
| translations[].options | Options | 各種オプション設定 |
| options.css | String | カスタムCSS |
| options.html | String | カスタムHTML |
| options.title | String | タイトル |
| options.images | List<Images> | 画像URLリスト（スライダー用） |
| options.filters | List<Filters> | フィルタ条件（カルーセル用） |
| options.services | List<ServiceModel> | サービス情報リスト |
| options.links | List<LinkModel> | リンク情報リスト |
| options.column_1/2/3 | List<ColumnModel> | フッターカラム情報 |

### 出力先

- HomePageBloc：FetchHomeCustomDataState.successでホーム画面に渡される
- GlobalData：各カルーセルのデータ取得に使用

## 処理フロー

### 処理シーケンス

```
1. ホーム画面でFetchHomeCustomDataイベント発行
   └─ homePageBloc?.add(FetchHomeCustomData())

2. HomePageBlocがHomePageRepositoryを通じてAPI呼び出し
   └─ repository?.getThemeCustomizationData()

3. ApiClientがGraphQL queryを実行
   └─ mutation.themeCustomizationData()

4. レスポンスをThemeCustomDataModelにパース
   └─ ThemeCustomDataModel.fromJson()

5. FetchHomeCustomDataState.success発行
   └─ emit(FetchHomeCustomDataState.success(homepageSliders: data))

6. ホーム画面でgetHomePageData()を呼び出し
   └─ テーマ設定を解析して各カルーセルのデータ取得をトリガー
```

### フローチャート

```mermaid
flowchart TD
    A[FetchHomeCustomData] --> B[getThemeCustomizationData]
    B --> C[GraphQL query実行]
    C --> D[ThemeCustomDataModel生成]
    D --> E[FetchHomeCustomDataState.success]
    E --> F[getHomePageData解析]
    F --> G{typeの判定}
    G -->|image_carousel| H[スライダー画像表示]
    G -->|product_carousel| I[商品データ取得トリガー]
    G -->|category_carousel| J[カテゴリデータ取得トリガー]
    G -->|services_content| K[サービス情報表示]
    G -->|footer_links| L[フッターリンク表示]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-001 | 言語別コンテンツ | GlobalData.localeに一致するtranslationsを使用 | 常時 |
| BR-002 | タイプ別処理 | typeフィールドに応じて表示コンポーネントを選択 | 常時 |
| BR-003 | フィルタ条件抽出 | product_carousel/category_carouselのfiltersを抽出してAPI呼び出し | カルーセルタイプ時 |

### 計算ロジック

本機能に計算ロジックは存在しない。

## データベース操作仕様

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

モバイルアプリ側ではデータベース操作なし（APIからのデータ取得のみ）。

### テーブル別操作詳細

モバイルアプリ側でのローカルストレージ操作なし。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | ネットワークエラー | API通信失敗 | FetchHomeCustomDataState.fail発行、エラーメッセージ表示 |
| - | パースエラー | JSONパース失敗 | 例外をキャッチしてfail状態発行 |

### リトライ仕様

本機能にリトライ処理は実装されていない。

## トランザクション仕様

モバイルアプリ側ではトランザクション管理は行わない。

## パフォーマンス要件

- API応答時間：2秒以内

## セキュリティ考慮事項

- 公開データのみを取得するため認証不要
- HTMLコンテンツ表示時のXSS対策が必要（Flutter WebViewを使用する場合）

## 備考

- テーマカスタマイズはBagistoの管理画面（Theme Customization）で設定
- 本機能はホームページ表示機能（No.6）の一部として呼び出される

---

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

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

### 推奨読解順序

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

レスポンスのデータモデルを確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | theme_customization.dart | `lib/screens/home_page/data_model/theme_customization.dart` | ThemeCustomDataModel、ThemeCustomization、Translations、Options等の構造 |

**主要クラス**:
- **17-28行目**: ThemeCustomDataModel - ルートモデル
- **31-43行目**: ThemeCustomization - 個別カスタマイズ項目
- **46-57行目**: Translations - 言語別設定
- **60-87行目**: Options - オプション詳細
- **90-108行目**: ServiceModel - サービス情報
- **111-143行目**: LinkModel - リンク情報
- **166-187行目**: Images, Filters - 画像とフィルタ

#### Step 2: ビジネスロジックを理解する

Blocでのイベント処理を確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | home_page_bloc.dart | `lib/screens/home_page/bloc/home_page_bloc.dart` | FetchHomeCustomData処理（115-126行目） |

#### Step 3: リポジトリ層を理解する

API呼び出しの実装を確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | home_page_repository.dart | `lib/screens/home_page/bloc/home_page_repository.dart` | getThemeCustomizationData()（98-107行目） |

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

GraphQL query定義を確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | mutation_query.dart | `lib/services/mutation_query.dart` | themeCustomizationData()（66-118行目） |
| 4-2 | api_client.dart | `lib/services/api_client.dart` | getThemeCustomizationData()メソッド |

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

```
HomeScreen.fetchHomepageData()
    │
    └─ HomePageBloc
           │
           └─ FetchHomeCustomData
                  │
                  └─ HomePageRepository.getThemeCustomizationData()
                         │
                         └─ ApiClient.getThemeCustomizationData()
                                │
                                └─ GraphQlApiCalling
                                       │
                                       └─ MutationsData.themeCustomizationData()
```

### データフロー図

```
[API]                          [パース]                        [利用]

themeCustomization query
        │
        ▼
   JSON Response
        │
        ▼
ThemeCustomDataModel.fromJson()
        │
        ▼
ThemeCustomDataModel
        │
        ├──▶ image_carousel ───▶ スライダー表示
        │
        ├──▶ product_carousel ───▶ FetchAllProductsEvent
        │                              │
        │                              ▼
        │                         商品カルーセル
        │
        ├──▶ category_carousel ───▶ FetchHomePageCategoriesEvent
        │                              │
        │                              ▼
        │                         カテゴリカルーセル
        │
        ├──▶ services_content ───▶ サービス情報表示
        │
        └──▶ footer_links ───▶ フッターリンク表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| theme_customization.dart | `lib/screens/home_page/data_model/theme_customization.dart` | ソース | データモデル定義 |
| home_page_bloc.dart | `lib/screens/home_page/bloc/home_page_bloc.dart` | ソース | Bloc（イベント処理） |
| home_page_repository.dart | `lib/screens/home_page/bloc/home_page_repository.dart` | ソース | リポジトリ層 |
| api_client.dart | `lib/services/api_client.dart` | ソース | API通信クライアント |
| mutation_query.dart | `lib/services/mutation_query.dart` | ソース | GraphQLクエリ定義 |
| home_page.dart | `lib/screens/home_page/home_page.dart` | ソース | ホーム画面（呼び出し元） |
