最終更新日: 2025年8月22日
export_to_template_contextは、HubLタグを実際に表示することなく、HubLタグのパラメーターをテンプレート環境で使用するためのパラメーターです。このパラメーターは、全てのHubLタグに使用できます。これらのパラメーターを取得し、変数に保存し、テンプレートのロジックに含めるには、widget_data dict（ディクショナリー）を使用します。 表示されていないHubLタグのパラメーターをテンプレートのコンテキストで使用できれば、コンテンツエディターでのテンプレートの表示方法をユーザーが決めることが可能になります。例えば、ユーザーがフィールドに値を入力したときに、特定のコードブロックのみを表示する必要があるとします。これは、このパラメーターを使用することで実現できます。 まず、HubLタグにexport_to_template_context=Trueを追加する必要があります。次に、widget_data.module.parameter_you_want_to_retreiveを使用します。 
{% module "job_title" path="@hubspot/text", label="Enter a Job Title", value="Chief Morale Officer", export_to_template_context=True %}
{# Makes the parameters available to be stored and used in template logic #}

{{ widget_data.job_title.body.value }}
{# Prints the value of the HubL tag but can also be used in template logic #}
以下では、この考え方の適用例をいくつか紹介します。

​
カスタムモジュール内での利用

export_to_template_context=Trueは、カスタムモジュールにとっては実質的な機能はないため、カスタムモジュールではサポートされません。テンプレート内のモジュールにはすでにアクセスできるので、モジュール内の値を取得するためにexport_to_template_contextを使用する必要がありません。モジュールの出力を非表示にする必要がある場合は、何も出力しないようにモジュールを作成できます。つまり、モジュールで何かを表示するかどうかを有効または無効にするブール値フィールドを含めます。

​
ユーザーが選択できる背景画像

この例では、画像HubLタグを作成し、それを表示することなくテンプレートのコンテキストにエクスポートします。widget_dataタグでsrcパラメーターを取得し、styleタグの背景画像のソースとして表示します。 
{% module "background_image" path="@hubspot/image" label='Select a background image',
src='http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg',
export_to_template_context=True %}

<!--Sample markup -->
<div class="bg-image-section" style="background:url('{{ widget_data.background_image.src }}'); background-size:cover; min-height: 500px;">
    <h1>Supercharge your app with HubSpot</h1>
    <h3>Build powerful integrations for a global community of users</h3>
</div>
これはコードテンプレートでも実現できますが、通常はカスタムモジュールを作成して、ページエディターのユーザーに最適な編集環境を提供することをお勧めします。このようなHubLタグは個別のフィールドとして表示されますが、関連するフィールドが複数存在する場合もあります。カスタムモジュールを使用すると、ページエディターではモジュールの全てのフィールドがグループ化された状態で表示されます。

​
定義済みのマークアップを表示するための選択フィールド

以下の例では、export_to_template_contextパラメーターと選択モジュールを組み合わせて、求人ページのバナーメッセージを変更しています。ユーザーがUIを使用して部門を選択すると、ユーザーが実際にコンテンツを編集しなくても見出しが変更されます。 
{% module "department" path="@hubspot/choice", label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}

{% if widget_data.department.value == "Marketing" %}

<h3>Want to join our amazing Marketing team?!</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% elif widget_data.department.value == "Sales" %}

<h3>Are you a Sales superstar?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% elif widget_data.department.value == "Dev" %}

<h3>Do you love to ship code?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% else %}

<h3>Want to work with our awesome customers?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% endif %}
これと同じ機能を、カスタムモジュール内の選択フィールドを使用して再現できます。カスタムモジュールのUIでは、値とラベルの両方を含む選択オプションを非常に簡単に作成できます。

​
テンプレートにすでに表示されているモジュールからパラメーターを取得する

ページにすでに表示されているモジュールまたはタグからパラメーターを取得する場合は、widgetsという名前のdict内でそのモジュールにアクセスできます。export_to_template_contextパラメーターは必須ではありません。構文は次のとおりです。 
// HubL
{{ content.widgets.name_of_module.body.parameter }}

{{ content.widgets.my_text.body.value }}
注：content.widgetsはグローバルモジュールにアクセスしないので、上記のメソッドはグローバルモジュールのフィールドからの値の取得をサポートしません。
フィールドによってデータの保存形式が異なるため、表示するデータへのアクセス方法を確認するには、多くの場合、開発者情報を使用すると便利です。

​
HubLモジュール情報をブログリストに出力する

ブログテンプレートは、一般的にはブログに使用されますが、他の種類のリストを作成するために流用することもできます。前述の手法を使用してこの目的を達成できます。 例えば、会社が受信した報道記事のリストレイアウトを作成するとして、記事にリンクせずに、リストを別のページにリンクする場合があります。 academy.hubspot.com/projectsでこの考え方の実例を確認できます。プロジェクト リスト ページはブログ リスト テンプレートですが、個々の記事は通常のHubSpotページにリンクしています。制作担当者はエディターでリンク先を指定します。 個々のブログ記事のコードの先頭で、テキストフィールドを定義します。記事にこのテキストを表示しない場合は、export_to_template_contextを使用します。 
{% module "custom_blog_link" path="@hubspot/text", label="Link to external press item", export_to_template_context=True %}
このテキストフィールドはブログ記事ごとに編集できます。次に、リスト内のリンクを定義する必要があります。しかし、widget_dataは記事のコンテキストにのみ存在するため、別の構文を使用してウィジェットデータを取得し、リンクに設定する必要があります。この場合は、content.widgets.custom_blog_link.body.valueを使用します。ブログリストではwidget_dataを使用できませんが、そのフィールドの値は個々のコンテンツのウィジェットのコンテキスト内に保存されます。 各記事を含むこのカスタムリンクを表示する基本的なブログリストのループを以下に示します。この方法を使用する場合は、ブログ記事ごとに自動的に作成されたサブディレクトリーをrobots.txtファイルに追加して、空の記事がGoogle などのクローラーによってクロールされないようにする必要があります。 
{% for content in contents %}
<a href="https://developers.hubspot.jp/docs{{ content.widgets.custom_blog_link.body.value }}">
    Click here to see this press feature!
</a>
{% endfor %}