維持費0円（無料枠内）で運用するモダンメールサーバー構築連載の第3回（最終回）です。
- [第1回：概要・送信基盤構築編]
- [第2回：受信＆文字化けのない自動応答編]
前回までで、プログラムがメールを自動解析して返信する「自動化の仕組み」が完成しました。
最終回となる今回は、使い慣れたGmailの画面から、ボタン一つで独自ドメイン（info@…）に差出人を切り替えて手動で送受信を完結させるハイブリッド運用の設定方法を徹底解説します！
1. Gmail連携の全体像と仕組み
今回は、Resendが提供している「SMTPサーバー（メール送信機能）」を利用してGmailと紐付けます。
- 送信の仕組み: Gmailの画面でメールを作成 ➔ ResendのSMTPサーバーを経由 ➔ 独自ドメイン（info@…）として相手に届く
- 受信の仕組み: 相手が独自ドメインに送信 ➔ Cloudflare Email Routingが検知 ➔ あなたのいつものGmailへリアルタイム転送
この設定により、新しいメールアプリをインストールすることなく、今あるGmailだけで独自ドメインの運用が可能になります。
2. ResendでSMTP用のパスワード（API Key）を取得する
Gmailに「Resendの送信機能を使ってもいいよ」と許可を出すために、専用のAPIキーを準備します。
- Resendのダッシュボード にログインします。
- 左メニューの 「API Keys」 ➔ 「Create API Key」 をクリックします。
- 以下のように入力してキーを作成します。
- Name: Gmail-SMTP など（分かりやすい名前）
- Permission: Full Access または Sending Access
- 画面に表示される re_xxxxxxxxxxxx というAPIキーをコピーして控えておいてください（※これが後ほどGmail側で入力するパスワードになります）。
3. Cloudflareで「一時的な転送ルール」を作る
Gmailにアドレスを追加する際、Googleから info@… 宛てに数字の「確認コード」が送られてきます。
しかし、現在Cloudflareの設定が「Workerに送信（自動応答）」になっていると、確認メールをプログラムが吸い込んでしまい、あなたのGmail受信トレイに届きません。
また、「自分のGmailからリクエストを出し、転送を挟んで自分の同じGmailに戻ってくるメール」は、Gmailのループ防止仕様によって受信トレイをバイパスして消えたように見える（アーカイブされる）という罠があります。
これらを確実に回避するため、一時的にCloudflareの設定を変更します。
設定手順
- Cloudflareの 「インターネット受信 (Email Routing)」 ➔ 「宛先アドレス」 タブを開きます。
- 「宛先アドレスを追加」 をクリックし、お使いのGmailアドレスを入力して追加します。
- 追加したGmail宛てにCloudflareから英語の確認メールが届くので、リンク（Verify email address）をクリックしてステータスを 「検証済み (Verified)」 にします。（自動で検証される場合もあります）
- 「ルーティング ルール」 タブに戻り、info のルールの「編集」をクリック。アクションを 「メールに送信（転送）」 に切り替え、宛先に先ほどのGmailを指定して保存します。
💡 ポイント: これで info@… 宛てのメールが、WorkerではなくあなたのGmailへ直接転送されるようになります。
4. Gmailの設定画面でアカウントを追加する
PCのブラウザでGmailを開き、右上の 「歯車アイコン（設定）」 ➔ 「すべての設定を表示」 をクリックします。
1.メールアドレスの追加画面を開く:Gmail「アカウントとインポート」。
- 上部タブの 「アカウントとインポート」 を選択します。
- 「名前:」セクションにある 「他のメールアドレスを追加」 をクリックします。黄色いポップアップウィンドウが立ち上がります。
2.送信者名とアドレスの入力:ポップアップ画面 1ページ目。
- 名前: メールの送信相手に表示したい名前（例：
運営事務局やご自身のお名前）を入力します。 - メールアドレス: あなたの独自ドメインアドレスを入力。
- 「エイリアスとして扱います」のチェックを外します（※ここを外すことで、info宛てに届いたメールに返信する際、自動的に送信元がinfoに切り替わるようになります）。
- 「次のステップ」をクリックします。
3.ResendのSMTP情報を入力する:ポップアップ画面 2ページ目。
Resendのサーバー情報を以下のように正確に入力します。
- SMTPサーバー: smtp.resend.com
- ポート: 587
- ユーザー名: resend （※自身のアドレスではなく、小文字で resend とそのまま入力）
- パスワード: Step 2で取得したResendのAPIキー (re_xxxx…) を貼り付け
- 接続方法: 「TLS を使用した安全な接続 (推奨)」にチェック
入力できたら「アカウントを追加」をクリックします。
5. 確認コードの入力と「仕上げの元戻し」
確認コードの入力
- アカウントの追加に成功すると、Googleから確認メールが送信されます。
- Gmailの左メニューから 「すべてのメール」 フォルダを開いてください（※前述の通り、通常の受信トレイには表示されない仕様になっています）。
- 隠れている「Gmail からのご確認」というメールを開き、記載されている 「確認コード（数字）」 をコピーして、黄色いポップアップ画面に入力して「確認」を押します。
最後に一番重要な「元戻し」
登録が完了したら、メール自動応答システムを復活させるため、Cloudflareの設定を元に戻します。
- Cloudflareの「ルーティング ルール」画面に戻り、info のルールの 「編集」 をクリック。
- アクションを 「Worker に送信」 に戻し、宛先WorkersにあなたのWorker（mail-serverless）を指定して保存します。
６.定型文で相手に自動返信を返しつつ、中身を自分のGmailでも受け取る設定
現状のWorkerだと、送信してきた相手のアドレスに確認メールを送り返すのみで、自分はその独自ドメインに送信されたメールをみることができません。
そこで、定型文で相手に自動返信を返しつつ、中身を自分のGmailでも受け取って確認するというWorkerに変更します。
この機能を追加するには第2回で作成した Workerのプログラム（src/index.ts）に数行のコードを付け足すだけで簡単に実現できます。
仕組みとしては、Workerがメールを解析したあと、Resendを使って「問い合わせてきた相手」と「自分のGmail」の2箇所に同時にメールを送信するように書き換えます。
変更を加えた完成版のコードを共有します。
import { Resend } from 'resend';
import PostalMime from 'postal-mime';
export interface Env {
RESEND_API_KEY: string;
}
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
// (fetchの処理はそのまま)
return new Response('Fetch endpoint active', { status: 200 });
},
async email(message: ForwardableEmailMessage, env: Env, ctx: ExecutionContext): Promise<void> {
try {
const rawEmailStream = message.raw;
const parser = new PostalMime();
const parsedEmail = await parser.parse(rawEmailStream);
const fromAddress = message.from;
const subject = parsedEmail.subject || 'No Subject';
const bodyText = parsedEmail.text || '本文なし';
const decodedSubject = decodeMimeHeader(subject);
// ==========================================
// 【1】相手に送る「自動返信」の本文
// ==========================================
const replyTextToUser = `メールを受け付けました。
件名: ${decodedSubject}
本文:
------------------------------------------
${bodyText}
------------------------------------------
※このメールはシステムより自動送信されています。`;
// ==========================================
// 【2】自分のGmailに届く「通知用」の本文
// ==========================================
const notifyTextToMe = `独自ドメインに新しいメールが届きました。
▼ 送信元 (相手のアドレス):
${fromAddress}
▼ 件名:
${decodedSubject}
▼ 本文:
------------------------------------------
${bodyText}
------------------------------------------`;
const resend = new Resend(env.RESEND_API_KEY);
// 🌟【処理1】問い合わせてきた「相手」に自動返信を送る
await resend.emails.send({
from: 'info@example.com',
to: [fromAddress], // 相手のアドレス
subject: `【自動応答】${decodedSubject}`,
text: replyTextToUser,
});
// 🌟【処理2】あなたの「Gmail」に内容を通知する（転送の代わり）
await resend.emails.send({
from: 'info@example.com',
to: ['your-gmail@gmail.com'], // 自分のGmailアドレスを入力
subject: `【新着通知】${decodedSubject} (From: ${fromAddress})`,
text: notifyTextToMe,
});
} catch (error: any) {
console.error('メール処理中にエラーが発生しました:', error.message);
}
}
};
// (decodeMimeHeader関数はそのまま下に残しておいてください)
function decodeMimeHeader(header: string): string {
const mimeRegex = /=\?UTF-8\?B\?([^\?]+)\?=/gi;
return header.replace(mimeRegex, (_, base64Str) => {
try {
const binaryString = atob(base64Str);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) { bytes[i] = binaryString.charCodeAt(i); }
return new TextDecoder('utf-8').decode(bytes);
} catch (e) { return header; }
});
}src/index.tsが更新できたら以下のコマンドでcloudflare Workersにデプロイします。
npm run deploy動作確認：手動送受信のテスト
全ての構築が完了しましたのでテストしてみます。
Gmailで「新規作成」を押すと、「差出人」の欄をクリックして 先ほど設定した独自ドメイン が選択できるようになっています。
試しに自分の別のアドレス等に送ってみてください。メールヘッダーを確認すると、しっかりと 署名元: 独自ドメイン となり、セキュリティ（TLS）も有効になった状態で、受信トレイに届くはずです。
全3回にわたる「無料のモダンメールサーバー構築」が完成です。
最後までご覧いただきありがとうございました。
コメント