モジュールとテーマのフィールドの概要
モジュールのfields.jsonファイルには、HubSpot CLIを使用してローカル環境で、またはアプリ内のモジュールエディター上でフィールドを追加できます。テーマにフィールドを追加するには、CLIを使用してテーマのfields.jsonファイルをローカル環境で更新する必要があります。
モジュールフィールドとテーマフィールドをローカル環境で構築する場合、モジュールまたはテーマのフォルダー内にあるfields.jsonファイル経由で編集できます。モジュールの場合、hs create moduleコマンドを使用すると、このファイルが自動作成されます。モジュールエディターで利用可能な全てのフィールドオプションは、fields.jsonファイルで追加または編集できるプロパティーとして使用できます。これには、リピーターフィールド、グループ、条件が含まれます。ローカル編集の利点の1つは、gitのようなバージョン管理システムにモジュールを含めることが容易になることです。
デザインマネージャーには組み込みのモジュールエディターUIがあり、モジュールフィールドの作成、グループ化、編集に使用できます。モジュールエディターにはモジュールのプレビューがあるため、モジュールの外観の確認とフィールドのテストができます。モジュールは、常に使用する予定のテンプレートでモジュールをテストして、どのようなテンプレートでのスタイルからの影響があるかを確認する必要があります。なお、ロックされたフォルダーにモジュールが含まれている場合は、この方法で編集できないことに注意してください。
注：主にローカル環境で作業し、フィールドの設定にモジュールエディターを使用する場合は、必ず変更をfetch（フェッチ）してください。gitのようなバージョン管理システムを使用する場合には、特に重要です。
既定では、コンテンツエディターではモジュールフィールドは縦方向に配置されます。しかし、モジュールフィールドは横並びに配列することもできます。このためには、fields.jsonファイルのフィールドにdisplay_widthプロパティーを追加し、値をhalf_widthに設定します。
display_widthをhalf_widthに設定した1つのフィールドは、コンテンツエディターでは半分の幅で表示されます。fields.json内のこのフィールドの上または下にあるフィールドをhalf_widthに設定すると、フィールドが横並びに配置されます。
フィールドが互いに関連している場合、グループ化して表示することが適切な場合が少なくありません。モジュールもテーマも複数のフィールドのグループ化に対応しています。
ネストされたフィールドグループがないフィールドグループは、グループの上下に区切り線が表示され、グループのラベルがグループの最上部に表示されます。
フィールドグループはネストできます。別のフィールドグループを含むフィールドグループはボタンとして表示されます。ボタンをクリックすると、グループの内容が表示されます。
フィールドグループは、3階層までネストできます。つまり、モジュールフィールドの深さは4階層まで設定できます。フィールドの関係性と深さが分かるユーザーインターフェイスを簡単に作成できます。
フィールド グループ オブジェクトは、他のフィールドグループの子になることができます。構造はフィールド自体と非常に似ていますが、含まれるフィールドとグループの配列、「children」パラメーターという特別なパラメーターがあります。
フィールドグループは、上記のコード例で示されているように、fields.jsonグループプロパティー内でexpandedブール値プロパティーをtrueに設定することで、既定で展開できます。フィールドグループは既定で展開されないため、ネストされたフィールドグループを使用する場合には、親グループにこのプロパティーを使用することはできません。
フィールドグループでは、出力するフィールド値を含むディクショナリー（辞書型）が作成されます。フィールドグループをネストした場合、ネストされたフィールドグループは外側のフィールド グループ ディクショナリー内にディクショナリーとして格納されます。このデータにアクセスするには、状況に応じてルートのテーマまたはモジュール変数からツリー内を走査する必要があります。
スタイルフィールドは、モジュールまたはテーマのfields.jsonファイルの特殊なフィールド グループ タイプで、これによって制作担当者がモジュールやテーマのスタイルをページエディターとテーマエディター上で制御できるようになります。モジュールまたはテーマにスタイルフィールドを追加する方法を以下に示します。スタイルフィールドの使用と整理に関するベストプラクティスを参照してください。
モジュールのスタイルフィールド
モジュールに追加したスタイルフィールドは、モジュール編集時のページエディターの［スタイル］タブに表示されます。
スタイルフィールドをモジュールのfields.jsonファイルに追加する場合は、全てのフィールドを1つのスタイルグループ内に追加します。ただし、次のようにこのグループ内に複数のグループを含めることができます。
テーマのスタイルフィールド
テーマに追加したスタイルフィールドは、テーマエディターの左のサイドバーに表示されます。
以下のように、テーマのfields.jsonファイル内にある全てのスタイルフィールドは、テーマエディターの左のサイドバーに追加され、スタイルグループに追加する必要はありません。
モジュールのスタイルフィールドとして使用できるフィールドを以下に示します。各フィールドタイプについては、モジュールとフィールドタイプのガイドをご確認ください。
モジュールとテーマのフィールドタイプをご覧ください。
テーマのfields.jsonファイル内のスタイルフィールドの例については、CMSボイラープレートを参照してください。
注：マーケットプレイスで提供している場合は、既存のモジュール内の既存のコンテンツフィールドをスタイルフィールドで置き換えないでください。fields.jsonファイルのフィールド階層を変更すると、既存のモジュールインスタンスのデータが失われることがあります。代わりに、新しいスタイルフィールドの追加、またはフィールドを適切にグループ化した新しいリストの作成ができます。これにより、貴社の更新によって、貴社のテーマを利用している顧客のコンテンツが破損するような変更は避けられます。以前のモジュールの移行パスについては、HubSpotアイデアフォーラム（英語）を参照してください。
情報を形成するモジュールを作成する際には、繰り返し使用される情報があります。例えば、レシピモジュールには「材料」のフィールドがあると考えられます。また、ほとんどのレシピの材料は1つにとどまりません。リッチ テキスト フィールドを利用した場合、スタイルの一貫性を確保したり、材料別の機能を追加したりすることはできなくなります。このような状況でリピーターが役に立ちます。HubSpotには2つの形式のリピーターがあります。繰り返しフィールドと繰り返しグループです。
繰り返しフィールドは通常のフィールドですが、制作担当者がフィールドのインスタンスを追加、削除、再配置できます。前述のレシピモジュールの例では、各材料を繰り返しテキストフィールドにできます。これにより、制作担当者は必要な数の材料を追加できます。開発者の観点からは、ループ処理によって材料のリストを出力できる配列を利用でき、必要な書式と機能を適用できます。
繰り返しフィールドは非常にシンプルな状況に最適です。一般的には、繰り返しグループが適切なケースが多くあります。
繰り返しグループは、繰り返しに対応したフィールドグループです。繰り返しグループを使用すると、制作担当者がフィールドのグループを追加、削除、再配置できるようになります。再びレシピモジュールを例に、材料リストをショッピングリスト機能と連携する状況を考えてみます。材料の量は重要です。誰かが量をテキストフィールドに入力した場合に、テキストフィールドを解析して材料から量の情報を取り出すとします。ここで繰り返しグループが役に立ちます。こうしたフィールドの出力に対し、ループ処理を行うことができます。
編集時の利便性を向上すると共に、プログラム側で未対応の値が入力できないように、繰り返しフィールドや繰り返しグループには、制作担当者による追加可能項目数の最小値と最大値を設定できます。
繰り返しグループでは、リピーターを表示するときに、その項目のラベルとして機能するフィールドを設定することもできます。
| Parameter | Type | Description | Default |
|---|---|---|---|
max
| Integer | このグループの最大出現回数。UIからのこの数を超える項目の追加を防止します。 |
null
|
min
| Integer | このフィールドグループの最小出現数。UIからのこの数を下回る項目数の指定を防止します。 |
null
|
sorting_label_field
| String | ドラッグ操作可能なカードのUIに表示するテキストを取得できるフィールドのIDです。既定は、グループ内の最初のフィールドです。 |
inherited_valueプロパティーは、他のフィールドから既定値を継承するようにフィールドを設定できます。フィールドの既定値全体を別のフィールド値から設定するには、default_value_pathにターゲットフィールドのフィールド名パスを指定します。default_value_pathを設定すると、フィールドに設定されたdefaultは全て無視されます。
他のフィールドの値にアクセスするには、モジュールのHubLコードでのアクセスと同様に、パスの先頭に module.を含める必要があります。
複雑なフィールド（値がオブジェクトのフィールド）の場合、ユーザーはproperty_value_pathに継承するプロパティーを細かく指定できます。inherited_valueで参照されるパスにも、複雑なフィールドのフィールド値からのキーを含めることができます。例えば、色フィールドには、色自体と不透明度を含むオブジェクト値があります。そのため、不透明度なしで色自体の値を取得するには、パスの末尾に.colorを指定します。例えばフォントフィールドは、個別の色フィールドから色だけを継承できます。
default_value_pathとproperty_value_pathsの効果を組み合わせて、あるフィールドから既定値を継承しながら、別のフィールドから特定のプロパティー値を継承することもできます。
別のフィールドから継承したフィールドが、ページまたはテーマ設定によって直接変更される場合、制御元のフィールドとの接続は失われます。このフィールドの値に、default_value_pathまたはproperty_value_pathsによって関連付けられた他のフィールドから影響を与えることはできなくなります。
情報の参照のしやすさを考慮し、フィールドタイプの情報は、全般的なフィールドの情報と分けました。モジュールとテーマフィールドのリファレンスページにあります。
貴重なご意見をありがとうございました。