kaede

Posted on Oct 8, 2022 • Edited on Dec 6, 2022

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

#sendgrid #curl #email #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 メールを送ることができた。

DEV Community