テンプレートでモジュールを使用する

Last updated:

モジュールは、テンプレートに直接追加したり、ドラッグ＆ドロップエリアおよびフレキシブルカラムを使用して、ページに個別に追加したりできます。モジュールがテンプレートに追加されると、そのモジュールは既定でその場所に表示されます。ドラッグ＆ドロップエリアやフレキシブルカラムにあるモジュールは、移動や削除が可能で、その他のモジュールもその周辺に追加できます。これがモジュールインスタンスです。

モジュールが定義されたら、必要に応じてcontent.widgets ディクショナリー経由でテンプレートレベルのフィールド値を取得できます。

基本的なモジュール構文

HubLモジュールタグは{% %} で区切られており、module、一意の名前、モジュールのデザイン マネージャー パスを指定する必要があります。モジュールには、その他の設定のパラメーターを含めることもできます。

  • モジュール名：テンプレートのコンテキスト内で重複しないIDをモジュールに指定します。 
    • モジュールのタイプの後に、名前を引用符で囲んで指定する必要があります。また、モジュール名では、スペースまたはダッシュの代わりに下線記号（アンダースコア）を使用する必要があります。
    • この名前は、ページ／Eメールエディター内で設定されたコンテンツと、該当するHubLモジュールタグのマッチングに使用されます。例えば、テンプレートの2か所のエリアに同名のHubLモジュールタグを記述した場合、ユーザーがエディターで編集するモジュールは1つだけですが、そのモジュールに対する変更は両方のエリアに適用されます。
  • パス：タグに応じて、デザインマネージャーでのモジュールの位置を定義します。
    • /は、現在のドライブのルートを意味します。
    • ./は、現在のディレクトリーを意味します。
    • ../は、現在のディレクトリーの親を意味します。
HubSpotの既定モジュールのパスは常に@hubspot/で始まり、その後にモジュールのタイプが続きます。
  • パラメーター：モジュールのインスタンスの追加設定で、その動作とレンダリング方法を指定します。モジュールフィールドのテンプレートレベルの既定値が含まれます。
    • パラメーターはカンマ区切りのキーと値のペアです。
    • パラメーターには、文字列、ブール型、整数、列挙、JSONリストオブジェクトなどのさまざまな型があります。文字列パラメーターでは値を一重引用符または二重引用符で囲む必要がありますが、ブール型パラメーターではTrueまたはFalseの値を引用符で囲む必要はありません。すべてのモジュールで利用可能なパラメーターについての詳細をご確認ください。
    • モジュールのフィールド設定と比較して、エディター内でフィールド値が検証されることはないことに注意してください。例えば、モジュールに最小値が1に設定された数値フィールドがあり、このパラメーターに0を渡す場合でも、値が無効だという警告は表示されません。
{# Basic syntax #} {% module "unique_module_name" path="@hubspot/module_type", parameterString='String parameter value', parameterBoolean=True %} {# Sample of a default HubSpot text module #} {% module "job_title" path="@hubspot/text", label="Job Title", value="Chief Morale Officer" %} {# Sample of a custom module #} {% module "faqs" path="/myWebsite/modules/faq_module", label="Custom FAQ Module" faq_group_title="Commonly Asked Questions" %}

モジュールパラメーターにディクショナリーを渡す

ディクショナリー（辞書型）を必要とするフィールドが使用されたモジュールには、ディクショナリーを他のパラメーターと同様に渡すことができます。分かりやすくしたり、値を再利用したりする場合は、ディクショナリーを変数に設定し、変数をパラメーターに渡すことができます。

{% module "social_buttons", path="@hubspot/social_sharing", email={ "default": true, "enabled": false, "img_src": "https://..." } %}

dnd関連パラメーターを使用するフィールドを渡す

dnd_areaなどのドラッグ＆ドロップタグには、widthなどの既定のパラメーターのセットがあります。デザインマネージャーでは、このような予約済みパラメーターのいずれかを使用するフィールドを新規に作成できませんが、ドラッグ＆ドロップタグが導入される前に作成されたモジュールは予約済みパラメーターを既に使用している場合があります。 

これを修正するのに、fieldsパラメーターを使用できます。グループにフィールドデータを渡すのと同様に、フィールド名をfieldsオブジェクトのキーとして渡すことができます。値には、フィールドタイプに必要な形式との一貫性が必要です。

{% dnd_area "main_content"%} {% dnd_section %} {% dnd_column %} {% dnd_row %} {% dnd_module path="@hubspot/divider", fields={width: "90"} %} {% end_dnd_module %} {% end_dnd_row %} {%end_dnd_column%} {% end_dnd_section %} {% end_dnd_area %}

フィールドにテンプレートレベルの既定値を設定する

Dnd_moduleタグにパラメーターを含めることで、テンプレートレベルでモジュールフィールドのデフォルト値を設定できます。以下では、ネストされたフィールドグループ、繰り返しフィールド、繰り返しフィールドグループ、およびスタイルフィールドに既定のフィールド値を設定する方法について説明します。

ネストされたフィールドグループに既定の値を設定する

以下は、他のネストされたフィールドグループを含むカスタムスタイルstyleフィールドグループを持つカスタムドラッグ＆ドロップモジュールの例です。テンプレートレベルの構成と、この同じグループ化がデザインマネージャーにどのように表示されるかを比較します。

{% dnd_module path="/Nested_Module.module" style={ "group":{ "section":{ "color_field":{ "color" : "#000", "opacity" : 100 } } } } %} {% end_dnd_module %}
複数階層フィールドのネスト

繰り返しフィールドの既定値を設定する

配列をフィールドのパラメーターに渡すことにより、繰り返しフィールドにテンプレートレベルの既定値を設定できます。配列の項目はフィールドタイプに基づいて想定される形式にする必要があります。以下に例を示します。

  • 単純なテキストフィールドでは文字列のみが求められます
  • 画像の繰り返しフィールドでは画像フィールドのオブジェクトが求められます。これは、他の全てのフィールドタイプにも該当します。
{% module path='../modules/recipe_card.module', ingredients=["Eggs","Ham","Cheese"] %} {% module "my_repeater_module" path="/img_repeater_module", label="img_repeater_module", image=[ { "src" : "https://cdn2.hubspot.net/hubfs/428357/Developer%20Site/assets/logo/Developers-LOGO.svg", "alt" : "HubSpot Developers", "width" : 254, "height" : 31 },{ "src" : "https://www.hubspot.com/hs-fs/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", "alt" : "Dharmesh", "width" : 394, "height" : 394 } ] %}

繰り返しフィールドグループに既定値を設定する

スライドショーモジュールやよくある質問モジュールなどに使用される、フィールドの繰り返しグループが含まれるモジュールでは、グループにテンプレートレベルの既定値を設定できます。そのためには、フィールドグループのパラメーターにオブジェクトの配列を渡します。オブジェクトのキーと値のペアは、フィールド名とその値になります。

{% module path='../modules/slideshow.module', slides=[ { "caption":"Cute dog looking up", "image_url":"http://example.com/image.jpg", }, { "caption":"Cuter cat not looking amused", "image_url":"http://example.com/image2.jpg", } ] %}

スタイルフィールドに既定値を設定する

スタイルパラメーターを使用してスタイルフィールドの既定値を明示的に設定できます。

これは他のグループの場合と同様に機能します。パラメーターはグループの名前です。このパラメーターに、設定する全てのフィールドと共にオブジェクトを渡します。

{% dnd_module path="./path/to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}

ブロック構文

ほとんどのモジュールには既定のコンテンツを制御するパラメーターがありますがその際、モジュールの既定のコンテンツへの大きなコードブロックの追加が必要になることがあります。例えば、リッチテキストまたはHTMLモジュールの既定のコンテンツとして大きなHTMLブロックを含めることがあります。valueパラメーターにこのコードを記述する代わりに、HubLブロック構文を使用できます。

{% module_block module "my_rich_text_module" path="/My Rich Text Field Module", label="My Rich Text Field Module" %} {% module_attribute "rich_text_field_variable" %} <div>My HTML block</div> {% end_module_attribute %} {% end_module_block %}

module_block構文が導入される前には、widget_blockが使用されていました。同様のパターンですが、開始タグはwidget_blockとwidget_attributeでした。終了タグはend_widget_attributeとend_widget_blockでした。

widget_block構文は非推奨になりましたが、古いコードを更新する必要はありません。

module_blockまたはwidget_block（非推奨）の直後に続くパラメーターはtype_of_moduleパラメーターです。

当社のほぼ全てのドキュメントではmoduleを使用しています。HubSpotのV2モジュールは、開発者が作成できるものと同様の通常のモジュールです。したがって、別のtype_of_moduleを使用する必要はありません。

widget_blockは非推奨になったため、module_blockを使用する必要があります。別の開発担当者からウェブサイトを引き継ぐ場合には、widget_blockとtype_of_moduleを使用した古いコードが含まれている場合があります。

type_of_moduleでは、rich_textやraw_htmlなどのHubSpotのV1モジュール名がサポートされます。追加のパラメーターはHubLの先頭行に追加できます。2行目で、ブロックのコンテンツが適用されるパラメーターを定義します。例えば、rich_textモジュールではこれはhtmlパラメーターです。raw_htmlモジュールでは、これはvalueパラメーターです（この2つの例については以下を参照してください）。 

{# widget_block is deprecated, use module_block instead. This example is only to explain what type_of_module was used for, for those with legacy code. #} {% widget_block rich_text "my_rich_text_module" overrideable=True, label='My rich-text module' %} {% widget_attribute "html" %} <h2>New Module</h2> <p>Add content here.</p> {% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_my_rich_text_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h2>New Module</h2> <p>Add content here.</p> </span>

content_attribute

標準構文とブロック構文の他に、事前定義のコンテンツ変数の既定コンテンツとして大きなブロックを指定することがあります。この最も一般的な例として、content.email_body変数があります。この変数では、コンテンツエディターで変更可能な、標準のEメール本文が出力されます。これは標準HubLモジュールではないので、既定コンテンツのブロック指定にはcontent_attributeタグを使用します。Eメール本文変数に既定のコンテンツ コード ブロックを格納する例を以下に示します。

{% content_attribute "email_body" %} <p>Hi {{ contact.firstname }},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p> {% end_content_attribute %}

全てのモジュールで使用可能なパラメーター

一部の特殊なパラメーターは使えるモジュールが限られますが、すべてのモジュールでサポートされるパラメーターを以下に示します。

ParameterTypeDescription Default
label
文字列型

コンテンツエディターで表示されるモジュールの名前。このパラメーターは、ユーザーに追加の指示を与える場合にも使用できます。
overrideable
ブール型（Boolean）

モジュールをコンテンツエディターで編集できるかどうかを制御します。これはデザインマネージャーの「コンテンツエディターでの編集を禁止する」設定に相当します。

 True
no_wrapper
ブール型（Boolean）

Trueに設定されると、モジュールのコンテンツのラッパーマークアップが削除されます。

ページ上では、モジュールは特殊なクラスの<div>で常にラップされます。このラッパーマークアップでは、プレビューペインでモジュールがクリックされた際の該当モジュールへのエディターのスクロールを実現します。テキストモジュールを使ってアンカータグのhref属性のリンク先を指定する場合など、ラッパーの削除が必要になる場合があります。

 False
extra_classes
文字列型

モジュールラッパーにクラスを追加します。複数のクラスを追加するには、クラスをスペースで区切って指定します。例として、以下のような場合が挙げられます。

extra_classes='full-width panel'
export_to_template_context
ブール型（Boolean）

Trueに設定されている場合はHTMLをレンダリングする代わりに、このウィジェットのパラメーターがテンプレートコンテキストで使用可能になります。このパラメーターとwidget_dataタグの使い方をご確認ください。

 False
unique_in_loop
ブール型（Boolean）

モジュールがループ内で定義されている場合、モジュール名をloop.indexと共に付加します。Trueに設定されている場合は、別のバージョンのモジュールがループの反復の度に出力されます。モジュール名をloop.indexと共に付加します。

 False

全てのモジュールタイプとそのパラメーターのリストを確認するには、ここをクリックしてください。

フィールドベースのパラメーター

以下では、使用できるフィールドベースのモジュールパラメーターについて説明します。

フィールド タイプ 例 キー
ブログ 整数（ブログID） 1234567890  
ブール値 true/false false  
選択 文字列型 "option_1"  
色 オブジェクト 
{
  "color" : "#ffffff",
  "opacity" : 100
}
color
6文字の16進数形式
opacity
整数0～100
CTA 文字列（CTA ID） 
"fb9c0055-6beb-489d-8dda-3e1222458750"
  
日付 タイムスタンプ 
1566360000000
  
日時 タイムスタンプ 
1566360000000
  
Eメールアドレス 配列（メールアドレス文字列） 
["develop@hubspot.com", "design@hubspot.com"]
  
ファイル 文字列（ファイルのURL） 
"https://cdn2.hubspot.net/hubfs/file.pdf"
  
フォローアップEメール 整数（フォローアップEメールID） 
1234567890
  
フォント オブジェクト 
{
  "size" : 12,
  "size_unit" : "px",
  "color" : "#000",
  "styles" :{
    "text-decoration" : "underline"
  },
  "font" : "Alegreya",
  "fallback" : "serif",
  "variant" : "regular",
  "font_set" : "GOOGLE"
}
size
単位タイプなしのフォントサイズ
size_unit
フォントサイズ単位文字列
  • "px"
  • "pt"
  • "em"
  • "rem"
  • "%"
  • "ex"
  • "ch"
color
16進カラーコード文字列
styles
サポートされるプロパティー
"font-weight"
"normal" / "bold"
"font-style"
"normal" / "italic"
"font-style"
"none" / "underline"
フォーム オブジェクト 
{
  "form_id" : "9aa2e5f3-a46d-4774-897e-0bc37478521c",
  "response_type" : "redirect",
  "redirect_url" : "http://www.hubspot.com",
  "redirect_id" : null,
  "form_type" : "HUBSPOT"
}
form_id
フォームのID。フォームのIDを取得する方法。
response_type
"redirect" / "inline"
メッセージ
response_typeに"inline"を使用した場合に表示されるメッセージ。htmlをサポートする文字列。
redirect_url
文字列。ウェブページへの絶対URL
redirect_id
リダイレクト先のページ/POST ID
form_type
"HUBSPOT" / "TICKET_FORM"
HubDBテーブル 整数（HubDBテーブルのID） 123456789  
アイコン オブジェクト 
{ 
  "name" : "align-center",
  "unicode" : "f037",
  "type" : "SOLID"
}
name
アイコンの名前
unicode
アイコンのフォントのUnicodeシンボル
type
記号スタイル。"SOLID" / "REGULAR"
パラメーターを適切に設定するため、アイコンフィールドを設定し、その方法で値を表示することをお勧めします。
画像 オブジェクト 
{
  "src" : "https://cdn2.hubspot.net/hubfs/image.jpeg",
  "alt" : "an_image",
  "width" : 100,
  "height" : 100
}
src
画像URL
alt
スクリーンリーダーや検索エンジンで使用される画像の代替テキスト
width
画像を表示する幅
height
画像を表示する高さ
ミーティング 文字列（ミーティングリンク） "https://app.hubspot.com/meetings/developers-r-kewl"  
メニュー 整数（メニューID） 123456789  
数値 整数 1  
ページ 整数（ページID） 1234567890  
リッチテキスト 文字列（htmlを含めることが可能） "<h1>Hello, world!</h1>"  
Salesforceキャンペーン 文字列（SalesforceキャンペーンID） "7016A0000005S0tQAE"  
シンプルメニュー メニュー項目オブジェクトの配列 
[ 
  { 
    "isPublished" : true,
    "pageLinkId" : 123456789,
    "pageLinkName" : "My page",
    "isDeleted" : false,
    "categoryId" : 1,
    "subCategory" : "site_page",
    "contentType" : "site_page",
    "state" : "PUBLISHED_OR_SCHEDULED",
    "linkLabel" : "This is a page",
    "linkUrl" : null,
    "linkParams" : null,
    "linkTarget" : null,
    "type" : "PAGE_LINK",
    "children" : [ ]
  } 
]
isPublished
true/false。メニュー項目のページが公開されているか
pageLinkId
CMSのページID
pageLinkName
CMS内のページの実際の名前
isDeleted
true/false
categoryId
  • 1 - サイトページ
  • 3 - ブログ記事
subCategory
  • site_page
  • landing_page
  • blog
  • normal_blog_post
contentType
  • site_page
  • landing_page
  • blog
state
  • DRAFT
  • DRAFT_AB
  • PUBLISHED
  • PUBLISHED_OR_SCHEDULED
  • PUBLISHED_AB
  • SCHEDULED
linkLabel
ユーザーが読み取り、クリックするテキスト
linkUrl
ユーザーがクリックしたときに送信される実際のURL
linkParams
#リンクまたは?クエリーパラメーター
linkTarget
open in new tabが有効になっている場合"_blank"、それ以外の場合は"null"
type
  • "PAGE_LINK"
  • "PAGE_LINK_WITH_PARAMS"
  • "NO_LINK"
children
メニュー項目オブジェクトの配列。個別のメニュー項目と同じ。
タグ 整数（タグIDまたはスラッグ。IDを推奨） 1234567890  
テキスト 文字列型 "it's like any other string"  
URL オブジェクト 
{ 
  "type" : "CONTENT",
  "href" : null,
  "content_id" : 123456789
}
type
  • "EXTERNAL"：HubSpot以外の非EメールURLの場合
  • "CONTENT"：ページ、ブログ記事、ランディングページの場合
  • "FILE"：ファイルマネージャーにアップロードされるファイルの場合
  • "EMAIL_ADDRESS"：Eメールアドレスの場合
  • "BLOG"：ブログリストページの場合
href
文字列。リンク先のURL。
参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。