# 通知設計書 7-ネットワークエラーダイアログ

## 概要

本ドキュメントは、Bagisto ECモバイルアプリにおけるネットワーク接続エラー時に表示されるダイアログ機能の設計書である。

### 本通知の処理概要

本通知は、ネットワーク接続エラーが発生した際に、AlertDialogを使用してユーザーにエラーを通知する機能を提供する。ダイアログ形式での表示により、ユーザーの注意を確実に引き、エラーへの対処を促す。

**業務上の目的・背景**：ECアプリはサーバーとの通信が必須であり、ネットワーク接続がない状態では正常に機能しない。ネットワークエラーが発生した際に、ユーザーに明確にその旨を伝え、適切な対処（Wi-Fi接続確認、モバイルデータ確認など）を促す必要がある。オーバーレイ通知とは異なり、ダイアログ形式で表示することで、ユーザーが必ずエラーを認識し、アクションを取るまで操作を継続できないようにする重要な通知である。

**通知の送信タイミング**：API呼び出し時にネットワーク接続エラーが検出された時点で表示される。オフライン状態での操作試行、タイムアウト、DNS解決失敗など、ネットワーク関連のエラー発生時に使用される。

**通知の受信者**：ネットワークエラーが発生した操作を実行したユーザー本人。ダイアログはモーダルとして表示され、ユーザーがアクションを取るまで他の操作を遮断する。

**通知内容の概要**：「Network Error」（ネットワークエラー）というタイトルと、接続エラーの詳細を説明するメッセージ。確認ボタンにより、ユーザーがエラーを確認したことを示す。

**期待されるアクション**：ユーザーはダイアログを確認し、「Server Error」ボタンをタップしてダイアログを閉じる。その後、ネットワーク接続を確認し、操作を再試行する。オプションのコールバックにより、再試行処理を自動実行することも可能。

## 通知種別

ダイアログ（AlertDialog / モーダルダイアログ）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（エラー発生時に即座表示） |
| 優先度 | 最高（モーダル表示により操作遮断） |
| リトライ | なし（ダイアログ自体のリトライは不要） |

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

1. エラーが発生した操作を実行したユーザーの画面に対してのみ表示
2. BuildContextを通じて現在の画面上にモーダルダイアログとして表示
3. バリア外タップでは閉じない（モーダル強制）

## 通知テンプレート

### ダイアログの場合

| 項目 | 内容 |
|-----|------|
| ダイアログタイプ | AlertDialog |
| タイトルフォント | 19px、Medium weight |
| 本文フォント | 16px、テーマカラー |
| ボタン | TextButton（Server Error） |

### 本文テンプレート

```
タイトル: "Network Error" (StringConstants.networkError.localized())
本文: "Please check your internet connection" (StringConstants.networkConnectionError.localized())
ボタン: "Server Error" (StringConstants.serverError.localized())
```

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | テキストのみ |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| context | ビルドコンテキスト | Flutter Widget | Yes |
| onConfirm | 確認時コールバック | 呼び出し元から渡される（オプション） | No |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| API呼び出し | ネットワークエラー検出 | 接続失敗、タイムアウト等 | 各画面での通信処理時 |
| 接続チェック | checkInternetConnection失敗 | インターネット接続なし | 複数ファイルで使用 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 既にダイアログ表示中 | 複数ダイアログの重複表示を避ける（実装依存） |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[API呼び出し/接続チェック] --> B{ネットワーク接続確認}
    B -->|接続OK| C[通常処理継続]
    B -->|接続NG| D[DialogHelper.networkErrorDialog呼び出し]
    D --> E[showDialog実行]
    E --> F[AlertDialog表示]
    F --> G{ユーザーアクション}
    G -->|ボタンタップ| H{onConfirmコールバック?}
    H -->|Yes| I[closeDialog実行]
    I --> J[onConfirm実行]
    H -->|No| K[ダイアログのみ閉じる]
    J --> L[終了/再試行]
    K --> L
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| なし | - | UI表示のためDB参照なし |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| なし | - | UI表示のためDB更新なし |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| Context無効 | 画面遷移中に呼び出し | Flutterフレームワークがハンドリング |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし（onConfirmコールバックで実装可能） |
| リトライ間隔 | - |
| リトライ対象エラー | - |

## 配信設定

### レート制限

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

### 配信時間帯

制限なし（エラー発生に連動）

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

- エラーメッセージには技術的な詳細を含めない
- ネットワークの状態以上の情報は開示しない
- ユーザーフレンドリーなメッセージを表示

## 備考

- Flutterの標準 `showDialog` と `AlertDialog` を使用
- ダイアログ閉じる処理は `Navigator.of(context).pop()` を使用（`closeDialog` メソッド）
- onConfirmコールバックを使用することで、ダイアログ閉じた後に再試行処理を実行可能
- テーマに応じた色使い（`Theme.of(context).textTheme.bodyLarge!.color`）

---

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

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

### 推奨読解順序

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

ネットワークエラーダイアログのパラメータ構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | dialog_helper.dart | `lib/utils/dialog_helper.dart` | DialogHelperクラスの構造 |

**読解のコツ**: `showDialog` 関数の使い方と `AlertDialog` ウィジェットの構成を理解する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | dialog_helper.dart | `lib/utils/dialog_helper.dart` | networkErrorDialog() メソッドの実装 |

**主要処理フロー**:
- **行19-50**: `networkErrorDialog()` メソッド
- **行19**: 引数: `BuildContext context, {VoidCallback? onConfirm}`
- **行20-49**: `showDialog` 関数の呼び出し
- **行22-48**: `AlertDialog` ウィジェットの構築
- **行23-28**: タイトル（networkError、テーマカラー、19px、Medium）
- **行29-34**: 本文（networkConnectionError、テーマカラー、16px）
- **行35-46**: アクションボタン（TextButton）
- **行37-42**: ボタン押下時の処理
  - **行38-39**: onConfirmがnullでない場合、ダイアログを閉じてからコールバック実行
  - **行40**: closeDialog呼び出し
  - **行41**: onConfirm呼び出し

#### Step 3: ダイアログ閉じる処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | dialog_helper.dart | `lib/utils/dialog_helper.dart` | closeDialog() メソッド |

**主要処理フロー**:
- **行52-54**: `closeDialog()` メソッド
- **行53**: `Navigator.of(context).pop()` でダイアログを閉じる

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

```
呼び出し元（任意の画面/処理）
    |
    +-- ネットワークエラー検出
            |
            +-- DialogHelper.networkErrorDialog(context, {onConfirm})
                    |
                    +-- showDialog()
                            |
                            +-- AlertDialog表示
                                    |
                                    +-- ユーザーがボタンタップ
                                            |
                                            ├── closeDialog(context)
                                            |       |
                                            |       +-- Navigator.of(context).pop()
                                            |
                                            └── onConfirm?.call()
                                                    |
                                                    +-- 再試行処理等
```

### データフロー図

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

ネットワークエラー ──────▶ networkErrorDialog(context, {onConfirm})
                                    |
                                    ▼
                            showDialog()
                                    |
                                    ▼
                            AlertDialog表示
                                    |
                                    ▼
                            ユーザーがボタンタップ
                                    |
                               ┌────┴────┐
                               ▼         ▼
                        closeDialog   onConfirm実行
                               |              |
                               ▼              ▼
                        ダイアログ閉じる   再試行/その他処理
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| dialog_helper.dart | `lib/utils/dialog_helper.dart` | ソース | ネットワークエラーダイアログの表示処理 |
| string_constants.dart | `lib/utils/string_constants.dart` | 設定 | networkError, networkConnectionError, serverError文字列定数 |
| app_constants.dart | `lib/utils/app_constants.dart` | 設定 | AppSizes定数（レイアウト用） |
| application_localization.dart | `lib/utils/application_localization.dart` | ソース | 多言語対応処理 |
