SendGridを用いてHTMLを送信する

この記事は、Luup Advent Calendarの23日目の記事です。

こんにちは。Luupサーバーチームで業務委託をしている河津（@kawazu255_）です。

Luupではアカウント登録時のアナウンスや利用した際の領収書についてHTMLメールを送っており、メール送信にはSendGridを使っています。

今回は、SendGridを使ってメール送信を行うまでの方法について記載してみます。

ソースコード

// Service定義側

import SendGrid from "@sendgrid/mail";

export default class SendGridService {
  public constructor() {
    SendGrid.setApiKey({{SendGridのAPIキー}});
  }

  public async sendEmail(
    sendTo: string,
    template: Template,
    dynamic_template_data: any
  ) {
    const msg = {
      to: sendTo,
      from: "[e-mail]",
      cc: "",
      bcc: "",
      replyTo: "[e-mail]",
      templateId: template,
      dynamic_template_data: dynamic_template_data,
    };
    await SendGrid.send(msg);
  }
}

// Service呼び出し側

const sendGridService = new SendGridService();

await sendGridService.sendEmail(
  "[e-mail]",
  "d-xxxxxxxxx", // SendGridのdynamic template id
  {
    userName: "test user",
    paymentAmount: 125,
  } // dynamic_template_data
)

上記のように呼び出して使います。

d-xxxxのように文字列として指定している箇所は、SendGridのDynamicTemplateIdを指定しています。SendGridのコンソールよりDynamic Templatesの画面へいくと、HTMLメールを作成でき、作成したHTMLメールテンプレートにd-xxxxのようなIDが振られます。メールを送る際にこのIDを指定することで、どのHTMLテンプレートを使用するか選択できます。

HTMLメール内に可変な情報(ユーザー名や使用料金など)を埋め込むことも可能で、dynamic_template_dataに好きな名前のKeyとValueを指定できます。HTMLメールの方に同じKey変数を埋め込むことで、送信側が指定した値をHTMLメールの中に入れることができます。

ちょっとしたハマりどころ

DynamicTemplateでHTMLメールを作成する際、いくつか用意されたデザインパーツから作成でき、HTMLでのコーディングもできます。
後者でメール文面をコーディングした際詰まったのが、どうやら一部のCSSが効かなさそうということです。
一例としてはdisplay: flex;で、2つのブロック要素を横並びにしつつ画面幅に合わせて広げるような実装をしたかったものの、display: flex;が効かないために別の方針を取ることとなりました。

感想

メールサーバーの用意不要でメールを送ることができるため、サーバレスな構成をとっているプロダクトには重宝されるサービスなのではと思っています。
ソースコードで紹介したように、かなり簡単にメール送信が行え、無料枠の上限も広いため、気になった方はぜひ試してみてください。
アカウントを取得する際の注意点として、法人で会員登録する際は1社につき1アカウントしか取得できないようですので、会社の代表アカウントを作成するなど管理するための工夫が必要かもしれません。