DEV Community

kaede
kaede

Posted on • Updated on

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

why

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

注意点

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

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


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

Image description

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

Image description

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

Image description

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


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

Image description

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


Dynamic Template を作成

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

Image description

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

Image description

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

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


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

Image description

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

Image description

このように作ってみた

中身は

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

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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

Image description

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

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

Image description

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


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

Image description

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

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

Image description

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"
      }
    ]
  }
  '
Enter fullscreen mode Exit fullscreen mode

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

  • personalizations
    • to
  • from
  • subject
  • content

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

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

HTTP/1.1 202 Accepted

Image description

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

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


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

ここからが本番。

Image description

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"
    }
Enter fullscreen mode Exit fullscreen mode

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

personalizations の外に template_id を入れる

Image description

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

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


まとめ

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

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

Latest comments (0)