SendGrid を使って HTTP リクエストから HTML メールを送信する

why

API でデータを詰めて、美しくデザインされた HTML メールを送りたかった。

注意点

https://masa-engineer-blog.com/sendgrid-api-key-send-email/

申請して 1 営業日待たないと行けないので、思い立って即座に導入することはできない。

アカウント登録とトークン申請

Slack や Twitter とは異なり、住所などの個人情報も入れてアカウント登録する。

もちろん、用途や目的も入れる必要が有る

フォームを送信して、次の営業日にアカウントが発行される。

発行されたアカウントにログイン

次の営業日になると、ログイン ID がメールで通知された。
これでトークンやテンプレートを発行できる。

Dynamic Template を作成

スタイリングされた HTML メールを送るには、Dynamic Template というものを作成する必要が有る。

左のメニューから Email API の Dynamic Templates を選び

Code Editor を選んで Template を作成すると、
HTML でデザインできる
CSS は別ファイルとして書けないので、全てタグ内部に書く必要が有る。

このエディタは補完が聞かないので、ローカルの VScode で作って貼り付けるべき。

アカウント登録のお知らせを作ってみる

SendGrid を登録した時のメールを参考にして

このように作ってみた

中身は

  <div 
    class="container" 
    style="
      display: flex;
      flex-direction: column;
      text-align: center;
      max-width: 600px;
      padding: 36px 36px;
      font-size: 14px;
      margin: 0 auto;
    " 
    >

flex で 600px のコンテナを作って

    <div
      class="logo" 
      style="
        text-align: left;
      " 
      >
      <img 
        src="http://cdn.mcauto-images-production.sendgrid.net/c819312dbbbf524f/6ac382f4-6131-4d5a-bb30-2f5fb2a2a301/360x105.png" 
        alt=""
        width="180px"
      >
    </div>

SendGrid にアップロードした画像を読み込み

    <div
      class="hello" 
      style="
        margin-top: 20px;
        text-align: left;
        font-size: 16px;
        font-weight: 400;
      " 
      >
      ID: {{ id }} <br>
      PASS: {{ pass }}
    </div>

テストデータ機能から変数の読み込みをしている

テストデータは、JSON で書けるタブが用意されている。

{
  "subject": "カエデ様への特別なご案内",
  "username": "カエデ", 
  "id": "123abc",
  "pass": "987zxy"
}

サブジェクト、メールのタイトルにも変数を入れられて、
それは左上の設定タブから出せる。

SendGrid のボタンからテストメールを送る

設定タブのテストメールボタンからテストメールは送れた。

しかし、デザインが崩れている。
Flex Column が効かずに、横に流れてしまっている

flex を消したら縦に流せた。

これで手作業ではテンプレートを使ったメールを送れるようになった。

HTTP リクエストで value だけテキストを詰めてメールを送る

今度は API に組み込むために、HTTP リクエストでデータを詰めてメールを送るリクエストを作る。

Integration Guide のページから API key を生成する。
ここで curl も生成できる。親切過ぎるだろ！

curl --request POST \
  --url https://api.sendgrid.com/v3/mail/send \
  --header "Authorization: Bearer $SENDGRID_API_KEY" \
  --header 'Content-Type: application/json' \
  --data '
    {
    "personalizations":[
      {
        "to":[
          {
            "email":"yourMailAddress@example.com"
          }
        ]
      }
    ],
    "from":{
      "email":"test@example.com"
    },
    "subject":"Sending with SendGrid is Fun",
    "content":[
      {
        "type":"text/plain",
        "value":"and easy to do anywhere, even with cURL"
      }
    ]
  }
  '

https://www.weblio.jp/content/personalization
personalizations はメールの宛名のこと

personalizations
- to
from
subject
content

これらがデフォルトで入っている。

ここまで作ってくれるので、コピペしてターミナルに打つと

HTTP/1.1 202 Accepted

このようにシンプルに中身を value に入れて送信することができた。

to に並列で cc も bcc も付け足せる。

API リクエストで今のテンプレートを使ってメールを投げる

ここからが本番。

Template ID を控えて、先程のリクエストに

    {
      "personalizations":[
        {
          "to":[
            {
              "email":"yourAddress@gmail.com"
            }
          ],
          "dynamic_template_data": {
            "subject": "メールのタイトル",
            "username": "ユーザーメール", 
            "id": "123abc",
            "pass": "987zxy"
          }
        }
      ],
      "template_id": "d-yourID",
      "from":{
        "email":"test@example.com"
      },
      "subject":"dynamic template test"
    }

personalizations の中に dynamic_template_data として埋め込むデータをいれて

personalizations の外に template_id を入れる

これで、API リクエストでデータを埋め込んで、テンプレートにうめこんでメールを送信することができた。

なお、形式を間違えて送信してもレスポンスは 202 が返ってきてしまうので注意。

まとめ

SendGrid でアカウント申請して一日待つ
Dynamic Template というテンプレートを作成
中身をスタイリングして埋め込むデータを決めて GUI から送信テスト
API トークンを発行して curl 文も発行
テンプレートID とデータの中身を curl 文に埋め込む

これらの手順で、 curl リクエストでデータを詰めて、美しくデザインされた HTML メールを送ることができた。

Blog