テンプレートでモジュールを使用する
モジュールとは、HubSpotページまたはEメールの編集可能な領域です。モジュールインスタンスは、HubLを使用してテンプレートに追加できます。テンプレート内に定義したモジュールは、既定でテンプレート内のその場所に表示されます。ドラッグ&ドロップエリアやフレキシブルカラムなどの編集可能な領域内にあるモジュールは、削除や移動が可能で、他のモジュールも追加できます。これがモジュールインスタンスです。
モジュール定義(テンプレートに追加できるmoduleタグ)により、モジュールインスタンスの既定の状態が定義されます。
モジュールが定義されたら、必要に応じてcontent.widgets
経由でテンプレートレベルのフィールド値を取得できます。
モジュールタグは以下の要素で構成されます。
- モジュールの固有名:テンプレートのコンテキスト内で重複しないIDをモジュールに指定します。
- パス(タグによって異なります) - デザインマネージャーでのモジュールの位置を定義します。
/
は、現在のドライブのルートを意味します。./
は、現在のディレクトリーを意味します。../
は、現在のディレクトリーの親を意味します。
- パラメーター:モジュールのインスタンスの追加設定。モジュールフィールドのテンプレートレベルの既定値が含まれます。
HubLモジュールタグは{%
で区切り、モジュールタイプと固有名を指定する必要があります。モジュールのタイプの後に、固有名を引用符で囲んで指定する必要があります。モジュール名では、スペースまたはダッシュの代わりに下線記号(アンダースコア)を使用する必要があります。
この固有名は、ページ/Eメールエディターに入力されたコンテンツと、該当するHubLモジュールタグのマッチングに使用されます。例えば、テンプレートの2か所のエリアに同名のHubLモジュールタグを記述した場合、ユーザーがエディターで編集するモジュールは1つだけですが、そのモジュールに対する変更は両方のエリアに適用されます。
モジュールタグの2つの必須コンポーネントの他に、HubLモジュールでは、モジュールの動作やモジュールのレンダリング方法を指定する各種パラメーターがサポートされています。パラメーターはキーと値のペアであり、カンマで区切られます。パラメーターには、文字列、ブール型、整数、列挙、JSONリストなどのさまざまな型があります。文字列パラメーターでは値を引用符で囲みますが*、ブール型パラメーターではTrueまたはFalseの値を引用符で囲む必要はありません。labelパラメーターとvalueパラメーターを指定した基本的なテキストモジュールの例を以下に示します。
*文字列パラメーター値は一重引用符または二重引用符で囲むことができます。この例では、モジュールの固有名は二重引用符で囲み、パラメーター値は一重引用符で囲んでいます。この構文は、パラメーター値に複数の属性を持つHTMLマークアップが含まれている場合に役立ちます。ブール型パラメーター値は、大文字で示して読みやすくする場合があります。
dnd_area
およびそれと組み合わせて使用できる全てのHubLタグが導入された当時、既存のdndパラメーターと同じ名前のモジュールフィールドを使用できるようになりました。デザインマネージャーでは、このような予約済みパラメーター名のいずれかを使用するフィールドを新規に作成できませんが、古いモジュールにはこの防止が働きません。この対策として、fields
パラメーターが追加されました。グループにフィールドデータを渡すのと同様に、フィールド名をフィールドオブジェクトのキーとして渡すことができます。値には、フィールドタイプに必要な形式との一貫性が必要です。
配列をフィールドのパラメーターに渡すことにより、繰り返しフィールドにテンプレートレベルの既定値を設定できます。配列の項目はフィールドタイプに基づいて想定される形式にする必要があります。例えば、単純なテキストフィールドでは文字列のみが、または画像の繰り返しフィールドでは画像フィールドのオブジェクトが求められます。これは、他の全てのフィールドタイプにも該当します。
スライドショーモジュールやFAQモジュールなどに使用される、フィールドの繰り返しグループが含まれるモジュールでは、グループにテンプレートレベルの既定値を設定できます。そのためには、フィールドグループのパラメーターにオブジェクトの配列を渡します。オブジェクトのキーと値のペアは、フィールド名とその値になります。
ほとんどのモジュールには既定のコンテンツを制御するパラメーターがありますがその際、モジュールの既定のコンテンツへの大きなコードブロックの追加が必要になることがあります。例えば、リッチテキストまたはHTMLモジュールの既定のコンテンツとして大きなHTMLブロックを含めることがあります。valueパラメーターにこのコードを記述する代わりに、HubLブロック構文を使用できます。
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つの例については以下を参照してください)。
標準構文とブロック構文の他に、事前定義のコンテンツ変数の既定コンテンツとして大きなブロックを指定することがあります。この最も一般的な例として、content.email_body変数があります。この変数では、コンテンツエディターで変更可能な、標準のEメール本文が出力されます。これは標準HubLモジュールではないので、既定コンテンツのブロック指定にはcontent_attributeタグを使用します。Eメール本文変数に既定のコンテンツ コード ブロックを格納する例を以下に示します。
一部の特殊なパラメーターは使えるモジュールが限られますが、全てのモジュールでサポートされるパラメーターもあります。全てのモジュールでサポートされるパラメーターを以下に示します。
Parameter | Type | Description | 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.
この場合、faq_group_title
は全てのモジュールで使用できるパラメーターの1つではありません。faq_group_title
はこのカスタムモジュールに固有のものです。これはモジュール内のフィールドの変数名です。
一部のフィールドはシンプルで、パラメーターでは単純な文字列、整数、true/falseを使用します。そのほかには、オブジェクトが必要な場合があります。エディター内ではカスタムモジュールのフィールド設定に基づいた値検証は行われないため、正しい形式での値の入力は開発による対応が想定されます。例:モジュールに最小値が1に設定された数値フィールドがあり、このパラメーターに0を渡します。値が無効であることを示す警告はありません。
スタイルフィールド付きのモジュールを使用してテンプレートを作成する場合は、スタイルパラメーターを使用してスタイルフィールドの既定値を明示的に設定できます。
これは通常のグループの場合と同様に機能します。パラメーターはグループの名前です。このパラメーターに、設定する全てのフィールドと共にオブジェクトを渡します。
フィールド | タイプ | 例 | キー |
---|---|---|---|
ブログ | ブログID | 1234567890 | |
ブール値 | true/false | false | |
選択 | 値文字列 | "option_1" | |
色 | オブジェクト |
|
|
CTA | 文字列。CTA ID |
|
|
日付 | タイムスタンプ |
|
|
日時 | タイムスタンプ |
|
|
Eメールアドレス | Eメールアドレス文字列の配列 |
|
|
ファイル | ファイルへのURL文字列 |
|
|
フォローアップEメール | フォローアップEメールID |
|
|
フォント | フォントのキーと値を指定したオブジェクト |
|
|
フォーム | フォームのキーと値を指定したオブジェクト |
|
|
HubDBテーブル | HubDBテーブルのID | 123456789 |
|
アイコン | アイコンのキーと値を指定したオブジェクト |
|
|
画像 | 画像のキーと値を指定したオブジェクト |
|
|
リンク | リンクのキーと値を指定したオブジェクト |
|
|
ロゴ | ロゴのキーと値を指定したオブジェクト |
|
|
ミーティング | ミーティングリンクURLの文字列 | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
メニュー | メニューID | 123456789 |
|
数値 | 整数 | 1 |
|
ページ | ページID | 1234567890 |
|
リッチテキスト | 文字列。htmlを含めることが可能 | "<h1>Hello, world!</h1>" |
|
Salesforceキャンペーン | 文字列。SalesforceキャンペーンID | "7016A0000005S0tQAE" |
|
シンプルメニュー | メニュー項目オブジェクトの配列 |
|
|
タグ | タグID/スラグ(IDを推奨) | 1234567890 |
|
テキスト | 文字列 | "it's like any other string" |
|
URL | URLのキーと値を指定したオブジェクト |
|
|
貴重なご意見をありがとうございました。