# 通知設計書 6-招待メール（Supabase）

## 概要

本ドキュメントは、Giselleプラットフォームにおける招待メール（Supabase経由）通知の設計仕様を定義するものである。Supabase経由でユーザーがサイトに招待された際に送信される招待承認リンク付きメールの送信仕様、テンプレート構造、処理フローを記載する。

### 本通知の処理概要

本通知は、管理者やチームオーナーがSupabase経由で新規ユーザーをGiselleプラットフォームに招待した際に、招待リンクを送信する機能である。

**業務上の目的・背景**：新規ユーザーをプラットフォームに招待する際、招待されたユーザーが安全かつ簡単にアカウントを作成できるようにする。招待リンクを使用することで、招待を受けたユーザーのみがアカウントを作成でき、スパムや不正なアカウント作成を防止できる。

**通知の送信タイミング**：管理者がSupabaseの招待機能を使用してユーザーを招待した直後に自動送信される。Supabase認証サービスがトリガーとなり、メール送信処理が実行される。

**通知の受信者**：招待されたユーザー。指定されたメールアドレス宛に送信される。招待を受けたユーザーはまだGiselleにアカウントを持っていない状態。

**通知内容の概要**：招待先のサイトURL、招待承認用のリンク、リクエストしていない場合の対応方法、Giselleチームからの署名が含まれる。

**期待されるアクション**：受信者はメール内の「Accept the invite」ボタンをクリックし、アカウント作成フローに進む。パスワードを設定してアカウントを有効化する。

## 通知種別

メール

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 非同期（Supabase Auth経由） |
| 優先度 | 高 |
| リトライ | Supabaseのデフォルト設定に依存 |

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

招待時に指定されたメールアドレスが送信先となる。このメールアドレスでアカウントがまだ存在しないことが前提。

## 通知テンプレート

### メール通知の場合

| 項目 | 内容 |
|-----|------|
| 送信元アドレス | noreply@giselles.ai（Supabase設定に依存） |
| 送信元名称 | Giselle |
| 件名 | You have been invited |
| 形式 | HTML |

### 本文テンプレート

```
[Giselleロゴ]
Welcome to Giselle.
Your journey to build AI agents begins here.
---
You have been invited

You have been invited to create a user on {サイトURL}. Follow this link to accept the invite:

[Accept the invite ボタン]

If you didn't expect this invitation, you can safely ignore this email.

—
The Giselle Team
https://giselles.ai
---
[フッター：Product / Blog / Documentation リンク、SNSアイコン、著作権表示]
```

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | 本通知には添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| siteUrl | 招待先サイトのURL | Supabase設定（SiteURL） | Yes |
| confirmationUrl | 招待承認用URL | Supabase Auth生成（ConfirmationURL） | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| API | Supabase inviteUserByEmail API呼び出し | 指定メールアドレスでアカウントが未作成 | 管理者がユーザーを招待した際 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| アカウント既存 | 指定メールアドレスで既にアカウントが存在する場合 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[管理者がユーザー招待を実行] --> B[Supabase Auth inviteUserByEmail API呼び出し]
    B --> C{アカウント存在確認}
    C -->|存在しない| D[招待URLを生成]
    C -->|存在する| E[エラーを返す]
    D --> F[メールテンプレート展開]
    F --> G[メール送信実行]
    G --> H{送信結果}
    H -->|成功| I[管理者に送信完了を通知]
    H -->|失敗| J[エラーログ記録]
    I --> K[招待ユーザーがリンクをクリック]
    K --> L[アカウント作成フロー開始]
    L --> M[パスワード設定]
    M --> N[アカウント有効化完了]
    J --> O[終了]
    N --> O
    E --> O
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| auth.users | アカウント存在確認 | Supabase管理テーブル |

### テーブル別参照項目詳細

#### auth.users

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| email | アカウント存在確認 | 招待対象メールアドレスと一致するか確認 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| auth.users | INSERT | 招待承認時に新規ユーザーレコード作成 |

#### 送信ログテーブル

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| - | - | - | Supabase管理のため詳細不明 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 送信失敗 | SMTPサーバー接続エラー | Supabaseによる自動リトライ |
| テンプレートエラー | テンプレート変数の展開失敗 | Supabaseエラーログに記録 |
| 宛先不正 | 無効なメールアドレス形式 | バリデーションエラーとして管理者に通知 |
| アカウント重複 | 既にアカウントが存在 | エラーを管理者に通知 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | Supabaseデフォルト設定に依存 |
| リトライ間隔 | Supabaseデフォルト設定に依存 |
| リトライ対象エラー | 一時的な送信エラー |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | Supabaseプラン設定に依存 |
| 1日あたり上限 | Supabaseプラン設定に依存 |

### 配信時間帯

制限なし（24時間送信可能）

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

- 招待リンクはワンタイムトークンを含み、使用後は無効化される
- 招待リンクの有効期限はSupabaseの設定に依存
- TLS暗号化によりメール送信時のデータ保護を実施
- 招待リンクは推測困難なランダム文字列で構成される

## 備考

- 本通知はSupabase認証サービスと連携して動作する
- テンプレートはReact Emailを使用して実装されている
- チーム招待（No.7）とは異なり、これはSupabaseレベルでの招待機能

---

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

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

### 推奨読解順序

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

メールテンプレートに渡されるPropsの構造を理解することで、通知に必要なデータを把握できる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | you-have-been-invited.tsx | `apps/studio.giselles.ai/emails/auth/you-have-been-invited.tsx` | YouHaveBeenInvitedEmailPropsインターフェース（29-32行目）でsiteUrl、confirmationUrlプロパティを確認 |

**読解のコツ**: Supabaseのプレースホルダー`{{ .SiteURL }}`と`{{ .ConfirmationURL }}`がどのように使用されるか理解する。

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

メールテンプレートコンポーネントの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | you-have-been-invited.tsx | `apps/studio.giselles.ai/emails/auth/you-have-been-invited.tsx` | YouHaveBeenInvitedEmailコンポーネント（37-93行目）の構造 |

**主要処理フロー**:
1. **40-43行目**: siteUrlとconfirmationUrlを受け取り、未指定の場合はプレースホルダーを使用
2. **53-56行目**: EmailHeaderに見出し「Welcome to Giselle.」とサブ見出しを設定
3. **61-62行目**: h1スタイルで「You have been invited」見出しを表示
4. **64-67行目**: 招待説明テキスト（サイトURLを強調表示）
5. **69-71行目**: Accept the inviteボタンの配置

#### Step 3: 共通コンポーネントを理解する

メールの共通レイアウトとスタイルを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ヘッダーコンポーネント（見出し・サブ見出し表示） |
| 3-2 | email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | フッターコンポーネント |
| 3-3 | email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | h1スタイル、buttonスタイル、signatureTextスタイル |

**主要処理フロー**:
- **you-have-been-invited.tsx 76-83行目**: 署名セクション（The Giselle Team）

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

```
YouHaveBeenInvitedEmail (you-have-been-invited.tsx)
    │
    ├─ EmailFonts (email-fonts.tsx)
    │      └─ フォント読み込み設定
    │
    ├─ EmailHeader (email-header.tsx)
    │      ├─ ロゴ表示
    │      ├─ 見出し: "Welcome to Giselle."
    │      └─ サブ見出し: "Your journey to build AI agents begins here."
    │
    ├─ 本文セクション
    │      ├─ h1: "You have been invited"
    │      ├─ 説明テキスト（サイトURL強調）
    │      ├─ Accept the inviteボタン（buttonスタイル適用）
    │      ├─ 不正招待時の案内
    │      └─ 署名セクション（signatureTextスタイル適用）
    │
    └─ EmailFooter (email-footer.tsx)
           └─ リンク、SNSアイコン、著作権表示
```

### データフロー図

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

Supabaseからの
siteUrl + ───▶ YouHaveBeenInvitedEmail ───▶ HTMLメール
confirmationUrl  コンポーネント                  （招待先メールアドレス宛に
                                                  Supabase経由で送信）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| you-have-been-invited.tsx | `apps/studio.giselles.ai/emails/auth/you-have-been-invited.tsx` | ソース | 招待メールテンプレート |
| email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ソース | メールヘッダーコンポーネント |
| email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | ソース | メールフッターコンポーネント |
| email-fonts.tsx | `apps/studio.giselles.ai/emails/components/email-fonts.tsx` | ソース | フォント設定コンポーネント |
| email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | ソース | 共通スタイル定義 |
