# 通知設計書 21-クリップボード利用不可

## 概要

本ドキュメントは、LiamプロジェクトにおけるクリップボードAPI利用不可通知（UI通知・トースト）の設計仕様を定義する。

### 本通知の処理概要

クリップボードAPIが利用できない環境においてユーザーがコピー操作を実行した際に、エラー状態を視覚的にフィードバックするUI通知（トースト）を表示する機能である。

**業務上の目的・背景**：ユーザーがデータをクリップボードにコピーしようとした際、ブラウザがClipboard APIをサポートしていない、またはHTTPSではない環境など技術的制約によりコピー機能が使用できない場合がある。このような状況でユーザーに適切なフィードバックを提供し、操作が失敗したことを明示的に伝えることで、ユーザー体験を向上させることを目的とする。

**通知の送信タイミング**：ユーザーがExportドロップダウンメニューから「Copy PostgreSQL」または「Copy YAML」を選択し、`navigator.clipboard`または`navigator.clipboard.writeText`が存在しない（Feature Detectionで検出）場合に即座にトースト通知が表示される。

**通知の受信者**：コピー操作を実行したユーザー本人がブラウザ上で直接通知を受け取る。サーバーへの送信や他ユーザーへの通知は行われない。

**通知内容の概要**：タイトル「Clipboard unavailable」としてエラーステータスのトースト通知を表示する。説明文は含まれない。

**期待されるアクション**：ユーザーは通知を確認後、手動でデータをコピーする代替手段を検討するか、HTTPSで保護された環境でアクセスし直すことが期待される。

## 通知種別

UI通知（トースト） - アプリ内通知

## 送信仕様

### 基本情報

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

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

コピー操作を実行したユーザーのブラウザ上に直接表示される。ユーザー認証状態やロールに関係なく、操作者本人にのみ通知される。

## 通知テンプレート

### UI通知（トースト）の場合

| 項目 | 内容 |
|-----|------|
| タイトル | Clipboard unavailable |
| 説明 | なし |
| ステータス | error |
| 表示位置 | header（画面上部） |

### 本文テンプレート

```
タイトル: Clipboard unavailable
ステータス: error
```

### 添付ファイル

該当なし（UI通知のため添付ファイルは存在しない）

## テンプレート変数

該当なし（固定メッセージのため変数は使用しない）

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | ExportドロップダウンでCopy PostgreSQL選択 | `!navigator.clipboard \|\| !navigator.clipboard.writeText` | クリップボードAPIが利用できない場合 |
| 画面操作 | ExportドロップダウンでCopy YAML選択 | `!navigator.clipboard \|\| !navigator.clipboard.writeText` | クリップボードAPIが利用できない場合 |
| 画面操作 | useCopyフックを通じたコピー操作 | `!navigator.clipboard \|\| !navigator.clipboard.writeText` | クリップボードAPIが利用できない場合 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| クリップボードAPI利用可能 | `navigator.clipboard`と`navigator.clipboard.writeText`が両方存在する場合は本通知は表示されない |
| toastMessagesが未設定 | useCopyフック使用時、toastオプションが未設定の場合は通知されない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがコピー操作を実行] --> B{navigator.clipboard存在?}
    B -->|No| E[エラーログ出力]
    B -->|Yes| C{navigator.clipboard.writeText存在?}
    C -->|No| E
    C -->|Yes| D[クリップボード操作を続行]
    E --> F{toastMessages設定?}
    F -->|Yes| G[Clipboard unavailableトースト表示]
    F -->|No| H[処理終了]
    G --> H
```

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

### 参照テーブル一覧

該当なし（UI通知のためデータベースアクセスは発生しない）

### 更新テーブル一覧

該当なし（UI通知のためデータベース更新は発生しない）

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| クリップボードAPI未サポート | ブラウザがClipboard APIをサポートしていない | エラートースト表示後、処理終了 |
| セキュアコンテキスト未使用 | HTTPSではない環境での利用 | エラートースト表示後、処理終了 |

### リトライ仕様

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

## 配信設定

### レート制限

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

### 配信時間帯

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

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

- 本通知は個人情報を含まない固定メッセージである
- クリップボードAPIはセキュアコンテキスト（HTTPS）でのみ利用可能なため、HTTP環境では本通知が表示される可能性がある
- ユーザーのブラウザ環境情報（Clipboard API非サポート）がコンソールログに出力されるが、サーバーには送信されない

## 備考

- Radix UI Toastコンポーネントを使用して実装されている
- トースト通知は一定時間後に自動的に非表示となる（Radix UIのデフォルト動作）
- `useCopy`フックを通じた統一的なコピー処理においても同様の通知が表示される

---

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

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

### 推奨読解順序

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

まず、トースト通知で使用されるデータ構造を理解することが重要である。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型とToastStatus型の定義を確認。statusが'error'となる |

**読解のコツ**: TypeScriptの型定義を確認し、トースト通知に必要なプロパティ（title, description, status）を理解する。

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

処理の起点となるExportDropdownコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExportDropdown.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/ExportDropdown/ExportDropdown.tsx` | handleCopyPostgreSQL、handleCopyYaml関数でのFeature Detection |

**主要処理フロー**:
1. **22-29行目**: handleCopyPostgreSQL関数内でnavigator.clipboardの存在チェック
2. **23行目**: Feature Detectionによる条件分岐
3. **24-28行目**: クリップボードAPI未サポート時のトースト表示
4. **57-65行目**: handleCopyYaml関数でも同様の処理

#### Step 3: 共通フックを理解する

useCopyフックによる汎用的なコピー処理を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | useCopy.ts | `frontend/packages/ui/src/hooks/useCopy.ts` | 汎用コピーフックでのFeature Detection実装 |

**主要処理フロー**:
- **28行目**: `!navigator.clipboard || !navigator.clipboard.writeText`による検出
- **29行目**: コンソールへのエラーログ出力
- **30-35行目**: toastMessages設定時の「Clipboard unavailable」通知表示

#### Step 4: トースト表示システムを理解する

トースト通知の表示メカニズムを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | useToastフックの実装 |
| 4-2 | Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | Radix UIを使用したトースト表示コンポーネント |

**主要処理フロー**:
- **5-12行目** (useToast.tsx): positionに応じてheaderToastまたはcommandPaletteToastを返却
- **20-47行目** (Toast.tsx): Toastコンポーネントでstatusに応じたスタイリング適用

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

```
ExportDropdown (erd-core)
    │
    ├─ handleCopyPostgreSQL()
    │      ├─ navigator.clipboard チェック
    │      │      └─ 未サポート → toast({ title: 'Clipboard unavailable', status: 'error' })
    │      └─ サポート → クリップボード書き込み処理
    │
    └─ handleCopyYaml()
           ├─ navigator.clipboard チェック
           │      └─ 未サポート → toast({ title: 'Clipboard unavailable', status: 'error' })
           └─ サポート → クリップボード書き込み処理

useCopy (ui/hooks)
    │
    └─ copy()
           ├─ navigator.clipboard チェック
           │      └─ 未サポート → toast({ title: 'Clipboard unavailable', status: 'error' })
           └─ サポート → クリップボード書き込み処理
```

### データフロー図

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

ユーザーコピー操作 ───▶ Feature Detection ───▶ クリップボードAPI未検出
                              │
                              ▼
                        useToastフック呼び出し ───▶ トースト通知表示
                              │                       (Clipboard unavailable)
                              ▼
                        console.error出力 ───▶ ブラウザコンソール
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ExportDropdown.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/ExportDropdown/ExportDropdown.tsx` | ソース | コピー機能のUIとロジック |
| useCopy.ts | `frontend/packages/ui/src/hooks/useCopy.ts` | ソース | 汎用コピーフック |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トースト表示フック |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト表示コンポーネント |
| types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ソース | 型定義 |
