メール配信を専門に行なってくれるAPI「SendGrid」についてご説明します。

でじぼう

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

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

SendGridって、そもそも何？

SendGridは、メール送信用のクラウドサービス（SaaS）です。
RESTful API や SMTP を使って、Webサービスやアプリケーションから簡単にメールを送信できます。

たとえば、お問い合わせフォームや会員登録後の自動返信メールを、SendGrid経由で確実にユーザーへ届けることができます。

アプリ側では、宛先や本文をSendGridに渡すだけで、あとはSendGridが送信処理を代行してくれる仕組みです。

なぜSendGridを使うの？（エンジニア的メリット）

「メール配信くらい自分でプログラム書けばいいんじゃない？」と思う方もいるかもしれません。でも、実はSendGridを使うことには、エンジニアにとってたくさんのメリットがあるんです。

メリット1：メールの「到達率」が格段に上がる！

自分でメールサーバーを立ててメールを送ろうとすると、送信元IPアドレスの評価が悪くて迷惑メール扱いされてしまったり、受信側のサーバーからブロックされてしまったりすることがよくあります。

SendGridは、長年の運用実績と高い技術力で、メールが「迷惑メール」として扱われにくく、高い確率でユーザーの受信トレイに届くように工夫されています。

メリット2：大量のメール配信も楽々！

キャンペーンメールやニュースレターなど、一度に数千、数万といった大量のメールを送りたい場合、自分でシステムを組むのは非常に大変です。処理に時間がかかったり、サーバーがダウンしてしまったりするリスクもあります。

SendGridは、大量のメールを高速かつ安定して配信できるインフラを持っています。

メリット3：開発コスト・運用コストが大幅に削減できる！

もし自分でメール配信システムをゼロから作るとしたら、

◆ メールサーバーの構築・設定
◆ 迷惑メール対策
◆ エラーハンドリング
◆ 配信状況の監視
◆ セキュリティ対策

など、やるべきことが山積みです。これらをすべて自前で実装・運用するのは、時間も労力も莫大にかかります。

利用すれば、これらの面倒な作業をすべてSendGridに任せることができます。

SendGrid の仕組みをざっくり理解しよう！

SendGridを使ったメール配信の基本的な流れは以下のようになります。

① アプリケーションからSendGridへメールを送信する

SendGridが提供するAPI（HTTPリクエスト）を使ってメールの内容（宛先、件名、本文など）をSendGridに送ります。

② SendGridがメールを受け取る

SendGridは受け取ったメールの内容を解析し、適切な処理を行います。

③ SendGridがユーザーのメールサーバーへメールを送信する

SendGridは、迷惑メールと判断されないように様々な工夫を凝らしながら、ユーザーが使っているメールサービス（Gmail, Outlookなど）のサーバーへメールを送ります。

④ ユーザーのメールサーバーがメールを受信する

⑤ ユーザーの受信トレイにメールが届く！

SendGrid で自動返信メールを送信する方法

SendGridの基本からAPI連携による自動返信メールの実装方法までを徹底解説。Next.jsとの組み合わせで高到達率なメール配信をご説明します。

it-bokenki.com

API連携の実装方法

簡単にメールを送信できる公式APIが提供されています。Java、Python、Ruby、Node.js、PHPなど、主要なプログラミング言語に対応しています。

今回下記のように、お問い合わせ時の自動返信メールをNode.jsで実装しました。
環境変数は .env ファイルに定義し、以下の2項目を読み込んで使用しています。

import { NextResponse } from "next/server";
import sgMail from "@sendgrid/mail";

export async function POST(req: Request) {
  const data = await req.json();
  const { name, email, phone, message } = data;

  // 自動送信メールの件名と本文
  const subject = "お問い合わせありがとうございます";
  const mailBody = `${name}様

  このたびはお問い合わせいただき、誠にありがとうございます。
  以下の内容で受付いたしました。
  
  ---------------

  お名前： ${name}
  メール： ${email}
  電話番号： ${phone}
  メッセージ： 
  ${message}

  ---------------

  担当より折り返しご連絡させていただきます。
  今しばらくお待ちください。`;

  try {
    // 自動送信メール
    sgMail.setApiKey(process.env.SENDGRID_API_KEY!);
    await sgMail.send({
      from: process.env.SENDGRID_FROM_EMAIL!,
      to: email,
      subject,
      text: mailBody,
    });

    return NextResponse.json({ message: "メール送信成功" });
  } catch (error) {
    return NextResponse.json(
      { message: "Slack送信に失敗しました" },
      { status: 500 }
    );
  }
}

The post メール配信の強い味方「SendGrid」を徹底解説！ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

でじぼうです。

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学習ログ.