Handlebarsの使用
Twilio SendGridの動的トランザクションテンプレートとMarketing Campaignsデザインでは、APIにより送信するパーソナライゼーションと、Marketing Campaignsのコンタクトに保存される置換タグのレンダリングで、Handlebarsテンプレート言語がサポートされています。
Handlebarsの構文を使用すると、テンプレートのメッセージに顧客の名前などのデータを挿入してパーソナライズし、それぞれの受信者に適した内容のメールを送ることができます。例えば、"name"'というJSONプロパティに顧客の名前を保存している場合、顧客の名前を表示したい場所に
}`を追加すると、このプロパティの値をテンプレートに挿入できます。
Handlebarsの構文を使用すると、コードベースとは独立してすべての動的なテンプレート処理が実行されます。そのため、コードベースを更新することなく、テンプレートを迅速に変更できます。
独自のテンプレートシステムを使用したい場合は、置換タグを使用して動的にデータを挿入できます。
動的トランザクションテンプレートAPIを使用して、テンプレートをプログラムで管理することができます。
Handlebars言語は、基本的な変数の置換以外にも、反復(ループ)や条件文などの多くの機能を備えています。テンプレートやデザインではHandlebarsのほとんどの機能をサポートしていますが、一部サポートされていない機能もあります。現在、動的テンプレートでは以下のヘルパーがサポートされています。
すべてのヘルパーの詳細については、このページのHandlebarsリファレンスを参照してください。
ユースケース
以下のユースケース例は、メールテンプレートのGitHubリポジトリの動的テンプレートのセクションに用意されているものです。それぞれの例にはファイルへのリンクが示されており、GitHubで確認できます。これらのテンプレートは、動的トランザクションテンプレートとMarketing Campaignsデザインライブラリーにあるコードエディタを利用してアップロードし、使用することもできます。
以下に、それぞれのユースケースと、作成に使用されているHandlebarsヘルパーを示します。
領収書
この領収書サンプルテンプレートでは、以下のヘルパーを使用しています。
パスワードのリセット
このトランザクションサンプルテンプレートでは、以下のヘルパーを使用しています。
複数言語
この複数言語でコンテンツを記述できるサンプルテンプレートでは、以下のヘルパーを使用しています。
-条件文-if/else
ニュースレター
このニュースレターサンプルテンプレートでは、以下のヘルパーを使用しています。
広告
このセール中の商品を広告するサンプルテンプレートでは、以下のヘルパーを使用しています。
Handlebarsリファレンス
以下のリファレンスでは、HTMLメールのスニペットとJSONテストデータを含む、各ヘルパーのサンプルコードブロックを示しています。コード例は、3つのタブに分かれています。1つ目のHandlebarsのタブでは、Handlebarsのタグを示しています。2つ目のJSONのタブでは、Handlebarsタグへの入力に使用されるサンプルデータを示しています。3つ目のHTMLのタブでは、メールでHandlebarsタグがレンダリングされた最終的な出力を示しています。それぞれのタブをクリックし、コードサンプルを切り替えることができます。
置換
Twilio SendGridテンプレートでは、以下の置換をサポートします。
基本的な置換
//テストデータ
{ "firstName": "Ben" }
<!-- Resulting HTML !-->
<p>Hello Ben</p>
動的リンク値
//テストデータ
{ "url": "https://example.com/shop" }
<!--Resulting HTML !-->
<p><a href="https://example.com/shop">Click Me</a></p>
ディープオブジェクトの置換
//テストデータ
{
"user": {
"profile": {
"firstName": "Ben"
}
}
}
<!--結果のHTML-->
<p>Hello Ben</p>
オブジェクトがない場合
//テストデータ
{
"user": {
"orderHistory": [
{
"date": "2/1/2018",
"item": "shoes"
},
{
"date": "1/4/2017",
"item": "hat"
}
]
}
}
<!--結果のHTML-->
<p>Hello</p>
HTMLでの置換
件名行の置換で、'
、"
または&
の文字が含まれている場合は、以下のように3つの波括弧を使用します。
//テストデータ
{ "firstName": "<strong>Ben</strong>" }
<!--結果のHTML-->
<p>Hello <strong>Ben</strong></p>
formatDate
formatDateヘルパーは、エポックかISO8601の形式の日時を受け取り、以下の表に示すトークンを使用して指定した書式に変換します。変換せずに日付フィールドを送信すると、完全なタイムスタンプ付きのISO8601形式で表示されます(例: 2020-01-01T23:00:00.000Z
)。以下の例は、太平洋標準時の2020年1月1日(火)午後3時の表示結果です。
トークン | 表示結果 |
---|---|
YYYY | 2020 |
YY | 20 |
MMMM | January |
MMM | Jan |
MM | 01 |
M | 1 |
DD | 01 |
D | 1 |
dddd | Tuesday |
ddd | Tue |
hh | 03 |
h | 3 |
HH | 00 |
H | 00 |
mm | 00 |
m | 0 |
ss | 00 |
s | 0 |
A | PM |
ZZ | -0800 |
Z | -08:00 |
//テストデータ
{
"timeStamp": "2020-01-01T23:00:00.000Z",
"dateFormat": "MMMM DD, YYYY h:mm:ss A",
"timezoneOffset": "-0800"
}
<!--タイムゾーンがない結果のHTML-->
<p>Join us January 01, 2020 11:00:00 PM</p>
<!-- タイムゾーンを含む結果のHTML-->
<p>Join us January 01, 2020 3:00:00 PM</p>
Insert
//すべての値が設定されているテストデータ
{
"name": "Ben",
"businessName": "Twilio SendGrid"
}
// 値がないテストデータ
{
"name": "Ben"
}
<!--すべての値を含む結果のHTML-->
<p>Hello Ben! Thank you for contacting us about Twilio SendGrid.</p>
<!-- 値がなく、デフォルト値が設定された結果のHTML-->
<p>Hello Ben! Thank you for contacting us about your business.</p>
条件文
Twilio SendGridテンプレートでは、以下の条件文をサポートします。
- 基本的なif、else、else if
- rootを使用したif
- unless
- greaterThan(~より大きい)
- lessThan(~より小さい)
- equals(等しい)
- notEquals(等しくない)
- and(かつ)
- or(または)
- length(長さ)
基本的なif、else、else if
//テストデータ1
{
"user":{
"profile":{
"male":true
}
}
}
// テストデータ2
{
"user":{
"profile":{
"female":true
}
}
}
// テストデータ3
{
"user":{
"profile":{
}
}
}
<!--テストデータ1による結果のHTML-->
<p>Dear Sir</p>
<!-- テストデータ2による結果のHTML-->
<p>Dear Madame</p>
<!-- テストデータ3による結果のHTML-->
<p>Dear Customer</p>
rootを使用したif
//テストデータ
{
"user": {
"suspended": true
},
"supportPhone": "1-800-555-5555"
}
<!--結果のHTML-->
<p>Warning! Your account is suspended, please call: 1-800-555-5555</p>
Unless
//テストデータ
{
"user": {
"active": false
},
"supportPhone": "1-800-555-5555"
}
<!--結果のHTML-->
<p>Warning! Your account is suspended, please call: 1800-555-5555</p>
greaterThan(~より大きい)
基本的な使い方
//テストデータ1
{
"scoreOne": 100,
"scoreTwo": 78
}
// テストデータ2
{
"scoreOne": 55,
"scoreTwo": 78
}
<!--テストデータ1による結果のHTML-->
<p>
Hello Ben! Congratulations, you have the high score today! Thanks for playing.
</p>
<!-- テストデータ2による結果のHTML-->
<p>Hello Ben! Thanks for playing.</p>
elseを伴うgreaterThan(~より大きい)
//テストデータ1
{
"scoreOne": 100,
"scoreTwo": 78
}
// テストデータ2
{
"scoreOne": 55,
"scoreTwo": 78
}
<!--テストデータ1による結果のHTML-->
<p>
Hello Ben! Congratulations, you have the high score today! Thanks for playing.
</p>
<!-- テストデータ2による結果のHTML-->
<p>
Hello Ben! You were close, but you didn't get the high score today.Thanks for
playing.
</p>
lessThan(~より小さい)
基本的な使い方
//テストデータ1
{
"scoreOne": 55,
"scoreTwo": 78
}
// テストデータ2
{
"scoreOne": 100,
"scoreTwo": 78
}
<!--テストデータ1による結果のHTML-->
<p>
Hello Ben! You were close, but you didn't get the high score today.Thanks for
playing.
</p>
<!-- テストデータ2による結果のHTML-->
<p>Hello Ben! Thanks for playing.</p>
elseを伴うlessThan(~より小さい)
//テストデータ1
{
"scoreOne": 55,
"scoreTwo": 78
}
// テストデータ2
{
"scoreOne": 100,
"scoreTwo": 78
}
<!--テストデータ1による結果のHTML-->
<p>
Hello Ben! You were close, but you didn't get the high score today.Thanks for
playing.
</p>
<!-- テストデータ2による結果のHTML-->
<p>
Hello Ben! Congratulations, you have the high score today! Thanks for playing.
</p>
equals(等しい)
「equals」では、同じデータ型の2つの値が等しいかどうかを確認できます。「equals」ヘルパーでは、値のデータ型が異なる場合でも、比較するためにデータ型の自動変換も試行されます。たとえば、「{{#equals 3 "3"}}」は「true」と評価されます。
エディタのプレビューページでは、データ型が自動的に変換された値の比較結果は正しくレンダリングされないので注意してください。データ型が自動的に変換された値の比較結果は、配信されたメッセージでのみ確認できます。
真偽の判定では、空の文字列、整数のゼロ、浮動小数点数のゼロは「false」と評価されます。空ではない文字列、ゼロでない整数、負の数値を含むゼロでない浮動小数点数は、「true」と評価されます。
基本的な使い方
//テストデータ1
{
"customerCode": 289199,
"winningCode": 289199
}
// テストデータ2
{
"customerCode": 167320,
"winningCode": 289199
}
<!--テストデータ1による結果のHTML-->
<p>Hello Ben! You have a winning code.Thanks for playing.</p>
<!-- テストデータ2による結果のHTML-->
<p>Hello Ben! Thanks for playing.</p>
elseを使用したequals(等しい)
//テストデータ1
{
"customerCode": 289199,
"winningCode": 289199
}
// テストデータ2
{
"customerCode": 167320,
"winningCode": 289199
}
<!--テストデータ1による結果のHTML-->
<p>Hello Ben! You have a winning code.Thanks for playing.</p>
<!-- テストデータ2による結果のHTML-->
<p>Hello Ben! You do not have a winning code.Thanks for playing.</p>
notEquals(等しくない)
「notEquals」では、同じデータ型の2つの値が等しいかどうかを確認できます。「notEquals」ヘルパーでは、値のデータ型が異なる場合でも、比較するためにデータ型の自動変換も試行されます。たとえば、{{#equals 3 "3"}}は「false」を返します。
真偽の判定では、空の文字列、整数のゼロ、浮動小数点数のゼロは「false」と評価されます。空ではない文字列、ゼロでない整数、負の数値を含むゼロでない浮動小数点数は、「true」と評価されます。
基本的な使い方
//テストデータ1
{
"customerCode": 289199,
"winningCode": 289199
}
// テストデータ2
{
"customerCode": 167320,
"winningCode": 289199
}
<!--テストデータ1による結果のHTML-->
<p>Hello Ben! You have a winning code.Thanks for playing.</p>
<!-- テストデータ2による結果のHTML-->
<p>Hello Ben! Thanks for playing.</p>
elseを伴うnotEquals(等しくない)
//テストデータ1
{
"customerCode": 289199,
"winningCode": 289199
}
// テストデータ2
{
"customerCode": 167320,
"winningCode": 289199
}
<!--テストデータ1による結果のHTML-->
<p>Hello Ben! You have a winning code.Thanks for playing.</p>
<!-- テストデータ2による結果のHTML-->
<p>Hello Ben! You do not have a winning code.Thanks for playing.</p>
and(かつ)
真偽の判定では、空の文字列、整数のゼロ、浮動小数点数のゼロは「false」と評価されます。空ではない文字列、ゼロでない整数、負の数値を含むゼロでない浮動小数点数は、「true」と評価されます。
elseを使用しないand(かつ)
//テストデータ1
{
"favoriteFood": "Pasta",
"favoriteDrink": ""
}
// テストデータ2
{
"favoriteFood": "Pasta",
"favoriteDrink": "Coffee"
}
<!--テストデータ1による結果のHTML-->
<p>Hi Ben! We look forward to sending you more delicious recipes.</p>
<!-- テストデータ2による結果のHTML -->
<p>
Hi Ben! Thank you for letting us know your dining preferences.We look forward
to sending you more delicious recipes.
</p>
elseを使用したand(かつ)
//テストデータ1
{
"favoriteFood": "Pasta",
"favoriteDrink": ""
}
// テストデータ2
{
"favoriteFood": "Pasta",
"favoriteDrink": "Coffee"
}
<!--テストデータ1による結果のHTML -->
<p>
Hi Ben! If you finish filling out your dining preferences survey, we can
deliver you recipes we think you'll be most interested in. We look forward to
sending you more delicious recipes.
</p>
<!-- テストデータ2による結果のHTML -->
<p>
Hi Ben! Thank you for letting us know your dining preferences.We look forward
to sending you more delicious recipes.
</p>
or(または)
真偽の判定では、空の文字列、整数のゼロ、浮動小数点数のゼロは「false」と評価されます。空ではない文字列、ゼロでない整数、負の数値を含むゼロでない浮動小数点数は、「true」と評価されます。
基本的な使い方
//テストデータ1
{
"isRunner": true,
"isCyclist": false
}
// テストデータ2
{
"isRunner": false,
"isCyclist": false
}
//テストデータ3
{
"isRunner": false,
"isCyclist": true
}
<!--テストデータ1による結果のHTML -->
<p>
Hi Ben! We think you might enjoy a map of trails in your area.You can find
the map attached to this email.Have a great day.
</p>
<!-- テストデータ2による結果のHTML-->
<p>Hi Ben! Have a great day.</p>
<!-- テストデータ3による結果のHTML -->
<p>
Hi Ben! We think you might enjoy a map of trails in your area.You can find
the map attached to this email.Have a great day.
</p>
elseを使用したor(または)
//テストデータ1
{
"isRunner": true,
"isCyclist": false
}
// テストデータ2
{
"isRunner": false,
"isCyclist": false
}
//テストデータ3
{
"isRunner": false,
"isCyclist": true
}
<!--テストデータ1による結果のHTML -->
<p>
Hi Ben! We think you might enjoy a map of trails in your area.You can find
the map attached to this email.Have a great day.
</p>
<!-- テストデータ2による結果のHTML -->
<p>
Hi Ben! We'd love to know more about the outdoor activities you enjoy.The
survey linked below will take only a minute to fill out.Have a great day.
</p>
<!-- テストデータ3による結果のHTML -->
<p>
Hi Ben! We think you might enjoy a map of trails in your area.You can find
the map attached to this email.Have a great day.
</p>
length(長さ)
lengthヘルパーは、与えられた文字列か配列の文字数を返します。文字列でも配列でもない値では、lengthは0を返します。lengthは、以下の例に示すようにgreaterThanなどの他のヘルパーと組み合わせると便利です。
//テストデータ1
{
"cartItems": ["raft", "water bottle", "sleeping bag"]
}
// テストデータ2
{
"cartItems": []
}
<!--テストデータ1による結果のHTML-->
<p>
Hello Ben! It looks like you still have some items in your shopping cart.Sign
back in to continue checking out at any time.
</p>
<!-- テストデータ2による結果のHTML-->
<p>Hello Ben! Thanks for browsing our site.We hope you'll come back soon.</p>
反復
{{#each }}
ヘルパー関数によりデータをループ、つまり反復処理し、リストの作成やその他有用なテンプレートアクションを実行できます。
eachを使用した基本的な反復子
//テストデータ
{
"user": {
"orderHistory": [
{
"date": "2/1/2018",
"item": "shoes"
},
{
"date": "1/4/2017",
"item": "hat"
}
]
}
}
<!--結果のHTML -->
<ol>
<li>You ordered: shoes on: 2/1/2018</li>
<li>You ordered: hat on: 1/42017</li>
</ol>
組み合わせた例
以下の例では、複数のHandlebars関数を組み合わせ、高度な動的テンプレートを作成しています。
動的なコンテンツ作成
//テストデータ
{
"user": {
"story": [
{
"male": true,
"date": "2/1/2018",
"item": "shoes"
},
{
"male": true,
"date": "1/4/2017",
"item": "hat"
},
{
"female": true,
"date": "1/1/2016",
"item": "shirt"
}
]
}
}
<!--結果のHTML-->
<p>2/1/2018</p>
<p>1/4/2017</p>
<p>shirt</p>
動的な要素を含む動的なコンテンツ作成1
//テストデータ
{
"user": {
"story": [
{
"male": true,
"date": "2/1/2018",
"item": "shoes"
},
{
"male": true,
"date": "1/4/2017"
},
{
"female": true,
"item": "shirt"
}
]
}
}
<!--結果のHTML-->
<p>2/1/2018</p>
<p>shoes</p>
<p>1/4/2017</p>
<p>shirt</p>
動的な要素を含む動的なコンテンツ作成2
//テストデータ
{
"people": [{ "name": "Bob" }, { "name": "Sally" }]
}
<!--結果のHTML-->
<p>People: </p>
<p>Bob</p>
<p>Sally</p>
その他のリソース
サポートが必要ですか?
誰にでもそういうことはあります。今すぐTwilio SendGridサポートチームにヘルプしてもらいましょう。
コーディングで行き詰っていませんか?Stack OverflowのSendGridタグの質問一覧を参照するか、Stack OverflowのTwilio Collectiveにアクセスして、皆さんの知恵を借りましょう。