応用編　テンプレート（Dynamic Template）を適用して送信する

Dynamic Template機能を利用することでトランザクションメールにテンプレートを適用して送信することができます。この機能は、Handlebarsを利用して条件分岐や繰り返しなどを実装することで、コンテンツを柔軟に制御できるのが特徴です。詳しい使用方法はチュートリアル(英語版)をご確認ください。

以下、テンプレートを適用したメールを送信する手順を紹介します。

テンプレートを編集する

テンプレートの編集はダッシュボードから行えます。まず、ダッシュボードのメニューから「Email API > Dynamic Templates」を選択します。

画面右上の「Create a Dynamic Template」ボタンを選択します。

新しいテンプレートの名前を入力して「Create」ボタンを選択します。

新しいテンプレートが作成されたら、テンプレート名をクリックして「Add Version」ボタンを選択します。

「Your Email Designs(ユーザが作成したテンプレート)」または「SendGrid Email Designs(SendGridが用意したテンプレート)」のどちらかを選びます。編集したいテンプレートにカーソルをあわせると「Select」が表示されますので、選択します。

「Design Editor(WYSIWYGエディタで編集する)」または「Code Editor(HTMLコードを編集する)」のどちらかを選び、「Select」を選択します。

Design EditorまたはCode Editorが表示されるので、テンプレートを編集します。使用するエディタの種類はテンプレートのバージョンごとに切り替えることができます。

＜Design Editor＞

＜Code Editor＞

テンプレートを編集したら画面上部の「Save」ボタンを選択します。

テキストパートの編集

テキストパートは、作成したHTMLパートの内容から自動的に生成されますが、別途編集することも可能です。

編集する場合は、画面上部の「Plain Text」タブを選択し、「AUTOMATICALLY CREATE PLAIN TEXT VERSION」をOFFに切り替えてください（Design Editorでは、先に「PREVIEW」モードに切り替える必要があります）。

＜Design Editor＞

＜Code Editor＞

テンプレートのプレビュー

次に、プレビュー機能でテンプレートの表示を確認します。

テンプレートの縦三点リーダ（︙）から「Preview」メニューを選択すると、HTMLメール(PC)、HTMLメール(モバイル)、テキストメールの3種類のプレビューを確認できます。

テンプレートの編集中に「PREVIEW」モードに切り替えることでもプレビュー表示を確認できます。

テスト送信

プレビュー機能で表示確認したらテスト送信を行い、実際に受信して表示を確認します。

テンプレートの縦三点リーダ（︙）から「Edit」メニューを選択すると編集画面が表示されます。「Settings」タブの「TEST YOUR EMAIL」を選択し、テスト送信の宛先を「Send a Test Email」に入力して「Send Test Message」ボタンを選択すると、テストメールが送信されます。

また、「Email Testing」の「Create Test」ボタンを選択するとEmail Testing機能を利用して実際にメールを送らずに表示確認できます（Pro以上のプランでのみ利用可能）。

テンプレートIDの確認

テンプレートの編集が完了したら、「Save」ボタンで保存後、画面左上の「←」ボタンを選択してテンプレート一覧に戻ります。

テンプレート一覧で表示されるテンプレートIDは送信時に必要になるので確認しておきます。各テンプレートには複数のバージョンを登録できますが、「ACTIVE」と記載されたバージョンが自動的に適用されます。

テンプレートを指定してメール送信する

SMTP API(X-SMTPAPIヘッダ)は、Dynamic Templateをサポートしていないため、Web API v3のMail Send APIを使用する必要があります。

Mail Send APIでテンプレートを利用してメール送信する場合、リクエストパラメータ内の「template_id」パラメータで先ほど確認したテンプレートIDを指定します。詳しくはAPIリファレンスを参照してください。

1
2
3
4
5
6
7

{
  "personalizations": [
    ：
  ],
  "template_id": "d-0fb7f744de504ab3ad853f743942b3db"
  ：
}

文字列の埋め込み

Dynamic Templateで宛先ごとに異なる文字列を埋め込むためには、項目名を{{ }}で囲んだタグをテンプレート内に記載します。

以下は、メールの件名とメール本文の「ようこそ 〇〇 さん！」の箇所を動的に変更する例です。件名は {{title}} とし、本文に「ようこそ {{name}} さん！」のようにタグを埋め込みました。

次に、メールを送る前に文字列の埋め込みをテストします。テストデータの入力画面の表示方法はエディタの種類によって異なります。

＜Design Editor＞

「PREVIEW」モードに切り替えてから画面上部の「{ } Show Test Data」を選択してください。

＜Code Editor＞

画面上部の「{ } TEST DATA」を選択してください。

画面左側にテストデータをJSON形式で入力し、画面右側のプレビュー表示で意図したとおりにタグが置換されることを確認します。

1
2
3
4

{
    "name": "構造計画研究所",
    "title":"テストメール"
}

実際にメール送信する際は、テストデータで指定したような形式の値をMail Send APIのリクエストパラメータ「dynamic_template_data」に指定してください。リクエスト内容は以下のようになります。

1
2
3
4
5
6
7
8
9
10

{
  "personalizations": [
    {
      "to": [{"email": "recipient_address@example.com"}],
      "dynamic_template_data": {"name": "構造計画研究所", "title":"テストメール"}
    }
  ],
  "from": {"email": "from_address@example.com"},
  "template_id": "d-0fb7f744de504ab3ad853f743942b3db"
}

配列データの埋め込み

配列形式のデータを指定することで、メールに要素数が可変の情報（たとえば「ブログ記事一覧」など記事数が決まっていないようなもの）を埋め込むことができます。本節ではCode Editorを利用します。

リクエストパラメータ「dynamic_template_data」には以下のようなデータを入れる想定で説明します。この内容をTEST DATA（上述）に入力します。

  • posts：配列形式の記事データ一覧
  • title：各記事のタイトル
  • image：各記事のサムネイル画像のURL
  • description_html：各記事の概要。HTML形式の文字列が入ります
  • link：各記事のURL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
    "posts": [
        {
            "title": "携帯キャリアの迷惑メール対策について",
            "image": "https://sendgrid.kke.co.jp/blog/wp/wp-content/uploads/2025/10/20251017_blog.png",
            "description_html": "携帯キャリアにはどのような迷惑メール対策があり、迷惑メール判定時にはどのような応答を返すのか、調べた結果をまとめました。SendGridから携帯キャリア宛にメールを送る際のポイントも紹介します。誠に勝手ながら、以下の期間は休業とさせていただきます。<a class=\"read-more\" href=\"https://sendgrid.kke.co.jp/blog/?p=3269\">...続きを読む</a>",
            "link": "https://sendgrid.kke.co.jp/blog/?p=3269"
        },
        {
            "title": "SendGrid Night #11 開催レポート",
            "image": "https://sendgrid.kke.co.jp/blog/wp/wp-content/uploads/2025/10/20251016_blog.png",
            "description_html": "2025年9月開催「SendGrid Night」のイベントレポートを公開。Twilio SendGridチームが語った新機能情報や大量配信のノウハウ、懇親会の雰囲気などをダイジェストでお届けします。<a class=\"read-more\" href=\"https://sendgrid.kke.co.jp/blog/?p=19581\">...続きを読む</a>",
            "link": "https://sendgrid.kke.co.jp/blog/?p=19581"
        }
    ]
}

HTMLパートは以下の通りです。

  • {{#each posts}}〜{{/each}}：posts配列をループしてテーブルに行を追加しています。
    #each内で配列の要素にアクセスする場合、thisキーワードを使います。
  • {{#if this.image}}〜{{/if}}：imageプロパティに値が設定されていない場合、行を出力しないよう条件分岐しています。
  • {{{this.description_html}}}：HTMLをそのまま出力するため、三重括弧を使っています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table>
            <tbody>
            {{#each posts}}
            {{#if this.image}}
            <tr>
                <td style="padding:40px 200px 0 200px;">
                    <img src="{{this.image}}" alt="{{this.title}}" width="100%">
                </td>
            </tr>
            {{/if}}
            <tr>
                <td style="padding:0 200px;">
                    <h2>{{this.title}}</h2>
                </td>
            </tr>
            <tr>
                <td style="padding:0 200px 25px 200px;">
                    <p>{{{this.description_html}}}</p>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <a style="background-color:#EF373C;color:#ffffff;display:inline-block;padding:20px 60px;text-decoration:none;" href="{{this.link}}" target="_blank">ブログを読む</a>
                </td>
            </tr>
            {{/each}}
        </table>
    </body>
</html>

ブログ記事一覧がテンプレートに埋め込まれていることを確認します。

テンプレートを確認したら、確認したテストデータがリクエストパラメータ「dynamic_template_data」に指定されるようプログラムを実装します。


その他のDynamic Templateの使用方法は、チュートリアル(英語版)をご確認ください。