# 通知設計書 29-比較リスト操作通知

## 概要

本ドキュメントは、比較画面における各種操作（商品削除、全削除、カート追加、ウィッシュリスト追加/削除）の成功/失敗時に表示される通知の設計について記載する。

### 本通知の処理概要

本通知は、比較画面でユーザーが行う各種操作の結果をフィードバックするためのアプリ内通知機能である。対象となる操作には、比較リストからの商品削除、全商品削除、カートへの追加、ウィッシュリストへの追加/削除がある。

**業務上の目的・背景**：比較画面はユーザーが複数の商品を並べて比較検討するための重要な機能である。比較リストの管理、カートへの追加、ウィッシュリストとの連携など、多様な操作が行われるため、各操作の結果をユーザーに明確にフィードバックすることで、ユーザー体験を向上させる必要がある。

**通知の送信タイミング**：ユーザーが比較画面で以下の操作を行い、BLoCがAPIレスポンスを受信した直後に通知が表示される。
- 個別商品削除（RemoveFromCompareListEvent）
- 全商品削除（RemoveAllCompareListEvent）
- カート追加（AddToCartCompareEvent）
- ウィッシュリスト追加（AddToWishlistCompareEvent）
- ウィッシュリスト削除（FetchDeleteWishlistItemEvent）

**通知の受信者**：操作を実行したユーザー本人のみがアプリ内通知を受信する。

**通知内容の概要**：成功時は緑色の背景でチェックマークアイコン、失敗時は赤色の背景でキャンセルアイコンが表示される。

**期待されるアクション**：成功通知を受け取った場合、ユーザーは操作が完了したことを確認できる。失敗通知を受け取った場合、ユーザーはエラー内容を確認し、必要に応じて再操作を試みる。

## 通知種別

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

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（API応答後即時表示） |
| 優先度 | 中 |
| リトライ | なし |

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

操作を実行したユーザーのデバイス上のみに表示される。

## 通知テンプレート

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

| 項目 | 成功時 | 失敗時 |
|-----|-------|-------|
| タイトル | "Success"（ローカライズ対応） | "Failed"（ローカライズ対応） |
| 背景色 | Colors.green.shade400 | Colors.red |
| アイコン | Icons.check_circle_outline | Icons.cancel_outlined |

### 本文テンプレート

```
成功時: {APIレスポンスのmessageまたはsuccessMsg}
失敗時: {APIレスポンスのerrorまたはgraphqlErrors}
```

### 添付ファイル

該当なし

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| successMsg | 成功時のメッセージ | State.successMsg | Yes |
| error | 失敗時のメッセージ | State.error | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | RemoveFromCompareListEvent | API処理完了後 | 個別商品削除 |
| 画面操作 | RemoveAllCompareListEvent | API処理完了後 | 全商品削除 |
| 画面操作 | AddToCartCompareEvent | API処理完了後 | カート追加 |
| 画面操作 | AddToWishlistCompareEvent | API処理完了後 | ウィッシュリスト追加 |
| 画面操作 | FetchDeleteWishlistItemEvent | API処理完了後 | ウィッシュリスト削除 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 該当なし | 操作完了時は常に通知表示 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザー操作] --> B{操作種別}
    B -->|比較削除| C[RemoveFromCompareListEvent発行]
    B -->|全削除| D[RemoveAllCompareListEvent発行]
    B -->|カート追加| E[AddToCartCompareEvent発行]
    B -->|ウィッシュリスト追加| F[AddToWishlistCompareEvent発行]
    B -->|ウィッシュリスト削除| G[FetchDeleteWishlistItemEvent発行]
    C --> H[CompareScreenBloc処理]
    D --> H
    E --> H
    F --> H
    G --> H
    H --> I[API呼び出し]
    I --> J{APIレスポンス}
    J -->|成功| K[ShowMessage.showNotification 成功表示]
    J -->|失敗| L[ShowMessage.showNotification エラー表示]
    K --> M[終了]
    L --> M
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| compare_items | 比較リストアイテム | サーバー側で管理 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| compare_items | DELETE | 個別/全商品削除 |
| cart_items | INSERT | カート追加時 |
| wishlist_items | INSERT/DELETE | ウィッシュリスト操作時 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| API失敗 | サーバーエラー等 | エラー通知を表示 |
| ネットワークエラー | インターネット接続なし | エラー通知を表示 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし |
| リトライ間隔 | - |
| リトライ対象エラー | - |

## 配信設定

### レート制限

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

### 配信時間帯

24時間対応

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

- ユーザー認証状態の確認必須
- API通信はHTTPSで暗号化

## 備考

- ページネーション対応：比較リストはスクロールで追加読み込み
- 操作成功後はCompareScreenFetchEventが発行され、リストが更新される
- 全削除ボタンはFloatingActionButtonとして実装

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | compare_screen_state.dart | `lib/screens/compare/bloc/compare_screen_state.dart` | 各Stateクラスの構造 |
| 1-2 | compare_screen_event.dart | `lib/screens/compare/bloc/compare_screen_event.dart` | 各イベントクラスの定義 |

**読解のコツ**: 5種類の操作に対応する5つのStateクラスがある。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | compare_screen.dart | `lib/screens/compare/view/compare_screen.dart` | BlocConsumerのlistener部分（行131-196）で通知表示処理を確認 |

**主要処理フロー**:
1. **行132-142**: RemoveFromCompareState処理
2. **行143-153**: RemoveAllCompareProductState処理
3. **行154-167**: AddToCartCompareState処理
4. **行168-181**: AddToWishlistCompareState処理
5. **行182-195**: RemoveFromWishlistState処理

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | compare_screen_bloc.dart | `lib/screens/compare/bloc/compare_screen_bloc.dart` | 各イベント処理のロジック |

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | show_message.dart | `lib/widgets/show_message.dart` | showNotificationメソッド（行79-94）の実装 |

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

```
CompareScreen (compare_screen.dart)
    │
    ├─ BlocConsumer<CompareScreenBloc, CompareScreenBaseState>
    │      │
    │      └─ listener (行131-196)
    │             │
    │             ├─ RemoveFromCompareState (行132)
    │             ├─ RemoveAllCompareProductState (行143)
    │             ├─ AddToCartCompareState (行154)
    │             ├─ AddToWishlistCompareState (行168)
    │             └─ RemoveFromWishlistState (行182)
    │
    └─ CompareScreenBloc (compare_screen_bloc.dart)
           │
           ├─ RemoveFromCompareListEvent処理 (行63-79)
           ├─ RemoveAllCompareListEvent処理 (行142-156)
           ├─ AddToCartCompareEvent処理 (行80-96)
           ├─ AddToWishlistCompareEvent処理 (行97-113)
           └─ FetchDeleteWishlistItemEvent処理 (行114-138)
```

### データフロー図

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

ユーザー操作 ───▶ CompareEvent ───▶ CompareScreenBloc
(削除/追加等)            │                 │
                        │                 ▼
                        │          repository API呼び出し
                        │                 │
                        │                 ▼
                        │          CompareState
                        │                 │
                        ▼                 ▼
              ShowMessage.showNotification
              (成功: 緑 / 失敗: 赤)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| compare_screen.dart | `lib/screens/compare/view/compare_screen.dart` | ソース | 画面、通知トリガー |
| compare_screen_bloc.dart | `lib/screens/compare/bloc/compare_screen_bloc.dart` | ソース | BLoC処理 |
| compare_screen_state.dart | `lib/screens/compare/bloc/compare_screen_state.dart` | ソース | 状態定義 |
| compare_screen_event.dart | `lib/screens/compare/bloc/compare_screen_event.dart` | ソース | イベント定義 |
| show_message.dart | `lib/widgets/show_message.dart` | ソース | 通知表示 |
| compare_view.dart | `lib/screens/compare/view/widget/compare_view.dart` | ソース | 比較一覧UI |
