メール送信SaaSのSendGridから新しいテンプレート機能「Dynamic Templates」がリリースされました！日本語情報も出ると思いますが、個人的に試したことをまとめます。

サーバサイドのWeb開発経験がある方は、「HTMLのテンプレートエンジンのメール版」とイメージしてもらうのが一番しっくりくるのではないかと思います。

画面はこんな感じ。

従来のTemplatesとの違いは下図のイメージで、テンプレートの定義で色々書けるようになりました。

Dynamic Templateの作成方法

メニュー

SendGridのダッシュボードから「Templates」メニューを開きます。今までは「Transactional」と「Marketing」の2つのサブメニューのみ表示されていましたが、今回、真ん中に「Legacy」が増えました。

少しややこしいのですが、今まで使っていたTransactional TemplateがLegacyとなり、今回新たにリリースされた「Dynamic Templates」がTransactionalに該当します。

Transactionalを選ぶと以下の画面となり、パッと見「あれっ、今まで作ったテンプレートが消えてる！？」と一瞬焦るかもしれませんが、そこは先程の説明を思い出して「あ、Legacyのほうにあるんだった」と落ち着いていただければと。

「Create Template」を押した後の流れは従来のテンプレートと全く同じです。

エディタ

SendGridではWordやExcelのような感覚でメールを編集するデザインエディタと以下キャプチャのようにHTMLを直接編集するコードエディタの2種類を用意しています。どちらのエディタでもDynamic Templatesを作れます。

ここからはコードエディタを選択した例で進めていきます。

Dynamic Templatesでは、画面の上部に「TEST DATA」というメニューが表示されています。

エディタでタグ {{name}} を定義してみます(下図左)。この時点での表示結果はタグのままです(下図右)。

では「TEST DATA」にJSONデータを入れてみましょう。

名前が表示されました。

このように、エディタの定義に対して「TEST DATA」で具体的なJSONデータを指定することで、リアルタイムにレンダリング結果を確認できます。

今までのテンプレートは基本的にデザインメインのテンプレートでした。もちろん差し込みタグ(Substitution Tag)を使ってコンテンツを置き換えることはできましたが、条件分岐するような複雑なケースはアプリ側で制御する必要がありました。

それを解消して、テンプレート側で制御できるようにしたのがDynamic Templatesです。ここからは具体的な記述方法を例に紹介していきます。

記述方法

タグはHandlebars.jsのシンタックス（マスタッシュ記法）で記述します。¹

単純な置換

さきほどの例のとおり、一番シンプルなパターンです。

HTML側でタグを定義します。

<p>こんにちは {{name}} さん</p>

JSONでタグ名を属性にしてデータを渡すだけです。

{"name":"白石麻衣"}

オブジェクト

オブジェクトはドット(.)で属性を指定できます。バックエンドにDB取得するREST APIなどがあれば、その情報を使って簡単にパーソナライズできそうです。

<p>こんにちは {{{nogizaka46.member.name}}} さん</p>
<p>誕生日は {{{nogizaka46.member.birthday}}} ですね</p>

{  
   "nogizaka46":{  
      "member":{  
         "name":"白石麻衣",
         "birthday": "1998/8/20"
      }
   }
}

結果

イテレーション

個人的には一番嬉しい機能！繰り返し表示する項目などに使えます。

<ol>
    {{#each nogizaka46.member}}
        <li>{{this.name}} : {{this.birthday}}</li>
    {{/each}}
</ol>

{  
  "nogizaka46":{  
     "member":[
       {
         "name":"白石麻衣",
         "birthday": "1998/8/20"
       },
       {
         "name":"西野七瀬",
         "birthday": "1994/5/25"
       },
       {
         "name":"若月佑美",
         "birthday": "1994/6/27"
       }
     ]
   }
}

結果

条件分岐

if文が書けるので、表示切替などに便利です。SendGridのGitHubにある例は、多言語対応（英語・フランス語・スペイン語)したメールでした。

{{#if member.profile.nogizaka46}}
  <p>乃木坂46</p>
{{else if member.profile.keyakizaka46}}
  <p>欅坂46</p>
{{else}}
  <p>けやき坂46(ひらがなけやき)</p>
{{/if}}

{  
   "member":{  
      "profile":{  
         "nogizaka46":"true"
      }
   }
}

HTML

ここまでのタグは中括弧が2つ( {{ xx }} )でしたが、これを3つ( {{{ xx }}} )にすると、HTMLの評価ができます。

<p>こんにちは {{{name}}} さん</p>

JSONでHTMLタグを含む値を指定します。ボールドとリンクを入れてみました。

{"name":"<a href='http://www.nogizaka46.com/member/detail/shiraishimai.php'><b>白石麻衣</b></a>"}

ちゃんと表示されますね。

root

「root」という特殊な表現を利用することで、親オブジェクトの状態に合わせた切り替え表示が可能です。

{{#if member.graduated}}
   <p>{{member.name}}が卒業した日は {{@root.graduateddate}}</p>
{{/if}}

graduatedをtrueにした場合

{
  "member":{
    "name": "生駒里奈",
    "graduated": true
  }, 
  "graduateddate": "2018年5月6日"
}

graduatedをfalseにした場合

{
  "member":{
    "name": "白石麻衣",
    "graduated": false
  }, 
  "graduateddate": "xxxx年x月x日"
}

送信方法

ここまでJSONの指定を画面で行ってきましたが、それはあくまでもビューの確認用でした。実際にメールを送信するときは、Web APIのパラメータで指定します。「dynamic_template_data」が新しく追加されたパラメータです。

柔軟性が高くて何でも差し込めるので、もはやsubjectやcontentのパラメータすら指定しなくても送れます。

{
    "personalizations": [
        {
            "to": [
                {
                    "email": "[email protected]"
                }
            ],
            "dynamic_template_data": {
                "subject": "タイトルだよ",
                "name": "キクタロー"
            }
        }
    ],
    "from": {
        "email": "[email protected]",
        "name": "キクタロー"
    },
    "template_id":"x-xxxxxxxxxxxxxxxxxxxxxxxxxxx",
}

おまけ：Handlebarsについて

Handlebarsをメールに使う方法は、元々、MandrillやSparkpostが行っていて、（実際触ったことはなかったのですが）これがSendGridにあったら便利なのになぁと思っていました。

で、嬉しいことに入ってきまして、一気に柔軟性が増しました！

今後Dynamic Templatesで対応する記法が増えるかもしれないので、Handlebarsを学ぶチャンスかも。ちなみに、
Handlebarsについて調べたら、大学の後輩で今はエンジニアをやっているsassyくんのQiitaエントリが出てきてびっくり！