でじぼうです。

API：SendGridと、ローコードツール：Makeをかけ合わせた自動返信メールを送信する方法についてご説明します。

でじぼう

この記事は下記の方がおすすめ！

• SendGridってなに？
• Makeってなに？
• API×ローコードツールの実装方法が知りたい！

SendGridとは？

「メール配信を専門に行ってくれるクラウドサービス（SaaS）」 です。

開発したWebサービスやアプリケーションからSendGridにメールを送るように設定するだけで、SendGridがそのメールをユーザーに届けてくれます。

メール配信の強い味方「SendGrid」を徹底解説！

SendGridとは何かを初心者向けにわかりやすく解説。メール配信APIの仕組みや使い方、Webアプリとの連携方法を紹介します。

it-bokenki.com

Makeとは？

「ノーコードでさまざまなWebサービスを自動連携できるプラットフォーム（iPaaS）」です。

Gmail、Slack、Google Sheets、Notionなどと連携し、ワークフローを視覚的に構築可能。
エンジニアでなくても効率的な自動化が行えます。

なぜ SendGrid × Makeで実装？

もともと フロントエンド × バックエンドAPI × Make を使ってお問い合わせフォームを実装していました。次のステップとして「お問い合わせをしてくれた方へ自動返信メールを送る機能」を追加することにしました。

前回までの実装内容

▼ 当初の選択肢：Make × 自前サーバー

まずは自前で契約しているレンタルサーバーを使って実装しようとしましたが、Make のメール送信元である ie.ドメインをそのサーバーが受け付けない仕様であったため、自動返信が正常に動作しないという問題が発生しました。

▼ 次の選択肢：Make × Googleメール

次に、Gmailを使う方法を検討しましたが、会社独自のドメインでGmailを使うにはGoogle Workspaceの有料契約が必要です。
今回はコストをできるだけ抑えたかったため、固定費が発生するこの案は見送りにしました。

✅ 最終的な選択肢： SendGrid

これからやる実装内容

上記のような経緯があり、無料で使えて独自ドメインも対応可能なSendGridを使うことに決定しました。
SendGridであれば、MakeからのSMTP連携も簡単で、自動返信メールも安定して送ることができます。

SendGrid × Make 実装手順

ここからは、実際にSendGridとMakeを使って自動返信メールを実装する手順を紹介していきます。

① SendGridアカウント作成と会社情報の登録

まずはSendGridのアカウントを作成し、会社情報を登録します。
この登録内容の審査には1〜2営業日程度かかるので、余裕を持って申請しておきましょう。

② 承認完了後、マイページにログインする

承認されると、登録したメールアドレス宛に通知が届きます。
メールに記載されたリンクから送信者認証を完了させましょう。
その後、アカウントIDが発行されるので、事前に設定したパスワードでSendGridにログインします。

③ 送信者情報の登録

左側のDashbord ＞「Create sender identity」をクリックし、送信者情報を登録します。
このとき、送信先・送信元のメールアドレスは同じでも問題ありません。

④ APIキーの作成

左メニューの「Settings ＞ API Keys」から「Create API Key」を選択し、新しいAPIキーを発行します。

「Create & View Key」をクリックするとAPIキーが表示されます。
このタイミングでしかコピーできないので、忘れずに控えておきましょう。
後ほどMakeのSMTP接続設定で、このAPIキーをパスワードとして使います。

⑤ MakeでのSMTP接続設定方法

Makeで「Send an Email」モジュールを追加し、以下の情報で新規Connectionを作成します。

⑥ Fromアドレスの設定（詳細設定）

SMTP設定が完了したら、次に送信元メールアドレス（From）を設定します。
これはMakeの「Show advanced settings」をONにすることで表示される詳細設定欄にあります。
ここに正しいFromアドレスを入力しないと、メールが正しく送信できなかったり、送信者名が表示されなかったりします。

下記の写真は「Show advanced settings」がOFFになっている状態

⑦ コードの実装

今回下記のように、Node.jsで実装しました。
環境変数は .env ファイルに定義し、以下を読み込んで使用しています。

Makeとの連携URLを設定して、Makeに送りたいお問い合わせ情報（name , email , phone, message)を設定します。

await fetch(process.env.SLACK_WEBHOOK_URL!, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name,
    email,
    phone,
    message,
  }),
});

⑧ 設定完了

送信者認証とSMTPの接続設定がすべて完了すると、Make上で自動返信メールが送信できるようになります。
これで、お問い合わせをしてくれた方に、即座に確認メールを送る仕組みが完成です。

The post SendGrid で自動返信メールを送信する方法 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.