モジュールとテーマのフィールドの概要

Last updated:

モジュールとテーマ内では、コンテンツクリエイターがウェブサイトのモジュールとテーマのスタイルと機能を制御するためのフィールドが使用されます。モジュールまたはテーマを開発する場合は、fields.jsonファイルにフィールドを組み込み、テーマエディターとコンテンツエディターに変換します。

theme-settings-fields

この記事では、モジュールとテーマのフィールドのオプションを作成および管理する方法を詳しく説明します。特定のフィールドタイプの詳細については、モジュールおよびフィールドタイプのリファレンスガイドをご覧ください。 

フィールドの作成と管理

モジュールのfields.jsonファイルには、HubSpot CLIを使用してローカル環境で、またはアプリ内のモジュールエディター上でフィールドを追加できます。テーマにフィールドを追加するには、CLIを使用してテーマのfields.jsonファイルをローカル環境で更新する必要があります。 

HubSpot CLI

モジュールフィールドとテーマフィールドをローカル環境で構築する場合、モジュールまたはテーマのフォルダー内にあるfields.jsonファイル経由で編集できます。モジュールの場合、hs create moduleコマンドを使用すると、このファイルが自動作成されます。モジュールエディターで利用可能な全てのフィールドオプションは、fields.jsonファイルで追加または編集できるプロパティーとして使用できます。これには、リピーターフィールド、グループ、条件が含まれます。ローカル編集の利点の1つは、gitのようなバージョン管理システムにモジュールを含めることが容易になることです。

モジュールエディター

デザインマネージャーには組み込みのモジュールエディターUIがあり、モジュールフィールドの作成、グループ化、編集に使用できます。モジュールエディターにはモジュールのプレビューがあるため、モジュールの外観の確認とフィールドのテストができます。モジュールは、常に使用する予定のテンプレートでモジュールをテストして、どのようなテンプレートでのスタイルからの影響があるかを確認する必要があります。なお、ロックされたフォルダーにモジュールが含まれている場合は、この方法で編集できないことに注意してください。

デザインマネージャーのモジュールエディター

注：主にローカル環境で作業し、フィールドの設定にモジュールエディターを使用する場合は、必ず変更をfetch（フェッチ）してください。gitのようなバージョン管理システムを使用する場合には、特に重要です。

フィールドの横配置

既定では、コンテンツエディターではモジュールフィールドは縦方向に配置されます。しかし、モジュールフィールドは横並びに配列することもできます。このためには、fields.jsonファイルのフィールドにdisplay_widthプロパティーを追加し、値をhalf_widthに設定します。 

side-by-side-modules0

display_widthをhalf_widthに設定した1つのフィールドは、コンテンツエディターでは半分の幅で表示されます。fields.json内のこのフィールドの上または下にあるフィールドをhalf_widthに設定すると、フィールドが横並びに配置されます。

// Example module fields.json file [ { "name": "number_field", "label": "Number", "required": false, "locked": false, "display": "slider", "min": 1, "max": 10, "step": 1, "type": "number", "prefix": "", "suffix": "", "default": null, "display_width":"half_width" }, { "label": "Description", "name": "description", "type": "text", "required": true, "default": "Add a description", "display_width": "half_width" } ]

フィールドグループ

フィールドが互いに関連している場合、グループ化して表示することが適切な場合が少なくありません。モジュールもテーマも複数のフィールドのグループ化に対応しています。 

ネストされたフィールドグループがないフィールドグループ

ネストされたフィールドグループがないフィールドグループは、グループの上下に区切り線が表示され、グループのラベルがグループの最上部に表示されます。

ネストされたフィールドグループ

フィールドグループはネストできます。別のフィールドグループを含むフィールドグループはボタンとして表示されます。ボタンをクリックすると、グループの内容が表示されます。

フィールドグループは、3階層までネストできます。つまり、モジュールフィールドの深さは4階層まで設定できます。フィールドの関係性と深さが分かるユーザーインターフェイスを簡単に作成できます。

fields.json内のフィールドグループ

フィールド グループ オブジェクトは、他のフィールドグループの子になることができます。構造はフィールド自体と非常に似ていますが、含まれるフィールドとグループの配列、「children」パラメーターという特別なパラメーターがあります。

// Field group example { "type": "group", "name": "typography", "label": "Typography", "expanded": true, "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } } ] } // Field group inside of a field group { "type": "group", "name": "header", "label": "Header", "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } { "type": "group", "name": "navigation", "label": "Navigation", "expanded": false, "children": [ { "name" : "bg_color", "label" : "Background color", "sortable" : false, "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } } ] } } ] }

既定でのフィールドグループの展開

フィールドグループは、上記のコード例で示されているように、fields.jsonグループプロパティー内でexpandedブール値プロパティーをtrueに設定することで、既定で展開できます。フィールドグループは既定で展開されないため、ネストされたフィールドグループを使用する場合には、親グループにこのプロパティーを使用することはできません。

フィールドグループ内のフィールド値の出力

フィールドグループでは、出力するフィールド値を含むディクショナリー（辞書型）が作成されます。フィールドグループをネストした場合、ネストされたフィールドグループは外側のフィールド グループ ディクショナリー内にディクショナリーとして格納されます。このデータにアクセスするには、状況に応じてルートのテーマまたはモジュール変数からツリー内を走査する必要があります。

<div> {# printing a value from a field group `recipe_summary` is the field group, `title` is the text field. #} {{module.recipe_summary.title}} </div>/* Printing a Font field's color value, when the font field is within a field group. `typography` is the field group, `h1_font` is the field */ h1{ color: {{ theme.typography.h1_font.color }}; }

スタイルフィールド

スタイルフィールドは、モジュールまたはテーマのfields.jsonファイルの特殊なフィールド グループ タイプで、これによって制作担当者がモジュールやテーマのスタイルをページエディターとテーマエディター上で制御できるようになります。モジュールまたはテーマにスタイルフィールドを追加する方法を以下に示します。スタイルフィールドの使用と整理に関するベストプラクティスを参照してください。

モジュールのスタイルフィールド

モジュールに追加したスタイルフィールドは、モジュール編集時のページエディターの［スタイル］タブに表示されます。

style-field-module-editor0

スタイルフィールドをモジュールのfields.jsonファイルに追加する場合は、全てのフィールドを1つのスタイルグループ内に追加します。ただし、次のようにこのグループ内に複数のグループを含めることができます。

// Module style fields [ { "type": "group", "name": "styles", "tab": "STYLE", "children": [{ "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } }] } ]

モジュールのスタイルフィールドとして使用できるフィールドを以下に示します。各フィールドタイプについては、モジュールとフィールドタイプのガイドをご確認ください。

モジュールとテーマのフィールドタイプをご覧ください。

モジュールのfields.jsonファイル内のスタイルフィールドの例については、CMSボイラープレートを参照してください。

テーマのスタイルフィールド

テーマに追加したスタイルフィールドは、テーマエディターの左のサイドバーに表示されます。

style-field-theme-editor0

以下のように、テーマのfields.jsonファイル内にある全てのスタイルフィールドは、テーマエディターの左のサイドバーに追加され、スタイルグループに追加する必要はありません。

// Theme style fields [ { "label": "Global colors", "name": "global_colors", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "default": { "color": "#494A52" } }, { "label": "Secondary", "name": "secondary", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "default": { "color": "#F8FAFC" } } ] }, { "label": "Global fonts", "name": "global_fonts", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "font", "visibility": { "hidden_subfields": { "size": true, "styles": true } }, "inherited_value": { "property_value_paths": { "color": "theme.global_colors.primary.color" } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE" } }, { "label": "Secondary", "name": "secondary", "type": "font", "visibility": { "hidden_subfields": { "size": true, "styles": true } }, "inherited_value": { "property_value_paths": { "color": "theme.global_colors.primary.color" } }, "default": { "fallback": "serif", "font": "Merriweather", "font_set": "GOOGLE" } } ] }, { "name": "branding_color", "label": "branding_color", "type": "color", "default": { "color": "#3b7bc0", "opacity": 60 }, "inherited_value": { "property_value_paths": { "color": "brand_settings.primaryColor" } } }, { "name": "secondary_branding_color", "label": "Secondary Branding color", "type": "color", "default": { "color": "#ff6b6b", "opacity": 60 }, "inherited_value": { "property_value_paths": { "color": "brand_settings.colors[2]" } } } ] } ]

モジュールのスタイルフィールドとして使用できるフィールドを以下に示します。各フィールドタイプについては、モジュールとフィールドタイプのガイドをご確認ください。

モジュールとテーマのフィールドタイプをご覧ください。

テーマのfields.jsonファイル内のスタイルフィールドの例については、CMSボイラープレートを参照してください。 

注：マーケットプレイスで提供している場合は、既存のモジュール内の既存のコンテンツフィールドをスタイルフィールドで置き換えないでください。fields.jsonファイルのフィールド階層を変更すると、既存のモジュールインスタンスのデータが失われることがあります。代わりに、新しいスタイルフィールドの追加、またはフィールドを適切にグループ化した新しいリストの作成ができます。これにより、貴社の更新によって、貴社のテーマを利用している顧客のコンテンツが破損するような変更は避けられます。以前のモジュールの移行パスについては、HubSpotアイデアフォーラム（英語）を参照してください。

生成されるCSS

一部のスタイルフィールドには、フィールドの値に基づいてCSSを直接出力する仕組みがあります。これは、グラデーションなどの複雑なスタイルを制御できるフィールドの場合に特に役立ちます。次のスタイルフィールドでは、生成された.cssプロパティーが使用されます。

{% require_css %} <style> {% scope_css %} .team-member { {% if module.style.gradient.css %} background: {{ module.style.gradient.css }}; {% endif %} {{ module.style.bg_img.css }} {{ module.style.spacing.css }} {{ module.style.border.css }} } {% end_scope_css %} </style> {% end_require_css %}

リピーター

情報を形成するモジュールを作成する際には、繰り返し使用される情報があります。例えば、レシピモジュールに「材料」のフィールドがあるとします。ほとんどのレシピの材料は1つにとどまりません。リッチ テキスト フィールドを利用した場合、スタイルの一貫性を確保したり、材料別の機能を追加したりすることはできなくなります。このような状況ではリピーターが役に立ちます。HubSpotには繰り返しフィールドと繰り返しグループという2つの形式のリピーターがあります。

繰り返しフィールド

繰り返しフィールドは通常のフィールドですが、制作担当者がフィールドのインスタンスを追加、削除、再配置できます。上記のレシピモジュールの例では、各材料を繰り返しテキストフィールドにできます。 

リピーターフィールド

これにより、制作担当者は必要な数の材料を追加できます。開発者の観点からは、ループ処理によって材料のリストを出力できる配列を使用して、必要な書式と機能を適用できます。 

繰り返しフィールドは非常にシンプルな状況に最適です。一般的には、繰り返しグループが適切なケースが多くあります。

注：現在のところ、繰り返しフィールドの既定の順序を設定することはできません。

fields.json内の繰り返しフィールド

// Repeating field example { "name" : "ingredient", "label" : "Ingredient", "required" : false, "locked" : false, "occurrence" : { "min" : 1, "max" : null, "sorting_label_field" : null, "default" : 1 }, "allow_new_line" : false, "show_emoji_picker" : true, "type" : "text", "default" : [ "1 cup water" ] }

モジュールのHTML+HubLでの項目のループ

<!--Looping through a repeating field--> <ul> {% for item in module.ingredient %} <li>{{ item }}</li> {% endfor %} </ul>

繰り返しグループ

繰り返しグループは、繰り返しに対応したフィールドグループです。繰り返しグループを使用すると、制作担当者がフィールドのグループを追加、削除、再配置できるようになります。レシピモジュールで、材料リストにショッピングリスト機能を統合するとします。

フィールドの繰り返しグループ

ショッピングリストでは、材料の数量が重要です。数量がテキストフィールドに入力されると同時に、このモジュールがテキストフィールドを解析して、材料から数量が正常に分離されるようにする必要があります。そこで役立つのが、繰り返しグループです。こうしたフィールドの出力に対し、ループ処理を行うことができます。

fields.json内の繰り返しグループ

// Repeating field group example { "id" : "ingredients", "name" : "ingredients", "label" : "Ingredients", "required" : false, "locked" : false, "occurrence" : { "min" : 1, "max" : null, "sorting_label_field" : "ingredients.ingredient", "default" : null }, "children" : [ { "id" : "ingredients.ingredient", "name" : "ingredient", "label" : "Ingredient", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "Water" }, { "id" : "ingredients.quantity", "name" : "quantity", "label" : "Quantity", "required" : false, "locked" : false, "display" : "text", "min" : 0, "step" : 1, "type" : "number", "default" : 1 }, { "id" : "ingredients.measurement", "name" : "measurement", "label" : "Measurement", "help_text" : "Unit of measurement (cups, tbsp, etc.)", "required" : false, "locked" : false, "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "cups" } ], "type" : "group", "default" : [ { "ingredient" : "Water", "quantity" : 1, "measurement" : "cups" } ] }

モジュール内の繰り返しフィールドのループ処理

<h2>Ingredients</h2> <ul> {% for ingredient in module.ingredients %} <li> <button data-quantity="{{ ingredient.quantity }}" data-unit="{{ ingredient.measurement }}" data-ingredient="{{ ingredient.ingredient }}"> Add to cart </button> {{ ingredient.quantity }} {{ ingredient.measurement }} {{ ingredient.ingredient }} </li> {% endfor %} </ul>

リピーターオプション

編集時の利便性を向上すると共に、プログラム側で未対応の値が入力できないように、繰り返しフィールドや繰り返しグループには、制作担当者による追加可能項目数の最小値と最大値を設定できます。 

繰り返しグループでは、リピーターを表示するときに、その項目のラベルとして機能するフィールドを設定することもできます。

最大出現数
"occurrence" : { "min" : 1, "max" : 4, "sorting_label_field" : "ingredients.ingredient", }
リピーターオプション
ParameterTypeDescription Default
max
整数

このグループの最大出現回数。UIからのこの数を超える項目の追加を防止します。

 null
min
整数

このフィールドグループの最小出現数。UIからのこの数を下回る項目数の指定を防止します。

 null
sorting_label_field
文字列

ドラッグ操作可能なカードのUIに表示するテキストを取得できるフィールドのIDです。既定は、グループ内の最初のフィールドです。

継承フィールド

inherited_valueプロパティーは、他のフィールドから既定値を継承するようにフィールドを設定できます。フィールドの既定値全体を別のフィールド値から設定するには、default_value_pathにターゲットフィールドのフィールド名パスを指定します。default_value_pathを設定すると、フィールドに設定されたdefaultは全て無視されます。

他のフィールドの値にアクセスするには、モジュールのHubLコードでのアクセスと同様に、パスの先頭に module.を含める必要があります。

// Inherited fields { "name": "body_font", "type": "font", "default": { "font": "Helvetica", "color": "#C27BA0" } }, { "name": "h1_font", "type": "font", "default": {}, "inherited_value": { "default_value_path": "module.body_font" } }

複雑なフィールド（値がオブジェクトのフィールド）の場合、ユーザーはproperty_value_pathに継承するプロパティーを細かく指定できます。inherited_valueで参照されるパスにも、複雑なフィールドのフィールド値からのキーを含めることができます。例えば、色フィールドには、色自体と不透明度を含むオブジェクト値があります。そのため、不透明度なしで色自体の値を取得するには、パスの末尾に.colorを指定します。例えばフォントフィールドは、個別の色フィールドから色だけを継承できます。

// Inherited fields with objects { "name": "secondary_color", "type": "color", "default": { "color": "#C27BA0", "opacity": 100 } }, { "name": "h1_font", "type": "font", "default": { "font": "Helvetica", "size": 12, "size_unit": "px" }, "inherited_value": { "property_value_paths": { "color": "module.secondary_color.color" } } }

default_value_pathとproperty_value_pathsの効果を組み合わせて、あるフィールドから既定値を継承しながら、別のフィールドから特定のプロパティー値を継承することもできます。

// combining the effects of default_value_path and property_value_paths { "name": "body_font", "type": "font", "default": { "font": "Helvetica", "color": "#000000" } }, { "name": "secondary_color", "type": "color", "default": { "color": "#C27BA0", "opacity": 100 } }, { "name": "h1_font", "type": "font", "default": {}, "inherited_value": { "default_value_path": "module.body_font", "property_value_paths": { "color": "module.secondary_color.color" } } }

別のフィールドから継承したフィールドが、ページまたはテーマ設定によって直接変更される場合、制御元のフィールドとの接続は失われます。このフィールドの値に、default_value_pathまたはproperty_value_pathsによって関連付けられた他のフィールドから影響を与えることはできなくなります。

フィールドの可視性

カスタムモジュールとテーマフィールドを定義する際に、fields.jsonファイル内のフィールドにvisibilityオブジェクトを追加することで、フィールドが表示される条件を構成できます。例えば、サンキューメッセージが選択されているときにはリッチテキスト領域を表示する一方で、リダイレクトが選択されているときはページセレクターを表示するようにフォームモジュールを設定できます。

表示条件はcontrolling_field_pathの値を基準に設定することも、propertyパラメーターを使用してフィールド内の特定のプロパティーを基準に設定することもできます。

また、個々のフィールドに表示条件を適用したり、フィールドのグループに表示条件を適用して、そのグループ内の全ての要素の表示条件を管理したりすることもできます。

"visibility" : { "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "property": "src", "operator" : "EQUAL" }
Use this table to describe parameters / fields
ParameterTypeDescription
controlling_field_path
String

表示条件を管理するフィールドのパス。

  • フィールドがフィールドグループ内にネストされていない場合は、フィールドの名前(つまりfield_name)を使用します。
  • グループにネストされたフィールドの場合、パスはピリオドで区切られたグループ化構造と一致する必要があります。以下に例を示します。
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
String

フィールドを表示するために存在する必要がある制御フィールドの正規表現。正規表現は（部分文字列ではなく）文字列全体に一致する必要があり、大文字と小文字も区別されます。

operator
String

controlling_value_regex値との一致方法を定義する演算子。次のいずれかの演算子を使用できます。 

  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX
property
String

ターゲットフィールドの特定のプロパティーに基づく表示条件を設定します。例えば、画像フィールドのsrcプロパティーが特定の値と等しい場合に、このフィールドが表示されるようにできます。既定では、このフィールドに値が指定されていない場合、表示条件は文字列に変換されたcontrolling_value_regex値に基づくことになります。

visibility属性で同時に複数の条件をサポートすることはできません。複数の演算子を使用して複数の条件を追加し、演算の順序も指定するには、advanced_visibilityを使用します。

"visibility_rules" : "ADVANCED", "advanced_visibility" : { "boolean_operator" : "AND", "criteria" : [{ "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "operator" : "MATCHES_REGEX" }, { "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "operator" : "EQUAL" }] }
Use this table to describe parameters / fields
ParameterTypeDescription
visibility_rules
String

既定では、このパラメーターの値はSIMPLEに設定されます。advanced_visibilityを使用するには、値をADVANCEDに設定します。

boolean_operator
String

条件付き基準のブール演算子。ANDまたはORのいずれかにできます。

criteria
Array

フィールドを表示するために一致する必要がある条件付き基準を定義する、visibilityオブジェクトからなる配列。

controlling_field_path
String

表示条件を管理するフィールドのパス。

  • フィールドがフィールドグループ内にネストされていない場合は、フィールドの名前(つまりfield_name)を使用します。
  • グループにネストされたフィールドの場合、パスはピリオドで区切られたグループ化構造と一致する必要があります。以下に例を示します。
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
String

フィールドを表示するために一致する必要がある、制御フィールドの値。MATCHES_REGEX演算子を使用する場合、正規表現は（部分文字列ではなく）文字列全体に一致する必要があり、大文字と小文字も区別されます。

controlling_field_pathが設定されている一方、controlling_value_regexは設定されていないフィールドは、制御フィールドの値がnullでも空白でもない場合に表示されます。

operator
String

controlling_value_regex値との一致方法を定義する演算子。次のいずれかの演算子を使用できます。 

  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX

MATCHES_REGEXを使用する場合は、正規表現の構文が必要です。

一例として、以下に既定の支払いモジュールの最初の部分を記載します。完全なコードを確認するには、HubSpotでこのモジュールを複製してからローカル環境にダウンロードして、モジュールのfields.jsonファイルを表示してください。

[ { "id" : "payment", "name" : "payment", "display_width" : null, "label" : "Payment", "required" : true, "locked" : false, "type" : "payment", "default" : { "id" : null, "properties" : { } } }, { "id" : "checkout_location", "name" : "checkout_location", "display_width" : null, "label" : "Checkout behavior", "required" : false, "locked" : false, "visibility" : { "controlling_field_path" : "payment", "controlling_value_regex" : "id\":\\d+", "operator" : "MATCHES_REGEX" }, "display" : "radio", "choices" : [ [ "new_tab", "Open in a new tab" ], [ "overlay", "Sliding overlay" ] ], "type" : "choice", "default" : "new_tab" }, { "id" : "button_text", "name" : "button_text", "display_width" : null, "label" : "Button text", "required" : true, "locked" : false, "validation_regex" : "", "visibility" : { "controlling_field_path" : "payment", "controlling_value_regex" : "id\":\\d+", "operator" : "MATCHES_REGEX" }, "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "Checkout" }, { "id" : "icon", "name" : "icon", "display_width" : null, "label" : "Icon", "required" : false, "locked" : false, "visibility_rules" : "ADVANCED", "advanced_visibility" : { "boolean_operator" : "AND", "criteria" : [ { "controlling_field_path" : "payment", "controlling_value_regex" : "id\":\\d+", "operator" : "MATCHES_REGEX" }, { "controlling_field_path" : "add_icon", "controlling_value_regex" : "true", "operator" : "EQUAL" } ], "children" : [ ] }, "children" : [ { "id" : "icon.icon", "name" : "icon", "display_width" : null, "label" : "Icon", "required" : true, "locked" : false, "icon_set" : "fontawesome-5.0.10", "type" : "icon", "default" : { "name" : "hubspot", "type" : "SOLID", "unicode" : "f3b2" } }, { "id" : "icon.position", "name" : "position", "display_width" : null, "label" : "Position", "required" : true, "locked" : false, "display" : "select", "choices" : [ [ "left", "Left" ], [ "right", "Right" ] ], "type" : "choice", "default" : "left" } ], "tab" : "CONTENT", "expanded" : false, "type" : "group" }, // rest of fields.json code ]

上記のコードによって、次のような動作になります。

  • 最初のフィールド（payment）は、コンテンツ制作担当者が特定の支払いリンクを作成するために使用する、必須のフィールド（ドロップダウンメニュー）です。HubSpotでは、コンテンツ制作担当者が最初にこのモジュールをページに追加すると、次のUIが表示されます。

payment-link-selector

  • 支払いリンクを選択すると、上記のUIの後に続いて3つのフィールド（checkout_location、button_text、icon）が表示されます。このようになるのは、paymentフィールドによって制御され、paymentフィールドのidパラメーターのID値を必要とするvisibility属性が、これらのフィールドに設定されているためです。

iconフィールド自体はadvanced_visibilityを使用しており、paymentフィールドに支払いリンクが存在し、かつ、add_iconチェックボックスがオンにされている場合にのみ表示されます。

fields.json内で表示条件を設定するという方法の他に、デザインマネージャーでフィールドの「表示条件」オプションを編集することによっても、表示条件を設定できます。
display-conditions-property

デザインマネージャーで表示条件を設定した後は、CLIを使用してこのモジュールをフェッチし、モジュールのfields.jsonファイル内でvisibility属性を確認できます。

条件付きフィールドの無効化

フィールドに条件を追加して、指定された条件が満たされたときに編集不可にすることができます。フィールドを無効にした場合、コンテンツエディターでコンテキストを提供するために、フィールドの上に表示するメッセージを設定することもできます。 

Screenshot 2023-05-23 at 4.10.28 PM

条件とメッセージは、フィールドのdisabled_controlsオブジェクトで設定されます。フィールドを編集可能にするための条件は、rulesオブジェクト内で設定され、advanced_visibilityと同じ形式に従います。

以下のコードは、rules基準の単純な実装と高度な実装の両方を示しています。

  • simple_pageフィールドには、text_fieldがtestingに設定されている場合にフィールドを無効にするロジックが含まれています。
  • fancy_pageフィールドには、text_fieldまたはtext_field_2のいずれかがそれぞれtestingとtesting2に等しくない値に設定されている場合にフィールドを無効にするロジックが含まれています。
// example fields.json [ { "type": "text", "name": "text_field", "label": "Text field", }, { "type": "text", "name": "text_field_2", "label": "Text field 2", }, { "type": "page", "label": "Simple Page", "name": "simple_page", "disabled_controls": { "message": "This field is disabled", "rules": { "criteria": [ { "controlling_field_path": "text_field", "operator" :"EQUAL", "controlling_value_regex": "testing" } ] } } }, { "type": "page", "label": "Fancy Page", "name": "fancy_page", "disabled_controls": { "message": "This field is disabled", "rules": { "boolean_operator": "OR", "criteria": [ { "controlling_field_path": "text_field", "operator" :"NOT_EQUAL", "controlling_value_regex": "testing" }, { "controlling_field_path": "text_field_2", "operator" :"NOT_EQUAL", "controlling_value_regex": "testing2" }, ] } } } ]
Use this table to describe parameters / fields
ParameterTypeDescription
message
文字列

フィールドが無効になっているときにコンテンツエディターに表示するメッセージ。

rules
オブジェクト

フィールドの編集を有効にするための条件。

criteria
配列

フィールドを表示するために満たす必要がある基準を定義する条件オブジェクトの配列。この配列には、boolean_operatorパラメーターを使用して、ANDまたはORロジックで区切られた複数の条件オブジェクトを含めることができます。

boolean_operator
文字列

条件付き基準のブール演算子。ANDまたはORのいずれかにできます。指定しなかった場合、既定でANDになります。

controlling_field_path
文字列

表示条件を管理するフィールドのパス。

  • フィールドがフィールドグループ内にネストされていない場合は、フィールドの名前(つまりfield_name)を使用します。
  • グループにネストされたフィールドの場合、パスはピリオドで区切られたグループ化構造と一致する必要があります。以下に例を示します。
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
文字列

フィールドを表示するために一致する必要がある、制御フィールドの値。MATCHES_REGEX演算子を使用する場合、正規表現は（部分文字列ではなく）文字列全体に一致する必要があり、大文字と小文字も区別されます。

controlling_field_pathが設定されている一方、controlling_value_regexは設定されていないフィールドは、制御フィールドの値がnullでも空白でもない場合に表示されます。

operator
文字列

controlling_value_regex値との一致方法を定義する演算子。次のいずれかの演算子を使用できます。 

  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX

MATCHES_REGEXを使用する場合は、正規表現の構文が必要です。

テーマ エディター フィールドのハイライト機能

テーマエディターでプレビューハイライト機能を使用すると、コンテンツ作成者が、どのフィールドがどのページ要素を制御しているかを理解するのに役立ちます。プレビューハイライト機能は、テーマフィールドをそのフィールドの影響を受けるCSSセレクターにマッピングすることによって機能します。テーマエディターでフィールドにカーソルを合わせると、そのフィールドがマッピングされている要素がボックスで囲んで表示されるという仕組みです。

テーマフィールドのプレビューハイライト機能を構成するには、テーマのルートディレクトリー内に、テーマフィールドとCSSセレクターのリストとのマッピングを指定するためのeditor-preview.jsonファイルを追加します。このファイルで、関連するCSSセレクターが含まれる、ハイライト表示する対象のスタイルフィールドごとに、次の形式を使用して配列を含めます。

// editor-preview.json { "selectors": { "theme.settings.path.1": [ <CSS selectors> ], "theme.settings.path.2": [ <CSS selectors> ], } }

例えば、以下のコードは、プライマリー フォント フィールドによって制御されるページ要素をハイライト表示します。完全な例については、デフォルトのGrowthテーマのeditor-preview.jsonファイルでご確認ください。

// editor-preview.json { "selectors": { "fonts.primary": [ "button, .button, .hs-button", "form input[type='submit'], form .hs-button", ".error-page:before", "p", "blockquote > footer", "form td.is-today .pika-button", "form .is-selected .pika-button", "th, td", ".blog-listing__post-tag", ".blog-listing__post-author-name, .blog-post__author-name", ".pagination__link-icon svg", ".tabs__tab", "a", ".button.button--simple", ".pagination__link .pagination__link-icon svg", ".card--dark", ".card--light", ".card--light summary, .card--light p, .card--light h1, .card--light h2, .card--light h3, .card--light h4, .card--light h5, .card--light h6, .card--light a:not(.button), .card--light span, .card--light div, .card--light li, .card--light blockquote", ".card--light .accordion__summary:before", "tfoot th, tfoot td", ".header__language-switcher-current-label > span", ".header__language-switcher-child-toggle svg", ".header__language-switcher .lang_list_class a:not(.button)", ".header__menu-link", ".header__menu-item--depth-1 > .header__menu-link:not(.button)", ".header__menu-item--depth-1 .header__menu-child-toggle svg", ".header__menu-toggle svg", ".header__language-switcher .header__language-switcher-current-label > span", ".header p, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header a:not(.button), .header span, .header li, .header blockquote, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab", ".footer .hs-menu-wrapper a", ".footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer a:not(.button), .footer span, .footer div, .footer li, .footer blockquote, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab", ".footer hr", "form label", "#email-prefs-form, #email-prefs-form h1, #email-prefs-form h2", "form legend", "form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea", ".backup-unsubscribe input[type='email']", "form .legal-consent-container, form .legal-consent-container .hs-richtext, form .legal-consent-container .hs-richtext p", "form .hs-richtext, form .hs-richtext *, form .hs-richtext p, form .hs-richtext h1, form .hs-richtext h2, form .hs-richtext h3, form .hs-richtext h4, form .hs-richtext h5, form .hs-richtext h6", "button, button, button, .button, .button, .button, .hs-button, .hs-button, .hs-button", "button, .button, .hs-button", ".button.button--secondary, .button.button--secondary, .button.button--secondary", ".button.button--secondary", ".header__menu-item--depth-1 > .header__menu-link, .header__menu-item--depth-1 > .header__menu-link", ".header__menu-item--depth-1 > .header__menu-link", ".header__menu-submenu .header__menu-link, .header__menu-submenu .header__menu-link", ".header__language-switcher .lang_list_class a, .header__language-switcher .lang_list_class a", ".header__menu-submenu .header__menu-link:not(.button)", ".footer .hs-menu-wrapper a, .footer .hs-menu-wrapper a", ".footer .hs-menu-wrapper a", "form .hs-richtext a", ".header__menu-item--depth-1 > .header__menu-link--active-link:not(.button)", ".footer .hs-menu-wrapper .active > a" ] } }

growth-theme-hover

このファイルを作成するには、まず、次の CLIコマンドを実行してファイルを生成します。ファイルの生成中にスクリプトが実行されて、初期フィールド セレクター マッピングが設定されます。

hs theme generate-selectors <theme-directory-path>
ParameterDescription
theme-directory-path

テーマディレクトリーへのパス。

このコマンドを実行した後、editor-preview.jsonファイルを確認し、フィールドとセレクターが適切にマッピングされるように調整する必要があります。generate-selectorsコマンドでは、どのフィールドがどのセレクターに影響するかについて基本的な推測が行われるだけなので、テーマがどのように作成されているかに基づいて修正する必要があります。例えばこのコマンドでは、モジュールがスタイル設定をオーバーライドしていたり、マクロが使用されたりしていても検出できません。

設定されているマッピングをテストするには、テーマをアカウントにアップロードし、そのアカウント内でテーマエディターを表示します（［設定］>［ウェブサイト］>［テーマ］>［テーマを表示］）。

参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。