Firebase「Trigger Email from Firestore」拡張機能のセットアップ方法 (ロリポップメール編)

Firestoreへのデータ追加をトリガーに自動メール送信を行う機能を実装したい場合、Firebase Extensionsの「Trigger Email from Firestore」が非常に便利です。この記事では、ロリポップのメールサーバーを使用した設定方法と、実際のコード例を解説します。

1. 拡張機能の概要

Firebase Extensions「Trigger Email from Firestore」は、Firestoreの特定コレクションにドキュメントを追加するだけで、自動的にメール送信ができる機能です。ユーザーからの問い合わせや通知メールの自動送信などに活用できます。

2. SMTPサーバー情報の準備

ロリポップのSMTPサーバー設定情報は以下のとおりです：

SMTPサーバー: smtp.lolipop.jp
ポート: 465
ユーザー名: (メールアドレス)
パスワード: (パスワード)
セキュリティ: SSL/TLS

※ ユーザー名、パスワードはロリポップ！公式サイトのメールタブから確認することが可能です。

SMTP URIの形式は次のようになります：

smtps://(メールアドレス):(パスワード)@smtp.lolipop.jp:465

3. 拡張機能のインストールと設定

Firebaseコンソールから「Extensions」メニューを開き、「Trigger Email」（firestore-send-email）を選択してインストールします。

以下は、Firebase Extensions「Trigger Email from Firestore」をインストールする際に表示されるすべての設定項目です。必須項目には（必須）と明記しています。

必須項目の詳細解説

1. Cloud Functions location（必須）

2. SMTP connection URI（必須）

3. Email documents collection（必須）

4. Default FROM address（必須）

実装上の注意点

これらの設定を正しく行うことで、Firebase Extensions「Trigger Email from Firestore」を使った自動メール送信機能を効果的に実装できます。

4. リージョン設定の確認と修正

deploy.shなどのデプロイスクリプトがある場合、そこでのリージョン設定もFirestoreのリージョンと一致させる必要があります：

bash

# 例：deploy.shの修正
PROJECT_ID="your-project-id"
REGION="asia-northeast1"  # Firestoreのリージョンと一致させる
BUCKET_NAME="${PROJECT_ID}.firebasestorage.app"

5. Firestoreのメールドキュメント形式

メール送信用のドキュメント形式は以下のようになります：

javascript

{
  "to": "送信先メールアドレス",  // 配列も可能
  "message": {
    "subject": "メールの件名",
    "text": "メール本文（プレーンテキスト）",  // textかhtml、または両方
    "html": "メール本文（HTML）"
  },
  "replyTo": "返信先メールアドレス"  // 任意
}

6. 実装例：問い合わせフォームからのメール送信

以下は、ユーザーからの問い合わせをFirestoreに保存し、自動的に管理者宛にメールを送信する実装例です：

typescript

// 問い合わせのインターフェース
export interface Inquiry {
  user_id: string | null;
  category: string;
  subject: string;
  message: string;
  email: string;
}

// お問い合わせを送信する関数
export const submitInquiry = async (inquiry: Inquiry): Promise<void> => {
  try {
    // ユーザーIDを設定（認証されている場合）
    const currentUser = auth.currentUser;
    const userId = currentUser ? currentUser.uid : null;

    // ドキュメントID生成（user-id_date形式）
    const date = new Date().toISOString().replace(/[:.]/g, '-');
    const inquiryId = `${userId || 'anonymous'}_${date}`;

    // inquiries/service/items/{inquiryId}へのリファレンス
    const inquiryRef = doc(db, 'inquiries', 'service', 'items', inquiryId);

    // サービス問い合わせを追加
    await setDoc(inquiryRef, {
      ...inquiry,
      user_id: userId,
      type: 'inquiry',
      status: 'new',
      created_at: serverTimestamp(),
      updated_at: serverTimestamp()
    });

    // メール通知のドキュメントを作成
    await addDoc(collection(db, 'mail'), {
      to: '(管理者メールアドレス)',
      message: {
        subject: `【アプリ名】問い合わせ: ${inquiry.subject}`,
        html: `
          <h2>お問い合わせ内容</h2>
          <p><strong>カテゴリ:</strong> ${inquiry.category}</p>
          <p><strong>件名:</strong> ${inquiry.subject}</p>
          <p><strong>メッセージ:</strong></p>
          <p>${inquiry.message.replace(/\n/g, '<br>')}</p>
          <p><strong>ユーザーメールアドレス:</strong> ${inquiry.email}</p>
          <p><strong>ユーザーID:</strong> ${userId || 'anonymous'}</p>
        `
      },
      replyTo: inquiry.email  // 返信先を設定
    });

    console.log('問い合わせが正常に送信されました');
  } catch (error) {
    console.error('問い合わせの送信に失敗しました:', error);
    throw error;
  }
};

7. 注意点と制限事項

送信元アドレスについて

ロリポップなどの一般的なSMTPサーバーでは、認証したアカウント以外のメールアドレスを送信元として使用することはできません。つまり：

セキュリティ対策

まとめ

Firebase Extensions「Trigger Email from Firestore」を使えば、サーバーサイドのコード実装なしで自動メール送信機能を簡単に実装できます。特にロリポップのようなレンタルサーバーのメールアドレスと組み合わせることで、独自ドメインでのメール送信も可能になります。

実装時には：

これらのポイントに注意して、効果的な自動メール送信機能を実装しましょう。