SendGrid を使って HTTP リクエストから HTML メールを送信する
Tags: sendgrid, curl, email, html
Published: 2022-10-08 07:36:24


## why

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

## 注意点

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

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

---

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9j2ro9coht2n8neq977.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9rvxeqjhzy7k1airot5.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcbwli02487lzz2nwpta.png)

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

---

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r62049lf43voqm3491hw.png)

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

---

## Dynamic Template を作成

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yu2g149ssc6xbjcc7ps.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj9qo47gx3cd81ae32c0.png)

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

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

---

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4hqrb6ouhqpcd39xj72.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av8yzaw8s5llwapancdw.png)

このように作ってみた

中身は

```html
  <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 のコンテナを作って

```html
    <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 にアップロードした画像を読み込み

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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9mufblel6vmxbisfvjo.png)

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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu1gphsya2vlut4lqzq2.png)

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

---

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6ycpto7js9e1bx0joyf.png)

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ura40axcxdb59ab566l2.png)

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

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

---

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

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

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

```json
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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxmzt715o0cgl8h7if4b.png)

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

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

---

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

ここからが本番。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rd9827sbsf18kpj6reg.png)

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

```json
    {
      "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 を入れる

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnrtq1x3fyl1emai7n4n.png)

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

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

---

## まとめ

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

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