# 通知設計書 20-比較リスト追加成功/失敗通知

## 概要

本ドキュメントは、商品詳細画面から商品を比較リストに追加した際の結果を通知するアプリ内通知の設計を定義する。

### 本通知の処理概要

商品詳細画面においてユーザーが商品を比較リストに追加する操作を行った際、その追加処理の結果（成功または失敗）をリアルタイムでフィードバックするアプリ内オーバーレイ通知機能である。

**業務上の目的・背景**：ECアプリにおいて商品比較機能は、複数の類似商品を並べて検討したいユーザーにとって重要な機能である。比較リストへの追加成功時にはユーザーに操作完了を伝え、追加失敗時（既に追加済み、比較リスト上限到達など）には具体的なエラー内容を提示することで、適切な対処を促す。

**通知の送信タイミング**：比較リスト追加APIリクエストの結果が返却された直後に通知が表示される。具体的には`AddToCompareListState`がBlocから発行されたタイミングで通知処理が実行される。

**通知の受信者**：比較リスト追加操作を実行したユーザー本人のみ。デバイス上で即座に表示されるローカル通知。

**通知内容の概要**：成功時は緑色背景の成功通知で追加完了メッセージを表示。失敗時は赤色背景のエラー通知でエラーメッセージを表示する。

**期待されるアクション**：成功時は商品閲覧を継続するか比較画面へ遷移して商品を比較する。失敗時はエラー内容を確認し、必要に応じて既存の比較リストを整理する。

## 通知種別

アプリ内通知（オーバーレイ通知）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（API応答後即時表示） |
| 優先度 | 中 |
| リトライ | 無（表示は1回のみ） |

### 送信先決定ロジック

比較リスト追加操作を実行したユーザーのデバイス画面に直接表示される。

## 通知テンプレート

### アプリ内通知の場合

| 項目 | 内容 |
|-----|------|
| 表示位置 | 画面上部オーバーレイ |
| 表示時間 | 約3秒（自動消去） |
| 背景色（成功時） | 緑色（Colors.green.shade400） |
| 背景色（失敗時） | 赤色（Colors.red） |

### 本文テンプレート

**成功時**
```
タイトル: Success
メッセージ: {成功メッセージ}（例：比較リストに追加しました）
アイコン: check_circle_outline（白色）
```

**失敗時**
```
タイトル: Failed
メッセージ: {エラーメッセージ}
アイコン: cancel_outlined（白色）
```

### 添付ファイル

該当なし

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| successMsg | 比較リスト追加成功メッセージ | state.successMsg | Yes（成功時） |
| error | エラーメッセージ | state.error | Yes（失敗時） |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | AddToCompareEvent発行 | AddToCompareListState.success受信時 | 比較リスト追加成功 |
| 画面操作 | AddToCompareEvent発行 | AddToCompareListState.fail受信時 | 比較リスト追加失敗 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 未ログイン | ログインが必要な場合（設定による） |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[比較リスト追加アクション] --> B[AddToCompareEvent発行]
    B --> C[ProductScreenBLoc処理]
    C --> D[repository.addToCompare API呼び出し]
    D --> E{API結果}
    E -->|success=true| F[AddToCompareListState.success発行]
    E -->|success=false| G[AddToCompareListState.fail発行]
    F --> H[successNotification表示]
    G --> I[errorNotification表示]
    H --> J[ローダー非表示]
    I --> J
```

## データベース参照・更新仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| products | 商品情報 | 比較対象商品の確認 |
| compare_items | 比較リスト | 既存の比較リスト確認 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| compare_items | INSERT | 比較リストに商品追加 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 既に追加済み | 同じ商品が比較リストに存在 | エラー通知表示 |
| リスト上限到達 | 比較リストの最大数に達している | エラー通知表示、既存商品の削除を促す |
| ネットワークエラー | インターネット接続なし | エラー通知表示 |
| サーバーエラー | サーバー側エラー | エラー通知表示 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0回（自動リトライなし） |
| リトライ間隔 | 該当なし |
| リトライ対象エラー | 該当なし |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

制限なし（ユーザー操作に応じて即時表示）

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

- 比較リストはユーザーセッションまたはデバイスに紐づく
- ログイン状態に応じて比較リストの永続化方法が変わる可能性あり
- 他ユーザーの比較リストへのアクセスは不可

## 備考

- overlay_supportパッケージを使用してオーバーレイ通知を実装
- 比較リストは通常、同一カテゴリの商品を比較するために使用される
- 比較画面では商品のスペック、価格、レビューなどを並べて表示
- 成功時にisLoading=falseが設定される

---

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

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

### 推奨読解順序

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

まず、比較リスト追加レスポンスのデータモデルを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | product_state.dart | `lib/screens/product_screen/bloc/product_state.dart` | AddToCompareListStateの構造を確認 |

**読解のコツ**: AddToCompareListStateのstatus、successMsg、errorプロパティが比較リスト追加成否の判定と通知メッセージに使用される。

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

処理の起点となる商品詳細画面のUIコードを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | product_screen.dart | `lib/screens/product_screen/view/product_screen.dart` | BlocConsumerのlistener内でAddToCompareListStateの処理を確認 |

**主要処理フロー**:
1. **行163-169**: AddToCompareListState処理
2. **行164-165**: 失敗時のerrorNotification呼び出し
3. **行166-168**: 成功時のsuccessNotification呼び出し

#### Step 3: Bloc処理層を理解する

比較リスト追加ビジネスロジックを処理するBlocの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | product_bloc.dart | `lib/screens/product_screen/bloc/product_bloc.dart` | AddToCompareEventのハンドリングを確認 |

#### Step 4: 通知表示層を理解する

通知の実際の表示処理を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | show_message.dart | `lib/widgets/show_message.dart` | successNotification、errorNotificationメソッドの実装を確認 |

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

```
ProductScreen (product_screen.dart)
    │
    ├─ 比較リスト追加アクション
    │      │
    │      └─ AddToCompareEvent発行
    │
    └─ BlocConsumer<ProductScreenBLoc, ProductBaseState>
           │
           └─ listener (行154-196)
                  │
                  └─ AddToCompareListState処理 (行163-169)
                         │
                         ├─ fail → ShowMessage.errorNotification
                         │
                         └─ success → ShowMessage.successNotification
```

### データフロー図

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

比較リスト            AddToCompareEvent         AddToCompareListState
追加アクション   ───▶      発行           ───▶    (success/fail)
                            │                         │
                            ▼                         ▼
                    ProductScreenBLoc           BlocConsumer
                            │                     listener
                            ▼                         │
                      repository                      ▼
                    .addToCompare              ShowMessage
                            │               .successNotification
                            ▼               .errorNotification
                       API Response                   │
                                                      ▼
                                             オーバーレイ通知表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| product_screen.dart | `lib/screens/product_screen/view/product_screen.dart` | ソース | 商品詳細画面UI、通知表示トリガー |
| product_bloc.dart | `lib/screens/product_screen/bloc/product_bloc.dart` | ソース | 商品画面ビジネスロジック |
| product_event.dart | `lib/screens/product_screen/bloc/product_event.dart` | ソース | 商品画面イベント定義 |
| product_state.dart | `lib/screens/product_screen/bloc/product_state.dart` | ソース | 商品画面状態定義 |
| product_repository.dart | `lib/screens/product_screen/bloc/product_repository.dart` | ソース | API通信処理 |
| show_message.dart | `lib/widgets/show_message.dart` | ソース | 通知表示ウィジェット |
| compare_screen.dart | `lib/screens/compare/view/compare_screen.dart` | ソース | 比較画面（関連画面） |
