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 メールを送ることができた。
Top comments (0)