モジュールとテーマのフィールドタイプ

Last updated:

モジュールとテーマにフィールドを追加することにより、コンテンツ作成者がページエディター内でページのさまざまな要素を制御できるようになります。モジュールとテーマで使用できる全てのフィールドについて、以下で説明します。モジュールとテーマのフィールド(フィールドグループや繰り返しフィールドを含む)の実装に関しては、モジュールとテーマのフィールドの概要ぺージで詳しくご確認いただけます。

全てのフィールドで使用されるプロパティー

全てのフィールドには、いくつかの共通するプロパティーがあります。これらの共通プロパティーでは、値の参照に使用する変数名と、コンテンツ作成者への表示を制御します。

// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
全てのフィールドで使用されるプロパティー
ParameterTypeDescription Default
help_text
String

コンテンツ作成者へのヒントとしてエディターに表示するテキスト。

フィールドを使用する上で必須ではない補足情報の提示に最適です。

none
id
String

HubSpotによって生成されるフィールドの固有ID。ローカル環境での開発の場合はこのIDを指定する必要はありません。

inline_help_text
String

フィールドラベルの下にインラインで表示されるヘルプテキスト(最大300文字)。 

フィールドを使用する上で必須となる情報の提示に最適です。

null
label
String

コンテンツ作成者に表示される説明テキスト。スペースを含めることができます。

Rich text field, Date field, etc.
locked
Boolean

フィールドがコンテンツエディター上で編集可能かどうかを指定します。trueの場合、フィールドはコンテンツエディターに表示されません。

false
name
String

このフィールドの値の参照に使用する変数名。また、フィールドにどのような値が保存されるかを示します。スペースまたは特殊文字を含めることはできません。

richtext_field, date_field, etc.
required
Boolean

エディターでフィールドを空白のままにできるかどうかを指定します。trueの場合、フィールドに値を入力しなければコンテンツを公開できません。

false
type
String

フィールドのタイプ。以下のフィールドタイプで全てのフィールドタイプをご参照いただけます。

visibility
Array

フィールドの表示条件を指定します。

display_width
String

"half_width"に設定すると、コンテンツエディターにモジュールフィールドを全幅フィールドではなく横並びに配置できます。fields.jsonファイル内で次の隣接フィールドも"half_width"に設定されていれば、フィールドが横並びに表示されます。

inline_help_texthelp_textの用法を混同しないように注意してください。 

ユーザーがタスクを完了するために必要な情報か」どうかを基準に使い分けます。

  • この答えが「はい」の場合、情報が画面上に表示される必要があるためinline_help_textが適しています。
  • 「いいえ」の場合は、help_textを使ってポップアップヘルプとして情報を表示できます。

これらの一貫性を保つことにで、ユーザーにとって分かりやすいインターフェイスを提供できます。

位置合わせ

このフィールドは、コンテンツ作成者が要素をコンテナー内の適切な位置に配置するための方法を提供します。テキストの位置合わせには専用のフィールドタイプが使用されるため、このフィールドはテキストの位置合わせには使用できません。

位置合わせフィールドはモジュール内でサポートされます。
位置合わせフィールドはスタイルフィールドとしてのみ使用できます。

位置合わせフィールド
// alignment field { "name": "img_position", "label": "Position Image", "help_text":"Position the image within it's container.", "required": false, "type": "alignment", "default": { "horizontal_align": "CENTER", "vertical_align": "TOP", } }
ブログフィールド
パラメーターDescription Default
default
Object

horizontal_alignおよびvertical_alignを含むオブジェクト。

alignment_direction
String

水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

背景画像

このフィールドは、背景位置と背景サイズのサブフィールドを備える背景画像フィールドを提供します。背景画像フィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

背景画像フィールドはモジュール内でサポートされます。
背景画像フィールドはスタイルフィールドとしてのみ使用できます。

背景画像フィールド
// background image field { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } }
ブログフィールド
パラメーターDescription Default
default
Object

画像のsrc、背景位置、背景サイズを含むオブジェクト。

null

ブログ

このフィールドで、コンテンツ作成者はブログを選択し、開発者にブログIDを提示することができます。モジュール内でティーザーとして扱うブログの情報を呼び出す場合などに便利です。ブログIDは、ブログ関連のHubL関数で使用して、ブログ執筆者最近のブログ記事特定のタグが付いた最近のブログ記事などの情報を取得できます。

ブログフィールドはモジュール内でサポートされます。

ブログフィールドのスクリーンショット
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
ブログフィールド
パラメーターDescription Default
default
"default" / blog id

既定で選択されるブログを指定します。このパラメーターには'default'、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。

null

ブール型

このフィールドで、コンテンツ作成者は機能をオンまたはオフに切り替えることができます。ブール値はtrueまたはfalseに限られます。グループまたはフィールドに、ブール型フィールドに基づく条件を設定することが適切なケースは少なくありません。将来的に2つの状態では足りなくなることが想定される場合は、選択フィールドを使用した方が、後で状態を追加する際の変更作業が軽減されます。

ブール型フィールドはテーマとモジュールの両方でサポートされます。
ブール型フィールドはスタイルフィールドとして使用できます。

ブール型フィールドのスクリーンショット
// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "display":"checkbox", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
ブログフィールド
パラメーターDescription Default
default
Boolean

このフィールドの既定の状態がtrueまたはfalseかを設定します。

false
display
String

フィールドの視覚表示スタイルを選択します。toggle(切り替えスイッチ)またはcheckbox(チェックボックス)として表示できます。

checkbox

スイッチまたはチェックボックスを使用する場合は、一貫性に配慮してください。配慮が不十分な場合は、コンテンツ作成者にとって分かりにくいUIを構築してしまう可能性があります。

切り替えスイッチが適しているのは、フィールドの値によって、条件付きで表示されている他のフィールドを有効化/無効化する場合です。他にも切り替えスイッチが役立つケースとしては、フィールドに基づいてモジュールのデザインが大きく変化する場合です。チェックボックスが適しているのは、小さな個別要素の表示/非表示など、モジュールの表示に大きな影響を及ぼすことがない、軽微な変化の場合です。

境界線

このフィールドは、コンテンツ作成者が要素の周囲に境界線を作成するためのユーザーインターフェイスを提供します。境界線フィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

境界線フィールドはモジュール内でサポートされます。
境界線フィールドはスタイルフィールドとしてのみ使用できます。

ページエディターの境界線モジュールフィールドのスクリーンショット
// Border field { "id" : "styles.border", "name" : "border", "label" : "border", "required" : false, "locked" : false, "allow_custom_border_sides" : false, "type" : "border", "default" : { "top": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "bottom": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "left": null, "right": null } }
ブログフィールド
パラメーターDescription Default
default
Boolean

境界線の半径、上部、下部、左側、右側のキーを備えたオブジェクト。

{}

選択

ドロップダウンメニュー、ラジオ選択、またはチェックボックス内のオプションのリストから、コンテンツ作成者が1つ以上の項目を選択するためのフィールドです。

選択フィールドの選択肢には、個々の値にラベルを付けることができます。ページ内のモジュールを設定した後でも、選択肢のラベルは変更できます。ラベルを変更しても選択肢の値は変わらないため、サイトに影響はありません。ただし、選択肢の値を変更した場合は、その値を使用していたモジュールとの関連付けが解除されます。

選択フィールドはテーマとモジュールの両方でサポートされます。選択フィールドはスタイルフィールドとして使用できます。

choice-field-dropdown
// Choice field { "name" : "img_position", "label" : "Image Position", "required" : false, "locked" : false, "multiple":"true", "display" : "select", "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ], "type" : "choice", "default" : "img--left" }
ブール値フィールド
パラメーターDescription Default
choices
Array

値とラベルのペアの配列。値を先に並べます。

[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]
default
Value

選択肢の配列の中から、既定で選択される値を設定します。

multiple
String

任意。複数のオプションを選択できるようにするには、値をtrueに設定します。 

False
display
String

フィールドの外観を設定します。

multipleが含まれていない場合は、"radio""select"のどちらかとして設定できます。

multipletrueに設定されている場合は、"checkbox""select"のどちらかかとして設定できます。

"select"

色フィールドを使用して、コンテンツ作成者はカラー ピッカー インターフェイスで色を指定することができます。このフィールドはソリッドカラーと透明性に対応します。コンテンツ作成者がモジュール内で色を調整できるようにするには、このフィールドが最適です。

色フィールドはテーマとモジュールの両方に対応します。
色フィールドはスタイルフィールドとして使用できます。

色フィールド

不透明度のオプションは、host_template_typesemailが含まれるモジュールでは無効になっています。

// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
色フィールド
パラメーターDescription Default
default
Object

既定で選択される色と不透明度を設定します。

{ "color" : "#ffffff", "opacity" : 100 }

CTA

CTA(Call-To-Action)フィールドでは、表示するCTAを選択する機能をユーザーに提供できます。CTAは基本的に、追跡可能なボタンまたはリンクです。コンテンツ作成者は、サイト全体で使用できるCTAを作成することができます。 

CTAフィールドはモジュール内でサポートされます。
CTAフィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

Call To Actionフィールド
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
CTAフィールド
パラメーターDescription Default
default
String

既定で選択されるCTA。CTAマネージャーでCTAを編集する際のURLに表示されるCTA idが想定されます。

null

CRMオブジェクト

CRMオブジェクトフィールドは、表示するCRMオブジェクトの個別のインスタンスを選択する方法をユーザーに提供します。 

module.fieldname.propertiesは、このオブジェクトインスタンスから取得されたプロパティーを返します。そのため、選択したオブジェクトインスタンスのデータを取得するためにcrm_object()関数を使用する必要はありません。

module.fieldname.idはオブジェクトインスタンスIDを返します。

CRMオブジェクトフィールドはモジュール内でサポートされます。
CRMオブジェクトフィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

CRMオブジェクトフィールド
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
CRMオブジェクトフィールド
パラメーターDescription Default
object_type
必須
String

ユーザーが選択できるCRMオブジェクトのタイプ。こちらで利用可能なCRMオブジェクトタイプをご確認ください。

properties_to_fetch
Array

オブジェクトタイプに関連付けられているプロパティー名の配列(文字列)。例:“date_of_birth”はコンタクトに関連付けられたプロパティーです。ページ上で利用できる情報を、必要なものに限定する際に使用します。

default
Object

既定で選択されるオブジェクトインスタンスのIDのオブジェクト。コンタクトID、会社IDなど

null

CRMオブジェクトプロパティー

CRMオブジェクト プロパティー フィールドは、指定されたオブジェクトタイプからラベルやプロパティー名などのプロパティーメタデータにアクセスするために使用します。これにより、コンテンツ作成者は、ページ上にプロパティーの詳細を表示する必要がある場合に、オブジェクトプロパティーから選択することができます。

例えば、このフィールドをカスタム テーブル モジュールに追加して、選択されたプロパティーに基づいてテーブルの見出しを入力することができます。

CRMオブジェクトフィールドはモジュール内でサポートされます。 

crm-object-property-dropdown-menu0
// fields.json { "name" : "crmobjectproperty_field", "label" : "CRM object property", "required" : true, "locked" : false, "object_type" : "contact", "type" : "crmobjectproperty", "default" : { "property" : "field_of_study" } }
CRMオブジェクトフィールド
パラメーターDescription Default
object_type
必須
String

ユーザーが選択できるCRMオブジェクトのタイプ。サポートされるCRMオブジェクトタイプに関する詳細を確認してください。

default
Object

表示する既定のプロパティーを含めます。

加えて、以下のスニペットを使用すると、他のプロパティーの詳細を返すことができます。
  • {{ module.fieldname.property }}:プロパティーの内部名を返します。
  • {{ module.fieldname.property_definition.label }}:プロパティーのラベルを返します。
  • {{ module.fieldname.property_definition.type }}:プロパティータイプ(文字列など)を返します。

日付

日付フィールドでは、日付入力用インターフェイスを提供できます。コンテンツ作成者はこのインターフェイスを使用して簡単に日付を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。

日付フィールドはモジュール内でサポートされます。

日付フィールドとカレンダーを開いた状態
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
日付フィールド
パラメーターDescription Default
default
Timestamp

日時の既定として使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。

null

日時

日時フィールドでは、日付フィールドと同じ日付インターフェイスだけでなく、時刻入力用インターフェイスも提供できます。コンテンツ作成者はこれらのインターフェイスを使用して簡単に日付と時刻を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。

日時フィールドはモジュール内でサポートされます。

イベント開始
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
日時フィールド
パラメーターDescription Default
default
Timestamp

日時の既定として使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。

null

Eメールアドレス

Eメール アドレス フィールドを実装すると、ユーザーが複数のEメールアドレスを選択できるようになります。例えばコンタクト情報の表示に、このフィールドを使用します。Eメールフィールドからは、選択されたEメールアドレスの配列が返されます。この配列をループ処理できます。

Eメールフィールドはモジュール内でサポートされます。

Eメールフィールド
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
Eメール アドレス フィールド
パラメーターDescription Default
default
Array

Eメールアドレス文字列の配列["bob@example.com", "dennis@example.com"]

null

埋め込み

埋め込みフィールドでは、ユーザーによるoEmbed対応のサイト(英語)のURLの追加や、他のサイトからの埋め込みコードの貼り付けが可能になります。oEmbedの資料を参照して、HubSpotでのoEmbedの使用方法の詳細や使用事例をご覧ください。

埋め込みフィールド
// embed field { "name" : "embed_field", "label" : "Embed", "required" : false, "locked" : false, "supported_source_types" : [ "oembed", "html" ], "supported_oembed_types" : [ "photo", "video", "link", "rich" ], "type" : "embed", "default" : { "source_type" : "oembed" } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
supported_source_types
Array

サポートされるソースタイプ。oEmbed URL(oembed)、HTML埋め込みコード(html)、またはメディアブリッジ(media_bridge)のいずれか。

["oembed", "html"]
supported_oembed_types
Array

サポートされるoEmbedタイプ。"photo""video""link""rich"など。HTMLのsupported_source_typesには適用されません。

[ "photo", "video", "link", "rich" ]
supported_media_bridge_providers
Array

コンテンツの選択に利用可能なメディア ブリッジ プロバイダーを指定するプロバイダーIDの配列。

注:このパラメーターは、メディア ブリッジ プロバイダー アプリケーションをインストールした場合にも入力されます。 

type
String

このパラメーターは常に"embed"に設定されます。

"embed"
default
Dict

"source_type"パラメーターを含む配列。このパラメーターには、"supported_source_types"パラメーターで提供されるオプションの値を基にした1つの文字列があります。

oembed

ファイル

ファイルフィールドを実装すると、ユーザーがファイルマネージャーまたはドキュメントマネージャーにファイルをアップロードできるようになります。また、これらのマネージャー内にある項目を簡単に添付できます。PDFファイルや他の形式のファイルにリンクする際に役立ちます。ページ上に画像を表示するには、画像フィールドを使用する必要があります。

ファイルフィールドはモジュール内でサポートされます。

ファイルフィールド
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
ファイルフィールド
パラメーターDescription Default
default
String

ファイルのURL。

null
picker
String

利用可能な値:file、document、image。
このパラメーターに応じて、ファイルマネージャーまたはドキュメントマネージャーにアップロードされたアセットがファイル選択画面に表示されます。

file

フォローアップEメール

フォローアップEメールフィールドを実装すると、フォーム送信への応答として送信するEメールをコンテンツ作成者が指定できるようになります。このフィールドは、simple_email_campaign_idパラメーターでHubLフォームタグを指定して使用します。

フォローアップEメールフィールドはモジュール内でサポートされます。

フォローアップEメールフィールド
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
Eメール アドレス フィールド
パラメーターDescription Default
default
String

EメールID

null

フォント

フォントフィールドを使用して、コンテンツ作成者は基本的なフォントスタイルを設定できます。コンテンツ作成者はサイズ、色、フォントファミリー、書式(太字、イタリック、下線付き)を選択することが可能です。リストに表示されるフォントは全て、Google フォント(英語)および標準的なウェブ対応フォントです。 

フォントフィールドはテーマとモジュールの両方でサポートされます。フォントフィールドはスタイルフィールドとして使用できます。

フォントフィールド
// Font field { "name" : "font", "label" : "Font", "required" : false, "locked" : false, "load_external_fonts" : true, "type" : "font", "default" : { "size" : 12, "font":"Merriweather", "font_set":"GOOGLE", "size_unit" : "px", "color" : "#000", "styles" : { } }, "visibility" : { "hidden_subfields" : { "font": true, "size": true } } }

注:フォントファミリーはfontfont_setの組み合わせによって決まります。フォントを読み込むには、両方を指定する必要があります。継承フィールドの場合、これは、両方の値を継承する必要があることを意味します。

フォントフィールド
パラメーターDescription Default
default
Object

サイズ、サイズ設定単位、色の設定と、太字、イタリック、下線のスタイル設定を含むフォントオブジェクト。

{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }
load_external_fonts
Boolean

スタイルシートまたはモジュールのHubLによって選択または参照したウェブフォントが、HubSpot上で自動的にページに読み込まれます。これをfalseに設定した状態ですでにページにフォントが読み込まれている場合、フォントは二重に読み込まれません。

true
visibility
Object

hidden_subfieldsのネストされたオブジェクトを使用して、非表示にするフォントフィールドを制御するブール値を設定できます。サブフィールドには、fontsizebolditalicunderlinecolorがあります。

variant
String

Google フォントを使用する場合の、フォントのバリエーションです。例えば、フォントの太さを700にして使用するには、"700"にします。フォントをイタリックの太さ400にして使用するには、"400i"にします。

フォーム

フォームフィールドを実装すると、アカウント内にある特定のフォームをコンテンツ作成者が指定できるようになります。その情報を基に、HubLフォームタグを使用してページにレンダリングできます。 

フォームフィールドはモジュール内でサポートされます。

form field-Aug-21-2020-08-09-55-35-PM
// Form field { "name" : "form", "label" : "Form", "required" : false, "locked" : false, "type" : "form", "default" : { "form_id" : "f7110408-1935-4ed3-8a8e-293bb1c9d1ec", "response_type" : "inline", "message" : "Thanks for submitting the form.", "gotowebinar_webinar_key" : null, "form_type" : "HUBSPOT" } }
Eメール アドレス フィールド
パラメーターDescription Default
default
Object

選択したフォームID、レスポンスタイプ、メッセージを含むフォームオブジェクト。

{ "response_type" : "inline", "message" : "Thanks for submitting the form." }

グラデーション

このフィールドによって、コンテンツ作成者はグラデーションを作成および設定できます。現時点では5件までの線形グラデーションをご利用いただけます。グラデーションフィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

グラデーションフィールドはモジュール内でサポートされます。グラデーションフィールドはスタイルフィールドとしてのみ使用できます。

グラデーションフィールド
// Gradient field { "name": "bg_gradient", "label": "Background gradient", "help_text": "Sets a gradient behind the content", "required": false, "type": "gradient", "default": { "colors": [{ "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "color": { "r": 255, "g": 255, "b": 255, "a": 1 } }], "side_or_corner": { "verticalSide": "BOTTOM", "horizontalSide": null } } }
Eメール アドレス フィールド
パラメーターDescription Default
default
Object

グラデーションの方向性の設定("side_or_corner")およびグラデーションの段階を、オブジェクトの配列として含むオブジェクト。

HubDB行

HubDB行フィールドによって、コンテンツ作成者は定義されたテーブルから個別の行(またはリピーターフィールドを使用する場合は複数行)を選択できます。このフィールドは、ユーザー定義のリスト、テーブル、リソースなどの作成に使用できます。

HubDB行フィールドはモジュール内でサポートされます。
HubDB行フィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

hubdb-row-field
// HubDB Row field { "name" : "hubdbrow_field", "label" : "HubDB row", "required" : false, "locked" : false, "table_name_or_id" : "3096859", "columns_to_fetch" : [ "name", "price", "desc" ], "display_columns" : [ "name", "price", "desc" ], "display_format" : "%0 - %1 :::: %2", "type" : "hubdbrow", "default" : { "id" : 4450468943 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
table_name_or_id
String

HubDBテーブルの名前またはID。このフィールドは必須です。

columns_to_fetch
Array

テーブルから取得する列名の配列。空白にした場合、テーブル内の全ての列が返されます。

[]
display_columns
Array

選択ラベルに使用する列名の配列。空白にした場合、テーブルの最初の列のみが返されます。

[]
display_format
String

パーセント記号と数値を使用した列指定による、HubDB行セレクターでの列データの表示形式。
例:%0 (%1)は、列0値 (列1値)と表示されます。

""
default
Object

既定のHubDB行を設定するための「ID」を含むオブジェクト。

{ “id” : null }

HubDBテーブル

HubDBテーブルフィールドを実装すると、コンテンツ作成者がアカウント内にある特定のHubDBを指定できます。その情報を基に、HubLフォームタグを使用してページにレンダリングできます。このフィールドからはテーブルIDが返されます。このIDをHubDB HubL関数(英語)で使用できます。

HubDBテーブルフィールドはモジュール内でサポートされます。HubDBテーブルフィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

HubDBフィールド
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
Eメール アドレス フィールド
パラメーターDescription Default
default
String

HubDBテーブルのID

null

アイコン

アイコンフィールドでは、アイコン選択用UIを提供できます。コンテンツ作成者はこのインターフェイスを使用して簡単にアイコンをモジュールに追加できます。アイコンフィールドにはFontAwesomeアイコンがあらかじめ読み込まれます。

アイコンフィールドはモジュール内でサポートされます。アイコンフィールドはスタイルフィールドとして使用できます。

アイコンフィールド
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-5.14.0", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
アイコンフィールド
パラメーターDescription Default
default
Object

アイコンオブジェクト

icon_set
String

使用するFontAwesomeアイコンセット。有効な値は、以下のとおりです。
fontawesome-5.14.0
fontawesome-5.0.10

fontawesome-5.14.0

画像

画像フィールドでは、コンテンツ作成者は簡単なインターフェイスを使用して画像をモジュールまたはテーマに追加できます。画像フィールドのファイル選択用インターフェイスには、ファイルマネージャーに保管されている画像のリストが表示されます。画像はさまざまな方法で使用および表示される可能性があることから、開発者は、コンテンツ作成者がUIで選択できるサイズ設定オプションの制限ができ、さらに画像の遅延読み込みの許可もできます。

画像フィールド

画像フィールドはモジュール内でサポートされます。
画像はスタイルフィールドとして使用できます。
メッセージ性のない単なるイメージ画像で、背景画像でもない場合は、画像フィールドをスタイルフィールドとしてのみ使用してください。アクセシビリティーのベストプラクティスに従うためです。

// Image field { "name" : "image_field", "label" : "Image", "required" : false, "locked" : false, "responsive" : true, "resizable" : true, "show_loading" : false, "type" : "image", "default" : { "size_type" : "exact", "src" : "", "alt" : "image-alt-text", "loading" : "lazy", "width" : 128, "height" : 128, "max_width" : 128, "max_height" : 128 } }
リンクフィールド
パラメーターDescription Default
default
Object

画像サイズ、altテキストなどのプロパティーを設定します。以下のプロパティーを含めることができます。 

  • size_type:画像のサイズを自動または手動のどちらで設定するか。
    • "auto":元のサイズを基準に、HubSpotによって画像サイズが自動調整されます。
    • "auto_custom_max""max_height"プロパティ―と"max_width"プロパティーに指定された最大サイズを基準に、HubSpotによって画像サイズが自動調整されます。
    • "exact":"height"プロパティーと"width"プロパティーに指定されたサイズを基準に、HubSpotによって画像サイズが設定されます。
  • src:既定の画像のURL。画像の絶対パスにする必要があります。
  • alt:画像の既定のaltテキスト。
  • loading:画像の遅延読み込みオプション"disabled"(既定)、"eager"、または"lazy"に設定できます。
{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Boolean

画像がレスポンシブ対応か、または高さと幅が固定されるかを指定します。

true
show_loading
Boolean

画像の遅延読み込みを選択するためのコントロールをページエディターに表示するかどうかを指定します。

false

リンク

リンクフィールドでは、コンテンツ作成者がURLやEメールアドレスへのリンクを記載できるよう、簡単なインターフェイスを提供できます。外部リンクの場合、コンテンツ作成者は[external]を選択します。Eメールリンクの場合は、[email address]を選択します。CMS Hubでホスティングされているコンテンツの場合、[content]を使用して、アカウント内の全てのページとブログ記事のリスト、ファイルアセットが記載されたファイル、ブログ、またはアカウント内のブログリストを表示することができます。リンクフィールドはURLフィールドと同様ですが、主な違いとして、リンクフィールドには、[新しいウィンドウで開く]よう指示したり、[検索エンジンに追跡しない]ように指示したりするためのユーザーインターフェイスが表示されます。コンテンツ作成者にこのような制御を行わせるのが適切でない場合は、URLフィールドを使用してください。

リンクフィールドはモジュール内でサポートされます。

リンクフィールド
// Link field { "name" : "link", "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "link", "show_advanced_rel_options" : false, "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false } }
リンクフィールド
パラメーターDescription Default
default
Object

URLオブジェクト

{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

このフィールド上でコンテンツ作成者が選択できるリンクのタイプのリスト。コンテンツ作成者者が利用しないタイプはこのリストから削除してください。

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]
show_advanced_rel_options
Boolean

コンテンツ作成者に対して高度なrelオプションを表示するかどうか。 

false

ロゴ

ロゴフィールドでは、ページ内で使用するロゴ画像を指定する機能をコンテンツ作成者に提供できます。指定しない場合、既定でドメインのロゴが使用されます。サイトのヘッダーやフッターに会社のロゴが表示されるようにするには、このフィールドが役立ちます。ロゴフィールドでは、遅延読み込みも可能です。

ロゴフィールドはモジュール内でサポートされます。

ロゴフィールド
// Logo field { "name" : "logo", "label" : "Logo", "required" : false, "locked" : false, "type" : "logo", "show_loading": true, "default" : { "override_inherited_src" : false, "src" : null, "alt" : null, "loading": "lazy" } }
リンクフィールド
パラメーターDescription Default
show_loading
String

画像の遅延読み込みを選択するためのコントロールをページエディターに表示するかどうかを指定します。

false
default
Object

ロゴオブジェクト。 

show_loadingtrueに設定されている場合は、loadingプロパティーを含めることで、画像の遅延読み込みオプションを設定することができます。次のオプションがあります。

  • "disabled"(既定)
  • "eager"
  • "lazy"
{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }

メニュー

メニューフィールドには、コンテンツ作成者が他のページで再利用できるナビゲーションメニューを作成、編集、選択できるよう、簡単にインターフェイスが表示されます。メインナビゲーション、フッターナビゲーションなどの複数のページに表示されるメニューや、他のグローバルコンテンツで使用されるメニューには、このフィールドを使用すると非常に役立ちます。モジュール内にメニューをレンダリングするには、メニュータグまたはmenu()関数と併せてこのフィールドを使用します。

他のページで再利用するのは妥当ではないメニュー(目次メニューなど)の場合は、シンプル メニュー フィールドを使用してください。

メニューフィールドはモジュール内でサポートされます。

メニューフィールド
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
リンクフィールド
パラメーターDescription Default
default
Integer

メニューのメニューID。既定値のnullの場合、ナビゲーションの下の既定メニューが設定されます。

null

数値

数値フィールドには、コンテンツ作成者が数値やオプションを入力または調整できるよう、簡単なインターフェイスが表示されます。パーセンテージに基づく項目を作成する場合や、数値を入力する必要があるものには、このフィールドを使用できます。

数値フィールドはモジュール内でサポートされます。数値フィールドはスタイルフィールドとして使用できます。

数値フィールド
// Number field { "name" : "number_field", "label" : "Number", "required" : false, "locked" : false, "display" : "slider", "min" : 1, "max" : 10, "step" : 1, "type" : "number", "prefix": "", "suffix" : "", "default" : null, "placeholder": "50" }
リンクフィールド
パラメーターDescription Default
default
Number

既定として使用する数値。

null
prefix
String

数値フィールド(の前)に追加するプレフィックス。

suffix
String

数値フィールド(の後)に追加するサフィックス。

placeholder
String

フィールドにプレースホルダー値を追加します。

サフィックスパラメーターとプレフィックスパラメーターは、コンテンツエディターでの表示を目的としたもので、フィールドの数値には影響しません。 

ページ

ページフィールドには、コンテンツ作成者がサイトのページやランディングページを選択するためのインターフェイスが表示されます。

ページフィールドから返される値は、選択したページのページIDです。このフィールドをcontent_by_id関数またはcontent_by_ids関数と併せて使用すると、選択したページのデータを現在のページで使用できます。

ページフィールドはモジュール内でサポートされます。

ページフィールド
// Page field { "name" : "page_field", "label" : "Page", "help_text" : "Pulls data from the selected page.", "required" : false, "locked" : false, "placeholder" : "Page to pull from", "type" : "page", "default" : null }
リンクフィールド
パラメーターDescription Default
default
Integer

既定で選択するページのID。

null

リッチテキスト

リッチ テキスト フィールドによって、コンテンツ作成者はWYSIWYGテキストエディターの操作感を活用できます。リッチ テキスト フィールドの値は、HTMLとして出力されます。コンテンツ作成者にフォーマット設定機能を使用させない場合は、テキストフィールドを使用してください。

リッチ テキスト フィールドはモジュール内でサポートされます。

リッチ テキスト フィールド
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
リンクフィールド
パラメーターDescription Default
default
String

表示するコンテンツの文字列はHTMLをサポートします。 

注:この既定のプロパティーではget_asset_url関数を使用することはできません。 

""
enabled_features
任意
Array

リッチ テキスト エディターのツールバーでコンテンツ編集者に提供するオプションを設定するために使える項目の配列。 

シンプルメニュー

シンプル メニュー フィールドには、コンテンツ作成者がナビゲーションメニューを作成できるよう、簡単なインターフェイスが表示されます。このフィールドで作成するナビゲーション メニューは他のページで再利用できません。再利用可能にしなければならないメニューの場合は、メニューフィールドを使用してください。このフィールドは、目次メニューを非常に長いページの見出しにリンクする場合や、コンテンツへのリンクの一覧を同じページ内に表示させなければならない場合に必要となります。

シンプル メニュー フィールドはモジュール内でサポートされます。

シンプルメニューフィールド
// Simple menu field { "name" : "toc_menu", "label" : "Table of Contents", "required" : false, "locked" : false, "type" : "simplemenu", "default" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Why is product marketing important?", "linkUrl" : null, "linkParams" : null, "linkTarget" : null, "type" : "NO_LINK", "children" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Product Marketing Responsibilities", "linkUrl" : "#product-marketing-responsibilities", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "1. Identify the buyer personas and target audience for your product.", "linkUrl" : "#step1", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "2. Successfully create, manage and carry out your product marketing strategy.", "linkUrl" : "#step2", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "How HubSpot can help", "linkUrl" : "https://hubspot.com", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }
リンクフィールド
パラメーターDescription Default
default
Array of objects

メニューと子メニューを表すJSON構造。

[]

間隔

このフィールドは、コンテンツ作成者がパディングとマージンを設定するためのユーザーインターフェイス(UI)を提供します。間隔フィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

間隔フィールドはモジュール内でサポートされます。
間隔フィールドはスタイルフィールドとしてのみ使用できます。

ページエディターで展開された間隔スタイルフィールドのスクリーンショット
// Spacing field { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "limits": { "padding": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "left": { "max": 50, "units": ["px", "pt", "em"] }, "bottom": { "max": 50, "units": ["px", "pt", "em"] } }, "margin": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "bottom": { "max": 25, "units": ["Q", "rem", "em"] } } }, "default": { "padding": { "top": { "value": 25, "units": ["px", "pt", "em"] }, "bottom": { "value": 25 "units": ["px", "pt", "em"] }, "left": { "value": 25, "units": ["px", "pt", "em"]}, "right": { "value": 25, "units": ["px", "pt", "em"] } }, "margin": { "top": { "value": 20, "units": ["px", "pt", "em"] }, "bottom": { "value": 20, "units": ["px", "pt", "em"] } } } }
リンクフィールド
パラメーターDescription Default
default
Object

既定の間隔値を設定します。

paddingオブジェクトとmarginオブジェクトを含みます。

  • paddingtoprightbottomleftの各オブジェクトを含めることができます。
  • margintopオブジェクトとbottomオブジェクトを含めることができます。

unitsは、コンテンツ作成者がHubSpotで使用可能な単位を設定するために使用します。後述する単位に関する詳細を確認してください。

{}
limits
Object

間隔のmin量とmax量のガイドラインを設定します。 

paddingオブジェクトとmarginオブジェクトを含みます。

  • paddingtoprightbottomleftの各オブジェクトを含めることができます。
  • margintopオブジェクトとbottomオブジェクトを含めることができます。

unitsは、コンテンツ作成者がHubSpotで使用可能な単位を設定するために使用します。詳しくは、後述する単位の項目をご確認ください。

間隔フィールドを使用する場合は、次の点に注意してください。

  • minまたはmaxを設定する場合は、unitsリストを含める必要があります。
  • unitsプロパティーは、%chemexinlhpcptpxQremvhvmaxvmin、およびvwの各単位タイプをサポートしています。
  • コンテンツ作成者が全てのパディングをまとめて編集した場合、HubSpotは最も高いmin値と最も低いmax値を使用します。また、コンテンツ作成者が使用できるのは、すべてのサイドで共有されている単位のみとなります。

タグ

タグフィールドには、コンテンツ作成者用のブログピッカーが表示されます。このタグピッカーからは、ブログタグIDが返されます。このIDを、ブログタグ関連の関数(blog_tag_urlblog_recent_tag_postsなど)で使用できます。

タグフィールドはモジュール内でサポートされます。

タグフィールド
// Tag field { "id" : "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name" : "blog_tag", "label" : "Blog Tag", "required" : false, "locked" : false, "tag_value" : "SLUG", "type" : "tag", "default" : null }
タグフィールド
パラメーターDescription Default
default
String

ブログタグID

null

テキスト

テキストフィールドを使用して、コンテンツ作成者はリッチテキスト機能を使用せずに、単純にテキストを編集できます。初期状態のテキストフィールドは1行のフィールドとして表示されますが、実際にはテキストエリアに拡大して複数の行を使用できます。コンテンツ作成者に書式を制御させたくない場合に、このフィールドを使用できます。書式設定コントロールを提供する場合は、リッチ テキスト フィールドを使用してください。

テキストフィールドはモジュール内でサポートされます。

テキストフィールド
// Text field { "name" : "product_name", "label" : "Product Name", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "" }
リンクフィールド
パラメーターDescription Default
default
String

テキスト文字列。

""

テキスト位置合わせ

このフィールドを使用して、コンテンツ作成者はテキストコンテンツをコンテナー内の適切な位置に配置できます。このフィールドは他のアセットの位置合わせには使用できません。他のアセットの位置合わせには専用のフィールドタイプをご利用ください。

テキストの位置合わせフィールドはモジュール内でサポートされます。テキストの位置合わせフィールドはスタイルフィールドとしてのみ使用できます。

テキスト位置合わせフィールド
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
ブログフィールド
パラメーターDescription Default
default
Object

horizontal_alignおよびvertical_alignを含むオブジェクト。

alignment_direction
String

水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

URL

URLフィールドは、リンクフィールドと類似しており、コンテンツ作成者がリンクを追加するためにUIが表示されます。ただし、URLフィールドには、新しいウィンドウで開くよう指示したり、検索エンジンに追跡しないよう指示したりするためのUIは表示されません。開発者は、このフィールドで使用する値を指定できます。ユーザーが制御できるようにする場合は、代わりにリンクフィールドを使用してください。

URLフィールドはモジュール内でサポートされます。

URLフィールド
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
リンクフィールド
パラメーターDescription Default
default
Object

タイプ、href、コンテンツID(コンテンツがHubSpotのページまたは投稿の場合)を伴うURLオブジェクト。

{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }
supported_types
Array

このフィールド上でコンテンツ作成者が選択できるリンクのタイプのリスト。コンテンツ作成者が利用しないタイプはこのリストから削除してください。

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

動画

動画フィールドは、リッチ テキスト フィールドを使用せずにHubSpot動画をモジュールコンテンツに追加するための場所を、コンテンツ作成者に提供します。

動画フィールド
//Video field { "id" : "ca4a319e-5b58-422e-47ac-49ce1b51b507", "name" : "videoplayer_field", "label" : "Video", "required" : false, "locked" : false, "type" : "videoplayer", "show_advanced_options" : false, "default" : { "player_id" : 32173842991, "height" : 1224, "width" : 1872, "conversion_asset" : { "type" : "CTA", "id" : "c3e4fa03-2c69-461d-b9af-22b2fde86bc7", "position" : "POST" }, "loop_video" : false, "mute_by_default" : false, "autoplay" : false, "hide_control" : false } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
default
Object

player_idheightwidthsize_typeconversion_assetloop_videomute_by_defaultautoplayhide_controlの設定を備えた動画オブジェクト。

[]
show_advanced_options
Boolean

コンテンツ作成者に対して高度な既定のオプションを表示するかどうか。

false

conversion_assetオブジェクトパラメーター

Use this table to describe parameters / fields
ParameterTypeDescription Default
type
String

"FORM""CTA"、または""のいずれかを指定できます

""
id
String

フォームまたはCTAタイプのID

""
position
String

動画の開始前または終了後にコンバージョンアセットを表示するかどうか。「PRE」または「POST」のいずれかを指定できます。

""

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