最終更新日: 2025年8月22日
HubLでは、値の保存やテンプレートへの出力に変数を使用します。変数はテンプレートのロジックで使用することも、forループで繰り返し使用することもできます。テンプレートで繰り返し使用されるコードの動的な部分を出力するには、変数のほかに、マクロを使用することもできます。
変数は}}で囲まれた式です。変数の基本的な構文を次に示します。
// variables
{{ variable }}
{{ dict.attribute }}
content.absolute_urlと指定した場合、特定のコンテンツのURLが出力されます。
HubSpotには、ページやブログ、Eメールのテンプレートに使用できる多数の定義済み変数が用意されています。変数のリファレンスリストがあります。アカウントからページを閲覧するときに開発者情報を表示することもでき、そのページ内で利用可能な変数が表示されます。
変数の値やディクショナリーの属性をテンプレートに出力するほかに、ユーザー独自の変数を定義することもできます。1つの変数内に文字列、ブール値、整数、シーケンスを格納したり、ディクショナリーを作成したりできます。変数は、文の区切り文字の内側で、「set」を使って定義します。格納された変数を出力するには、変数名を式として記述します。以下では、さまざまなタイプの情報を変数に格納し、出力しています。
変数は1つの単語にするか、スペースの代わりに下線を使用する（my_variableなど）必要があります。HubLでは、ハイフンで連結した変数名はサポートされません。
{% set string_var = "This is a string value stored in a variable" %}
{{ string_var}}
{% set bool_var = True %}
{{ bool_var}}
{% set int_var = 53 %}
{{ int_var}}
{% set seq_var = ["Item 1", "Item 2", "Item 3"] %}
{{ seq_var}}
{% set var_one = "String 1" %}
{% set var_two = "String 2" %}
{% set sequence = [var_one, var_two] %}
{{ sequence }}
{% set dict_var = {"name": "Item Name", "price": "$20", "size":"XL"} %}
{{ dict_var.price }}
<!-- defines variable and assigns HEX color -->
{% set primaryColor = "#F7761F" %}
a {
color: {{ primaryColor }}; {# prints variable HEX value #}
}
マクロ
HubLマクロでは、動的な値を使用して複数の文を出力できます。例えば、同じコードブロックを何度も記述するような場合は、マクロを使用すると便利です。マクロに渡す引数を切り替えることで、そのコードブロックを出力できます。
マクロは、HubL文の中で定義し、名前を付け、引数を指定します。このマクロを別の文で呼び出して動的な値を渡すと、動的な引数を持つ最終的なコードブロックが出力されます。マクロの基本的な構文を次に示します。
{% macro name_of_macro(argument_name, argument_name2) %}
{{ argument_name }}
{{ argument_name2 }}
{% endmacro %}
{{ name_of_macro("value to pass to argument 1", "value to pass to argument 2") }}
-）を追加すると、そのブロックの前または後の空白文字が削除されます。
{% macro name_of_macro(argument_name, argument_name2) -%}
{{ argument_name }}
{{ argument_name2 }}
{%- endmacro %}
{% macro trans(value) %}
-webkit-transition: {{value}};
-moz-transition: {{value}};
-o-transition: {{value}};
-ms-transition: {{value}};
transition: {{value}};
{% endmacro %}
a {
{{ trans("all .2s ease-in-out") }}
}
マクロにおいて、再帰コードを利用できるようになります。信頼性とパフォーマンスの問題を防ぐため、マクロのネスト可能な階層は最大20になっています。この上限を超えると、max recursion limit of 20 reached for macro <your macro name>というエラーが返されます。
呼び出し
場合によっては、動的な追加情報をマクロブロックに渡す必要があるかもしれません。例えば、引数のほかに、長いコードをマクロに挿入する場合です。これを行うには、callブロックとcaller()を使用します。callブロックは基本的にマクロと同じように機能しますが、callブロックに名前は指定しません。caller()式で、callブロックの内容をどこに表示するかを指定します。
以下の例では、2つの引数に加えて、1つの<p>がマクロに追加されています。
{% macro render_dialog(title, class) %}
<div class="{{ class }}">
<h2>{{ title }}</h2>
<div class="contents">
{{ caller() }}
</div>
</div>
{% endmacro %}
{% call render_dialog("Hello World", "greeting") %}
<p>This is a paragraph tag that I want to render in my.</p>
{% endcall %}
インポート
マクロには、あるテンプレートファイルから別のテンプレートファイルにインポートして使用できる便利な機能もあります。これには、importタグを使用する必要があります。importタグでは、マクロが含まれているテンプレートへのDesign Manager（デザインマネージャー）ファイルパスを指定し、インポート先テンプレート内でのマクロ名を指定することができます。その後に、それらのマクロに値を渡すことができます。マクロを再定義する必要はありません。
例えば、次の2つのマクロが含まれている.htmlテンプレートファイルがあるとします。1つのマクロはheaderタグを設定するために定義し、もう1つはfooterタグを生成するために定義しています。このファイルはデザインマネージャーにmy_macros.htmlという名前で保存されています。
<!-- my_macros.html file -->
{% macro header(tag, title_text) %}
<header> <{{ tag }}>{{ title_text }} </{{tag}}> </header>
{% endmacro %}
{% macro footer(tag, footer_text) %}
<footer> <{{ tag }}>{{ footer_text }} </{{tag}}> </footer>
{% endmacro %}
my_macros.htmlファイルへのファイルパスを指定したimportタグを使用します。また、マクロのグループには名前を付けます（この例ではheader_footer）。そして、そのインポートしたテンプレートに付けた名前にマクロ名を追加することでマクロを実行できます。以下の例を参照してください。
{% import "custom/page/web_page_basic/my_macros.html" as header_footer %}
{{ header_footer.header("h1", "My page title") }}
<p>Some content</p>
{{ header_footer.footer("h3:", "Company footer info") }}
from
別の.htmlファイルに含まれている全てのマクロではなく、特定のマクロのみをインポートする場合は、fromタグを使用します。fromタグでは、インポートするマクロのみを指定します。通常、importを使用する方が柔軟性は向上しますが、この代替手段もサポートされます。
次の例では、この記事の前のセクションと同じmy_macros.htmlファイルを利用します。ただし、今回は、全てのマクロをインポートするのではなく、footerマクロのみを利用します。
{% from "custom/page/web_page_basic/my_macros.html" import footer %}
{{ footer("h2", "My footer info") }}
ループ内の変数
ループ内で定義した変数は、そのループの範囲内に制限され、ループの外側から呼び出すことはできません。
.updateリスト操作を使用しています。
{% set obj = {val : 0} %}
{% for i in range(0, 10) %}
{% do obj.update({val: obj.val + i }) %}
{% endfor %}
{{ obj.val }}
