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

モジュールとは、HubSpotページまたはEメールの編集可能な領域です。モジュールインスタンスは、HubLを使用してテンプレートに追加できます。テンプレート内に定義したモジュールは、既定でテンプレート内のその場所に表示されます。ドラッグ＆ドロップエリアやフレキシブルカラムなどの編集可能な領域内にあるモジュールは、削除や移動が可能で、他のモジュールも追加できます。これがモジュールインスタンスです。

モジュール定義（テンプレートに追加できるmoduleタグ）により、モジュールインスタンスの既定の状態が定義されます。

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

基本的なモジュール構文

モジュールタグは以下の要素で構成されます。

  • モジュールの固有名：テンプレートのコンテキスト内で重複しないIDをモジュールに指定します。
  • パス（タグによって異なります） - デザインマネージャーでのモジュールの位置を定義します。
    • /は、現在のドライブのルートを意味します。
    • ./は、現在のディレクトリーを意味します。
    • ../は、現在のディレクトリーの親を意味します。
  • パラメーター：モジュールのインスタンスの追加設定。モジュールフィールドのテンプレートレベルの既定値が含まれます。
HubSpotの既定モジュールのパスは常に@hubspot/で始まり、その後にモジュールのタイプが続きます。詳細については、以下の例と既定のモジュールページを参照してください。
{% 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="/Marketplace/HubSpotSiteSetup/Vast_Site_Setup/Custom_Modules/Vast FAQ Module", label="Vast FAQ Module" %}

HubLモジュールタグは{% で区切り、モジュールタイプと固有名を指定する必要があります。モジュールのタイプの後に、固有名を引用符で囲んで指定する必要があります。モジュール名では、スペースまたはダッシュの代わりに下線記号（アンダースコア）を使用する必要があります。

この固有名は、ページ／Eメールエディターに入力されたコンテンツと、該当するHubLモジュールタグのマッチングに使用されます。例えば、テンプレートの2か所のエリアに同名のHubLモジュールタグを記述した場合、ユーザーがエディターで編集するモジュールは1つだけですが、そのモジュールに対する変更は両方のエリアに適用されます。 

モジュールタグの2つの必須コンポーネントの他に、HubLモジュールでは、モジュールの動作やモジュールのレンダリング方法を指定する各種パラメーターがサポートされています。パラメーターはキーと値のペアであり、カンマで区切られます。パラメーターには、文字列、ブール型、整数、列挙、JSONリストなどのさまざまな型があります。文字列パラメーターでは値を引用符で囲みますが*、ブール型パラメーターではTrueまたはFalseの値を引用符で囲む必要はありません。labelパラメーターとvalueパラメーターを指定した基本的なテキストモジュールの例を以下に示します。

*文字列パラメーター値は一重引用符または二重引用符で囲むことができます。この例では、モジュールの固有名は二重引用符で囲み、パラメーター値は一重引用符で囲んでいます。この構文は、パラメーター値に複数の属性を持つHTMLマークアップが含まれている場合に役立ちます。ブール型パラメーター値は、大文字で示して読みやすくする場合があります。

{% module "simple_section_title" path="@hubspot/text", label='Enter text for this section title', value='This is a section title' %}<span id="hs_cos_wrapper_simple_section_title" class="highlight hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text" > This is a section title </span>

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

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

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

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

dnd_areaおよびそれと組み合わせて使用できる全てのHubLタグが導入された当時、既存のdndパラメーターと同じ名前のモジュールフィールドを使用できるようになりました。デザインマネージャーでは、このような予約済みパラメーター名のいずれかを使用するフィールドを新規に作成できませんが、古いモジュールにはこの防止が働きません。この対策として、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 %}

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

配列をフィールドのパラメーターに渡すことにより、繰り返しフィールドにテンプレートレベルの既定値を設定できます。配列の項目はフィールドタイプに基づいて想定される形式にする必要があります。例えば、単純なテキストフィールドでは文字列のみが、または画像の繰り返しフィールドでは画像フィールドのオブジェクトが求められます。これは、他の全てのフィールドタイプにも該当します。

{% 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 } ] %}

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

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

{% 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", } ] %}

ブロック構文

ほとんどのモジュールには既定のコンテンツを制御するパラメーターがありますがその際、モジュールの既定のコンテンツへの大きなコードブロックの追加が必要になることがあります。例えば、リッチテキストまたは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
String

コンテンツエディターでモジュールの内部名を指定します。このパラメーターは、ユーザーに追加の指示を与える場合にも使用できます。
overrideable
Boolean

モジュールをコンテンツエディターで編集できるかどうかを制御します。このパラメーターは、テンプレートビルダーのUIでモジュールをロックする機能と同様に使用できます。

 True
no_wrapper
Boolean

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

 False
extra_classes
String

extra_classesパラメーターを追加すると、これらのクラスがモジュールコンテンツのラッピングに追加されます。複数のクラスを一括で追加するには、クラスをスペースで区切って指定します（例: extra_classes='full-width panel'）。
export_to_template_context
Boolean

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

 False
unique_in_loop
Boolean

このパラメーターは、モジュールをループ内で定義し、モジュールの固有名をloop.indexと共に付加する場合に使用できます。Trueの場合は、ループの反復の度にモジュールの異なるバージョンを出力できます。

 False

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

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

You can set the value of custom module fields using parameters.

{% module "faq" path="faq", label="Accessible FAQ Module", faq_group_title="Commonly Asked Questions" %}

この場合、faq_group_titleは全てのモジュールで使用できるパラメーターの1つではありません。faq_group_titleはこのカスタムモジュールに固有のものです。これはモジュール内のフィールドの変数名です。

一部のフィールドはシンプルで、パラメーターでは単純な文字列、整数、true/falseを使用します。そのほかには、オブジェクトが必要な場合があります。エディター内ではカスタムモジュールのフィールド設定に基づいた値検証は行われないため、正しい形式での値の入力は開発による対応が想定されます。例：モジュールに最小値が1に設定された数値フィールドがあり、このパラメーターに0を渡します。値が無効であることを示す警告はありません。

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

スタイルフィールド付きのモジュールを使用してテンプレートを作成する場合は、スタイルパラメーターを使用してスタイルフィールドの既定値を明示的に設定できます。

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

{% dnd_module path="./to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}
モジュール フィールド タイプとパラメーターの対照
フィールド タイプ 例 キー
ブログ ブログ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メールアドレス 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
画像を表示する高さ
ミーティング ミーティングリンクURLの文字列 "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 URLのキーと値を指定したオブジェクト 
{ 
  "type" :"CONTENT",
  "href" : null,
  "content_id" :123456789
}
type
  • "EXTERNAL"：HubSpot以外の非EメールURLの場合
  • "CONTENT"：ページ、ブログ記事、ランディングページの場合
  • "FILE"：ファイルマネージャーにアップロードされるファイルの場合
  • "EMAIL_ADDRESS"：Eメールアドレスの場合
  • "BLOG"：ブログリストページの場合
href
文字列。リンク先のURL。
参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。