`

## カスタムモジュールのフォームフィールド
カスタムモジュールを作成するときは、[フォームフィールド](/docs/cms/reference/fields/module-theme-fields#form)を追加し、そのフィールドのコードスニペットをモジュールHTMLに追加することで、フォームを含めることができます。例えば、製品の画像と価値ある提案の説明を含むモジュールに相談依頼フォームを追加することができます。
デザインマネージャーからカスタムモジュールにフォームフィールドを追加するには、以下の手順に従います。
* モジュールエディターの右側のサイドバーで、[フィールドの追加]をクリックし、[フォーム]を選択します。

* フィールドを追加したら、右側のサイドバーのフィールドにカーソルを合わせ、[アクション]をクリックして[スニペットをコピー]を選択します。

* スニペットをモジュールのHTMLフィールドに貼り付けます。

### エディターでフォームオプションを制限する
ページに追加されると、制作担当者は通常、使用するフォームやフォームフィールド自体など、フォームのさまざまな特徴を制御できます。ただし、フォームモジュールの`fields.json`ファイルを[ローカル](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)に変更して次のフィールドを含めることで、ページエディターで指定される制御の量を制限できます。
| パラメーター | タイプ | 説明 |
| - | - | - |
| `disable_inline_form_editing` | 文字列 | フォームモジュール内の全てのインラインフォーム編集コントロールを非表示にするには、`disable_inline_form_editing`プロパティーを`true`に設定します。これには、フォームフィールド、送信ボタンのテキスト、データのプライバシーと同意のオプション、CAPTCHAが含まれます。 |
| `required_property_types` | 配列 | フォームフィールドのプロパティータイプに基づいて選択できるフォームを指定する配列。値には、`"CONTACT"`、`"COMPANY"`、および`"TICKET"`を使用できます。 |
例えば、訪問者が会社のさまざまなサービス部門に連絡できるフォームのみに使用するモジュールを構築した場合、制作担当者がチケットプロパティーを使用するフォームのみを選択できるようにすることができます。
```json theme={null}
// Form field
{
"id": "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c",
"name": "form_field_1",
"display_width": null,
"label": "Form",
"required": false,
"locked": false,
"type": "form",
"disable_inline_form_editing": true,
"required_property_types": ["TICKET"],
"default": {
"response_type": "inline",
"message": "Thanks for submitting the form."
}
}
```
## フォーム埋め込みコードを使用する
モジュールやHubLタグを使用するのが理想的ではない場合や、外部ページにフォームを追加する場合は、代わりに[フォーム埋め込みコード](https://knowledge.hubspot.com/ja/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code)を使用してフォームを埋め込むことができます。フォーム埋め込みコードをカスタマイズして、フォームの機能を拡張することもできます。全てのフォーム埋め込みコードのカスタマイズオプションなどの詳細は、フォームに関するリファレンスガイドをご覧ください。
> [!WARNING]
>
> ### 注:
>
> * フォームのカスタマイズオプションは、[未加工のHTMLとして設定](https://knowledge.hubspot.com/ja/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only)されている、HubSpotで作成されたフォームでのみ使用できます。HubSpotアカウントで、Marketing Hub\*\*\_\_**および***Content Hub***のProfessional**またはEnterprise\*\*エディションを利用している必要があります。
> * HubSpotフォームの読み込みには、HubSpotでホスティングされているJavaScriptファイルを使用する必要があります。フォーム埋め込みコードのコピーを作成して、自社サイトでホスティングすることはできません。HubSpotフォームの埋め込みコードを自社サイトでホスティングした場合、セキュリティー、スパム対策、アクセシビリティー、パフォーマンスの向上を目的としたHubSpotで行われる改善はご使用のフォームに反映されません。
以下に、カスタマイズを行っていないフォーム埋め込みコードのサンプルを示します。
```html theme={null}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `portalId` | 数値または文字列 | フォーム多作成されたHubSpotアカウントのID。これは、フォーム定義を取得するために使用されます。 |
| `formId` | 文字列 | フォームのID。フォーム定義を取得するために使用されます。 |
| `region` | 文字列 | フォームが作成されたアカウントの[地域](https://knowledge.hubspot.com/ja/account-security/hubspot-cloud-infrastructure-and-data-hosting-frequently-asked-questions)。これは、フォーム定義を取得するために使用されます。指定可能な値は、`na1`または`eu1`です。 |
### 国際化を追加する
HubSpotではデフォルトで、さまざまな言語で検証メッセージが表示されます。言語は、`locale`パラメーターを使用して指定できます。`translation`パラメーターを使用して、カスタム言語を追加したり、フォームに表示されるエラーメッセージや日付入力の月や日を上書きしたりすることもできます。
国際化とフォーム検証のエラーメッセージに関する詳細は、[フォームに関するリファレンスドキュメント](https://developers.hubspot.jp/docs/reference/cms/forms)をご確認ください。
```js theme={null}
hbspt.forms.create({
portalId: "",
formId: "",
locale: "en",
translations: {
en: {
fieldLabels: {
email: "Electronic mail",
},
required: "Hey! That's required!",
submitText: "Custom Submit Button Text",
submissionErrors: {
MISSING_REQUIRED_FIELDS: "Please fill in all required fields!",
},
},
},
});
```
## フォームイベント
フォームでは、HubSpotフォーム埋め込みコードのコールバックとグローバル フォーム イベントの2つの方法で機能をイベントにバインドできます。利用可能なフォーム埋め込みコードのコールバックとグローバル フォーム イベントの詳細については、[フォームに関するリファレンス ドキュメント](https://developers.hubspot.jp/docs/reference/cms/forms)をご確認ください。
```js theme={null}
// Example form embed code callback
hbspt.forms.create({
portalId: "",
formId: "",
onBeforeFormSubmit: function ($form) {
// YOUR SCRIPT HERE
},
});
// Example listener
window.addEventListener("message", event => {
if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
someAnalyticsLib("formSubmitted");
console.log("Form Submitted! Event data: ${event.data}");
}
});
```
## フォームのスタイル設定
HubSpotには[グローバル設定のフォームスタイル](https://knowledge.hubspot.com/ja/forms/set-global-form-colors-and-fonts)と[フォーム固有の設定](https://knowledge.hubspot.com/ja/forms/create-forms#style-and-preview-your-form)がありますが、フォームをどのようにCMSページに追加するかに応じてフォームのスタイルを設定することもできます。
> [!WARNING]
>
> ### 注:
>
> CMS Hub上に生成された全てのフォーム(フォーム埋め込みコードを使用した場合を除く)では、グローバルフォーム設定またはフォーム固有の設定に指定された全てのスタイルが無視されます。
### 既定のフォームモジュールまたはHubLタグを使ってフォームのスタイルを設定する
HubSpotページに追加されたHubSpotフォームのスタイルを設定するには、ウェブサイトのCSSを使用します。HubSpotには、生成されるフォームにさまざまなクラスと属性が用意されていて、スタイルを適用できます。出発点として、[HubSpotボイラープレートのフォームCSS](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css)(英語)をご参照ください。フォームのスタイル設定に関するベストプラクティスが示されています。
### カスタムモジュールを使ってフォームのスタイルを設定する
カスタムモジュール内のフォームのスタイルを設定するには、デザインマネージャー内のモジュールのCSSペインでCSSを使用します。CSSをモジュールに適用したままにすることで、モジュールがページに追加された場合には必ず、スタイル設定も伴うようになります。フォームにラッパーを追加し、そのラッパーをCSSの最上位のセレクターとして使用することをお勧めします。その結果、ウェブサイトのメインのスタイルシートに定義されている追加のスタイルによって、カスタムモジュールのフォームスタイルが上書きされることを防止できます。以下に、上記のカスタムモジュールのスクリーンショットを示します。フォームスタイル設定がCSSペインに追加されています。

### 埋め込みフォームのカスタムスタイルを定義する
**Marketing Hub**または**CMS Hub** *Professional*または*Enterprise*サブスクリプションをご利用の場合は、CSS変数の定義を使用して、グローバルスタイルの定義、ボタンやその他の入力のカスタマイズ、マルチステップフォームとプログレスバーのスタイル設定を行うことができます。
[埋め込みフォームにカスタムCSS定義を適用する](https://developers.hubspot.jp/docs/reference/cms/forms#define-custom-styling-for-embedded-forms-using-css)方法の詳細をご確認ください。
### フォーム埋め込みコードを使って追加したフォームのスタイルを設定する
フォーム埋め込みコードを使用する場合は、[グローバル フォーム スタイル設定](https://knowledge.hubspot.com/ja/forms/set-global-form-colors-and-fonts)またはウェブサイトのCSSを使用してフォームのスタイルを設定できます。
グローバル フォーム スタイル設定を使用すると、アカウント内の全てのフォームの既定の設定を構成できます。[フォームエディター内の個別のフォームに対し、これらのスタイルを上書き](https://knowledge.hubspot.com/ja/forms/create-forms#style-and-preview-your-form)することもできます。

**Marketing Hub**または**CMS Hub**の*Professional*または*Enterprise*サブスクリプションをご利用の場合、フォーム作成時に[未加工のHTMLフォームとして設定]オプションを選択できます。この設定により、フォームはiframeではなくHTMLとして表示されるため、CSSを使用して埋め込みフォームのスタイルを設定するのが簡単になります。
詳しくは[埋め込みフォームのスタイル設定方法](https://knowledge.hubspot.com/ja/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site)をご確認ください。

# ページエディターでモジュールとセクションを非表示
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections
# メニューとナビゲーション
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/menus-and-navigation
HubSpotには、このようなメニューを簡単に作成して管理するためのツールが組み込まれています。また、コード面でもメニュー表示の方法が多数用意されているので、実際のウェブサイトに最も適したソリューションを選ぶことができます。
ユーザーが必要な情報を見つけるのに役立つように、ウェブサイトにナビゲーションメニューを含めます。ナビゲーションメニューが配置される場所としては、ウェブサイトのヘッダー、サイドバー、フッターなどがあります。HubSpotは、ユースケースに応じてページにメニューを追加するためのいくつかの組み込みソリューションを提供しますが、必要に応じて独自のメニューを作成することもできます。アカウントには、[メニューを作成および管理するための設定ページ](#navigation-settings)も含まれており、さまざまなメニューメソッドが参照できます。
* \*\*既定のメニュー:\*\*HubSpotには、必要に応じてすぐに使用できる2つの既定のメニュータイプがあります。これらのメニューは、[ドラッグ&ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)またはテンプレートのページエディターでモジュールとして追加することも、[HubLタグ](#menu-hubl-tags)を使用してカスタムモジュールに追加することもできます。
* \*\*メニュー:\*\*ウェブサイトのヘッダーやフッターなど、グローバルナビゲーションで一般的に使用されるもので、既定の標準メニューでは、ナビゲーション設定で構成したメニューを選択し、最大レベル、表示設定、方向などのオプションを使用してさらに構成できます。
* \*\*シンプルメニュー:\*\*ピラーページなどのページ固有のナビゲーションで一般的に使用されるもので、シンプルメニューのモジュールを使用すると、ページレベルでメニューを作成できます。シンプルメニューの項目は、ナビゲーション設定で作成したメニューを参照するのではなく、コンテンツエディターで管理され、標準メニューよりも構成オプションが少なくなります。これにより、コンテンツ作成者はグローバルナビゲーションに影響を与えることなく、必要に応じて特定のページのメニューを更新できます。
* \*\*カスタムメニュー:\*\*既定のメニューオプションがニーズに合わない場合は、独自のカスタムソリューションを作成できます。これには、標準[メニューとsimple\_menu HubLタグ](#menu-hubl-tags)を使用して既定のメニューを含むカスタムモジュールを構築することから、[menu() HubL関数](#menu-hubl-function)を使用して、リピーターグループまたはHubDBで完全なカスタムソリューションを構築することまで含まれます。ただし、複雑なカスタムメニューを作成する場合は、エディターのエクスペリエンスを念頭に置く必要があります。多くの場合、カスタムソリューションと直感的な編集エクスペリエンスのバランスを取るために、`menu()`関数と並行して`menu`フィールドと`simple_menu`フィールドを使用する方が理にかなっています。
以下では、ページにメニューを含めるさまざまな方法と、HubSpotでナビゲーション設定を管理する方法について詳しく説明します。
## ナビゲーション設定
各アカウントには、メニューモジュールとタグで参照するマルチレベルメニューを作成できるように、HubSpotに[ナビゲーション設定](https://knowledge.hubspot.com/cos-general/set-up-your-site-s-navigation-menus)が含まれています。これにより、一連のメニュー商品の信頼できる唯一の情報源が作成されるため、メニューを1回更新するだけで、そのメニューを参照する全てのページを更新できます。必要に応じて多くのメニューを作成でき、各メニューには、クローン作成、削除、名前変更、および変更履歴の表示のオプションが付属しています。
HubSpotでメニューを作成および管理するには、[設定]>[ウェブサイト]>[ナビゲーションメニュー]に移動します。ナビゲーション設定の詳細については、[HubSpotのナレッジベース](https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus)をご覧ください。

HubLでメニューを操作する場合、メニューのIDを参照する必要がある場合があります。これは、メニュー項目がエディターで設定されているため、シンプルなメニューには適用されません。
カスタムモジュールを作成する場合、メニューIDを取得する最も簡単な方法は、メニューフィールドを作成することです。このフィールドを使用すると、コンテンツ作成者はドロップダウンメニューからメニューを選択し、メニューIDを返すことができます。メニューIDをハードコードする必要がある場合は、ナビゲーション設定ページでメニューを表示するときにURLからメニューIDを取得できます。

最初にこのページにアクセスするときには、既定のメニューIDはURLに表示されないことに注意してください。既定のメニューのIDを取得するには、別のメニューを選択してから、既定のメニューを再度選択する必要があります。
> [!NOTE]
>
> サイトのヘッダーには長いメインナビゲーションが含まれることがよくありますが、["コンテンツへスキップ"するリンク](/docs/cms/best-practices/improve-existing-sites/accessibility#adding-a-skip-to-content-link)を設置すると効果的です。これは長いメニューをキーボード操作でスキップする際に役立ちます。
## HubLメニュータグ
`menu`と`simple_menu` HubLタグを使用して、カスタムモジュールにメニュー機能を追加します。モジュールにタグを追加すると、ページ上のメニューがレンダリングされます。コンテンツ作成者がページエディターでメニューのオプションを設定できるようにするには、モジュールに[メニュー](/docs/cms/reference/fields/module-theme-fields#form)または[シンプル メニュー フィールド](/docs/cms/reference/fields/module-theme-fields#simple-menu)も含める必要があります。
以下では、メニュータグの各タイプについて詳しく説明します。
### 標準メニュー
[HubLメニュータグ](/docs/cms/reference/hubl/tags/standard-tags#menu)では標準的なメニューHTMLが生成され、深さ、アクティブ状態、子項目の有無に関するクラス名も定義されています。メニュータグは[カスタムモジュール](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)内で使用することが可能で、メインナビゲーションやサイドバーナビゲーションのナビゲーションメニューを簡単に作成できます。このタグには、[メニューID](#menu-id)を指定する必要があります。
```hubl theme={null}
{% menu "menu" %}
{% menu "my_menu" id=456, site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}
```
### シンプルメニュー
[シンプル メニュー](/docs/cms/reference/hubl/tags/standard-tags#simple-menu) タグもメニュータグと同様に機能し、深さ、アクティブ状態、子項目の有無に関するクラス名を備えた[標準的なメニューHTML](https://developers.hubspot.jp/docs/guides/cms/content/default-menu-markup)が生成されます。相違点として、このタグにはメニューIDではなくメニュー構造のディクショナリー(辞書型)が渡されることを想定しています。これが有用なのは、ナビゲーション設定を使う代わりに、モジュールのフィールドによってメニュー構造を決める場合です。例えば、ピラーページの目次にこのタイプのモジュールを使用することができます。
```hubl theme={null}
{% simple_menu menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
## 既定のメニューモジュール
HubSpotには、コード化されたテンプレートに追加できる既定のモジュールが用意されています。また、テンプレートに[ドラッグ&ドロップエリア](/docs/cms/reference/hubl/tags/dnd-areas)が含まれている場合は、ページエディターを介してページを追加できます。各モジュールには異なる編集エクスペリエンスがあり、標準メニューにはシンプルメニューよりも多くの設定オプションがあります。
モジュールをネストさせることはできないので、他のモジュール内にこれらのモジュールを入れることはできません。代わりに[メニュータグまたはシンプル メニュー タグ](#hubl-menu-tags)を使用してください。
```hubl theme={null}
{% module "main_nav" path="@hubspot/menu", label="Menu" id="123456" %}
{% module "menu" path="@hubspot/simple_menu", label="Simple Menu" menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
### 標準メニューのマークアップ
既定のメニューモジュールは、それぞれのHubLメニュータグ(`menu`と`simple_menu`)を使用して標準メニューHTMLを生成します。他のHubSpotモジュールと同様に、メニューモジュールはモジュール ラッパー マークアップで囲まれています。これらの`div`タグと`span`タグにより、コンテンツエディターでモジュールを編集できるようになります。メニューモジュールとシンプル メニュー モジュールのメニューマークアップは、ラッパーとメニューコンテナーに適用される一部のクラスを除いて同じです。
```html theme={null}
```
上記のように、実際のメニューは、`hs-menu-wrapper`クラスの`div`でラップされた`ul`としてレンダリングされます。このラッパーには、フライアウトの有効化など、ページエディターでのモジュールの構成方法に基づいて追加のクラスがあります。[これらの設定によって追加されるクラス](#classes-added-by-settings)の詳細については、以下をご覧ください。
`ul`内の各メニュー項目は、`li`でラップされた`a`タグです。`li`タグには、メニューツリー内の項目の深さを示すクラスがあります(例:`hs-menu-depth-1`)。メニュー項目にネストされた子項目が含まれている場合、対応する`li`は`hs-item-has-children`の追加クラスを持ちます。子メニューは、クラス`hs-menu-children-wrapper`を使用してネストされた`ul`としてレンダリングされます。
メニュー ツリーに含まれるページを訪問すると、クラス`active-branch`が親`li`項目に追加され、クラス\*\*`active`\*\*がそのページの特定の`li`項目に追加されます。
### 標準メニューのスタイリング
モジュールレベルでは、ページエディターでメニューモジュールを編集する場合でも、カスタムモジュールでメニューフィールドを編集する場合でも、いくつかの構成オプションがあります。[メニュー]**、[詳細メニュータイプ]**、および[最大レベル数]フィールドを使用すると、ページマークアップでメニュー項目が`li`としてレンダリングされるように制御できます。ただし、方向とフライアウトのオプションは、メニューラッパーの`div`に追加されたCSSセレクターに影響します。CSSでこれらのセレクターを対象にすることができます。

以下では、これらのフィールド設定に応じて、メニューラッパーの`div`に追加されるクラスの詳細について説明します。
| クラス | 説明 |
| - | - |
| `hs-menu-flow-horizontal` | メニューが水平方向に設定されている場合、ラッパーの`div`に追加されます。 |
| `hs-menu-flow-vertical` | メニューが垂直方向に設定されている場合、ラッパーの`div`に追加されます。 |
| `flyouts` | [フライアウトを有効にする]が選択されている場合、ラッパーの`div`に追加されます。 |
| `no-flyouts` | [フライアウトを有効にする]が選択されていない場合、ラッパーの`div`に追加されます。 |
メニューのスタイリングを開始するために、メニュータグと既定のメニューモジュールのスタイルを設定するために使用できるCSSセレクターの例を以下に示します。
```css theme={null}
/* Menus */
.hs-menu-wrapper ul {
/* Targets all unordered lists within HubSpot menus */
}
/* Horizontal Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
/* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li {
/* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a {
/* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
/* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
/* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
/* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
/* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
/* Targets links within second-level unordered lists */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
> ul
li.hs-item-has-children
ul.hs-menu-children-wrapper
li.hs-item-has-children
ul.hs-menu-children-wrapper {
/* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch {
/* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a {
/* Targets the link within the active list item */
}
/* Vertical Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical ul {
/* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
/* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
/* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
/* Targets top-level list items with children */
}
/* No flyouts
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
/* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level child menus when flyouts are disabled */
}
```
## HubL menu()関数
[menu()](/docs/cms/reference/hubl/functions#menu)関数を使用すると、完全にカスタマイズされたメニュー構造を作成できます。そこから返される1つのオブジェクトを反復処理するとメニューを生成できます。[メニュー項目用のプロパティー](/docs/cms/reference/hubl/variables#menu-node-variables)が多数提供されています。メニュー関数を使用する場合は、メニューの構造、スタイル設定、[メニューのアクセスに関する責任があります](/docs/cms/best-practices/improve-existing-sites/accessibility)。
```hubl theme={null}
{% set node = menu(987) %}
{% for child in node.children %}
{{ child.label }}
{% endfor %}
{% set default_node = menu("default") %}
{% for child in default_node.children %}
{{ child.label }}
{% endfor %}
```
[HubSpot CMSテーマボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate)には、[menu()関数を使って構築したサンプル メニュー モジュール](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/menu.module/module.html)が含まれています。実際のニーズに合わせて変更することで、複雑なメニューを作成できます。
# モジュールの概要
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview
HubSpot CMSとその機能性を理解するには、モジュールを理解することが重要です。モジュールとは、テンプレートで使用したり、ドラッグ&ドロップエリアおよびフレキシブルカラムを使用してページに追加したりできる、再利用可能なコンポーネントのことです。
HubSpot CMSとその機能性を理解するには、モジュールを理解することが重要です。モジュールとは、テンプレートで使用したり、[ドラッグ&ドロップエリア](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)および[フレキシブルカラム](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/standard-tags#flexible-column)を使用してページに追加したりできる、再利用可能なコンポーネントのことです。HubSpot提供のモジュールを使用できるだけでなく、開発者は独自のモジュールを作成して、お客様の声やフォトギャラリーといったあらゆる目的で使用できます。モジュールを作成するには、[ローカルの開発ツールを使用](/docs/cms/start-building/building-blocks/modules/overview)するか、[デザインマネージャーを使用](https://knowledge.hubspot.com/cos-general/create-and-edit-modules)します。
モジュールは2つの要素で構成されています。
1. 一連のフィールドを使用して作成された[ユーザーインターフェイス](#the-user-interface-for-editing)。ユーザーがモジュールインスタンスを編集するときに表示されます。
2. CSSとJSが関連付けられたHTML+HubLテンプレートフラグメント。これによりHTMLの出力が定義されます。
## 例
モジュールの理解を深めるために、シンプルな「チームメンバー」モジュールを例として説明します。このモジュールは、写真、チームメンバーの名前と役職、簡単な自己紹介からなります。CMSウェブページに組み込まれると、次のように表示されます。

### 編集用ユーザーインターフェイス
開発者はフィールドを使用して、モジュールのユーザーインターフェイス(UI)を構築します。続いて、開発するモジュールの種類、必要なデータ、編集方法に基づいて、使用するフィールドを選択します。この例では、モジュールに次のフィールドを使用しています。
1. チームメンバーの写真に使用する画像フィールド
2. チームメンバーの名前と役職に使用する2つのテキストフィールド
3. 簡単な自己紹介に使用するリッチ テキスト フィールド
制作担当者がモジュールを編集する際のUIは、開発者がモジュールに追加したフィールドと各フィールドの設定方法に基づいて組み立てられます。

## モジュールとモジュールインスタンス
モジュールに関する2つの頻出用語があります。その違いを理解することが重要です。
* **モジュール** - :テンプレートやページに追加できる、再利用可能な構成要素。
* **モジュールインスタンス** - :ページ上にレンダリングされた個々のモジュール。モジュールインスタンスはそれぞれ別個のフィールド値を使用できるため、同じモジュールであっても、モジュールインスタンスによっては外観が異なる場合があります。
## fields.json
モジュールのフィールドはオブジェクト配列としてJSONで定義されます。各フィールドに、名前、型、既定値があります。編集方法を制御するフィールドのタイプによっては、他にもプロパティーがあります。
```json theme={null}
// fields.json
[
{
"name": "team_member_photo",
"label": "Team Member Photo",
"required": true,
"responsive": true,
"resizable": true,
"type": "image",
"default": {
"src": "",
"alt": ""
}
},
{
"name": "team_member_name",
"label": "Team member name",
"required": true,
"type": "text",
"default": "Joshua Beck"
},
{
"name": "team_member_position",
"label": "Team member position",
"required": true,
"type": "text",
"default": "CEO, Co-Founder"
},
{
"name": "team_member_bio",
"label": "Team member bio",
"required": true,
"type": "richtext",
"default": "Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.
"
}
]
```
使用可能な全てのフィールドの詳細については、[モジュールとテーマのフィールド](https://developers.hubspot.jp/docs/reference/cms/fields/module-theme-fields)を参照してください。
### モジュール フィールド データを使用してHTMLをレンダリングする
各フィールドの値は、モジュールのHTML+HubLフラグメントで`module`変数を介して使用できます。各フィールドのデータにアクセスするには、module変数のプロパティーを使用します。チーム メンバー モジュールの例では、チームメンバーの名前にアクセスするために`{{ module.team_member_name }}`プロパティーを使用します。
```hubl theme={null}
{{ module.team_member_name }}
{{ module.team_member_position }}
{{ module.team_member_bio }}
```
## テンプレートでのモジュールの使用
モジュールをテンプレートに追加するには、[module](https://developers.hubspot.jp/docs/reference/cms/modules/using-modules-in-templates#basic-module-syntax)、[module\_block](https://developers.hubspot.jp/docs/reference/cms/modules/using-modules-in-templates#block-syntax)、または[dnd\_module](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas)タグを使用し、パラメーターとしてモジュールのパスを指定します。モジュールに含まれるフィールドの既定値は、テンプレートレベルでのオーバーライドもできます。下の例の後半部分のように、フィールド名に対応するmoduleタグにパラメーターを追加してください。
```hubl theme={null}
{% module "unique_identifier" path="/modules/team-member.module" %}
{# override default values in a module instance #}
{% module "unique_identifier"
path="/modules/team-member.module",
team_member_name="Brian Halligan",
team_member_position="CEO"
%}
```
> [!NOTE]
>
> モジュールを相互にネストすることはできません。ほとんどの場合、モジュール同士をネストさせる必要が生じるのはレイアウト上の理由からです。その場合の対処法として、通常は[ドラッグ&ドロップエリア](/docs/cms/start-building/building-blocks/drag-and-drop/overview)内のセクションを使用するのが適切です。
## アクセシビリティーの向上にも役立つモジュール
モジュールはウェブサイト全体で使用されます。複数のページで使用されたり、同じページ上で複数回使用されたりすることもあります。このことから、[アクセシビリティーを念頭にモジュールのHTML、CSS、JSを作成](https://developers.hubspot.jp/docs/guides/cms/content/accessibility)すると、障害がある人とない人の両方にとって非常に使いやすいサイトを実現できる可能性があります。
## モジュールによってローカライズが容易に
アクセシビリティーの場合と同様に、モジュール内の全てのコンテンツがフィールドによって構築されるようにモジュールを作成しておくと、後でローカライズできます。例えば、「Featured articles」というモジュールがあるとします。「Featured articles」というテキストをハードコードする代わりに、テキストフィールドまたはリッチ テキスト フィールドを使用します。その結果、テキストを他の言語に変更することが可能になります。CMSのローカライズの詳細については、[多言語](https://developers.hubspot.jp/docs/guides/cms/content/multi-language-content)を参照してください。
## はじめに
モジュールを使い始めるには、[モジュールの基本操作](/docs/cms/start-building/building-blocks/modules/overview)チュートリアルを参照してください。
## 関連情報
* [モジュールの設定](https://developers.hubspot.jp/docs/reference/cms/modules/configuration)
* [テンプレートでモジュールを使用する](https://developers.hubspot.jp/docs/reference/cms/modules/using-modules-in-templates)
* [既定のモジュール](https://developers.hubspot.jp/docs/reference/cms/modules/default-modules)
* [モジュールエディター](/docs/cms/start-building/building-blocks/modules/overview)
# テーマの概要
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/overview
制作担当者向け作業環境としてのデザインシステムを開発者が構築するためのHubSpot CMSテーマの作成について紹介します。
テーマは、移植可能な形式に統合されたさまざまな開発アセットであり、柔軟なコンテンツ編集環境の提供に役立ちます。[HubSpot CLIを使用してローカル環境でテーマを作成](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)する際には、使い慣れたツール、テクノロジー、ワークフローを使用できます。テーマと、テーマ内の全てのファイルも、環境間およびアカウント間で移植可能です。テーマの開発方法に関する動画については、以下のHubSpotアカデミーの動画をご覧ください。
## パッケージとしてのテーマ
テーマはパッケージであり、HubSpotアプリ全体に適用されるので、効率的なコンテンツ作成が可能になります。開発者はテーマを使用して、制作担当者向けのデザインシステムを構築できます。柔軟なテーマに、一定の基準を組み込んでビジネスニーズに合わせることもできます。
### ページの作成
制作担当者が新しいページの構築を始めるとき、ページ作成の出発点にするテーマを選択し、そのテーマ内のテンプレートを選択して開始するよう指示されます。

テーマのプレビュー画像などのテーマ設定は、[theme.jsonファイル](#theme-json)に設定されます。
### テーマフィールド
開発者はテーマを使ってモジュールフィールドに類似した[テーマフィールド](#fields-json)のセットを作成できます。これにより制作担当者は、開発者がデザインしたさまざまなノブやダイヤルを調整し、CSSを編集せずにウェブサイト全体のスタイルを制御できます。開発者はCSS全体の[テーマフィールドの値にHubLを使用してアクセス](#using-theme-field-values)します。制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開します。

テーマフィールドは[テーマのfields.jsonファイル](#fields-json)で決まります。
[テストモード](/docs/cms/start-building/building-blocks/overview#test-mode)でテーマを編集するときには、テーマの設定JSONをコピーすることもできます。こうすると、更新内容をテーマのローカル`fields.json`ファイルに貼り付けることができます。

### テーマモジュール
テーマ内のモジュールは、テーマ内のテンプレート内で使用するように設計する必要があります。テーマモジュールはコンテンツエディター上で強調表示されるので、制作担当者は作成しているページにそのページのコンテキストで正しく機能するようにデザインされたモジュールを素早く簡単に追加できます。既定のモジュールおよび残りのモジュールは引き続きHubSpotアカウントで利用できます。

テーマを開発するときに、[ページエディターでモジュールとセクションを非表示](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections)にできます。こうすると、より合理的なコンテンツ作成エクスペリエンスが実現します。
## テーマファイルの構造
テーマはファイルを含む1つのディレクトリーです。親テーマフォルダーのサブディレクトリー内にはHTML、CSS、JavaScriptファイル、モジュールなどのファイルを含めることができ、任意の方法で整理できます。テーマを作成するには、`theme.json`と`fields.json`の2つのJSONファイルが必要です。これらのファイルをルート テーマ フォルダーに含める必要があります。
サンプルから始めるには、[HubSpot CMSボイラーテンプレート](https://github.com/HubSpot/cms-theme-boilerplate)を参照してください。

> [!NOTE]
>
> 現時点では、.jsonファイルの作成とHubSpotアカウントへのアップロードは[ローカル開発ツール](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)を通じてのみ行えます。
### theme.json
`theme.json`ファイルには、テーマの読み取り可能なラベル、プレビュースクリーンショット、テーマの動作のためのさまざまな設定など、テーマディレクトリーのメタ情報が含まれます。`theme.json`ファイルの例を次に示します。
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `label` | 文字列 | テーマの読み取り可能なラベル。テンプレート選択画面やテーマエディターなど、HubSpotアプリ全体にわたってテーマが表示されるさまざまな箇所で使用されます。 |
| `preview_path` | 文字列 | テーマ内のテンプレートファイル(既定のテンプレート)への相対パス。これはテーマエディターでテーマをプレビューする際に使用されます。 |
| `screenshot_path` | 文字列 | 画像ファイルへの相対パス。この画像は、テーマが選択されるさまざまな箇所(テンプレート選択画面など)で、テーマの外観を示すスナップショットの提供に使用されます。 |
| `enable_domain_stylesheets` | ブール値 | ウェブサイト設定でドメインに添付されたスタイルシートをテーマ内のテンプレートに含めるかどうかを指定します。既定値は`false`です。 |
| `version` | 文字列 | `.`に対応した整数のバージョン番号。 |
| `Author` | オブジェクト | テーマプロバイダーとしての開発者自身に関する情報を提示するオブジェクト。`name` プロバイダーの名前。 `email` プロバイダーのサポート担当のEメールアドレス。 `url` プロバイダーのウェブサイト。 |
| `documentation_url` | 文字列 | テーマドキュメントのリンク。 |
| `example_url` | 文字列 | テーマの実例リンク。 |
| `license` | 文字列 | 有効な[SPDX ID](https://spdx.org/licenses/)またはテーマ内のライセンスの相対パス。このライセンスは、テーマの作成者に対してどのような使用と変更を許可するかを規定します。マーケットプレイスに提出する場合に便利です。 |
| `is_available_for_new_content` | ブール値 | 制作担当者のページにテーマが選択対象として表示されるかどうかを指定するブール値。既定値は`true`です。 |
### fields.json
`fields.json`ファイルは、テーマエディターで利用可能なフィールドとフィールドグループ([スタイルフィールド](https://developers.hubspot.jp/docs/guides/cms/content/fields/overview#style-fields)を含む)を制御します。含めるフィールドは、ページエディターでの制作担当者による制御をどの程度可能にするかに応じて異なります。テーマ内で利用可能なフィールドの数は、モジュールと比べて限られています。これは、[グローバルコンテンツ](/docs/cms/start-building/building-blocks/global-content)がテーマのコンテンツに適している一方、テーマフィールドはスタイルオプションとして最適なためです。
例えば、テーマの`field.json`にサイトのタグラインのテキストフィールドを追加する代わりに、それをグローバルモジュールとして追加します。これにより、制作担当者はテーマエディターではなくページエディター内でタグラインを更新できるようになります。
テーマ内で使用できるフィールドを次に示します。
* [ブール値](/docs/cms/reference/fields/module-theme-fields#boolean)
* [境界線](/docs/cms/reference/fields/module-theme-fields#border)
* [選択](/docs/cms/reference/fields/module-theme-fields#choice)
* [カラー](/docs/cms/reference/fields/module-theme-fields#color)
* [フォント](/docs/cms/reference/fields/module-theme-fields#font)
* [画像](/docs/cms/reference/fields/module-theme-fields#image)
* [数値](/docs/cms/reference/fields/module-theme-fields#number)
* [間隔](/docs/cms/reference/fields/module-theme-fields#spacing)
テーマフィールドで使用できるオプションに関する包括的なドキュメントについては、[モジュールとテーマフィールドのドキュメント](/docs/cms/reference/fields/module-theme-fields)を参照してください。
#### テーマのフィールド値の使用
フィールド値にアクセスするには、`fields.json`の値へのパスにthemeを使用したドット表記とプレフィックスを使用します。スタイルシートでテーマフィールド値を`{{ theme.path.to.value }}`のような構文で使用できます。例えば、以下のフォントフィールドで説明します。
```json theme={null}
// fields.json
[
{
"type": "group",
"name": "typography",
"label": "Typography",
"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"
}
}
]
}
]
```
これを次のようなCSSで参照します。
```css theme={null}
h1 {
font-size: {{ theme.typography.h1_font.size }}px;
font-family: {{ theme.typography.h1_font.font }};
color: {{ theme.typography.h1_font.color }};
text-decoration: {{ theme.typography.h1_font.styles.text-decoration }};
font-style: {{ theme.typography.h1_font.styles.font-style }};
font-weight: {{ theme.typography.h1_font.styles.font-weight }};
}
```
## テーマのプレビュー
開発者は、テーマフィールドの正常な動作をテストする必要が生じる場合がありますが、実際のページに影響を与えないようにもする必要があります。ここでテーマ テスト モードを使います。
### テストモード
テストモードを使用するとテーマのフィールドを操作できる安全な環境が提供され、期待どおりに機能することを確かめることができます。インターフェイスは[制作担当者が表示できるテーマプレビュー/エディター](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings#edit-theme-settings)とまったく同様の表示ですが、実際のウェブサイトの設定は変更されないので安心です。誤ってテーマ設定が更新されないように保護されるため、テストモードでは公開がブロックされています。テストモードになっているかどうかはアドレスバーに`?testmode=true`と表示されることで分かります。また、テーマエディターのヘッダーにはテスト モード アイコンが表示されます。

テストモードを有効にするには、次の2つの方法があります。
* デザインマネージャーからテストモードを有効にするには:
* デザインマネージャーのファインダーで、該当する**テーマ**を選択します。
* 左側のサイドバーの上部にある[プレビュー]ボタンをクリックします。
.png)
* ページエディターからテストモードを有効にするには:
* ページエディターで、左側のサイドバーの[デザイン]タブをクリックして、[テーマ設定を編集]をクリックします。

* URLに`?testmode=true`を追加して、**Enter**キーを押します。その後、テストモードになります。
ページエディター内でテーマ設定を開く方法もあります。開いたら次に、クエリーパラメーター`?testmode=true`をアドレスバーのURLに追加します。
## 関連リソース
* [テーマを使ってみる](/docs/cms/start-building/building-blocks/themes/getting-started)
* [テーマ機能を既存のサイトに追加する方法](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)
* [HubSpotテーマボイラープレート](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
# セクション
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/sections/sections
セクションは、 dnd_areaの最も外側にある子要素です。セクションは、セクションテンプレートを使用することも、ページエディター内で保存して再利用することもできます。
[ドラッグ&ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)の最も外側にあるコンテナーはセクションと呼ばれます。セクションは他の[dnd](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview#drag-and-drop-areas-and-their-elements)要素内にネスト(入れ子構造に)することはできませんが、モジュール、[行](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview#row)、[列](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview#column)を含めることができます。制作担当者はページエディター上でセクションを追加し、必要に応じて変更やスタイル設定を行うことができます。また、同じテーマ内の他のページで使用するセクションを作成して保存することもでき、コンテンツ作成がより効率的になります。
この記事では、セクションの詳細とページエディターでの使用方法について説明します。テーマを開発する際は、コンテンツ作成の作業効率を向上できるよう、ページエディターで[モジュールとセクションを非表示](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections)にする方法に関するガイドをご覧ください。

## 概要
セクションは[制作担当者がコンテンツエディターで作成](https://knowledge.hubspot.com/ja/website-pages/edit-page-content-in-a-drag-and-drop-area#create-a-section)するか、または開発者が[`dnd_section`](/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-)タグを使用して[`dnd_area`](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)に構築することができます。
エディター内で使用できるスタイル設定オプションは、テンプレートのコーディング時にも使用できます。以下に例を示します。
```hubl theme={null}
{% dnd_area 'dnd_area'
label='Main section',
%}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://example.com/path/to/image.jpg'
},
margin={
'top': 32,
'bottom': 32
},
padding={
'top': '1em',
'bottom': '1em',
'left': '1em',
'right': '1em'
},
max_width=1200,
vertical_alignment='MIDDLE'
%}
{% end_dnd_section %}
{% end_dnd_area %}
```
利用可能な全てのドラッグ&ドロップ要素パラメーターと使用例の一覧については、 [dnd\_areaタグ](/docs/cms/reference/hubl/tags/dnd-areas)に関する詳細をご確認ください。
セクションを使用すると、読みやすいテンプレートを簡単に作成できます。コンテキストでテンプレート固有のインスタンスが異なる場所のみを指定するため、戻ってそのセクションテンプレートを変更することができます。
> [!WARNING]
>
> **注**: セクションを変更すると、そのセクションを参照するテンプレートを使用している既存のページを除くセクションの全てのインスタンスでセクションが更新されます 。セクションがインクルードされたテンプレートを使って以前に作成されたページは、代わりに手動で更新して新しいバージョンのセクションを使用する必要があります。これにより、破損につながる変更ミスが防止されます。セクションを最新バージョンに更新するには、制作担当者がページエディターに移動して新しいセクションをページに追加してから、古いバージョンを削除します。
## 再利用可能なセクションを作成
テーマ内には事前設定済みのセクションを含めることができます。制作担当者はこのセクションを、ページエディター内でそのテーマを使用するページに追加できます。このような再利用可能なセクションはセクション テンプレート ファイルとして作成され、 `dnd_area`内で使用されるのと同じ構文でコーディングされます。
> [!WARNING]
>
> **注**: セクションを複数のテーマで利用できるようにするには、各テーマにセクション テンプレート ファイルを追加する必要があります。同様に、制作担当者がコンテンツエディター内で作成したセクションは、そのテーマ内でのみ利用可能です。
以下では、セクション テンプレート ファイルを作成し、そのファイルを別のテンプレートファイルで参照する方法を説明します。
### セクション テンプレート ファイル
セクションテンプレートは、その[テンプレートアノテーション](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations)に含まれる`templateType: section`によって指定されます。
```html theme={null}
```
| パラメーター | タイプ | 説明 | 既定値 |
| - | - | - | - |
| `templateType` | String | テンプレートの使用箇所とテンプレートでの使用データを決める、テンプレートタイプを設定します。 | `section` |
| `label` | String | ページエディターで、人間に分かりやすいセクション名を指定するために使用します。 | |
| `description` | String | ラベルに収まらない、セクションに関する詳しい説明です。ページエディター内に表示されます。最大255文字です。 | |
| `screenshotPath` | String/path | セクションのスクリーンショットのパスです。セクションがどのように表示されるかを示すビジュアルリファレンスを制作担当者に提供するために使用します。 | |
セクションテンプレートの開始と終了には`dnd_section`タグを使用する必要があります。セクションテンプレート内に配置できる`dnd_section`は1つのみです。このセクションの内部には、 [ページテンプレート](/docs/cms/reference/hubl/tags/dnd-areas#dnd-area)にdnd\_areaを追加するときと同じ`dnd_area`ルールに従って、モジュール、行、列を配置できます。例外として、定義は1つのセクションのコンテンツとその子ドラッグ&ドロップ要素が対象になります。
```hubl theme={null}
{% dnd_section
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
{{ context.content || '
Communicate Your Way Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
' }}
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
### テンプレートにセクションパーシャルを追加する
セクションを作成した後、 `include_dnd_partial`タグを使用して`dnd_area`内でセクションを参照できます。このタグは、次に示すように、セクション ファイルを指すパスを提供します。
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html' context={} %}
{# End Banner Section #}
{% end_dnd_area %}
```
> [!NOTE]
>
> 上記の例では、 `include_dnd_partial`タグのコンテキスト引数に注目してください。このタグにより、ページテンプレートからセクションにインスタンス固有の変数を渡すことができ、セクションファイルのデフォルト値よりも優先されます。詳細については、[セクションコンテキスト](#section-context)を参照してください。
### セクションコンテキスト
セクションコンテキスト変数を使用して、セクションとモジュールのデフォルト値を変更できます。セクションコンテキスト変数は開発者が定義します。つまり、モジュールとそのフィールドには直接関連付けられていません。
ページテンプレートでは、`include_dnd_partial`タグ内で`context`パラメーターを使用してこれらのコンテキスト変数を設定できます。
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html'
context={
'content': 'Home Page Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
',
'buttonText': 'Buy Now'
}
%}
{# End Banner Section #}
{% end_dnd_area %}
```
`context`パラメーターに追加する変数は、セクションテンプレート内で参照できるようになります。次の例は、画像 URL、リッチ テキスト エリア、およびコンテキストに設定されたボタン コンテンツ (存在する場合) を設定する方法を示しています。
```hubl theme={null}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
{{ context.content || '
Communicate Your Way Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
' }}
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
> [!NOTE]
>
> コンテキスト変数が使用されているすべての場所に、何も指定されない場合にフォールバックのデフォルトのコンテンツを提供する「OR」(`||`)フィルターがあることに注意してください。例えば、ボタンモジュールでは、 `context.buttonText`に値があれば、その値がページに使用されます。それ以外の場合、テキストは`Subscribe`に設定されます。
### セクションクラス
セクションテンプレートでは、classパラメーターを使用してセクションラッパーにクラスを追加できます。これにより、dndセクションのhtml要素のclassフィールドに、指定したクラスが追加されます。可能な限り、スタイル設定コントロールをセクションに組み込んで、セクションを制作担当者が変更できるようにしておくことをお勧めします。
> [!WARNING]
>
> **注**: セクションクラスはセクションテンプレートでのみサポートされます。
```hubl theme={null}
{% dnd_section
class='my-hero-section'
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
...
```
> [!WARNING]
>
> 制作担当者は、クラスの編集、追加、または削除を行うことはできません。エディター内でセクションを手動で再作成することによってのみ、取り除くことが可能です。
>
> また、CSSまたはJavaScriptを使用してセクションの子のレイアウトを変更することは避けてください。制作担当者がページエディター内で作業しにくくなるためです。
### セクションのプレビュー
開発中にセクションをプレビューする最も簡単な方法は、デザインマネージャーを使用することです。[`dnd_area`](/docs/cms/reference/hubl/tags/dnd-areas)を含むテンプレートを開きます。これにより、`include_dnd_partial`タグを使用してセクションテンプレートが呼び出されます。右上にあるプレビューをクリックします。これにより、セクションを更新すると変更がすぐに反映されるようになります。これは、変更のたびに新しいページを作成するよりも大幅に効率的です。
## セクションのHubLをコピーする
ページエディターでは、HubLマークアップをコピーして、必要に応じてコードを再利用できます。これは、コードファイル内でドラッグ&ドロップセクションを再作成する場合に便利です。
セクションのHubLマークアップをコピーするには、次の手順に従います。
* コンテンツを開きます。
* **ウェブサイトページ**:HubSpotアカウントで、 [マーケティング]>[ウェブサイト]>[ウェブサイトページ]に移動します。
* **ランディングページ**:HubSpotアカウントで、[マーケティング]>[ランディングページ]の順に移動します。
* ページにマウスポインターを合わせ、[ページを編集]をクリックします。
* ページエディターで、URLに`?developerMode=true`というパラメーターを追加してから、**Enter**を押します。
* ページが再読み込みされ、開発者モードになります。右上の[開発者モードを終了]をクリックすれば、いつでも開発者モードを終了できます。

* コピーするセクションの上にカーソルを置き、 **下矢印アイコン**をクリックします。[HubLとしてコピー]を選択します。HubLマークアップがクリップボードにコピーされます。

## 関連コンテンツ
* [ドラッグ&ドロップエリアの概要](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)
* [ドラッグ&ドロップエリアのHubLタグ](/docs/cms/reference/hubl/tags/dnd-areas)
* [テンプレートでモジュールを使用する](/docs/cms/reference/modules/using-modules-in-templates)
* [ドラッグ&ドロップエリアを使ってみる](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [CMS Hubのページエディタでデベロッパーモードを有効にする方法 - YouTube](https://www.youtube.com)
# ブログテンプレート
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/templates/blog
ブログ リスト ページ テンプレートとブログ記事テンプレートは、ウェブサイト上でのブログのレイアウトをカスタマイズするために使用できます。
> **サポートされる製品**
HubSpotのブログは、ブログ リスト ページと個別のブログ記事で構成されます。ブログ リスト ページ テンプレートは個別のブログ記事をリスト化するために使用されるほか、執筆者およびタグのリストページをレンダリングするためにも使用されます。リストページ用とブログ記事用にそれぞれ個別のテンプレートを作成することも、両方を含めて全てのページをレンダリングする共通のテンプレートを作成することも可能です。
この記事では、ブログテンプレートのマークアップ、テンプレートを構成する要素、そしてカスタマイズのオプションについて説明します。
## リストページと記事の共通テンプレートを作成する
リストページと記事の両方をレンダリングする共通のテンプレートを作成するには、テンプレートファイルの先頭に`templateType: blog`[アノテーション](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations)を追加します。共通のテンプレートを両方のレンダリングに使用する場合は、[if文](/docs/cms/reference/hubl/if-statements)を使用して、ユーザーがリストページと個別の記事のどちらを表示しているかを評価します。デザインマネージャーの[ドラッグ&ドロップレイアウト](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates)を使用している場合、ブログ コンテンツ モジュール ボタンのUIにこの`if`文が組み込まれます。
`if is_listing_view`ステートメントを使用すると、記事とリストのコードを別々に書くことができます。
```hubl theme={null}
{% if is_listing_view %}
Markup for blog listing template
{% else %}
Markup for blog post template
{% endif %}
```
## リストページ用と記事用に個別のテンプレートを作成する
[ブログ記事](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#blog-post)と[リストページ](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#blog-listing)に別々のテンプレートを用意することも可能です。個別のテンプレートを使用することにより、開発者はコードがすっきりして読みやすく、コンテンツ作成者はテンプレートを選びやすくなります。共通のテンプレートでは先頭に`templateType: blog`アノテーションを挿入しますが、各ページ用に個別のテンプレートを作成する場合はそれに代わり、テンプレートの先頭にそれぞれ以下の[アノテーション](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#template-types)を追加します。
* **ブログ記事テンプレート**`templateType: blog_post`
* **ブログ リスト テンプレート**`templateType: blog_listing`

記事テンプレートとリスト ページ テンプレートを別々に作成する場合、`is_listing_view`チェックは必要ありません。代わりに、アカウントのブログ設定で[個別のテンプレートを手動で選択します](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#select-your-blog-templates)。
また、[共通のブログテンプレートを、リストページ用もしくは記事用のテンプレートに移行する](https://developers.hubspot.jp/docs)ことも可能です。
### リスト ページ テンプレート
テンプレートに`templateType: blog_listing`アノテーションを挿入すると、[[ブログ設定]の下のセクション](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings)でリストページ用のテンプレートとして選択できるようになります。コンテンツ作成者はこのテンプレートタイプを使用して、ページエディター内でリストページを編集することも可能です。さらに、テンプレートに[ドラッグ&ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)も含めることで、他のCMSページと同様にページエディターにおけるモジュールの追加や削除が可能になります。ドラッグ&ドロップエリアの追加例に関して、詳しくは[CMSボイラープレートのブログテンプレート](https://github.com/HubSpot/cms-theme-boilerplate/pull/349)をご覧ください。
記事のリストは、ブログ記事を反復処理する[forループ](/docs/cms/reference/hubl/loops)によって生成されます。`contents`は、そのブログに含まれる全ての記事を含む事前定義されたコンテンツシーケンスです。
```hubl theme={null}
{% for content in contents %}
Post item markup that renders with each iteration.
{% endfor %}
```
> [!NOTE]
>
> ブログ リスト ページ テンプレートの全てのテキスト文字列は、フィールドで制御することをお勧めします。これにより、[多言語](/docs/cms/start-building/features/multi-language-content)ブログの作成が容易になり、コンテンツ作成者の操作性が向上します。
## ブログ リスト ページ モジュールを作成する
コンテンツ作成者がモジュールをブログ リスト ページ内コンテンツの周囲(側面や上下など)に配置することを許可できます。これを有効にするには、[ブログリストのforループ](/docs/cms/start-building/building-blocks/templates/blog#blog-listing-for-loop)を使用したブログ リスト モジュールを作成することをお勧めします。例については、[CMSボイラープレートのブログ リスト ページ モジュール](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module)をご参照ください。[](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module)
HubSpotは、サマリーの表示やキービジュアルを使用するための[ブログ設定](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#select-your-blog-templates)を提供していますが、これらの機能をモジュールに組み込むこともできます。モジュールへの組み込みにより、コンテンツ作成者はブログの設定ページへ切り替えることなく、ページエディター内で必要な機能を使用できるようになります。
## ブログ執筆者、タグ、シンプル リスト ページ
HubSpotブログにはブログ記事とブログ リスト ページに加えて、ブログ執筆者用のページ、ブログ記事のタグ用のページ、シンプル リスト ページもあります。こうした追加ページは、ブログ リスト ページと同じテンプレートを使用してコンテンツが表示されます。
> [!NOTE]
>
> リストページのテンプレートはブログ執筆者、タグ、簡単なリストページでも共有されるため、テンプレートに公開された更新内容もこれらのページに適用されます。
追加ページのレイアウトを個別に構成するには、`if`文を使用して、各タイプのページのコンテンツを条件付きでレンダリングします。
### Ifblog\_author
標準的なHubSpotブログ リスト ページのマークアップには、`if blog_author`ステートメントが含まれます。このステートメントは、執筆者が公開した全ての記事を一覧にした執筆者の個別ページを表示する際に[true]と評価されます。ボイラープレートテンプレートには、執筆者の名前、プロフィール、およびソーシャル メディア アカウントが含まれています。
```hubl theme={null}
{% if blog_author %}
{% else %}
```
### If tag
`if tag`ステートメントを使用すると、ブログのトピックページにのみコードをレンダリングできます。訪問者がウェブサイト上でブログトピックをクリックすると、その値が表示されます。以下の例は、ページタイトル変数を使用してタグ リスト ページ上部にタグ名を自動出力するスニペットです。
```hubl theme={null}
{% if tag %}
Posts about {{ page_meta.html_title|split(" | ")|last }}
{% endif %}
```
### If not simple\_list\_page
ブログ記事の一覧を表示するためにレンダリングされるブログ リスト ページには、標準のリストページとシンプル リスト ページの2種類があります。
* 標準のリストページでは、記事リストのブログ設定で指定された記事の数だけレンダリングが反復し、それに応じてページ番号も付与されます。
* シンプル リスト ページは全ての記事の一覧で、ページ番号には対応していません。シンプル リスト ページは、[ブログ設定の記事数制限](/docs/cms/start-building/introduction/developer-environment/website-settings#number-of-posts-per-listing-page)の影響を受けることなく、通常は直近200件のブログ記事へのリンクが格納されます。シンプル リスト ページのアドレスは、ブログURLのパスの末尾に`/all`を追加したものです。
`if not simple_list_page`ステートメントを使用して、シンプル リスト ページと標準のリストページのどちらをレンダリングするかを指定できます。このステートメントを簡略化したものを以下でご参照ください。
> [!NOTE]
>
> この`if`文ではロジックが反転している点にご注意ください。つまり、`else`でシンプル リスト ビューを定義しています。必要に応じて、代わりに[unless文](/docs/cms/reference/hubl/if-statements#unless-statements)を使用することもできます。
```hubl theme={null}
{% if not simple_list_page %}
Iterated post markup for regular listing
{% else %}
{% endif %}
```
## リストのページ送り
ブログ リスト ページではページ番号が自動生成されます。リスト ページ テンプレートには、訪問者がブログ記事内でページを簡単に切り替えられるようにするロジックを含めることが可能です。[ボイラープレートのブログ](https://boilerplate.hubspotcms.com/blog)では、[次のマークアップ](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/blog-pagination.module/module.html)を使って数値によるシンプルなページ送りを実現しています。
```hubl theme={null}
{% if contents.total_page_count > 1 %}
{% endif %}
```
## ボイラープレートマークアップ
以下で、ブログ記事とブログ リスト ページ テンプレートのボイラープレートマークアップをご覧ください。各セクションに記載されているように、GitHubのCMSボイラープレートでこのマークアップを表示することもできます。
### 記事テンプレートマークアップ
ブログ内の全てのブログ記事は、1つのブログテンプレートによって生成されます。 `Content`は、リクエストされたブログ記事に関する情報を含む事前定義されたデータオブジェクトです。[ボイラープレート記事](https://boilerplate.hubspotcms.com/blog)は、[次のマークアップ](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-post.html)を使ってレンダリングされます。
```hubl theme={null}
{{ content.name }}
{{ content.post_body }}
{% if content.tag_list %}
{% icon name="tag" style="SOLID" %}
{% for tag in content.tag_list %}
{{ tag.name }} {% if not loop.last %},{% endif %}
{% endfor %}
{% endif %}
```
また、ブログ記事の執筆者情報も`content`contentデータの中に含まれます。
```hubl theme={null}
{{ content.blog_post_author.bio }}
{% if content.blog_post_author.has_social_profiles %}
{% if content.blog_post_author.facebook %}
Facebook
{% endif %}
{% if content.blog_post_author.linkedin %}
LinkedIn
{% endif %}
{% if content.blog_post_author.twitter %}
{% endif %}
{% if content.blog_post_author.google_plus %}
Google+
{% endif %}
{% endif %}
```
### リスト ページ テンプレートのマークアップ
[ボイラープレート ブログ リスト ページ](https://boilerplate.hubspotcms.com/blog)のコンテンツのforループは、[次のマークアップ](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-index.html)によってレンダリングされます。
```hubl theme={null}
{% for content in contents %}
{# On the blog homepage the first post will be featured above older posts #}
{% if (loop.first && current_page_num == 1 && !topic) %}
{{ content.post_list_content }}
{% else %}
{{ content.post_list_content|truncatehtml(100) }}
{% endif %}
{% endfor %}
```
## 関連コンテンツ
* [ブログの変数](/docs/cms/reference/hubl/variables#blog-variables)
* [ブログテンプレート](/docs/cms/start-building/building-blocks/templates/blog)
* [HubSpotテーマボイラープレート](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
* [ブログの作成方法](https://knowledge.hubspot.com/ja/blog/create-a-new-blog)
* [ブログをHubSpotにインポートする](https://knowledge.hubspot.com/ja/blog/import-your-content-into-hubspot)
# Eメールテンプレートのマークアップ
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/templates/email-template-markup
この記事では、標準的なHubSpot Eメールテンプレートのコーディング方法について説明します。EメールクライアントでサポートされるHTML機能とCSS機能は限られているため、クライアント間で一貫して表示されるEメールテンプレートをコーディングするには、ある程度の経験と忍耐力が必要です。HubSpotのEメールテンプレートは、ユーザーフレンドリーなテンプレートレイアウトまたはコードファイルとして作成できるようになっています。
> **サポートされる製品**
この記事では、標準HubSpot Eメールテンプレートのコーディング方法について説明します。カスタムEメールテンプレートを作成する際は、Eメールクライアントが[特定のHTMLおよびCSS機能](http://www.campaignmonitor.com/css/)のみをサポートしていることに注意してください。このため、クライアント間で一貫して表示されるEメールテンプレートをコーディングするには、ある程度の経験と忍耐力が必要です。
[アプリ内でテンプレートレイアウトを作成する](https://knowledge.hubspot.com/ja/design-manager/create-page-email-and-blog-templates-in-the-layout-editor)方法と既存の[Eメールをテンプレートとして保存](https://knowledge.hubspot.com/ja/marketing-email/save-your-marketing-email-as-a-template)する方法については、HubSpotのナレッジベースをご覧ください。
## Eメールテンプレートの必須変数
HubSpotでEメールを送信するには、テンプレートに所定の情報を含める必要があります。詳しくは[Eメールの必須HubL変数](/docs/cms/reference/hubl/variables#required-email-template-variables)をご参照ください。コードテンプレートを使用する場合は、Eメールごとに内容を簡単に編集できるように、[モジュール](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)も使用する必要があります。
## hs-inline-cssとdata-hse-inline-css
全てのクライアントで正しく表示されるEメールテンプレートをコーディングする際には、``内の`
{# coded OR drag-and-drop email templates: #}
```
```text 出力.txt theme={null}
```
## レスポンシブEメールテンプレート
HubSpotのデフォルトのEメールテンプレートレイアウトでは、以下のマークアップが使用されます。レスポンシブレイアウトには、画像やテーブルをレスポンシブにするメディアクエリーが含まれています。レスポンシブレイアウトでは、[設定]>[マーケティング]>[Eメール]に接続する[色とフォントの変数](/docs/cms/reference/hubl/variables#color-and-font-settings)が使用されます\*\*。 \*\*
> [!WARNING]
>
> HubSpotのレスポンシブレイアウトを使用する場合は、テキストの「列」を含むクラスが指定された``がレスポンシブになります。
```hubl theme={null}
{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %} {% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients ", value="", no_wrapper=True %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
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...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
Show off your skill with bullet points
Make your content easy to scan
LINK TO A LANDING PAGE ON YOUR SITE (This is the really important part.)
Now wrap it all up with a pithy little reminder of how much you love them.
Aw. You silver-tongued devil, you.
Sincerely,
Your name
{% end_content_attribute %}
{% text "social_sharing_label" label='Social Sharing Label' %}
```
## 基本Eメールテンプレート
HubSpotの基本テンプレートレイアウトでは、異なるマークアップが使用され、Eメールをレスポンシブにするメディアクエリーは挿入されません。基本レイアウトでも、[設定]>[マーケティング]>[Eメール]に接続する[色とフォントの変数](/docs/cms/reference/hubl/variables#color-and-font-settings)が使用されます\*\*。 \*\*
```hubl theme={null}
{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %} {% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients ", value="", no_wrapper=True %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
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...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
Show off your skill with bullet points
Make your content easy to scan
LINK TO A LANDING PAGE ON YOUR SITE (This is the really important part.)
Now wrap it all up with a pithy little reminder of how much you love them.
Aw. You silver-tongued devil, you.
Sincerely,
Your name
{% end_content_attribute %}
{% text "social_sharing_label" overrideable=True, label="Social Sharing Label" %}
```
## ゼロから作成する
デザインマネージャーで.htmlのEメールをゼロから作成すると、以下のマークアップが自動生成されます。
```hubl theme={null}
{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %} {% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients ", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page
here .
{% endif %}
```
# HTML+HubLテンプレート
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/templates/html-hubl-templates
CMS Hubのテンプレートは、HTMLとHubLで作成されています。これらのテンプレートには、制作担当者が自力で簡単に編集できる領域を含めることができます。
HTML+HubLテンプレートは、CMS Hubの[どのテンプレートのタイプ](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#template-types)にも使用できます。このテンプレートは[HubLテンプレート作成言語](/docs/cms/reference/hubl/operators-and-expression-tests)をサポートする.htmlファイルです。このようなHubL対応のコードテンプレートのプレビューには、[デザインマネージャーのテンプレートプレビュー](https://knowledge.hubspot.com/ja/website-pages/understand-a-hubspot-template-setup)またはサンドボックスアカウントを使用するのが最適です。HTML+HubLテンプレートには[パーシャル](#partials)を含めることができます。パーシャルはヘッダーやフッターなど、共通の要素に使用するコードを分ける際に使用できます。
HTML+HubLテンプレートを使用すると、開発者は[ビジュアル デザイン マネージャーのドラッグ&ドロップ方式のテンプレート](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates)を使用する場合よりも柔軟に制御できます。これにより、開発者は[ドラッグ&ドロップ機能](/docs/cms/reference/hubl/tags/dnd-areas)を使用して、HTML+HubLテンプレートでなければ実現できない、快適な編集環境を制作担当者に提供できます。

> [!NOTE]
>
> 上記のテンプレートは、[HubSpotのCMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)に含まれている[base.htmlテンプレート](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)(英語)です。HubSpotで開発を行う際にはこのボイラープレートから始めると便利です。
## 習熟度とツール選び
HTML+HubLテンプレートはコード化されたファイルであるため、お好みのツールを使用してローカル環境でも編集できます。推奨されるのは、HubSpot独自の[ローカル開発ツール](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli)の使用です。HubSpotの開発ツールでは、デベロッパー ファイル システムとファイルマネージャーのファイルを安全に管理し、[アップロード](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#upload)、[取得](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#fetch)、[監視](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#watch)、[作成](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#create)することができます。
以前に他のテンプレート言語を使用した経験がある場合は、それと同様の方法で、HubSpotでもHTML+HubLテンプレートを構築できます。主な違いは、HubSpotでは、制作担当者にとって最適な編集環境を実現するために注力していること、そしてメンテナンスとパフォーマンス最適化の開発者の作業負担の大部分を軽減していることです。
例えば、特定のモジュールを対象に所定のページでCSSファイルを読み込む必要がある場合、` `を使用する代わりに、[モジュールのmeta.jsonファイル](/docs/cms/reference/modules/configuration#adding-css-and-javascript-dependencies)内にある`css_assets`を使用してスタイルシートをインクルードします。これにより、HubSpotは、モジュールがページに存在する場合にのみCSSを条件付きで読み込むため、不必要に読み込まれるCSSの量を最小限に抑えることができます。
詳しくは、[HubSpot開発ワークフローの最適化方法](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)をご確認ください。
## テンプレートアノテーション
テンプレートの上部に含まれるテンプレートアノテーションは、重要なテンプレート設定を構成するためのもので、テンプレートのタイプや新しいコンテンツの作成に使用できるかどうかなどを設定できます。テンプレートアノテーションは、開発プロセス中にいつでも変更できます。利用可能なテンプレートアノテーションの詳細については、以下をご覧ください。
```html theme={null}
...
```
| アノテーション | タイプ | 説明 |
| - | - | - |
| `templateType` | 文字列 | ファイルのテンプレートタイプを指定します。指定可能な値は、次のとおりです。 標準テンプレート:[page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#page) [email](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#email) [blog\_listing](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#blog-listing) [blog\_post](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#blog-post) [blog](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#blog) パーシャル:[global\_partial](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#global-partials) システムテンプレート:[error\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#error-pages) [password\_prompt\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#password-prompt) [membership\_login\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#membership-login) [membership\_register\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#membership-register) [membership\_reset\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#membership-password-reset) [membership\_reset\_request\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#membership-reset-request) [email\_subscription\_preferences\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#email-subscription-preferences) [email\_backup\_unsubscribe\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#email-backup-unsubscribe) [email\_subscriptions\_confirmation\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#email-subscription-unsubscribe-confirmation) [search\_results\_page](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#search-results-page) |
| `isAvailableForNewContent` | 文字列 | コンテンツ作成プロセスでテンプレートを選択できるかどうかを指定します。指定可能な値は、`true`および`false`です。このアノテーションが`false`に設定されているテンプレートには、[必須の変数](/docs/cms/reference/hubl/variables#required-page-template-variables)を含める必要はありません。このアノテーションがfalseに設定されている、`page`タイプのテンプレートは、[標準パーシャル](#partials)としても使用できます。 |
| `enableDomainStylesheets` | 文字列 | テンプレートで[ドメインスタイルシート](https://knowledge.hubspot.com/ja/design-manager/create-edit-and-attach-css-files-to-style-your-site#attach-or-remove-stylesheets-on-a-domain-level)を読み込むかどうかを指定します。指定可能な値は、`true`、`false`です。 |
| `Label` | 文字列 | テンプレート選択画面に表示される、テンプレートについての分かりやすい説明文。例:`About Page`、`Homepage`、`Pricing`。 |
| `screenshotPath` | 文字列 | 制作担当者がテンプレートを選択しているときに表示されるスクリーンショット。このスクリーンショットによってテンプレートが区別しやすくなります。 |
## ヘッダーとフッターのインクルード
ファイルがテンプレートパーシャルでない限り、HubSpotのテンプレートを使用するには2つのタグが必要です。この2つのタグを次に示します。
* `{{ standard_header_includes }}`必要なCSSを結合してミニフィケーションし、自動的に追加するために使用します。
* `{{ standard_footer_includes }}`HubSpotトラッキングスクリプトやモジュールなどの要素で使用するJavaScriptをページの下部に動的に追加するために使用します。
これらのタグは、テンプレート内に存在するか、またはテンプレートの子[パーシャル](#partials)として公開して使用する必要があります。
## パーシャル
テンプレートパーシャルは、他のコードファイルにインクルードできるHTML+HubLファイルです。パーシャルを使用して複数のテンプレートの間でマークアップを共有することで、モジュール方式の開発アプローチをとることができます。例えば、ヘッダーをパーシャルにすれば、コンポーネントとして簡単にインクルードでき、再度コード化する必要がなくなります。
### 標準パーシャル
標準パーシャルとは、個々のページで編集できるコンテンツを含む、再利用可能なテンプレートまたはコンポーネントのことです。常にコンテンツを共有するグローバルパーシャルとは異なり、標準パーシャルでは、制作担当者が個々のページで必要に応じてコンテンツを変更できます。例えば下記のコードでは、サイドバーモジュールが別のテンプレートファイルに取り込まれます。
標準パーシャルの場合、テンプレートファイルの先頭に次の[アノテーション](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations)を組み込む必要があります。
* `templateType: page`
* `isAvailableForNewContent: false`
```hubl theme={null}
{% include "../partial/sidebar.html" %}
```
### グローバルパーシャル
グローバルパーシャルとは、そのパーシャルの全てのインスタンスで共有されるコンテンツを含む一種の[グローバルコンテンツ](/docs/cms/start-building/building-blocks/global-content#global-partials)であり、複数のテンプレートで使用できます。多くの場合、ヘッダーとフッターにはグローバルパーシャルが使用されます。その一例として、HubSpotのCMSボイラープレートの[ヘッダー](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html)(英語)と[フッター](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/footer.html)(英語)をご確認ください。これらのパーシャルは、[base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)内で`global_partial`タグを使用して呼び出されます。
グローバルパーシャルの場合、ファイルの先頭に[アノテーション](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations)として`templateType: global_partial`を組み込む必要があります。
```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```
### ブロックと拡張
複雑なテンプレートを作成するときは、親テンプレートを拡張する区画となるブロックを作成できます。
例えば、必須の変数である[`standard_header_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables)と[`standard_footer_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables)を含む親テンプレートを作成できます。このテンプレート内で、以下の構文を使用して一意のブロックを定義します。`body`は一意の名前です。
```hubl theme={null}
{% block body %}
{% endblock body %}
```
これにより、子テンプレート内で親テンプレートを拡張して、`body`ブロックにさらにコンテンツを挿入することができます。
```hubl theme={null}
{% extends "./layouts/base.html" %}
{% block body %}
Page Content
Bullet 1
Bullet 2
Bullet 3
{% endblock %}
```
この方法は、HubSpotのCMSボイラープレートに含まれる[base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)(英語)テンプレートで使用されています。このテンプレートが、[templatesフォルダー](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates)(英語)内の他のテンプレートによって拡張されるようになっています。
### グローバルグループ
デザインマネージャーのドラッグ&ドロップ テンプレート ビルダーを使用して作成された[グローバルグループ](https://knowledge.hubspot.com/ja/design-manager/use-global-content-across-multiple-templates)を含めることもできます。以下に構文を示します。
```hubl theme={null}
{% include "/path/to/global_header.template.json" %}
```
# テンプレートの概要
Source: https://developers.hubspot.jp/docs/cms/start-building/building-blocks/templates/overview
テンプレートは再利用可能なページラッパーまたはEメールラッパーです。通常はテンプレートによってモジュールやパーシャルがレイアウトに配置されます。制作担当者は使用するテンプレートを選択してから、ページやEメールの作成を始めます。
テンプレートは、HubSpotのページ、Eメール、テーマのレイアウトを定義するものです。テンプレートはモジュールとパーシャルで構成され、スタイルシートやJavaScriptファイルなどのアセットを参照できます。テンプレートの作成には、[HubSpot CLI](/docs/cms/start-building/introduction/react-plus-hubl/react-plus-hubl-quickstart)または[HubSpotのデザインマネージャー](https://knowledge.hubspot.com/ja/design-manager/create-page-email-and-blog-templates-in-the-layout-editor)を使用できます。制作担当者がページまたはEメールを作成するときに最初に選ぶのが、テンプレートです。
ここではテンプレートの作成方法、テンプレートの種類、テンプレートに含まれる内容について説明します。
## テンプレートを作成する
テンプレートを作成するには、[HubSpotのデザインマネージャー](https://knowledge.hubspot.com/ja/design-manager/create-page-email-and-blog-templates-in-the-layout-editor)を使用するか、`hs create template`のCLIコマンドを実行します。
```shell theme={null}
hs create template [dest]
```
| パラメーター | 説明 |
| - | - |
| `name` | テンプレートの名前 |
| `dest` | テンプレートを作成するローカルディレクトリーのパス。このパラメーターが含まれない場合、テンプレートは現在のディレクトリーに作成されます。 |
* 矢印キーを使用して、作成する[テンプレートのタイプ](#template-types)に移動し、**Enter**キーを押します。
その後、テンプレートはローカルで作成されます。ご使用のHubSpotアカウント上でテンプレートを使用するには、アカウントにテンプレートを[アップロード](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#upload)します。[Watch](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#watch)コマンドを使用して、現在の作業ディレクトリーと子ディレクトリー内の新しいファイルおよび既存のファイルの編集内容を自動的にアップロードすることも可能です。
## テンプレートをプレビューする
テンプレートを更新したら、プレビューで期待通りに表示されて動作することを確認できます。次のように、HubSpotにはテンプレートをプレビューする方法がいくつかあります。
* **デザインマネージャーでテンプレートをプレビューする**: 簡単な目視チェックを行う場合や、ブログ記事、リスト、統合テンプレートをプレビューする必要がある場合に最適です。
* **テンプレートから新しいアセットを作成する**: ドラッグ&ドロップエディターとコンテンツ作成エクスペリエンスのテストに最適です。
### デザインマネージャーでプレビューする
デザインマネージャーによるテンプレートのプレビューは、簡単な目視チェックを行う際に特に便利です。テンプレートプレビューアーでは、ビューポートの寸法などの表示オプションも設定できます。
デザインマネージャーでテンプレートをプレビューするには、次の手順に従います。
* HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインマネージャー]の順に進みます\*\*。 \*\*\*\* \*\*\*\* \*\*
* 左サイドバーのファイルエクスプローラーを使用して、プレビューする**テンプレート**をクリックします。
* 右上にある[プレビュー]をクリックします\*\*。 \*\*
* [表示オプションを使用したライブプレビュー]を選択し、応答性とドメイン設定(スタイルシートなど)のテストを実行するオプションを含むテンプレートをプレビューします\*\*。 \*\*このオプションでは、iframe内のページが表示されます。ブログテンプレート用にブログとブログ記事、またはリストビューを選択することもできます。
* [表示オプションを使用せずにプレビュー]を選択し、追加オプションのないテンプレートをプレビューします\*\*。 \*\*

### 新しいページでプレビューする
ドラッグ&ドロップエリアを変更する場合、モジュールに設定されているデフォルトのパラメーター値を変更する場合、またはその他に大きな変更を加える場合は、テンプレートを使用して、[ウェブサイトページ](https://knowledge.hubspot.com/ja/website-and-landing-pages/create-and-customize-pages)、[ブログ](https://knowledge.hubspot.com/ja/blog/create-a-new-blog)、[ブログ記事](https://knowledge.hubspot.com/ja/blog/create-and-publish-blog-posts)、または[Eメール](https://knowledge.hubspot.com/ja/marketing-email/create-marketing-emails-in-the-drag-and-drop-email-editor)を作成するのが最適です。その上でモジュールのさまざまなフィールド値を試し、テンプレートが実際にどのように表示されるかをテストして、制作担当者にとって使いやすくなるように最適化できます。これらのアセットを公開することも、テスト用に下書きモードのままにすることもできます。
さらに、[コンテンツのステージング](https://knowledge.hubspot.com/ja/website-pages/redesign-and-relaunch-your-site-with-content-staging#new)または[開発者サンドボックスアカウント](https://offers.hubspot.com/free-cms-developer-sandbox)を使用して、本番アカウントに影響を与えることなくアセットを作成および表示できます。
## テンプレートのタイプ
ウェブサイトページやブログ記事など、さまざまなタイプのコンテンツでテンプレートを使用できます。コードテンプレートでは、ファイルの先頭部分にアノテーションを追加してテンプレートのタイプを指定します。
さまざまなタイプのテンプレートと、各タイプを指定するためのアノテーションについて、以下で説明します。
> [!WARNING]
>
> ### 注:
>
> 制作担当者は、テンプレートに[dnd\_area](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas)タグが使用されているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。
>
> * ドラッグ&ドロップ方式のビジュアルレイアウトエディター上で作成したテンプレートは、`dnd_area`タグの有無に関係なく、他のドラッグ&ドロップテンプレートまたはコードテンプレートと入れ替えることができます。
> * Dnd*areaタグを含むコードテンプレートは、`dnd_area`タグを含む他のコードテンプレートとのみ入れ替えることができます。* \_
> * `dnd_area`タグが使用されていないコードテンプレートは、`dnd_area`タグが使用されていない他のコードテンプレートとのみ入れ替えることができます。
### ページ
```html theme={null}
templateType: page
```
ページテンプレートは最も自由度の高いテンプレートタイプです。任意のウェブページまたは[ランディングページ](https://blog.hubspot.com/blog/tabid/6307/bid/7177/what-is-a-landing-page-and-why-should-you-care.aspx)として使用できます。ページの[レイアウト](#layout-css)に事前に取り込まれるコンポーネントはありません。コードページテンプレートには、わずかなマークアップ(メタ情報に提案されるHubLタグ、タイトル、必須のヘッダーまたはフッターの[インクルード](#included-cms-files)など)が事前に取り込まれます。ページテンプレートを使用するページには通常、次の要素が含まれますが、これらに限定されません。
* [ホームページ](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html)
* [会社概要](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/about.html)
* [お問い合わせ先](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/contact.html)
### Eメール
```html theme={null}
templateType: email
```
Eメールテンプレートは、[Eメールツール](https://www.hubspot.jp/products/marketing/email)で使用します。Eメールテンプレートはさまざまなメールクライアントで表示されること、そして到達性を担保するためのベストプラクティスに従わなければならないことから、さまざまな厳しい条件に対応する必要があります。[HTML+HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates)とデザインマネージャーのドラッグ&ドロップEメールテンプレートにはいずれも、作成時に基本コンポーネントが取り込まれます。以下の`templateType`を指定して作成したテンプレートは、[Eメールを作成](https://knowledge.hubspot.com/ja/marketing-email/create-and-send-marketing-emails-with-the-updated-classic-editor)するときにだけテンプレート選択画面に表示されます。
[CAN-SPAM](https://knowledge.hubspot.com/ja/marketing-email/edit-office-location-information-in-email-footers)に準拠するためには、Eメールテンプレートに必要な[必須の変数](https://developers.hubspot.jp/docs/reference/cms/hubl/variables#required-email-template-variables)を含める必要があります。
Eメールテンプレートには、特殊なクラス名またはデータ属性を設定して`
{% end_require_css %}
{##### Module HTML #####}
```
### スタイルとJavascript
* スタイル:
* モジュールには空でないスタイルグループが含まれる必要があります。
* モジュール内でインラインスタイルをハードコーディングすることは推奨されません。代わりに、フィールドでスタイルを制御できるようにして、動的インラインスタイルを使用してください。
* JavaScript:
* JavaScriptは、モジュールの複数インスタンスを表すことができる必要があります。JSペインのJavaScriptは、モジュールの使用回数にかかわらず、1ページにつき1度だけ読み込まれます。
* JavaScriptではモジュール固有のクラス名でDOM要素を参照して、モジュール外部の要素に意図しない影響が及ばないようにする必要があります。
モジュールを作成する際には、`{{name}}`という組み込み変数を使用できます。この変数は、複雑なモジュールのCSSとJSマークアップで役立つ、モジュールのインスタンスID(HTML+HubLパネルでのみ使用可能)を取得します。詳しくは[開発者ドキュメント](/docs/cms/reference/modules/files#require-css-block)をご覧ください。
## フィールドの構成
以下のフィールドの構成とグループ化の要件を満たす必要があります。
### コンテンツタブ
* フィールドグループ内に少なくとも1つの制御設定がある場合は、全ての制御設定を、その機能によってラベル付けされたカテゴリーにグループ化する必要があります。
* [コンテンツ]タブに追加されるモジュールフィールドで、モジュールのコンテンツをカスタマイズできるようにする必要があります。\_ \_例えば、画像、アイコン、代替(Alt)テキストのコントロールや、リンク制御設定などです。
### スタイルタブ
モジュールのスタイル フィールド グループは一貫性を持ち、パターンに従う必要があります。以下は、スタイル フィールド グループの推奨される順序です。これらのグループは、トップレベルに配置することも、[1つのグループにネスト](#multi-level-grouping)することもできます。また、空のグループは削除できます。
* [プリセット](#presets)
* テキスト
* 背景
* 境界線
* Hover
* 角
* 間隔
* 位置合わせ
* 上記以外のカスタムスタイルグループ
* 詳細
次のフィールドタイプが存在する場合は、[スタイル]タブに含める必要があります。\_ \_
* [位置合わせ](/docs/cms/reference/fields/module-theme-fields#alignment)
* [背景画像](/docs/cms/reference/fields/module-theme-fields#background-image)
* [境界線](/docs/cms/reference/fields/module-theme-fields#border)
* [カラー](/docs/cms/reference/fields/module-theme-fields#color)
* [フォント](/docs/cms/reference/fields/module-theme-fields#font)
* [グラデーション](/docs/cms/reference/fields/module-theme-fields#gradient)
* [間隔](/docs/cms/reference/fields/module-theme-fields#spacing)
* [テキストの位置合わせ](/docs/cms/reference/fields/module-theme-fields#text-alignment)
[コンテンツ]タブから[スタイル]タブにフィールドを移動する場合は、[エイリアスマッピングを使用](/docs/cms/start-building/building-blocks/fields/alias-mapping)して、公開中ページですでに使用されているモジュールのスタイルを維持する方法を確認してください。
* アニメーションオプションは、常にフィールドグループリストの末尾近くに置く必要があります。
* コンテンツクリエイターがコードスニペットまたはCSSを追加できるようにするオプションは、フィールドグループリストの末尾にある「詳細」というラベルのフィールドにグループ化する必要があります。\_ \_
* コントロールは、全てのモジュールで標準化する必要があります。例えば、境界線の半径のコントロールを持つことができる全ての要素は、そのコントロールを提供する必要があります。一部のモジュールで、他のモジュールに存在しないコントロールを提供することは避けてください。
* [スタイル]タブに追加されたモジュールフィールドは、モジュールのスタイルを設定する方法を提供する必要があります。\_ \_以下に例を示します。
* 色、テキストスタイル、位置合わせ、間隔、境界線、角の半径などのスタイルオプション。
* ホバー効果やスライドイン効果などのアニメーション。
* さまざまなスタイルを同時に変更することを目的とする、ダークテーマとライトテーマなどのプリセット。
### フィールドの構成の例
#### プリセット
プリセットは、限られたオプションのセットをコンテンツクリエイターに提供したい場合に使用でき、通常テーマ設定に紐付けられています。例えば、Growthテーマに含まれている「Icon(アイコン)」モジュールには「ダーク」カラーと「ライト」カラーのプリセットが含まれており、ウェブサイト全体で使用すると一貫性を提供できます。
#### 複数レベルのグループ化
スタイルフィールドをトップレベルに配置するかネストするかを決定する際には、次の例を考慮してください。
Growthテーマに含まれている「Icon(アイコン)」モジュールは、単一のコンポーネントであるため、全てのスタイルオプションがトップレベルに配置されます。したがって、全てのスタイルオプションがこの1つのコンポーネントに影響します。\_ \_

Growthテーマに含まれている「スピーカーカード」モジュールには、カードの画像とテキストコンテンツという複数のコンポーネントが含まれています。\_ \_したがって、モジュールスタイルはコンポーネントごとにグループ化されており、コンテンツクリエイターが各コンポーネントのスタイルを設定するためのプロセスが明確化されます。

#### 個々のフィールドのグループ化
以下のボタンモジュールには、[プリセット]、[テキスト]、[背景]などのグループが含まれています。[角]フィールドグループには角の半径のコントロールしか含まれていませんが、一貫性のあるコンテンツ作成体験を提供するためにグループ化されています。

# HubSpotテンプレート マーケットプレイス ガイドライン
Source: https://developers.hubspot.jp/docs/cms/marketplace/template-guidelines
HubSpotテンプレートマーケットプレイスでは、開発者に直接依存することなくオンラインプレゼンスを強化できるよう、何千ものお客さまを支援しています。アセットマーケットプレイスは、美しく使いやすいテーマ、テンプレート、モジュールを作成している開発者の皆さまによって運営されています。
'HubSpotテンプレートマーケットプレイスでは、開発者に直接依存することなくオンラインプレゼンスを強化できるよう、何千ものお客さまを支援しています。アセットマーケットプレイスは、美しく使いやすいテーマ、テンプレート、モジュールを作成している開発者の皆さまによって運営されています。';
[HubSpotテンプレートマーケットプレイス](https://ecosystem.hubspot.com/marketplace/templates)では、開発者に直接依存することなくオンラインプレゼンスを強化できるよう、何千ものお客さまを支援しています。テンプレートマーケットプレイスは、ユーザー向けの使いやすいテンプレートを作成している開発者によって運営されています。
HubSpotテンプレートマーケットプレイスで販売できるテンプレートの種類には、[テーマ](https://ecosystem.hubspot.com/marketplace/website)と[モジュール](https://ecosystem.hubspot.com/marketplace/modules)の2つがあります。
## マーケットプレイスでテンプレートを販売する意義
新しい収益源を創出しようと目指している開発者や代理店にとって、HubSpotマーケットプレイスは大きなチャンスになります。
* **非排他的:** 皆さまの多大な労力を注いで生み出されたテンプレートを、1つのマーケットプレイスだけに縛り付けるべきではありません。HubSpotのマーケットプレイスに掲載するテンプレートは、このマーケットプレイスの他でも独自のプロジェクトのために自由に使用していただけます。
* **一度作成すれば何度でも販売可能:** テンプレートがマーケットプレイスに掲載されると、1対多の機会が生まれます。つまり、テンプレートを一度作成するだけで、複数の顧客に再販することができます。
* **ビジネスの成長:** テンプレート(無料と有料)を作成してHubSpotマーケットプレイスで販売している多くの開発者は、マーケットプレイスでの収益と、購入者からリクエストされる追加のサービスでの収益によってビジネスを成長させています。
* **制作者のコミュニティーに参加して、自分のスキルをアピール:** 成長を続ける協力的なエコシステムとつながって、HubSpotテンプレートマーケットプレイスの未来の形作りを支援しながら、提供するサービスに注目を集めることができます。
## 概要と要件
テンプレートマーケットプレイスでの販売を開始するには、[テンプレート マーケットプレイス プロバイダー アカウントを作成](https://app.hubspot.com/signup-hubspot/asset-provider)します。
ご提出いただくテンプレートは、コンプライアンス、設計、およびコード品質の要件を満たしている必要があります。テンプレートの種類ごとに、マーケットプレイスに掲載するために満たさなければならない固有の要件もあります。以下で、これらの要件を確認できます。
マーケットプレイス用のテンプレートを作成する前に、[HubSpotテンプレートマーケットプレイス用のテンプレートの作成](https://www.hubspot.com/template-providers)(英語)、[ブランディング](https://www.hubspot.com/providers/template/branding-guidelines)(英語)、[HubSpot商標の使用](https://legal.hubspot.com/tm-usage-guidelines)、[コンテンツの使用](https://www.hubspot.com/content-usage-guidelines)に関するガイドラインを必ずお読みください。これらのガイドラインに違反しているテンプレートは、HubSpotの追加規約に記載されているとおり、直ちにマーケットプレイスから削除されます。
### テーマの要件
マーケティング担当者が快適にコンテンツを編集できるよう、テーマには、連携して機能するように設計されたテンプレート、モジュール、グローバルコンテンツ、スタイルの設定が移植可能な形で統合されています。
[テーマの要件を確認](https://developers.hubspot.com/docs)
### モジュールの要件
提出するテーマにはモジュールを含めます。モジュールとは、テンプレートで使用したり、ドラッグ&ドロップエリアおよびフレキシブルカラムを使用してページに追加したりできる、再利用可能なコンポーネントのことです。スタンドアロンのモジュールを提出することもできます。スタンドアロンのモジュールとは、HubSpotのコンテンツエディターで任意のテーマに追加できるモジュールのことです。
[モジュールの要件を確認](https://developers.hubspot.com/docs)
### リストページの要件
HubSpotテンプレートマーケットプレイスに提出する時点で、テンプレートとそのリストページが従っていなければならない要件。これらの基準は、マーケットプレイスの全てのテンプレートに適用されます。
[リストページの要件を確認](https://developers.hubspot.com/docs)
### テンプレート マーケットプレイス ポリシー
テンプレートマーケットプレイスにテンプレートを掲載するための要件とコンプライアンスの詳細。
[テンプレート マーケットプレイス ポリシーを確認](https://developers.hubspot.com/docs)
## テンプレートマーケットプレイスでのテーマの掲載と更新
テンプレートを作成したら、HubSpotテンプレートマーケットプレイスに掲載するための承認を得るために、テンプレートを送信してください。送信されたテンプレートに対して、HubSpotテンプレート マーケットプレイス チームが審査と承認プロセスを実施します。[テンプレートマーケットプレイスでのテンプレートの掲載方法と更新方法をご確認ください](https://developers.hubspot.com/docs)。
## サポートされている支払いゲートウェイ
HubSpotは現在、マーケットプレイスプロバイダーが次の支払いゲートウェイに接続して支払いを受け取れるようにしています。
* PayPal([サポートされている国](https://www.paypal.com/us/webapps/mpp/country-worldwide) | [国際決済](https://www.paypal.com/us/cshelp/article/what-are-the-cross-border-fees-when-selling-internationally-help550))
* Stripe ([サポートされている国](https://stripe.com/global) | [国際決済](https://docs.stripe.com/connect/cross-border-payouts))
顧客からの支払いは、マーケットプレイス プロバイダー アカウントで接続されている支払い方法を通じて受け取ります。
* HubSpotアカウントで、[マーケットプレイス]**>[プロバイダー情報]** に移動します。
* [お支払い情報]\_\_セクションで、支払い情報を確認し、必要に応じて更新します。
購入プロセス中に発生する可能性のある支払いゲートウェイの問題について、HubSpotは責任を負いません。HubSpotは取引手数料を頂いていません。全ての取引はHubSpotプラットフォームとは関係なく処理されます。何らかの理由で支払い方法が機能しなくなった場合は、顧客満足度の低下を回避するために、アセットがリストから一時的に除外されることがあります。
HubSpotは、世界中のお客さまに活用していただいています。そのため、支払いゲートウェイを設定する際には、国際通貨による支払い(国際決済)を許可することを強くお勧めします。
HubSpotは、テンプレート マーケットプレイス プロバイダーが自国でStripe支払いゲートウェイを利用いただける場合には、Stripe支払いゲートウェイを使用することを強く推奨します。Stripeが[お住まいの国で利用いただけない](https://stripe.com/global)場合は、PayPal支払いゲートウェイの使用をお勧めします。
## 払い戻し申請
場合によっては購入者から払い戻しが請求されることがあります。掲載情報で返金ポリシーについて明確に説明し、返金ポリシーに関するドキュメントへのリンクを記載してください。HubSpotでは、正当な返金請求を受け入れることを、プロバイダーの皆さまに奨励しています。詳細は、[返金請求のガイドライン](https://knowledge.hubspot.com/resources/marketplace-refund-guidelines)でご確認いただけます。
## トランザクションの管理
顧客がダウンロードしたテンプレートごとに、テンプレート マーケットプレイス プロバイダー アカウントに取引レコードが作成されます。全ての取引は、「マーケットプレイストランザクション」**という取引パイプラインの「トランザクション」取引ステージ**に取り込まれます。トランザクションに対する払い戻しが行われると、取引レコードに[Refunded at(払い戻し日時)]\_\_プロパティーが設定されます。
プロバイダーは、[取引パイプラインと取引ステージをカスタマイズ](https://knowledge.hubspot.com/object-settings/set-up-and-customize-pipelines)し、[取引のプロパティーをワークフローで使用](https://knowledge.hubspot.com/workflows/choose-your-workflow-actions#property-management)[](https://knowledge.hubspot.com/object-settings/set-up-and-customize-pipelines)できます。
## テンプレート掲載情報の削除
HubSpotは、以下に示す理由(ただしこれらに限られません)により、マーケットプレイスの掲載情報を削除する権利を留保します。
* テンプレートにバグがある。
* 提出物に含まれるサードパーティーのテンプレートが破損している。
* テンプレートに、[HubSpotのサポート対象ブラウザー](https://knowledge.hubspot.com/account-security/browsers-supported-by-hubspot)との互換性がない。
* 配布ライセンスのない画像、アイコン、フォント、音声、動画など、著作権で保護された素材を使用している。
* ユーザーに十分な情報を提供した上で明示的なオプトインの同意を得ずに、ユーザーを追跡するテンプレート。
* 以下を含むテンプレート(テンプレートマーケットプレイスまたはテンプレートのデモからのコンテンツへのリンクを含む):
* 違法行為の促進や関与
* 名誉棄損や中傷を含むコンテンツ、悪意のあるコンテンツ
* 不誠実な、または虚偽の記載
* 特定の人種、宗教、年齢、性別、性的指向を侮辱するようなコンテンツ
* モジュールが追加先のページ/メール上の他の要素に影響を与える場合、モジュールは削除されます。
## よくある質問
> **欧州連合のP2B規制(2020年7月12日)はアプリマーケットプレイスとテンプレートマーケットプレイスに適用されますか?**
>
> いいえ。2020年7月12日に施行された最新の欧州連合P2B規制は、HubSpotアプリおよびテンプレート マーケット プレイスには適用されません。[詳細](https://wayback.archive-it.org/12090/*/https://ec.europa.eu/digital-single-market/en/business-business-trading-practices)をご確認ください。
> **マーケットプレイスに提出する必要がある特定のHubSpotアカウントタイプはありますか?**
>
> テンプレートマーケットプレイスに提出するには[マーケットプレイス プロバイダー アカウント](https://www.hubspot.com/template-providers) が必要です。
>
> 同じアカウントでテンプレートを使用できるように、パートナーアカウントでマーケットプレイスリストを管理しているパートナーもいます。逆に、デザインマネージャーツールの他のテンプレートと分けるために、個別のマーケットプレイスアカウントでリストを管理しているパートナーもいます。
> **マーケットプレイスに公開されている製品は、自分のアカウントまたはHubSpotのMarketplaceシステムに存在しますか?**
>
> マーケットプレイスに提出または公開された製品は、HubSpot マーケットプレイスシステム内に存在します。このため、プロバイダーが自分のアカウントで製品の編集を続けても、変更によって顧客の購入に影響が出ることはありません。マーケットプレイスの掲載情報を更新するには、掲載情報の審査と再公開が行われるように、プロバイダーは掲載情報を再提出する必要があります.
>
> マーケットプレイスに掲載されている製品の旧バージョンを購入した顧客は、無料で[最新バージョンに更新](https://knowledge.hubspot.com/resources/marketplace-customers-frequently-asked-questions#update)できます。
> **会社名を更新するにはどうすればよいですか?**
>
> テンプレートをマーケットプレイスに掲載した後、会社名を変更するには、 [ HubSpotサポート](https://help.hubspot.com/)までお問合せいただく必要があります。
> **掲載情報を作成しようとした際に全ての製品が表示されないのはなぜですか?**
>
> 掲載情報を作成しようとした際に全ての製品が表示されない理由として、以下の場合が考えられます。
>
> * テンプレートが現在マーケットプレイスに掲載されているか、現在掲載されているテンプレートの要素が含まれている場合
> * マーケットプレイスが対応していないテンプレート(トランザクションEメール、チケットEメールなど)の場合
> * テンプレートがマーケットプレイスのテンプレートの複製である場合
> **プレビューリンクとして何を使用したらよいでしょうか?**
>
> プレビューURLを作成する場合は、利用可能であれば独自のドメイン名を使用する必要があります。利用可能なドメインがない場合、HubSpotは以下のURL構造のシステムドメインを各アカウントに提供します。 `[AccountID].hs-sites.com`
>
> \*\*注 \*\*:HubSpotでは、`preview.hs-sites.com`サブドメインを使用するテンプレートのプレビューはサポートされていません。
> **1つのテンプレートを複数のテーマで使用できますか?**
>
> はい。1つのテンプレートを複数のテンプレートで使用できます。複数のテーマで1つのテンプレートを使用できる最も代表的な例は、プロバイダーが同じテーマのStarterとPremiumの2つのバージョンを提供している場合です。
> **テーマまたはモジュールに変更を加えた場合、再提出する必要がありますか?**
>
> はい。テーマまたはモジュールに対する全ての変更は、品質チームによる事前検証と承認を受けるために、マーケットプレイスに再提出する必要があります。変更が承認されると、マーケットプレイスでお客さま向けに掲載情報とテンプレートが更新されます。
> **テーマまたはモジュールの価格を調整するには、どうすればよいですか?**
>
> 提出済み製品の価格を調整するには、更新された情報と共にマーケットプレイスに再提出する必要があります。テンプレートの公開後は、無料から有料へ、または有料から無料への価格変更はできません。
> **マーケットプレイスの支払いを受け取るにはどうすればよいですか?**
>
> 支払いは、マーケットプレイスプロバイダープロファイルで接続している支払い方法を通じて受け取ります。HubSpotアカウントで、[マーケットプレイス]>[プロバイダー情報]に移動します。[お支払い情報]セクションで、支払い情報を確認し、必要に応じて更新します。
>
> HubSpotは取引手数料を頂いていません。全ての取引はHubSpotプラットフォームとは関係なく処理されます。
> **他のユーザーからフィードバックを得たり、他のマーケットプレイスプロバイダーと交流したりするには、どこにアクセスすればよいですか?**
>
> [https://developers.hubspot.com/slack](https://developers.hubspot.com/community)に登録して、HubSpotの開発者Slackの#marketplaceチャンネルに参加し てください。
> **顧客が払い戻しを申請した場合、ダウンロードされたファイルはHubSpotアカウントに残りますか?**
>
> 払い戻しが開始されると、テンプレートに関連付けられている全てのファイル、および依存項目(テンプレート、複製されたテンプレート、モジュールなど)も削除されます。
> **開発者向けの最新の要件や変更点を常に把握するには、どうすればよいですか?**
>
> 変更に関する最新情報を把握するには、[HubSpot Developer Changelog(HubSpot開発者変更ログ)](https://developers.hubspot.com/changelog)にアクセスして、配信にご登録ください。
# HubSpotテンプレートマーケットプレイスポリシー
Source: https://developers.hubspot.jp/docs/cms/marketplace/template-policies
# HubSpotテンプレートマーケットプレイスでのテーマの要件
Source: https://developers.hubspot.jp/docs/cms/marketplace/theme-requirements
アセットマーケットプレイスにテーマを提出する際に満たす必要がある要件について説明します。
'アセットマーケットプレイスにテーマを提出する際に満たす必要がある要件について説明します。';
HubSpotテンプレートマーケットプレイスへの提出のために、テーマが満たす必要のある要件について、詳しくご確認ください。
テーマ作成の取り組みを始めたばかりの場合は、HubSpotの無料のCMSテーマボイラープレートを利用することを強くお勧めします。このテンプレートは、HubSpotの[Gitリポジトリー](https://github.com/HubSpot/cms-theme-boilerplate)からダウンロードすることも、[アカウントのデザインマネージャーUI内でインポート](https://www.youtube.com)することもできます。
また、テンプレートをHubSpotテンプレートマーケットプレイスに提出する際は、[テンプレート掲載ページの要件](https://developers.hubspot.com/docs)をご確認ください。
## テーマの制限
テーマごとに以下の制限が適用されます。
* 無料の**CMS Hub**アカウントでは、サイト検索、CTA機能、ネイティブHubSpot動画を使用できません。**CMS Hub**サブスクリプションでご利用可能な機能の詳細については、[HubSpot製品・サービスカタログ](https://legal.hubspot.com/hubspot-product-and-services-catalog)をご覧ください。
* テーマに含めるコンポーネントの数の上限は次のとおりです。
* 50件のテンプレート[(最小ページが必要)](#templates-css%2C-sections%2C-page-templates%2C-etc.)
* 50モジュール(最小5件)
* 50セクション(最小5個)
* テーマに次のコンポーネントを含めることは**できません**。
* Eメールテンプレート
* HubDB機能
* サーバーレス関数
* CRMオブジェクトフィールド
* [テンプレート内のフレキシブルカラム](https://developers.hubspot.com/docs#flexible-columns)
**モジュールとセクション**
セクションは、コンテンツ制作者がページ上の全幅ドロップゾーンにのみドロップできるため、開発者が質の高い最終製品を保証するのに役立ちます。
特に固定レイアウトセクションは、コンテンツ制作者がセクション内の要素を移動できないため、ドラッグ&ドロップエディターでは実現できないクリエイティブな書式設定やレイアウトを提供するための優れたツールとなります。
セクションには、コンテンツ制作者にとっての使いやすさというメリットもあります。セクション内で個々のモジュールを選択できるため、モジュールフォームが短くなり、編集中の要素に絞って設定できるようになります。
## 全体的なテーマの要件
* 提出される全てのテーマは、明確に区別できるオリジナルのものでなければなりません。例えば、コピーやプレースホルダーの内容が異なるだけのテーマは、別のテーマとは見なされません。詳細は[HubSpotテンプレートマーケットプレイスのコンプライアンス](https://developers.hubspot.com/docs#template-marketplace-compliance)をご確認ください。
* テーマの作成には、HTMLおよびHubLテンプレートと、[dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas)タグを使用する必要があります。
* テーマは、12列グリッドに準拠する必要があります。
### テーマファイルの構造
全てのテーマは、適切なフォルダー構造を持ち、製品掲載情報を表す単一の親フォルダーにまとめられている必要があります。例えば、マーケットプレイス用に「SuperAwesome」というテーマを作成する場合は、以下の図のような構造になります。詳細は[テーマファイルの構造](https://developers.hubspot.com/docs#theme-file-structure)をご確認ください。


### テンプレートの相対ローカルファイルパス
テーマアセットを参照する際には、相対ローカルファイルパスを使用する必要があります。相対パスを含める際の最善の方法は、[get\_asset\_url関数](/docs/cms/reference/hubl/functions#get-asset-url)を使用することです。この関数は、アセット、ファイル、テンプレートの公開URLを返します。また、**ファイル**を右クリックして**公開URLをコピー**を選択するか、**アクション**をクリックして**公開URLをコピー**を選択することで、[この関数を生成](/docs/cms/reference/hubl/functions#get-asset-url)することもできます。
例えば、`require_css`と`get_asset_url`で参照されるスタイルシートを次のように書式設定する必要があります。
**入力**
```hubl theme={null}
{{require_css(get_asset_url('../../css/main.css')) }}
```
**出力**
```html theme={null}
//cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css
```
以下の動画で、開発者アカウント内のファイルとマーケットプレイスの顧客に配信されるファイルとのファイル構造の違いをご確認ください。
## テーマのパフォーマンス
Google Lighthouseを使用する場合は、テーマのスコアが次のしきい値を上回る必要があります。
* **デスクトップのアクセシビリティー**: 65
* **デスクトップのベストプラクティス**: 80
* **デスクトップのパフォーマンス**: 70
* **モバイルのパフォーマンス**: 40
詳しくは[CLIを使用してテーマのGoogle Lighthouseレポートを生成する方法](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)をご確認ください。
* テーマファイルはミニフィケーション可能でなければなりません。
* 全ての画像ファイルはサイズが1MB未満である必要があります。
* 全ての画像タグは`alt`属性を持つ必要があります(値`""`は使用可能です)。
* 全ての画像タグは`loading`属性を持つ必要があります(値`""`は使用可能です)。
### テーマのプレビューURL
プレビューURLを作成する場合は、独自のドメイン名を使用する必要があります。次のような構造を持つHubSpot提供のドメインを使用することはできません:`[AccountID].hs-sites.com`
デモサイトの画像ではなく、公開中のウェブサイトを使用する必要があります。
ライブデモにアクセスできなくなった場合、HubSpotはプロバイダーに通知した上で、再びアクセスできるようになるまでテーマの掲載を停止または削除する権利を留保します。
## jQueryの使用
jQueryは、お客さまのHubSpotアカウントで[デフォルトでは有効になっていません](https://knowledge.hubspot.com/ja/website-pages/include-jquery-across-your-hubspot-pages)。テーマがjQueryに依存している場合は、テーマが想定通りに機能するように、jQueryのバージョンを含める必要があります。
例えば、jQueryを必要とするモジュールを組み込むが、サイトの他の部分ではJQueryが不要な場合、次のコードを使ってjQueryを読み込む必要があります。
```hubl theme={null}
{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
{{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}
```
## テーマ構成(teme.json)
`theme.json`ファイルには、次のパラメーターを含める必要があります。
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
`theme.json`ファイルをチェックして、次のことを確認してください。
* ラベル名が、テーマ掲載情報での名前と一致していること。
* HubSpotの無料のCMSテーマボイラープレートを使用している場合は、ボイラープレートの値が存在していないこと。これには、作成者情報、ドキュメントURL、サンプルURLなどが含まれます。
* ドキュメントURLが解決され、このURLにテーマの使い方に関するドキュメントが用意されていること。
* プレビューパスがテーマ内の有効なファイルを指していること。
* スクリーンショットパスが有効なファイルを指していて、テーマに関連していること。
* サンプルURLが正しく解決され、テーマのデモページが表示されること。サンプルURLで`preview.hs-sites.com`サブドメインや`[AccountID].hs-sites.com`サブドメインが使用されていないこと。
詳細は[Theme.jsonのパラメーター](https://developers.hubspot.com/docs#theme-json)をご確認ください。
## テーマ設定(fields.json)
`fields.json`ファイルは、テーマエディターで利用可能なフィールドとフィールドグループ(スタイルフィールドを含む)を制御します。含めるフィールドは、ページエディターでの制作担当者による制御をどの程度可能にするかに応じて異なります。
* `fields.json`ファイルに少なくとも3つの色フィールドが含まれている必要があります。
* テーマと独立したモジュールの互換性を確保するには、テーマにフォントおよび色の標準命名規則として、`primary_color`、`secondary_color`、`heading_font`、`body_font`を含める必要があります。詳細は[モジュールとテーマの互換性](https://developers.hubspot.com/docs#module-compatibility-with-themes)をご確認ください。
テーマフィールドに`primary_color`、`secondary_color`、`heading_font`、`body_font`フィールドがない場合は、`alternate_names`フィールドを使用できます。
詳細は、[fields.jsonのパラメーター](https://developers.hubspot.com/docs#fields-json)と、HubSpot CMSボイラープレートの[サンプルfields.jsonファイル](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json)をご確認ください。
テーマ設定には次の要件も適用されます。
* エディタースタイルまたはモジュールを通じて設定されたスタイルと競合しないこと。例えば、CSSスタイルシートでは`!important`を使用しないでください。このプロパティーを使用すると、エンドユーザーによる上書きが困難になり、競合の原因となる可能性があります。
* コンテンツ制作者が更新内容を把握できるよう、テーマ設定では各設定に分かりやすい説明ラベルを使用すること。
* テーマ設定を、テーマに含まれる全てのテンプレートに適用すること(ただし、追加のスタイルに特定の用途がある場合を除きます)。例えば、テーマ設定で`h1`見出しのスタイルとサイズを変更した場合は、テーマに含まれる全ての`h1`タグにその変更を適用する必要があります。
テーマには、少なくとも次のテーマフィールドを含める**必要があります**。
**タイポグラフィーフィールド**:
* 本文テキストのフォントフィールド(`p`タグ)
* `h1`~`h6`のフォントフィールド
* ホバースタイルの設定を含むハイパーリンクの色(`a`タグ)
**フォームフィールド**:
* フォームの背景色
* フォーム境界線の色
* フォームラベルの色
* フォームフィールドの境界線の色
* フォームボタン(ボタンテキスト、背景色、ホバースタイルの設定を含む)
さらに、次の要件も適用されます。
* テーマ内のフィールドは、必要に応じて論理的にグループ化する必要があります。例えば、タイポグラフィーに関連する複数のフィールドを`Typography`グループとしてグループ化します。
* テーマフィールドには、ボタンとフォーム用の個別の色とフォントの制御設定に加えて、ヘッダーとフッター用の個別の色、ロゴ、フォントの制御設定が必要です。
* テーマ内のモジュールでロゴが使用されている場合、少なくとも1つのロゴフィールドは、アカウントの[ブランド設定](/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance)を継承する必要があります。画像フィールドを使用してロゴをレンダリングする場合、画像フィールドはブランド設定を継承する必要はありません。
## テンプレート(CSS、セクション、ページテンプレートなど)
### セクション
* 適用可能な場合は常に[セクション](https://developers.hubspot.com/docs#reusable-sections)を使用する必要があります。テーマにはそれぞれ少なくとも5個のセクションが**必要です**。
* セクションには固有の実用的なスクリーンショットが必要です。
* セクションとモジュールを冗長にしないでください。
### ページテンプレート
テーマには、少なくとも次のテンプレートタイプを含める必要があります。
* ウェブサイトページテンプレートまたはランディングページテンプレート。
* 複数のページテンプレートを含める場合、各テンプレートは別個の目的を持つ必要があります。例えばホームページ、会社概要\_\_ページ、全幅ランディングページ、右サイドバー付きランディングページなどです。
* 1つのテーマに少なくとも8個のページテンプレートを含めることをお勧めします。
* 別個のブログリストテンプレートとブログ記事テンプレート。
* **ブログリストテンプレート**: リスト形式で全てのブログ記事を表示するページ(「ブログロール」と呼ばれる)。テンプレートのタイトルは、リストページ用であることを示す必要があります。
* **ブログ記事テンプレート**: 個々のブログ記事を表示する、ブログ記事の詳細ページ。テンプレートのタイトルは、ブログ記事ページ用であることを示す必要があります。
* さらに、ブログコメント欄とブログ執筆者欄のスタイルを、テーマに合わせて設定する必要があります。
* 次のシステムページテンプレート:
* **404エラーテンプレート**: 存在しないページに訪問者がアクセスしようとしたときに表示されます。
* **500エラーテンプレート**: ウェブサイトで内部エラーが発生したときに表示されます。
* **パスワード プロンプト テンプレート**: ページがパスワードで保護されているときに表示されます。
* **サブスクリプションテンプレート**: 配信(サブスクリプション)設定ページ。このページで、Eメール受信者は配信登録するEメールの種類を管理できます。
* **サブスクリプション更新テンプレート**: Eメール受信者が配信設定を更新したときに表示される確認ページ。
* **配信登録解除バックアップテンプレート**: 配信登録を解除しようとしているEメール受信者に対し、HubSpotがそのEメールアドレスを判断できない場合に表示されるページ。
* **検索結果テンプレート**: [サイト検索](/docs/cms/start-building/building-blocks/modules/content-search)を使用したときに返される検索結果を表示します。有料の***CMS Hub***アカウントでのみご利用いただけます。
### ページテンプレートの命名
* 類似した名前のテンプレートがある場合は、それぞれの違いが分かる説明的な単語を名前に追加します。
* 大文字と小文字の一貫性を保ち、ハイフンを削除し、短縮形を使用しないようにします(例えば、「bg」を使用する代わりに「background」とスペルアウトします)。
* 会社名やテーマ名をテンプレート名に含める必要はありません。
## モジュール
テーマモジュールと個々のモジュールの要件については、[こちら](https://developers.hubspot.com/docs)で詳細をご確認ください。
## グローバルコンテンツ
### グローバルパーシャル
[グローバルパーシャル](/docs/cms/start-building/building-blocks/global-content)は、HTMLとHubLを使用して作成されたテンプレートの一種であり、ウェブサイト全体で再利用できます。典型的なパーシャルは、ウェブサイトのヘッダー、ページのサイドバー、ウェブサイトのフッターです。詳しくは[グローバルパーシャルを作成する](/docs/cms/start-building/building-blocks/global-content#creating-a-global-content-partial-template-using-local-development-tools)方法をご確認ください。
* テーマにはグローバルパーシャルが含まれている必要があります。
* グローバルパーシャルには、使用可能な[ドラッグ&ドロップエリア](https://developers.hubspot.com/docs)を含める必要があります。例えば、ドラッグ&ドロップエリアを「非表示」クラスで非表示にすることはできません。
* 使用可能なドラッグアンドドロップエリアをヘッダーとフッターに組み込む必要があります。
* また、サイト全体でグローバルに使用されるメニューについては、ユーザーがアカウント設定で作成した[HubSpotナビゲーションメニューを選択](/docs/cms/start-building/building-blocks/modules/menus-and-navigation)できるようにする必要もあります。
注:グローバルパーシャル内にグローバルモジュールを含めることは避けてください。エンドユーザーのユーザーエクスペリエンスに悪影響を及ぼす可能性があります。
## 多言語サポート
テーマは複数の言語バージョンに対応できる必要があり、対応可能な言語も明記する必要があります。グローバルヘッダー内で[言語切り替えモジュール](/docs/cms/reference/modules/default-modules#language-switcher)を追加すると、顧客が簡単に言語のオプションを見つけて目的の言語を選択できるようになります。
* 1度に表示できる言語は1つのみにしてください。例えば、UIに英語とスペイン語の両方が同時に表示されないようにしてください。
* ハードコーディングされたテキストを使用しないでください。例えば、ブログリストボタンのテキストを「続きを読む」とハードコーディングするのではなく、エンドユーザーがコードに触れずにテキストを更新できるように、フィールド内でテキストを設定します。
## モバイルおよびレスポンシブ要素
テーマでは、コンテンツの閲覧に使用されるデバイスに合わせたコンテンツの適応に対応できる必要があります。また、さまざまなデバイスで一貫して優れたユーザーエクスペリエンスを提供できるテーマである必要もあります。これに該当する要素には以下のものが含まれますが、これらに限定されません。
* メインナビゲーション
* スライダーとタブ
* 大きな画像
* 水平スクロールは使用しないようにします(意図的な場合を除く)
# モジュールとテーマのフィールド
Source: https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields
HubSpotにはさまざまなフィールドがあります。これらのフィールドを使用して、テーマやモジュールを柔軟にカスタマイズできるようになっています。
モジュールとテーマにフィールドを追加することで、コンテンツ作成者はページエディター内でページのさまざまな要素を制御できます。モジュールとテーマで使用できる全てのフィールドと使用可能なプロパティーについて、以下で説明します。
モジュールとテーマのフィールド(フィールドグループや繰り返しフィールドを含む)の実装に関しては、[モジュールとテーマのフィールドの概要ぺージ](https://developers.hubspot.jp/docs/cms/reference/fields/overview)で詳しくご確認いただけます。
## 全てのフィールドで使用されるプロパティー
全てのフィールドは、一般的なプロパティーセットを共有しています。これらはフィールドの名前、またはモジュールやテーマのフィールドを使用するコンテンツ作成者に表示されるヘルプテキストなど、一般的なフィールドです。
```json theme={null}
{
"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
"alias_mapping": {
"property_aliases_paths": {
"is_teaser_img": ["old_boolean_field_name"]
}
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `name` | 文字列 | フィールドの名前。モジュールまたはテーマにフィールドとその値を組み込むときに、これを参照します。スペースや特殊文字を含めることはできません。 | `richtext_field, date_field, etc.` |
| `label` | 文字列 | コンテンツ作成者に表示されるフィールドの説明テキスト。スペースを含めることができます。 | `Rich text field, Date field, etc.` |
| `required` | ブール値 | エディターでフィールドを空白のままにできるかどうかを設定します。`true`の場合、フィールドに値がない状態でコンテンツを公開することはできません。 | `false` |
| `locked` | ブール値 | フィールドがコンテンツエディターで編集可能かどうかを設定します。`true`の場合、フィールドはコンテンツエディターに表示されません。 | `false` |
| `type` | 文字列 | フィールドのタイプ。フィールドタイプはフィールドごとに固有で、以下の各フィールドに関する資料に記載されています。 | |
| `inline_help_text` | 文字列 | フィールドのラベルの下にインラインで表示されるテキスト(最大400文字)。フィールドを使用する際の必須情報を示すのに最適です。次のHTMLタグを含めることができます(他のタグはレンダリング時に無視されます):`a`、`b`、`br`、`em`、`i`、`p`、`small`、`strong`、`span` | |
| `help_text` | 文字列 | コンテンツ作成者へのヒントとして、カーソルを置いたときにエディターに表示されるテキスト(最大300文字)。フィールドを使用するのに必須ではない補足情報を示すのに最適です。次のHTMLタグを含めることができます(他のタグはレンダリング時に無視されます):`a`、`b`、`br`、`em`、`i`、`p`、`small`、`strong`、`span` | |
| `id` | 文字列 | HubSpotによって設定される、フィールドの一意のID。ローカル環境で開発するときにはこのIDを指定する必要はありません。 | |
| `visibility` | 配列 | フィールドの表示条件を設定します。例えば、別のチェックボックスフィールドが選択されている場合にのみ表示するようにフィールドを設定できます。詳しくは[表示](https://developers.hubspot.jp/docs/cms/reference/fields/overview#field-visibility)についてご確認ください。 | |
| `display_width` | 文字列 | デフォルトでは、フィールドはエディター内で全幅表示されます。`fields.json`ファイル内の連続する2つのフィールドが`half_width`に設定されている場合、それらのフィールドはエディター内で互いに隣接して表示されます。 | |
| `alias_mapping` | 文字列 | フィールドのエイリアス。既存のコンテンツを壊すことなく、既存のフィールド値を新しい場所にマッピングします。これは、[コンテンツ]タブから[スタイル]タブにフィールドを移動するなど、公開中のコンテンツで現在使用されているフィールドを更新する必要がある場合に役立ちます。\* \_\_ \*詳しくは、[エイリアスマッピング](/docs/cms/start-building/building-blocks/fields/alias-mapping)についてご参照ください。 | `False` |
## 位置合わせ
コンテンツ作成者が要素をコンテナー内に配置できるようにします。テキストの位置合わせを有効にするには、代わりに[テキスト位置合わせフィールド](/docs/cms/reference/fields/module-theme-fields#text-alignment)を使用します。
位置合わせフィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)でサポートされており、[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用可能です。

**JSON**
```json theme={null}
{
"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"
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | `horizontal_align`および`vertical_align`を含むオブジェクト。 | |
| `alignment_direction` | 文字列 | 水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:`HORIZONTAL` `VERTICAL` `BOTH` | `BOTH` |
**React**
```jsx theme={null}
import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | `horizontal_align`および`vertical_align`を含むオブジェクト。 | |
| `alignmentDirection` | 文字列 | 水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:`HORIZONTAL` `VERTICAL` `BOTH` | `BOTH` |
## 背景画像
このフィールドは、背景位置と背景サイズのサブフィールドを備える背景画像フィールドを提供します。背景画像フィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。
配置フィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)でサポートされており、[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用可能です。

**JSON**
```json theme={null}
{
"name": "bg_image",
"label": "Background image",
"required": false,
"type": "backgroundimage",
"default": {
"src": "https://example.com/img.png",
"background_position": "MIDDLE_CENTER",
"background_size": "cover"
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | 画像のsrc、背景位置、背景サイズを含むオブジェクト。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | 画像のsrc、背景位置、背景サイズを含むオブジェクト。 | `null` |
## ブログ
コンテンツ作成者はこのフィールドを使用してブログを選択し、開発者にブログIDを提示することができます。モジュール内でティーザーとして扱うブログの情報を呼び出す場合などに便利です。ブログIDは、ブログ関連の[HubL関数](/docs/cms/reference/hubl/functions)で使用して、[ブログ執筆者](/docs/cms/reference/hubl/functions#blog-authors)、[最近のブログ記事](/docs/cms/reference/hubl/functions#blog-recent-posts)、[特定のタグが付いた最近のブログ記事](/docs/cms/reference/hubl/functions#blog-recent-tag-posts)などの情報を取得できます。
ブログフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "blog",
"label": "Blog",
"required": false,
"locked": false,
"type": "blog",
"default": 1234567890
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | "default"またはブログID | デフォルトで選択されるブログを指定します。このパラメーターには「default」、または(ブログダッシュボードのURLで取得できる)特定のブログIDを指定できます。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | "default"またはブログID | デフォルトで選択されるブログを指定します。このパラメーターには'default'、または(ブログダッシュボードのURLで取得できる)特定のブログIDを指定できます。 | `null` |
## ブール値
このフィールドを使うと、コンテンツ作成者は機能をオンまたはオフに切り替えることができます。ブール値として可能な値は`true`または`false`のみです。グループまたはフィールドに、ブール型フィールドに基づく条件を設定することが適切なケースは少なくありません。将来的に2つの状態では足りなくなることが想定される場合は、[選択](#choice)フィールドを使用した方が、後で状態を追加する際の変更作業が軽減されます。
ブール型フィールドはテーマとモジュールの両方でサポートされます。ブール型フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。

**JSON**
```json theme={null}
{
"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
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | ブール値 | このフィールドのデフォルトの状態が`true`または`false`のどちらであるかを設定します。 | `false` |
| `display` | 文字列 | フィールドの視覚表示スタイルを選択します。`toggle`または`checkbox`として表示できます。 | `checkbox` |
**React**
```jsx theme={null}
import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | ブール値 | このフィールドのデフォルトの状態が`true`または`false`のどちらであるかを設定します。 | `false` |
| `display` | 文字列 | フィールドの視覚表示スタイルを選択します。`toggle`または`checkbox`として表示できます。 | `checkbox` |
> [!TIP]
>
> 切り替えスイッチが適しているのは、フィールドの値によって、条件付きで表示されている他のフィールドを有効化または無効化する場合です。他にも切り替えスイッチが役立つケースとしては、フィールドに基づいてモジュールのデザインが大きく変化する場合です。
>
> チェックボックスが適しているのは、小さな個別要素の表示または非表示など、モジュールの表示に大きな影響を及ぼすことがない、軽微な変化の場合です。
## 境界線
このフィールドは、コンテンツ作成者が要素の周囲に境界線を作成するためのユーザーインターフェイスを提供します。境界線フィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。
境界線フィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。境界線フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。

**JSON**
```json theme={null}
{
"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
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | ブール値 | 境界線の半径、上部、下部、左側、右側のキーを含むオブジェクト。 | `{}` |
**React**
```jsx theme={null}
import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | ブール値 | 境界線の半径、上部、下部、左側、右側のキーを含むオブジェクト。 | `{}` |
## 選択
オプションのリストから、コンテンツ作成者が1つ以上の項目を選択するためのフィールドです。`display`プロパティーを使用すると、ドロップダウンメニュー、ラジオ選択、チェックボックス、またはさまざまなボタンで表示オプションを設定できます。[選択フィールドの表示オプション](#choice-button-presets)の詳細については、以下をご参照ください。
選択フィールドはテーマとモジュールの両方でサポートされます。選択フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。

**JSON**
```json theme={null}
{
"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"
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `choices` | 配列 | 一意の内部値とそれに続くラベルという形式の、選択可能なオプションを含む配列。 | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
| `default` | 値 | 選択肢の配列の中から、デフォルトで選択される値を設定します。 | |
| `multiple` | ブール値 | 任意指定フィールド。`true`に設定すると、複数のオプションを選択できるようになります。フィールドをチェックボックスのリストまたはドロップダウンメニューとして表示するかどうかを設定するには、`display`を`checkbox`または`select`に設定します。 | `false` |
| `display` | 文字列 | 次のいずれかの値を使用して、フィールドの外観を設定します。`select`:ドロップダウンメニューをレンダリングします。`multiple`が`true`に設定されている場合、複数のオプションを選択できます。 `checkbox`:選択可能なチェックボックスのリストをレンダリングします。`multiple`が`true`に、かつ`reordering_enabled`が`false`に設定されている場合、複数のオプションを選択できます。 `radio`:ラジオボタンオプションのリストを表示します。複数のオプションを選択することはできません。 `buttons`:指定された`preset`に基づいてボタンのセットを表示します。複数のオプションを選択することはできません。 | `"select"` |
| `reordering_enabled` | ブール値 | `true`に設定すると、コンテンツ作成者がエディターでフィールドのオプションを並べ替えることができます。これを有効にするには、`multiple`も`true`に設定する必要があります。 | `false` |
| `preset` | 文字列 | `display`が`buttons`に設定されている場合に使用するボタンのプリセットを設定します。プリセットごとに、特定の値のセットに一致するように`choices`ラベルを設定する必要があります。これらの[プリセットオプション](#choice-button-presets)の詳細については、以下をご参照ください。 | |
**React**
```jsx theme={null}
import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `choices` | 配列 | 一意の内部値とそれに続くラベルという形式の、選択可能なオプションを含む配列。 | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
| `default` | 値 | 選択肢の配列の中から、デフォルトで選択される値を設定します。 | |
| `multiple` | ブール値 | 任意指定フィールド。`true`に設定すると、複数のオプションを選択できるようになります。フィールドをチェックボックスのリストまたはドロップダウンメニューとして表示するかどうかを設定するには、`display`を`checkbox`または`select`に設定します。 | `false` |
| `display` | 文字列 | 次のいずれかの値を使用して、フィールドの外観を設定します。`select`:ドロップダウンメニューをレンダリングします。`multiple`が`true`に設定されている場合、複数のオプションを選択できます。 `checkbox`:選択可能なチェックボックスのリストをレンダリングします。`multiple`が`true`に、かつ`reordering_enabled`が`false`に設定されている場合、複数のオプションを選択できます。 `radio`:ラジオボタンオプションのリストを表示します。複数のオプションを選択することはできません。 `buttons`:指定された`preset`に基づいてボタンのセットを表示します。複数のオプションを選択することはできません。 | `"select"` |
| `reorderingEnabled` | ブール値 | `true`に設定すると、コンテンツ作成者がエディターでフィールドのオプションを並べ替えることができます。これを有効にするには、`multiple`も`true`に設定する必要があります。 | `false` |
| `preset` | 文字列 | `display`が`buttons`に設定されている場合に使用するボタンのプリセットを設定します。プリセットごとに、特定の値のセットに一致するように`choices`ラベルを設定する必要があります。これらの[プリセットオプション](#choice-button-presets)の詳細については、以下をご参照ください。 | |
### 選択ボタンのプリセット
ドロップダウンメニュー、チェックボックス、またはラジオ選択の代わりにボタンを表示する選択フィールドを設定するには、以下のプリセットのいずれかを使用します。各プリセットでは、特定のオプションラベルのセットを使用でき、それを`choices`配列に含める必要があります。これらのラベルはカスタマイズできません。
```json example.json theme={null}
{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}
```
```text react.txt theme={null}
import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';
```
| プリセット | 選択ラベル | 例 |
| - | - | - |
| `case` | `none` \| `upper` \| `lower` | |

\| | `expand_icon` | `caret` | `plus` | `chevron` |

\| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` |

\| | `icon_size` | `small` | `medium` | `large` |

\| | `layout` | `cards` | `tiles` | `minimal` |

\| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` |

\| | `social_icon_size` | `small` | `medium` | `large` |

|
## 色
色フィールドを使用して、コンテンツ作成者はカラーピッカーのインターフェイスで色を指定することができます。このフィールドは無地と透明に対応します。コンテンツ作成者がモジュール内で色を調整できるようにするには、このフィールドが最適です。
一部のEメールクライアントでは不透明度ルールが適用されないため、デフォルトではEメールモジュールの色フィールドの不透明度入力が非表示になっています。`show_opacity`を`true`に設定すると、Eメールモジュールの不透明度フィールドを表示できます。
色フィールドはテーマとモジュールの両方に対応します。色フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。

**JSON**
```json theme={null}
{
"name": "bg_color",
"label": "Background color",
"required": false,
"locked": false,
"type": "color",
"default": {
"color": "#ff0000",
"opacity": 100
},
"limited_options": ["#000000", "#ffffff"]
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | デフォルトで選択される色と不透明度を設定します。 | `{ "color" : "#ffffff", "opacity" : 100 }` |
| `show_opacity` | ブール値 | 不透明度入力が表示されるかどうかを設定します。`true`:不透明度入力が表示されます。 `false`:不透明度入力が非表示になります。 未定義のままにすると、不透明度入力はEメールモジュールでは表示されませんが、他のモジュールタイプでは表示されます。 | `undefined` |
| `limited_options` | 配列 | デフォルトのカラーグリッドを非表示にし、お気に入りの色の一覧をオーバーライドする文字列の配列(「Favorites」ラベルは「Available colors」になります)。配列内の値は、任意の継承パスで16進コードまたは`color`16進値のいずれかである必要があります。 | `undefined` |
**React**
```jsx theme={null}
import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | デフォルトで選択される色と不透明度を設定します。 | `{ "color" : "#ffffff", "opacity" : 100 }` |
| `showOpacity` | ブール値 | 不透明度入力が表示されるかどうかを設定します。`true`:不透明度入力が表示されます。 `false`:不透明度入力が非表示になります。 未定義のままにすると、不透明度入力はEメールモジュールでは表示されませんが、他のモジュールタイプでは表示されます。 | `undefined` |
| `limitedOptions` | 配列 | デフォルトのカラーグリッドを非表示にし、お気に入りの色の一覧をオーバーライドする文字列の配列(「Favorites」ラベルは「Available colors」になります)。配列内の値は、任意の継承パスで16進コードまたは`color`16進値のいずれかである必要があります。 | `undefined` |
## CTA
CTA(Call-To-Action)フィールドは、表示するCTAを選択する方法をユーザーに提供します。CTAは基本的に、追跡可能なボタンまたはリンクです。コンテンツ作成者は、サイト全体で使用できる[CTAを作成](https://knowledge.hubspot.com/ja/ctas/create-calls-to-action-ctas)することができます。
CTAフィールドはモジュール内でサポートされます。CTAフィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_

**JSON**
```json theme={null}
{
"name": "cta",
"label": "CTA",
"required": false,
"locked": false,
"type": "cta",
"default": null
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | デフォルトで選択されるCTA。想定される値は、[CTAマネージャー](https://app.hubspot.com/l/ctas)でCTAを編集する際にURLに表示されるCTA IDです。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | デフォルトで選択されるCTA。想定される値は、[CTAマネージャー](https://app.hubspot.com/l/ctas)でCTAを編集する際にURLに表示されるCTA IDです。 | `null` |
## CRMオブジェクト
CRMオブジェクトフィールドは、表示するCRMオブジェクトの個別のインスタンスを選択する方法をユーザーに提供します。
`module.fieldname.properties`は、このオブジェクトインスタンスからフェッチ(取得)されたプロパティーを返します。そのため、選択したオブジェクトインスタンスのデータを取得するために`crm_object()`関数を使用する必要はありません。
`module.fieldname.id`は、オブジェクトインスタンスIDを返します。
CRMオブジェクトフィールドはモジュール内でサポートされます。CRMオブジェクトフィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_

**JSON**
```json theme={null}
{
"name": "crmobject_field",
"label": "CRM object",
"required": false,
"locked": false,
"object_type": "CONTACT",
"properties_to_fetch": [],
"type": "crmobject",
"default": {
"id": 1
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `object_type` | 文字列 | ユーザーが選択できるCRMオブジェクトのタイプ。[サポートされるCRMオブジェクトタイプ](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `properties_to_fetch` | 配列 | オブジェクトタイプに関連付けられているプロパティー名の配列(文字列の形式)。例えば`"date_of_birth"`は、コンタクトに関連付けられたプロパティーです。これを使用すると、必要な情報だけを限定的にページで利用可能にすることができます。 | |
| `default` | オブジェクト | デフォルトで選択されるオブジェクトインスタンスのIDを含むオブジェクト。コンタクトID、会社IDなど。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `objectType` | 文字列 | ユーザーが選択できるCRMオブジェクトのタイプ。[サポートされるCRMオブジェクトタイプ](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `propertiesToFetch` | 配列 | オブジェクトタイプに関連付けられているプロパティー名の配列(文字列の形式)。例えば`"date_of_birth"`は、コンタクトに関連付けられたプロパティーです。これを使用すると、必要な情報だけを限定的にページで利用可能にすることができます。 | |
| `default` | オブジェクト | デフォルトで選択されるオブジェクトインスタンスのIDを含むオブジェクト。コンタクトID、会社IDなど。 | `null` |
## CRMオブジェクトプロパティー
CRMオブジェクトのプロパティーフィールドは、指定されたオブジェクトタイプからラベルやプロパティー名などのプロパティーメタデータにアクセスするために使用します。これにより、コンテンツ作成者は、ページ上にプロパティーの詳細を表示する必要がある場合に、オブジェクトプロパティーから選択することができます。
例えば、このフィールドをカスタムのテーブルモジュールに追加して、選択されたプロパティーに基づいてテーブルの見出しを入力することができます。
CRMオブジェクトフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "crmobjectproperty_field",
"label": "CRM object property",
"required": true,
"locked": false,
"object_type": "contact",
"type": "crmobjectproperty",
"default": {
"property": "field_of_study"
}
}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `object_type` | 文字列 | ユーザーが選択できるCRMオブジェクトのタイプ。詳しくは[サポートされるCRMオブジェクトタイプ](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types)をご確認ください。 |
| `default` | オブジェクト | 表示するデフォルトのプロパティーが含まれます。 |
加えて、以下のスニペットを使用すると、他のプロパティーの詳細を返すことができます。
* `{{ module.fieldname.property }}`:プロパティーの内部名を返します。
* `{{ module.fieldname.property_definition.label }}`:プロパティーのラベルを返します。
* `{{ module.fieldname.property_definition.type }}`:プロパティータイプ(文字列など)を返します。
**React**
```jsx theme={null}
import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 |
| - | - | - |
| `objectType` | 文字列 | ユーザーが選択できるCRMオブジェクトのタイプ。詳しくは[サポートされるCRMオブジェクトタイプ](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types)をご確認ください。 |
| `default` | オブジェクト | 表示するデフォルトのプロパティーが含まれます。 |
## 日付
日付フィールドでは、日付入力用インターフェイスを提供できます。コンテンツ作成者はこのインターフェイスを使用して簡単に日付を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。
日付フィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "event_start_date",
"label": "Event Date",
"required": false,
"locked": false,
"type": "date",
"default": 1577854800000
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | タイムスタンプ | 日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, DateField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | タイムスタンプ | 日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。 | `null` |
## 日時
日時フィールドでは、日付フィールドと同じ日付インターフェイスだけでなく、時刻入力用インターフェイスも提供できます。コンテンツ作成者はこれらのインターフェイスを使用して簡単に日付と時刻を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。
日時フィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "event_start",
"label": "Event Start",
"required": false,
"locked": false,
"type": "datetime",
"default": 1577854800000
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | タイムスタンプ | 日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | タイムスタンプ | 日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。 | `null` |
## Eメールアドレス
Eメールアドレスのフィールドを実装すると、ユーザーが複数のEメールアドレスを選択できるようになります。例えばコンタクト情報の表示に、このフィールドを使用します。Eメールフィールドからは、選択されたEメールアドレスの配列が返されます。この配列をループ処理できます。
Eメールフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "emails",
"label": "Email address",
"required": false,
"locked": false,
"type": "email",
"default": null
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 配列 | Eメールアドレス文字列の配列`["bob@example.com", "dennis@example.com"]` | `null` |
**React**
```jsx theme={null}
import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 配列 | Eメールアドレス文字列の配列`["bob@example.com", "dennis@example.com"]` | `null` |
## 埋め込み
埋め込みフィールドを使用すると、ユーザーは[oEmbed対応サイト](https://oembed.com/#section7)からURLを追加したり、他のサイトから埋め込みコードを貼り付けたりできます。HubSpotでのoEmbedの使用法や使用事例については、[oEmbedのドキュメント](/docs/cms/start-building/building-blocks/fields/oembed)をご参照ください。

**JSON**
```json theme={null}
{
"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"
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `supported_source_types` | 配列 | サポートされるソースタイプ。oEmbed URL(`oembed`)、HTML埋め込みコード(`html`)、またはメディアブリッジ(`media_bridge`)のいずれか。 | `["oembed", "html"]` |
| `supported_oembed_types` | 配列 | サポートされるoEmbedタイプ(`"photo"`、`"video"`、`"link"`、`"rich"`など)。HTMLのsupported\_source\_typesには適用されません。 | `[ "photo", "video", "link", "rich" ]` |
| `supported_media_bridge_providers` | 配列 | どのメディアブリッジプロバイダーからコンテンツを選択できるかを決定するプロバイダーIDの配列。なお、[メディアブリッジプロバイダーアプリケーション](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media)のインストール時にも、このパラメーターに入力されます。 | |
| `type` | 文字列 | このパラメーターは常に`"embed"`に設定されます。 | `"embed"` |
| `default` | ディクショナリー | `"source_type"`パラメーターを含む配列。このパラメーターには、`"supported_source_types"`パラメーターで指定された文字列ベースの値のオプションのうちの1つが含まれます。 | `oembed` |
**React**
```jsx theme={null}
import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `supportedSourceTypes` | 配列 | サポートされるソースタイプ。oEmbed URL(`oembed`)、HTML埋め込みコード(`html`)、またはメディアブリッジ(`media_bridge`)のいずれか。 | `["oembed", "html"]` |
| `supportedOembedTypes` | 配列 | サポートされるoEmbedタイプ(`"photo"`、`"video"`、`"link"`、`"rich"`など)。HTMLのsupported\_source\_typesには適用されません。 | `[ "photo", "video", "link", "rich" ]` |
| `supportedMediaBridgeProviders` | 配列 | どのメディアブリッジプロバイダーからコンテンツを選択できるかを決定するプロバイダーIDの配列。なお、[メディアブリッジプロバイダーアプリケーション](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media)のインストール時にも、このパラメーターに入力されます。 | |
| `type` | 文字列 | このパラメーターは常に`"embed"`に設定されます。 | `"embed"` |
| `default` | ディクショナリー | `"source_type"`パラメーターを含む配列。このパラメーターには、`"supported_source_types"`パラメーターで指定された文字列ベースの値のオプションのうちの1つが含まれます。 | `oembed` |
## ファイル
ファイルフィールドを実装すると、ユーザーがファイルマネージャーまたはドキュメントマネージャーにファイルをアップロードできるようになります。また、これらのマネージャー内にある項目を簡単に添付できます。PDFファイルや他の形式のファイルにリンクする際に役立ちます。ページ上に画像を表示するには、画像フィールドを使用する必要があります。
ファイルフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "file_field",
"label": "File",
"required": false,
"locked": false,
"type": "file",
"picker": "file",
"default": null
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | ファイルURL。 | `null` |
| `picker` | 文字列 | 利用可能な値は、「file」、「document」、「image」です。 このパラメーターに応じて、ファイルマネージャーまたはドキュメントマネージャーにアップロードされたアセットがファイル選択画面に表示されます。 | `file` |
**React**
```jsx theme={null}
import { ModuleFields, FileField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | ファイルURL。 | `null` |
| `picker` | 文字列 | 利用可能な値は、"file"、"document"、"image"です。 このパラメーターに応じて、ファイルマネージャーまたはドキュメントマネージャーにアップロードされたアセットがファイル選択画面に表示されます。 | `file` |
## フォローアップEメール
フォローアップEメールフィールドを実装すると、フォーム送信への応答として送信するEメールをコンテンツ作成者が指定できるようになります。これは、`simple_email_campaign_id`パラメーターを介して[HubLフォームタグ](/docs/cms/reference/hubl/tags/standard-tags#form)と連携して機能します。
フォローアップEメールフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "followup_email",
"label": "Followup email",
"required": false,
"locked": false,
"type": "followupemail",
"default": null
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | EメールID | `null` |
**React**
```jsx theme={null}
import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | EメールID | `null` |
## フォント
フォントフィールドを使用すると、コンテンツ作成者は基本的なフォントスタイルを設定できます。コンテンツ作成者はサイズ、色、フォントファミリー、書式(太字、イタリック、下線付き)を選択することが可能です。リストに表示されるフォントは全て、標準的なウェブ対応フォントです。これらのフォントは[Google フォント](https://fonts.google.com/)から取得されますが、ページが読み込まれるドメインでHubSpotによって直接提供されます。
フォントフィールドはテーマとモジュールの両方でサポートされます。フォントフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。

> [!WARNING]
>
> ### 注:
>
> * フォントファミリーは、`font`および`font_set`プロパティーの組み合わせによって決まります。フォントを読み込むには、両方を含める必要があります。つまり、[フィールドを継承](https://developers.hubspot.jp/docs/cms/reference/fields/overview#inherited-fields)する場合、両方の値を継承する必要があります。
> * CSS関連のサブフィールドを`visibility`で非表示にしても、フィールドオブジェクトで返されるスタイルでそのCSSが出力されるのを防ぐことはできません。この場合も、`styles`オブジェクトに手動でCSSを含める必要があります。
**JSON**
```json theme={null}
{
"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
}
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | サイズ、サイズ設定単位、色の設定と、太字、イタリック、下線のスタイル設定を含むフォントオブジェクト。 | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
| `load_external_fonts` | ブール値 | スタイルシートまたはモジュール内のHubLによって選択または参照されたウェブフォントが、HubSpotにより自動的にページに読み込まれます。既にページにフォントが読み込まれている場合は、これをfalseに設定しておくことでフォントが二重に読み込まれるのを回避できます。 | `true` |
| `visibility` | オブジェクト | `hidden_subfields`のネストされたオブジェクトを使用して、非表示にするフォントフィールドを制御するブール値を設定できます。サブフィールドには、`font`、`size`、`bold`、`italic`、`underline`、`color`が含まれます。 | |
| `variant` | 文字列 | ウェブフォントを使用する場合の、フォントのバリエーションです。例えば、フォントの太さを700にして使用するには、これを`"700"`に設定します。フォントをイタリックの太さ400にして使用するには、これを`"400i"`に設定します。 | |
| `limited_options` | 配列 | 全てのフォントオプションのリストをオーバーライドする文字列の配列。配列内の値は、ハードコーディングされたフォント名または任意の継承パスでフォントの`name`プロパティーを使用する必要があります。例:`theme.typography.body_text.name`。 | `undefined` |
**React**
```jsx theme={null}
import { ModuleFields, FontField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | サイズ、サイズ設定単位、色の設定と、太字、イタリック、下線のスタイル設定を含むフォントオブジェクト。 | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
| `loadExternalFonts` | ブール値 | スタイルシートまたはモジュール内のHubLによって選択または参照されたウェブフォントが、HubSpotにより自動的にページに読み込まれます。既にページにフォントが読み込まれている場合は、これをfalseに設定しておくことでフォントが二重に読み込まれるのを回避できます。 | `true` |
| `visibility` | オブジェクト | `hidden_subfields`のネストされたオブジェクトを使用して、非表示にするフォントフィールドを制御するブール値を設定できます。サブフィールドには、`font`、`size`、`bold`、`italic`、`underline`、`color`が含まれます。 | |
| `variant` | 文字列 | ウェブフォントを使用する場合の、フォントのバリエーションです。例えば、フォントの太さを700にして使用するには、これを`"700"`に設定します。フォントをイタリックの太さ400にして使用するには、これを`"400i"`に設定します。 | |
| `limitedOptions` | 配列 | 全てのフォントオプションのリストをオーバーライドする文字列の配列。配列内の値は、ハードコーディングされたフォント名または任意の継承パスでフォントの`name`プロパティーを使用する必要があります。例:`theme.typography.body_text.name`。 | `undefined` |
## フォーム
フォームフィールドを実装すると、アカウント内にある特定のフォームをコンテンツ作成者が指定できるようになります。その情報に基づいて、[HubLフォームタグ](/docs/cms/reference/hubl/tags/standard-tags#form)を使用してページにフォームをレンダリングできます。
フォームフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"id": "idNumber",
"name": "form_field_name",
"display_width": null,
"label": "Form",
"required": false,
"locked": false,
"type": "form",
"disable_inline_form_editing": true,
"required_property_types": ["TICKET"],
"support_all_webinar_types": true,
"embed_versions": ["v2", "v4"],
"default": {
"response_type": "inline",
"message": "Thanks for submitting the form."
}
}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `default` | オブジェクト | フォーム送信応答の詳細を含むオブジェクト。次のパラメーターが含まれます。`response_type`:次のいずれかが可能です。`inline:`:インライン テキスト メッセージ。 `redirect`:送信後に訪問者をリダイレクトします。 `message`:フォーム送信後に表示するテキスト。 `redirect_id`:リダイレクトされるフォームの場合、これをHubSpotコンテンツIDに設定すると、フォーム送信者がHubSpotページにリダイレクトされます。 `redirect_url`リダイレクトされるフォームの場合、これを特定のURLに設定すると、フォーム送信者がページにリダイレクトされます。 |
| `disable_inline_form_editing` | 文字列 | フォームモジュール内の全てのインラインフォーム編集コントロールを非表示にするには、`disable_inline_form_editing`プロパティーを`true`に設定します。これには、フォームフィールド、送信ボタンのテキスト、データのプライバシーと同意のオプション、CAPTCHAが含まれます。 |
| `required_property_types` | 配列 | フォームフィールドのプロパティータイプに基づいて選択できるフォームを指定する配列。値には、`"CONTACT"`、`"COMPANY"`、および`"TICKET"`を使用できます。 |
| `support_all_webinar_types` | ブール値 | `true`に設定すると、より包括的なウェビナーセレクターがフォームに表示され、GoToWebinarに加えてMicrosoft Teamsウェビナーも選択可能になります。また、フォームフィールドの値が若干変更され、`gotowebinar_webinar_key`ではなく`webinar_id`と`webinar_source`が保存されます。これらの包括的なプロパティー値を`gotowebinar_webinar_key`と共に[Formタグ](/docs/cms/reference/hubl/tags/standard-tags#form)に戻す必要があります。 |
| `embed_versions` | 配列 | フォームのバージョンに基づいて選択できるフォームを指定する配列。値には、旧フォームの`"v2"`と新しいエディターフォームの`"v4"`を使用できます。 |
**React**
```jsx theme={null}
import { ModuleFields, FormField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 |
| - | - | - |
| `default` | オブジェクト | フォーム送信応答の詳細を含むオブジェクト。次のパラメーターが含まれます。`response_type`:次のいずれかが可能です。`inline:`:インライン テキスト メッセージ。 `redirect`:送信後に訪問者をリダイレクトします。 `message`:フォーム送信後に表示するテキスト。 `redirect_id`:リダイレクトされるフォームの場合、これをHubSpotコンテンツIDに設定すると、フォーム送信者がHubSpotページにリダイレクトされます。 `redirect_url`リダイレクトされるフォームの場合、これを特定のURLに設定すると、フォーム送信者がページにリダイレクトされます。 |
| `disableInlineFormEditing` | 文字列 | フォームモジュール内の全てのインラインフォーム編集コントロールを非表示にするには、`disableInlineFormEditing`プロパティーを`true`に設定します。これには、フォームフィールド、送信ボタンのテキスト、データのプライバシーと同意のオプション、CAPTCHAが含まれます。 |
| `requiredPropertyTypes` | 配列 | フォームフィールドのプロパティータイプに基づいて選択できるフォームを指定する配列。値には、`"CONTACT"`、`"COMPANY"`、および`"TICKET"`を使用できます。 |
| `supportAllWebinarTypes` | ブール値 | `true`に設定すると、より包括的なウェビナーセレクターがフォームに表示され、GoToWebinarに加えてMicrosoft Teamsウェビナーも選択可能になります。また、フォームフィールドの値が若干変更され、`gotowebinar_webinar_key`ではなく`webinar_id`と`webinar_source`が保存されます。これらの包括的なプロパティー値を`gotowebinar_webinar_key`と共に[Formタグ](/docs/cms/reference/hubl/tags/standard-tags#form)に戻す必要があります。 |
| `embedVersions` | 配列 | フォームのバージョンに基づいて選択できるフォームを指定する配列。値には、旧フォームの`"v2"`と新しいエディターフォームの`"v4"`を使用できます。 |
## グラデーション
このフィールドによって、コンテンツ作成者はグラデーションを作成および設定できます。現時点では、線形グラデーションで色の分岐点を最大5つまで指定できます。グラデーションフィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。
グラデーションフィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。グラデーションフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。

**JSON**
```json theme={null}
{
"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
}
}
}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `default` | オブジェクト | グラデーションの方向性の設定("side\_or\_corner")およびグラデーションの色の分岐点がオブジェクトの配列として含まれます。 |
**React**
```jsx theme={null}
import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 |
| - | - | - |
| `default` | オブジェクト | グラデーションの方向性の設定("side\_or\_corner")およびグラデーションの色の分岐点がオブジェクトの配列として含まれます。 |
## HubDB行
HubDB行フィールドによって、コンテンツ作成者は定義されたテーブルから個別の行(またはリピーターフィールドを使用する場合は複数行)を選択できます。このフィールドは、ユーザー定義のリスト、テーブル、リソースなどの作成に使用できます。
HubDB行フィールドはモジュール内でサポートされます。HubDB行フィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_

**JSON**
```json theme={null}
{
"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
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `table_name_or_id` | 文字列 | HubDBテーブルの名前またはID。このフィールドは必須です。 | |
| `columns_to_fetch` | 配列 | テーブルから取得する列名の配列。空白にした場合、テーブル内の全ての列が返されます。 | `[]` |
| `display_columns` | 配列 | 選択ラベルに使用する列名の配列。空白にした場合、テーブルの最初の列のみが返されます。 | `[]` |
| `display_format` | 文字列 | HubDB行セレクターで列データを表示する形式。パーセント記号と数値を使用して列を指定します。 **例**: 「%0 (%1)」は、「Column0Value (Column1Value)」と表示されます。\_ \_ | `""` |
| `default` | オブジェクト | デフォルトのHubDB行を設定するためのIDを含むオブジェクト。 | `{ "id" : null }` |
**React**
```jsx theme={null}
import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `tableNameOrId` | 文字列 | HubDBテーブルの名前またはID。このフィールドは必須です。 | |
| `columnsToFetch` | 配列 | テーブルから取得する列名の配列。空白にした場合、テーブル内の全ての列が返されます。 | `[]` |
| `displayColumns` | 配列 | 選択ラベルに使用する列名の配列。空白にした場合、テーブルの最初の列のみが返されます。 | `[]` |
| `displayFormat` | 文字列 | HubDB行セレクターで列データを表示する形式。パーセント記号と数値を使用して列を指定します。 **例**: 「%0 (%1)」は、「Column0Value (Column1Value)」と表示されます。\_ \_ | `""` |
| `default` | オブジェクト | デフォルトのHubDB行を設定するためのIDを含むオブジェクト。 | `{ "id" : null }` |
## HubDBテーブル
HubDBテーブルフィールドを使用すると、コンテンツ作成者がアカウント内の特定のHubDBを指定できるようになります。その情報に基づいて、[HubLフォームタグ](/docs/cms/reference/hubl/tags/standard-tags#form)を使用してページにフォームをレンダリングできます。このフィールドからはテーブルIDが返されます。このIDを[HubDB HubL関数](/docs/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl))で使用できます。
HubDBテーブルフィールドはモジュール内でサポートされます。HubDBテーブルフィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_

**JSON**
```json theme={null}
{
"name": "recipe_table",
"label": "Recipe Table",
"required": false,
"locked": false,
"type": "hubdbtable",
"default": 2010782
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | HubDBテーブルID | `null` |
**React**
```jsx theme={null}
import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | HubDBテーブルID | `null` |
## アイコン
アイコンフィールドでは、アイコン選択用UIを提供できます。コンテンツ作成者はこのインターフェイスを使用して簡単にアイコンをモジュールに追加できます。アイコンフィールドにはFontAwesomeアイコンがあらかじめ読み込まれます。
アイコンフィールドはモジュール内でサポートされます。アイコンフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。

**JSON**
```json theme={null}
{
"name": "icon_field",
"label": "Icon",
"required": false,
"locked": false,
"icon_set": "fontawesome-6.4.2",
"type": "icon",
"default": {
"name": "accessible-icon",
"unicode": "f368",
"type": "REGULAR"
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | アイコンオブジェクト | |
| `icon_set` | 文字列 | 使用するFontAwesomeアイコンセット。指定可能な値は以下の通りです。`fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10` | `fontawesome-5.0.10` |
**React**
```jsx theme={null}
import { ModuleFields, IconField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | アイコンオブジェクト | |
| `iconSet` | 文字列 | 使用するFontAwesomeアイコンセット。指定可能な値は以下の通りです。`fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10` | `fontawesome-5.0.10` |
## 画像
画像フィールドでは、コンテンツ作成者は簡単なインターフェイスを使用して画像をモジュールまたはテーマに追加できます。画像フィールドのファイル選択用インターフェイスには、ファイルマネージャーに保管されている画像のリストが表示されます。画像はさまざまな方法で使用および表示される可能性があることから、開発者は、コンテンツ作成者がUIで選択できるサイズ設定オプションの制限ができ、さらに[画像の遅延読み込み](/docs/cms/best-practices/testing-staging-performance/lazy-loading)の許可もできます。

画像フィールドはモジュール内でサポートされます。画像は[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。メッセージ性のない単なるイメージ画像で、[背景画像](#background-image)でもない場合は、画像フィールドをスタイルフィールドとしてのみ使用してください。これにより、[アクセシビリティー](/docs/cms/best-practices/improve-existing-sites/accessibility)のベストプラクティスに従うことができます。
**JSON**
```json theme={null}
{
"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
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | 画像サイズ、代替テキストなどのプロパティーを設定します。以下のプロパティーを含めることができます。`size_type`:画像のサイズを自動または手動のどちらで設定するか。`"auto"`:元のサイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"auto_custom_max"`:`"max_height"`および`"max_width"`プロパティーで指定された最大サイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"exact":`:`"height"`および`"width"`プロパティーで指定されたサイズを基準に、HubSpotによって画像サイズが設定されます。 `src`:デフォルトの画像のURL。画像の絶対パスにする必要があります。 `alt`:画像のデフォルトの代替テキスト。 `loading`:画像の[遅延読み込みオプション](/docs/cms/best-practices/testing-staging-performance/lazy-loading)。`"disabled"`(デフォルト)、`"eager"`、`"lazy"`のいずれかを設定できます。 | `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
| `responsive` | ブール値 | 画像がレスポンシブ対応か、それとも高さと幅が固定されるかを指定します。 | `true` |
| `show_loading` | ブール値 | 画像の[遅延読み込み](/docs/cms/best-practices/testing-staging-performance/lazy-loading)を選択するためのコントロールをページエディターに表示するかどうかを指定します。 | `false` |
**React**
```jsx theme={null}
import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | 画像サイズ、代替テキストなどのプロパティーを設定します。以下のプロパティーを含めることができます。`size_type`:画像のサイズを自動または手動のどちらで設定するか。`"auto"`:元のサイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"auto_custom_max"`:`"max_height"`および`"max_width"`プロパティーで指定された最大サイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"exact":`:`"height"`および`"width"`プロパティーで指定されたサイズを基準に、HubSpotによって画像サイズが設定されます。 `src`:デフォルトの画像のURL。画像の絶対パスにする必要があります。 `alt`:画像のデフォルトの代替テキスト。 `loading`:画像の[遅延読み込みオプション](/docs/cms/best-practices/testing-staging-performance/lazy-loading)。`"disabled"`(デフォルト)、`"eager"`、`"lazy"`のいずれかを設定できます。 | `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
| `responsive` | ブール値 | 画像がレスポンシブ対応か、それとも高さと幅が固定されるかを指定します。 | `true` |
| `showLoading` | ブール値 | 画像の[遅延読み込み](/docs/cms/best-practices/testing-staging-performance/lazy-loading)を選択するためのコントロールをページエディターに表示するかどうかを指定します。 | `false` |
## リンク
リンクフィールドでは、コンテンツ作成者がURLやEメールアドレスへのリンクを記載できるよう、簡単なインターフェイスを提供できます。外部リンクの場合、コンテンツ作成者は[外部]を選択します。Eメールリンクの場合は、[Eメールアドレス]を選択します。CMS Hubでホスティングされているコンテンツの場合、[コンテンツ]を使用して、アカウント内の全てのページとブログ記事のリスト、ファイルアセットが記載されたファイル、ブログ、またはアカウント内のブログリストを表示することができます。リンクフィールドはURLフィールドと同様ですが、主な違いとして、リンクフィールドには、[新しいウィンドウで開く]よう指示したり、[検索エンジンに追跡しない]ように指示したりするためのユーザーインターフェイスが表示されます。コンテンツ作成者にこのような制御を行わせるのが適切でない場合は、[URLフィールド](#url)を使用してください。
リンクフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "link_field",
"display_width": null,
"label": "Link",
"required": false,
"locked": false,
"supported_types": [
"EXTERNAL",
"CONTENT",
"FILE",
"EMAIL_ADDRESS",
"BLOG",
"CALL_TO_ACTION",
"PHONE_NUMBER",
"WHATSAPP_NUMBER",
"PAYMENT"
],
"show_advanced_rel_options": true,
"type": "link",
"default": {
"url": {
"content_id": null,
"type": "EXTERNAL",
"href": ""
},
"open_in_new_tab": false,
"no_follow": false
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | デフォルトのURLと「リンクを開く」動作。このオブジェクトには次のものが含まれます。次のものが含まれる1つの`url`オブジェクト`content_id`:HubSpotコンテンツにリンクする場合、そのコンテンツのID。外部コンテンツにリンクする場合は`null`に設定されます。 `type`:URLのタイプ。サポートされるタイプについては下記をご参照ください。 `href`:コンテンツのURL。HubSpotコンテンツにリンクする場合はこれを`null`に設定し、代わりに`content_id`を使用します。 | `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
| `supported_types` | 配列 | コンテンツ作成者が選択できるリンクのタイプ。コンテンツ作成者が利用しないタイプはこのリストから削除してください。有効なタイプは次の通りです。`EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT` | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` |
| `show_advanced_rel_options` | ブール値 | デフォルトでは、制作担当者は`no_follow`オプションのみを選択できます。`true`に設定すると、コンテンツ作成者は以下を選択することもできます。`sponsored`:有料広告リンクなどのスポンサー付きリンク。 `user_generated_content`:フォーラムなどの、ユーザーが生成したコンテンツ。 詳しくは[リンク属性](https://moz.com/blog/nofollow-sponsored-ugc)をご参照ください。 | `false` |
**React**
```jsx theme={null}
import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | デフォルトのURLと「リンクを開く」動作。このオブジェクトには次のものが含まれます。次のものが含まれる1つの`url`オブジェクト`content_id`:HubSpotコンテンツにリンクする場合、そのコンテンツのID。外部コンテンツにリンクする場合は`null`に設定されます。 `type`:URLのタイプ。サポートされるタイプについては下記をご参照ください。 `href`:コンテンツのURL。HubSpotコンテンツにリンクする場合はこれを`null`に設定し、代わりに`content_id`を使用します。 | `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
| `supportedTypes` | 配列 | コンテンツ作成者が選択できるリンクのタイプ。コンテンツ作成者が利用しないタイプはこのリストから削除してください。有効なタイプは次の通りです。`EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT` | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` |
| `showAdvancedRelOptions` | ブール値 | デフォルトでは、制作担当者は`no_follow`オプションのみを選択できます。`true`に設定すると、コンテンツ作成者は以下を選択することもできます。`sponsored`:有料広告リンクなどのスポンサー付きリンク。 `user_generated_content`:フォーラムなどの、ユーザーが生成したコンテンツ。 詳しくは[リンク属性](https://moz.com/blog/nofollow-sponsored-ugc)をご参照ください。 | `false` |
## ロゴ
ロゴフィールドでは、ページ内で使用するロゴ画像を指定する機能をコンテンツ作成者に提供できます。指定しない場合、デフォルトでドメインのロゴが使用されます。サイトのヘッダーやフッターに会社のロゴが表示されるようにするには、このフィールドが役立ちます。ロゴフィールドでは、[遅延読み込み](/docs/cms/best-practices/testing-staging-performance/lazy-loading)も可能です。
ロゴフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "logo",
"label": "Logo",
"required": false,
"locked": false,
"type": "logo",
"show_loading": true,
"default": {
"override_inherited_src": false,
"src": null,
"alt": null,
"loading": "lazy"
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `show_loading` | 文字列 | 画像の[遅延読み込み](/docs/cms/best-practices/testing-staging-performance/lazy-loading)を選択するためのコントロールをページエディターに表示するかどうかを決定します。 | `false` |
| `default` | オブジェクト | ロゴオブジェクト。`show_loading`が`true`に設定されている場合は、`loading`プロパティーを含めることで、画像の[遅延読み込みオプション](/docs/cms/best-practices/testing-staging-performance/lazy-loading)を設定できます。次のオプションがあります。`"disabled"`(デフォルト) `"eager"` `"lazy"` | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
**React**
```jsx theme={null}
import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `showLoading` | 文字列 | 画像の[遅延読み込み](/docs/cms/best-practices/testing-staging-performance/lazy-loading)を選択するためのコントロールをページエディターに表示するかどうかを決定します。 | `false` |
| `default` | オブジェクト | ロゴオブジェクト。`show_loading`が`true`に設定されている場合は、`loading`プロパティーを含めることで、画像の[遅延読み込みオプション](/docs/cms/best-practices/testing-staging-performance/lazy-loading)を設定できます。次のオプションがあります。`"disabled"`(デフォルト) `"eager"` `"lazy"` | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
## メニュー
メニューフィールドには、コンテンツ作成者が他のページで再利用できる[ナビゲーションメニュー](/docs/cms/start-building/building-blocks/modules/menus-and-navigation)を作成、編集、選択できるよう、簡単にインターフェイスが表示されます。メインナビゲーション、フッターナビゲーションなどの複数のページに表示されるメニューや、他の[グローバルコンテンツ](/docs/cms/start-building/building-blocks/global-content)で使用されるメニューには、このフィールドを使用すると非常に役立ちます。モジュール内にメニューをレンダリングするには、[メニュータグ](/docs/cms/reference/hubl/tags/standard-tags#menu)または[menu()関数](/docs/cms/reference/hubl/functions#menu)と併せてこのフィールドを使用します。
他のページで再利用するのに適さないメニュー(目次メニューなど)の場合は、[シンプルメニューフィールド](#simple-menu)を使用してください。
メニューフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "menu",
"label": "Menu",
"required": false,
"locked": false,
"type": "menu",
"default": 12345678911
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 整数 | メニューの[メニューID](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id)。デフォルト値の`null`の場合、ナビゲーション下のデフォルトのメニューが設定されます。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 整数 | メニューの[メニューID](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id)。デフォルト値の`null`の場合、ナビゲーション下のデフォルトのメニューが設定されます。 | `null` |
## 数値
数値フィールドには、コンテンツ作成者が数値やオプションを入力または調整できるよう、簡単なインターフェイスが表示されます。パーセンテージに基づく項目を作成する場合や、数値を入力する必要があるものには、このフィールドを使用できます。
数値フィールドはモジュール内でサポートされます。数値フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。

**JSON**
```json theme={null}
{
"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"
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 数値 | デフォルトとして使用する数値。 | `null` |
| `prefix` | 文字列 | 数値フィールドの前に追加するプレフィックス。 | |
| `suffix` | 文字列 | 数値フィールドの後に追加するサフィックス。 | |
| `placeholder` | 文字列 | フィールドにプレースホルダー値を追加します。 | |
**React**
```jsx theme={null}
import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 数値 | デフォルトとして使用する数値。 | `null` |
| `prefix` | 文字列 | 数値フィールドの前に追加するプレフィックス。 | |
| `suffix` | 文字列 | 数値フィールドの後に追加するサフィックス。 | |
| `placeholder` | 文字列 | フィールドにプレースホルダー値を追加します。 | |
> [!NOTE]
>
> サフィックスパラメーターとプレフィックスパラメーターは、コンテンツエディターでの表示を目的としたもので、フィールドの数値には影響しません。
## ページ
ページフィールドには、コンテンツ作成者がサイトのページやランディングページを選択するためのインターフェイスが表示されます。
ページフィールドから返される値は、選択したページのページIDです。このフィールドを[content\_by\_id](/docs/cms/reference/hubl/functions#content-by-id)関数または[content\_by\_ids](/docs/cms/reference/hubl/functions#content-by-ids)関数と併せて使用すると、選択したページのデータを現在のページで使用できます。
ページフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"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
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 整数 | デフォルトで選択するページのID。 | `null` |
**React**
```jsx theme={null}
import { ModuleFields, PageField } from "@hubspot/cms-components/fields";
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 整数 | デフォルトで選択するページのID。 | `null` |
## リッチテキスト
リッチテキストフィールドによって、コンテンツ作成者はWYSIWYGテキストエディターの操作感を活用できます。リッチテキストフィールドの値は、HTMLとして出力されます。コンテンツ作成者にフォーマット設定機能を使用させない場合は、[テキストフィールド](#text)を使用してください。
リッチテキストフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "description",
"label": "Description",
"required": false,
"locked": false,
"type": "richtext",
"default": null
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | 表示するコンテンツの文字列はHTMLをサポートします。注:このデフォルトのプロパティー内では`get_asset_url`[関数](/docs/cms/reference/hubl/functions#get-asset-url)を使用できません。 | `""` |
| `enabled_features` | 配列 | この項目配列を使用すると、[リッチテキストエディターのツールバー](/docs/cms/reference/fields/rich-text-editor)でコンテンツ編集者に利用可能にするオプションを設定できます。 | |
**React**
```jsx theme={null}
import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | 表示するコンテンツの文字列はHTMLをサポートします。注:このデフォルトのプロパティー内では`get_asset_url`[関数](/docs/cms/reference/hubl/functions#get-asset-url)を使用できません。 | `""` |
| `enabledFeatures` | 配列 | この項目配列を使用すると、[リッチテキストエディターのツールバー](/docs/cms/reference/fields/rich-text-editor)でコンテンツ編集者に利用可能にするオプションを設定できます。 | |
## シンプルメニュー
シンプルメニューフィールドには、コンテンツ作成者がナビゲーションメニューを作成できるよう、簡単なインターフェイスが表示されます。このフィールドで作成する[ナビゲーションメニュー](/docs/cms/start-building/building-blocks/modules/menus-and-navigation)は他のページで再利用できません。再利用可能にしなければならないメニューの場合は、[メニューフィールド](#menu)を使用してください。このフィールドは、目次メニューを非常に長いページの見出しにリンクする場合や、コンテンツへのリンクの一覧を同じページ内に表示させなければならない場合に必要となります。
シンプルメニューフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"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": []
}
]
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクトの配列 | メニューと子メニューを表すJSON構造。 | `[]` |
**React**
```jsx theme={null}
import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクトの配列 | メニューと子メニューを表すJSON構造。 | `[]` |
## 間隔
このフィールドは、コンテンツ作成者がパディングとマージンを設定するためのユーザーインターフェイス(UI)を提供します。間隔フィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。
間隔フィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。間隔フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。

**JSON**
```json theme={null}
{
"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": 57,
"units": "px"
},
"bottom": {
"value": 57,
"units": "px"
},
"left": {
"value": 57,
"units": "px"
},
"right": {
"value": 57,
"units": "px"
}
},
"margin": {
"top": {
"value": 20,
"units": "px"
},
"bottom": {
"value": 20,
"units": "px"
}
}
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | デフォルトの間隔値を設定します。`padding`および`margin`オブジェクトを含んでいます。`padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。 | `{}` |
| `limits` | オブジェクト | 間隔の`min`量と`max`量のガイドラインを設定します。`padding`オブジェクトと`margin`オブジェクトを含んでいます。`padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。 | |
**React**
```jsx theme={null}
import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | デフォルトの間隔値を設定します。`padding`および`margin`オブジェクトを含んでいます。`padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。 | `{}` |
| `limits` | オブジェクト | 間隔の`min`量と`max`量のガイドラインを設定します。`padding`オブジェクトと`margin`オブジェクトを含んでいます。`padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご確認ください。 | |
間隔フィールドを使用する場合は、次の点に注意してください。
* `min`または`max`を設定するときには`units`リストを含める必要があります。
* `units`プロパティーがサポートする単位タイプは`%`、`ch`、`em`、`ex`、`in`、`lh`、`pc`、`pt`、`px`、`Q`、`rem`、`vh`、`vmax`、`vmin`、`vw`です。
* コンテンツ作成者が全てのパディングをまとめて編集する場合、HubSpotでは最も高い`min`値と最も低い`max`値が使用されます。また、コンテンツ作成者が使用できるのは、全てのサイドで共有されている単位のみとなります。
## タグ
タグフィールドには、コンテンツ作成者用のブログ タグ ピッカーが表示されます。このタグピッカーからは、ブログタグIDが返されます。このIDを、ブログタグ関連の関数([blog\_tag\_url](/docs/cms/reference/hubl/functions#blog-tag-url)、[blog\_recent\_tag\_posts](/docs/cms/reference/hubl/functions#blog-recent-tag-posts)など)で使用できます。
タグフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"id": "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9",
"name": "blog_tag",
"label": "Blog Tag",
"required": false,
"locked": false,
"tag_value": "SLUG",
"type": "tag",
"default": null
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | タグのID。 | `null` |
| `tag_value` | 文字列 | 出力値。次のいずれかを使用できます。`ALL`:タグの名前、一意のID、URLスラッグが含まれるオブジェクト。 `ID`:タグの一意のID。 `NAME`:タグの名前。 `SLUG`:タグのURLスラッグ。 | `SLUG` |
**React**
```jsx theme={null}
import { ModuleFields, TagField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | タグのID。 | `null` |
| `tagValue` | 文字列 | 出力値。次のいずれかを使用できます。`ALL`:タグの名前、一意のID、URLスラッグが含まれるオブジェクト。 `ID`:タグの一意のID。 `NAME`:タグの名前。 `SLUG`:タグのURLスラッグ。 | `SLUG` |
## テキスト
テキストフィールドを使用して、コンテンツ作成者はリッチテキスト機能を使用せずに、単純にテキストを編集できます。初期状態のテキストフィールドは1行のフィールドとして表示されますが、実際にはテキストエリアに拡大して複数の行を使用できます。コンテンツ作成者に書式を制御させたくない場合、このフィールドを使用可能です。書式設定コントロールを提供する場合は、[リッチテキストフィールド](#rich-text)を使用してください。
テキストフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "product_name",
"label": "Product Name",
"required": false,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": ""
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | テキスト文字列。 | `""` |
**React**
```jsx theme={null}
import { ModuleFields, TextField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | 文字列 | テキスト文字列。 | `""` |
## テキストの位置合わせ
このフィールドを使用すると、コンテンツ作成者はテキストコンテンツをコンテナー内の適切な位置に配置できます。このフィールドは他のアセットの位置合わせには使用できません。[他のアセットの位置合わせ用のフィールドタイプ](#alignment)をご利用ください。
テキストの位置合わせフィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。テキストの位置合わせフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。

**JSON**
```json theme={null}
{
"name": "heading_align",
"label": "Heading alignment",
"required": false,
"type": "textalignment",
"default": {
"text_align": "LEFT"
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | `horizontal_align`および`vertical_align`を含むオブジェクト。 | |
| `alignment_direction` | 文字列 | 水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:`HORIZONTAL` `VERTICAL` `BOTH` | `BOTH` |
**React**
```jsx theme={null}
import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | `horizontal_align`および`vertical_align`を含むオブジェクト。 | |
| `alignmentDirection` | 文字列 | 水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:`HORIZONTAL` `VERTICAL` `BOTH` | `BOTH` |
## URL
URLフィールドは、リンクフィールドと同様の操作感を提供します。このフィールドには、制作担当者がリンクを追加できるよう、UIが表示されます。ただし、URLフィールドには、新しいウィンドウで開くよう指示したり、検索エンジンに追跡しないよう指示したりするためのUIは表示されません。開発者は、このフィールドで使用する値を指定できます。ユーザーが制御できるようにする場合は、代わりに[リンクフィールド](#link)を使用してください。
URLフィールドはモジュール内でサポートされます。

**JSON**
```json theme={null}
{
"name": "url",
"label": "URL",
"required": false,
"locked": false,
"supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"],
"type": "url",
"default": {
"content_id": null,
"href": "http://example.com",
"type": "EXTERNAL"
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | タイプ、href、コンテンツID(コンテンツがHubSpotのページまたは投稿である場合)を伴うURLオブジェクト。 | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` |
| `supported_types` | 配列 | このフィールド上でコンテンツ作成者が選択できるリンクタイプのリスト。コンテンツ作成者が利用しないタイプはこのリストから削除してください。次のタイプがあります。`EXTERNAL`:外部URLのテキスト入力フィールドをレンダリングします。 `CONTENT`:アカウントのウェブサイトとランディングページを含むドロップダウンメニューをレンダリングします。 `FILE`:ファイルセレクターをレンダリングします。 `EMAIL_ADDRESS`:Eメールアドレスのテキスト入力フィールドをレンダリングします。 `BLOG`:アカウントのブログ リスト ページを含むドロップダウンメニューを表示します。 `PHONE_NUMBER`:電話番号のテキスト入力フィールドをレンダリングします。番号は`+`で始まり、(国コードを除いて)7~15桁の間でなければなりません。 `WHATSAPP_NUMBER`:アカウントの[接続済みWhatsApp電話番号](https://knowledge.hubspot.com/ja/inbox/connect-whatsapp-to-the-conversations-inbox)を含むドロップダウンメニューをレンダリングします。 | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
**React**
```jsx theme={null}
import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | タイプ、href、コンテンツID(コンテンツがHubSpotのページまたは投稿である場合)を伴うURLオブジェクト。 | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` |
| `supportedTypes` | 配列 | このフィールド上でコンテンツ作成者が選択できるリンクタイプのリスト。コンテンツ作成者が利用しないタイプはこのリストから削除してください。次のタイプがあります。`EXTERNAL`:外部URLのテキスト入力フィールドをレンダリングします。 `CONTENT`:アカウントのウェブサイトとランディングページを含むドロップダウンメニューをレンダリングします。 `FILE`:ファイルセレクターをレンダリングします。 `EMAIL_ADDRESS`:Eメールアドレスのテキスト入力フィールドをレンダリングします。 `BLOG`:アカウントのブログ リスト ページを含むドロップダウンメニューを表示します。 `PHONE_NUMBER`:電話番号のテキスト入力フィールドをレンダリングします。番号は`+`で始まり、(国コードを除いて)7~15桁の間でなければなりません。 `WHATSAPP_NUMBER`:アカウントの[接続済みのWhatsApp電話番号](https://knowledge.hubspot.com/ja/inbox/connect-whatsapp-to-the-conversations-inbox)を含むドロップダウンメニューをレンダリングします。 | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
## 動画
動画フィールドは、リッチテキストフィールドを使用せずにHubSpot動画をモジュールコンテンツに追加するための場所を、コンテンツ作成者に提供します。

**JSON**
```json theme={null}
{
"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
}
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | 動画オブジェクト。`player_id`、`height`、`width`、`size_type`、`conversion_asset`、`loop_video`、`mute_by_default`、`autoplay`、`hide_control`の設定を含んでいます。 | `[]` |
| `show_advanced_options` | ブール値 | 高度なデフォルトのオプションをコンテンツ作成者に対して表示するかどうかを指定します。 | `false` |
**React**
```jsx theme={null}
import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";
```
| プロパティー | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `default` | オブジェクト | 動画オブジェクト。`player_id`、`height`、`width`、`size_type`、`conversion_asset`、`loop_video`、`mute_by_default`、`autoplay`、`hide_control`の設定を含んでいます。 | `[]` |
| `showAdvancedOptions` | ブール値 | 高度なデフォルトのオプションをコンテンツ作成者に対して表示するかどうかを指定します。 | `false` |
### conversion\_assetオブジェクトパラメーター
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `type` | 文字列 | `"FORM"`、`"CTA"`、または`""`を指定できます。 | `""` |
| `id` | 文字列 | フォームまたはCTAタイプのID | `""` |
| `position` | 文字列 | 動画の開始前または終了後にコンバージョンアセットを表示するかどうかを指定します。「PRE」または「POST」のいずれかを指定できます。 | `""` |
```
```
# モジュールとテーマのフィールドの概要
Source: https://developers.hubspot.jp/docs/cms/reference/fields/overview
HubSpotのモジュールとテーマは、制作担当者がフィールドを使用してカスタマイズできます。開発者はfields.jsonファイルを駆使してフィールドの作成と整理を行います。
[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)と[テーマ](/docs/cms/start-building/building-blocks/overview)内では、フィールドを使用して、制作担当者がモジュールとテーマのスタイルや機能をウェブサイト上で制御できます。モジュールまたはテーマを開発する場合は、`fields.json`ファイルにフィールドを組み込み、テーマエディターとコンテンツエディターに変換します。

この記事では、モジュールとテーマのフィールドのオプションを、作成および管理する方法を詳しく説明します。特定のフィールドタイプの詳細については、[モジュールとテーマのフィールドに関するリファレンスガイド](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields)をご覧ください。
## フィールドの作成と管理
[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)の`fields.json`ファイルには、[HubSpot CLI](/docs/developer-tooling/local-development/hubspot-cli/reference)を使用してローカル環境で、またはアプリ内のモジュールエディター上でフィールドを追加できます。[テーマ](/docs/cms/start-building/building-blocks/overview)にフィールドを追加するには、CLIを使用してテーマの`fields.json`ファイルをローカル環境で更新する必要があります。
### HubSpot CLI
モジュールフィールドとテーマフィールドを[ローカル環境で構築](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)する場合、モジュールまたはテーマのフォルダー内にある`fields.json`ファイル経由で編集できます。モジュールの場合、[`hs create module`](/docs/developer-tooling/local-development/hubspot-cli/reference)コマンドを使用すると、このファイルが自動作成されます。モジュールエディターで利用可能な全てのフィールドオプションは、`fields.json`ファイルで追加または編集できるプロパティーとして使用できます。これには、リピーターフィールド、グループ、条件が含まれます。ローカル編集の利点の1つとして、[gitのようなバージョン管理システムにモジュールを含め](/docs/cms/start-building/introduction/developer-environment/github-integration)やすくなることが挙げられます。
### モジュールエディター
[デザインマネージャー](/docs/cms/start-building/introduction/developer-environment/design-manager)には組み込みのモジュールエディターUIがあり、モジュールフィールドの[作成](https://knowledge.hubspot.com/ja/design-manager/create-and-edit-modules)、グループ化、[編集](https://knowledge.hubspot.com/ja/design-manager/create-and-edit-modules)に使用できます。モジュールエディターにはモジュールのプレビューがあるため、外観の確認とフィールドのテストが可能です。モジュールは何もないところでは動作しないので、必ず使用予定のテンプレートでテストし、テンプレートレベルのスタイルがモジュールにどのような影響を与えるかを確認する必要があります。なお、ロックされたフォルダーにモジュールが含まれている場合は、この方法で編集できないことに注意しましょう。

> [!WARNING]
>
> **注**: 主にローカル環境で作業し、フィールドの設定にモジュールエディターを使用する場合は、必ず変更を[fetch(フェッチ)](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch)してください。Gitのようなバージョン管理システムを使用する場合には、特に重要です。
## フィールドの横配置
デフォルトでは、コンテンツエディターでモジュールフィールドは縦方向に配置されます。ただし、`fields.json`ファイルのフィールドに`display_width`プロパティーを追加し、値を`half_width`に設定して、モジュールフィールドを横並びに配列することもできます。

`display_width`を`half_width`に設定した単一フィールドは、コンテンツエディターでは半分の幅で表示されます。`fields.json`内でこのフィールドの上または下にあるフィールドを`half_width`に設定すると、フィールドが横並びに配置されます。
```json theme={null}
// 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"
}
]
```
## フィールドグループ
フィールドが互いに関連している場合、視覚的にグループ化することが適切な場合が少なくありません。これは、モジュールとテーマの両方でサポートされているフィールドグループを作成すれば実現できます。ローカルでフィールドグループを作成するには、`fields.json`で`"group"`という`type`のオブジェクトを作成します。次に、グループ化したいフィールドを格納する`children`配列を含めます。

```json theme={null}
[
{
"id": "9c00985f-01db-ac5d-73f5-80ed6c0c7863",
"name": "my_text",
"display_width": null,
"label": "Text",
"required": true,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Add text here"
},
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"expanded": true,
"inline_help_text": "Summarize the recipe (title and description)",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
最初の`children`パラメーター内に別の`"group"`タイプのオブジェクトを追加することで、グループ内にさらにフィールドグループを作成できます。それから、上記と同じ方法でフィールドグループを構築し、`children`を使ってフィールドを格納します。フィールドグループは3レベルでネストできます。

```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"inline_help_text": "Summarize the recipe (title and description)",
"display": "inline",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
},
{
"type": "group",
"name": "secondary_group",
"label": "Secondary group",
"expanded": false,
"children": [
{
"name": "bg_color",
"label": "Background color",
"sortable": false,
"required": false,
"locked": false,
"type": "color",
"default": {
"color": "#ff0000",
"opacity": 100
}
}
]
}
]
}
]
```
#### フィールドグループの表示オプション
次のフィールドグループの表示動作をカスタマイズできます。
* **展開**: デフォルトでは、フィールドグループはエディター内で折りたたまれた状態で表示されます。ネストされたグループを含むグループはドリルダウンボタンとして表示され、独自のビューで開き、最も内側のグループには区切り線が表示されます。

* **表示タイプ**: デフォルトでは、ネストされたグループを含まないグループは、子グループの周囲に視覚的な区切り線が付いた折りたたみ可能なセクションとして表示されます。ネストされたグループを含むグループはドリルダウンボタンとして表示され、独自のビューで開き、最も内側のグループは区切り線付きで表示されます。
* **グループアイコン**: 必要に応じて、ラベルの左側に表示する「Font Awesome」アイコンを含めることができます。

```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"display": "drilldown",
"inline_help_text": "Summarize the recipe (title and description)",
"icon": {
"name": "star",
"set": "fontawesome-5.14.0",
"type": "SOLID"
},
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `display` | 文字列 | フィールドグループの表示スタイル。次のいずれかになります。`drilldown`:折りたたまれたグループに、子グループを独自のパネルで開くためのボタンが表示されます。これは、ネストされたグループを含むグループのデフォルト表示です。 `accordion`:折りたたまれたグループの下に、子グループを展開するボタンを展開可能なセクションとして表示します。これは、ネストされたグループがないグループのデフォルト表示です。 `inline`:グループと子グループをインラインで表示し、グループを折りたたむオプションはありません。 |
| `icon` | オブジェクト | ラベルの左側にアイコンを追加します。次のパラメーターがあります。`name`:Font Awesomeアイコンの識別子。 `set`:Font Awesomeの[アイコンセット](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#icon)(英語)。 `type`:アイコンのスタイル(例:`SOLID`、`REGULAR`)。 |
| `expanded` | ブール値 | フィールドグループがデフォルトで展開されるかどうかを指定します。 |
#### フィールドグループ内のフィールド値の出力
フィールドグループでは、出力するフィールド値を含むディクショナリー(辞書型)が作成されます。フィールドグループをネストした場合、ネストされたフィールドグループは外側のフィールド グループ ディクショナリー内にディクショナリーとして格納されます。このデータにアクセスするには、状況に応じてルートのテーマまたはモジュール変数からツリー内を走査する必要があります。
```html example.html theme={null}
{# printing a value from a field group `recipe_summary` is the field group,
`title` is the text field. #} {{module.recipe_summary.title}}
```
```css example.css theme={null}
/* 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 }};
}
```
#### フィールドグループの特集項目
フィールドグループが繰り返される状況では、出現するフィールドグループのうち1つ以上をキービジュアル項目として指定できます。これにより、項目を個別にスタイル設定して目立たせることができます。例えば、強調表示したいおすすめの製品を表示する製品ページで特に便利です。
フィールドグループあたりの特集項目の最大数を指定できます。その後、制作担当者はエディターで必要に応じて項目を特集項目としてマークできます。
.png)
)
フィールドグループ内で特集項目を有効にするには、フィールドグループの設定に`group_occurrence_meta`プロパティーを含めます。このプロパティーには次のプロパティーが格納されます。
* `featured_enabled`:`true`に設定すると、特集項目が有効になります。
* `featured_limit`:使用できる特集項目の最大数。
フィールドグループには`occurrence`プロパティーも含める必要があります。
```json theme={null}
// Field group example
{
"label": "Card",
"name": "card",
"type": "group",
"occurrence": {
"default": 2,
"min": 1,
"sorting_label_field": "card.title"
},
"group_occurrence_meta": {
"featured_enabled": true,
"featured_limit": 3
},
"children": [
{
"label": "Image",
"name": "image",
"type": "image",
"responsive": true,
"resizable": true,
"show_loading": true,
"default": {
"loading": "lazy"
}
},
{
"label": "Content",
"name": "text",
"type": "richtext",
"enabled_features": [
"advanced_emphasis",
"alignment",
"block",
"emoji",
"font_family",
"font_size",
"lists",
"standard_emphasis"
],
"default": "This is a title Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
}
],
"default": [
{
"image": {
"loading": "lazy"
},
"text": "This is a title Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
},
{
"image": {
"loading": "lazy"
},
"text": "This is a title Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
}
]
}
```
繰り返しグループ内の項目がキービジュアルであるかどうかを確認するには、`hs_meta`プロパティーを照会します。以下のコードでは、[forループ](https://developers.hubspot.jp/docs/cms/reference/hubl/loops)を使用して、特集項目に設定されているフィールドグループ項目を確認し、各項目のタイトルを`h3`ヘッダーとして表示しています。
`{{ repeated_group_item.hs_meta.occurrence.featured }}`
```hubl theme={null}
Check out this week's featured items:
{% for item in module.card %}
{% if item.hs_meta.occurrence.featured %}
{{item.title}}
{% endif %}
{% endfor %}
```
## スタイルフィールド
スタイルフィールドは、モジュールまたはテーマの`fields.json`ファイルの特殊なフィールド グループ タイプで、これによって制作担当者がモジュールやテーマのスタイルをページエディターとテーマエディター上で制御できるようになります。モジュールまたはテーマにスタイルフィールドを追加する方法を以下に示します。[スタイルフィールドの使用と整理に関するベストプラクティス](https://developers.hubspot.jp/docs/cms/best-practices/fields)をご参照ください。
### モジュールのスタイルフィールド
モジュールに追加したスタイルフィールドは、モジュール編集時のページエディターの[スタイル]タブに表示されます。

スタイルフィールドをモジュールの`fields.json`ファイルに追加する場合は、全てのフィールドを1つのスタイルグループ内に追加します。ただし、次のようにこのグループ内に複数のグループを含めることができます。
```json theme={null}
// 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"
}
}
}
}
]
}
]
```
モジュールのスタイルフィールドとして使用できるフィールドを以下に示します。各フィールドタイプについては、[モジュールとフィールドタイプのガイド](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields)をご確認ください。
* [位置合わせ](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#alignment)
* [グラデーション](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#gradient)
* [間隔](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#spacing)
* [背景画像](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#background-image)
* [境界線](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#border)
* [ブール値](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#boolean)
* [選択](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#choice)
* [数値](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#number)
* [カラー](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#color)
* [アイコン](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#icon)
* [画像](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#image)
* [フォント](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#font)
* [テキストの位置合わせ](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#text-alignment)
詳しくは[モジュールとテーマのフィールドタイプ](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields)をご覧ください。
モジュールの`fields.json`ファイル内のスタイルフィールドの例については、[CMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/card.module/fields.json)(英語)をご参照ください。
### テーマのスタイルフィールド
テーマに追加したスタイルフィールドは、テーマエディターの左のサイドバーに表示されます。

以下のように、テーマの`fields.json`ファイル内にある全てのスタイルフィールドは、テーマエディターの左のサイドバーに追加され、スタイルグループに追加する必要はありません。
```json theme={null}
// 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]"
}
}
}
]
}
]
```
テーマのスタイルフィールドとして使用できるフィールドを以下に示します。各フィールドタイプについては、[モジュールとフィールドタイプのガイド](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields)をご確認ください。
* [ブール値](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#boolean)
* [境界線](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#border)
* [選択](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#choice)
* [カラー](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#color)
* [フォント](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#font)
* [画像](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#image)
* [数値](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#number)
* [間隔](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#spacing)
詳しくは[モジュールとテーマのフィールドタイプ](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields)をご覧ください。
テーマの`fields.json`ファイル内のスタイルフィールドの例については、[CMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json)(英語)をご参照ください。
> [!WARNING]
>
> **注**: マーケットプレイスプロバイダーは、既存のモジュールの既存のコンテンツフィールドをスタイルフィールドで置き換えることはできません。`fields.json`ファイルのフィールド階層を変更すると、既存のモジュールインスタンスのデータが失われることがあります。代わりに、新しいスタイルフィールドの追加、またはフィールドを適切にグループ化した新しいリストの作成ができます。これにより、貴社の更新によって、貴社のテーマを利用している顧客のコンテンツが破損するような変更は避けられます。以前のモジュールの移行パスについては、[HubSpotアイデアフォーラム](https://community.hubspot.com/t5/HubSpot-Ideas/Create-a-path-to-make-it-possible-to-migrate-existing-fields-to/idi-p/450311#M85938)(英語)をご参照ください。
### 生成されるCSS
一部のスタイルフィールドには、フィールドの値に基づいてCSSを直接出力する仕組みがあります。これは、グラデーションなどの複雑なスタイルを制御できるフィールドの場合に特に役立ちます。次のスタイルフィールドでは、生成された`.css`プロパティーが使用されます。
* [背景画像](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#background-image)
* [境界線](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#border)
* [カラー](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#color)
* [フォント](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#font)
* [グラデーション](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#gradient)
* [間隔](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#spacing)
* [テキストの位置合わせ](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#text-alignment)
```hubl theme={null}
{% require_css %}
{% end_require_css %}
```
## リピーター
情報を形成するモジュールを作成する際には、繰り返し使用される情報があります。例えば、レシピモジュールに「材料」のフィールドがあるとします。ほとんどのレシピの材料は1つにとどまりません。リッチ テキスト フィールドを利用した場合、スタイルの一貫性を確保したり、材料別の機能を追加したりすることはできなくなります。このような状況ではリピーターが役に立ちます。HubSpotには繰り返しフィールドと繰り返しグループという2つの形式のリピーターがあります。
### 繰り返しフィールド
繰り返しフィールドは通常のフィールドですが、制作担当者がフィールドのインスタンスを追加、削除、再配置できます。上記のレシピモジュールの例では、各材料を繰り返しテキストフィールドにできます。

これにより、制作担当者は必要な数の材料を追加できます。開発者の観点からは、ループ処理によって材料のリストを出力できる配列を使用して、必要な書式と機能を適用できます。
繰り返しフィールドは非常にシンプルな状況に最適です。一般的には、[繰り返しグループ](#repeating-groups)が適切なケースが多くあります。
> [!WARNING]
>
> **注**: 現在のところ、繰り返しフィールドでデフォルトの順序を設定することはできません。
#### Fields.json内の繰り返しフィールド
```json theme={null}
// 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での項目のループ
```html theme={null}
{% for item in module.ingredient %}
{{ item }}
{% endfor %}
```
### 繰り返しグループ
繰り返しグループは、繰り返しに対応したフィールドグループです。繰り返しグループを使用すると、制作担当者がフィールドのグループを追加、削除、再配置できるようになります。レシピモジュールの例で、材料リストをショッピングリスト機能と連携する状況を考えてみます。

ショッピングリストでは、材料の数量が重要です。数量がテキストフィールドに入力されると同時に、このモジュールがテキストフィールドを解析して、材料から数量が正常に分離されるようにする必要があります。そこで役立つのが、繰り返しグループです。こうしたフィールドの出力に対し、ループ処理を行うことができます。
#### Fields.json内の繰り返しグループ
```json theme={null}
// 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"
}
]
}
```
#### モジュール内の繰り返しフィールドのループ処理
```html theme={null}
Ingredients
{% for ingredient in module.ingredients %}
Add to cart
{{ ingredient.quantity }} {{ ingredient.measurement }} {{ ingredient.ingredient }}
{% endfor %}
```
### リピーターオプション
編集時の利便性を向上すると共に、プログラム側で未対応の値が入力できないように、繰り返しフィールドや繰り返しグループには、制作担当者による追加可能項目数の最小値と最大値を設定できます。
繰り返しグループでは、リピーターを表示するときに、その項目のラベルとして機能するフィールドを設定することもできます。

```json theme={null}
"occurrence" : {
"min" : 1,
"max" : 4,
"sorting_label_field" : "ingredients.ingredient",
}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `max` | 整数 | このグループの最大出現回数。制作担当者がUIにこの数以上のアイテムを追加できないようにします。 | `null` |
| `min` | 整数 | このフィールドグループの最小出現数。UIに表示されるアイテムがこの数より少なくなるのを防ぎます。 | `null` |
| `sorting_label_field` | 文字列 | ドラッグ操作可能なカード上のUIに表示するテキストを取得できるフィールドのIDです。デフォルト値は、グループ内の最初のフィールドです。 | |
## 継承フィールド
`inherited_value`プロパティーは、他のフィールドからデフォルト値を継承するようにフィールドを設定できます。フィールドのデフォルト値全体を別のフィールド値から設定するには、`default_value_path`にターゲットフィールドのフィールド名パスを指定します。`default_value_path`を設定すると、フィールドに設定された`default`は全て無視されます。
他のフィールドの値にアクセスするには、モジュールのHubLコードでのアクセスと同様に、パスの先頭に`module.`を含める必要があります。
```json theme={null}
// 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_paths" : {
"font": "module.body_font.font",
"font_set": "module.body_font.font_set"
}
}
}
```
> [!NOTE]
>
> フォントファミリーは`font`と`font_set`の組み合わせによって決まるため、フォントフィールドの継承にはこの両方を含める必要があります。詳しくは[フォントフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88)をご確認ください。
複雑なフィールド(値がオブジェクトのフィールド)の場合、ユーザーは`property_value_path`に継承するプロパティーを細かく指定できます。`inherited_value`で参照されるパスにも、複雑なフィールドのフィールド値からのキーを含めることができます。
例えば、色フィールドには、色自体と不透明度を含むオブジェクト値があります。そのため、不透明度なしで色自体の値を取得するには、パスの末尾に`.color`を指定します。例えばフォントフィールドは、個別の色フィールドから色だけを継承できます。
```json theme={null}
// 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`の効果を組み合わせて、あるフィールドからデフォルト値を継承しながら、別のフィールドから特定のプロパティー値を継承することもできます。
```json theme={null}
// combining 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`パラメーターを使用してフィールド内の特定のプロパティーを基準に設定することもできます。また、個々のフィールドに表示条件を適用したり、フィールドのグループに表示条件を適用して、そのグループ内の全ての要素の表示条件を管理したりすることもできます。
```json theme={null}
"visibility" : {
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"property": "src",
"operator" : "EQUAL"
}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `controlling_field_path` | 文字列 | 表示条件を制御するフィールドのパス。フィールドがフィールドグループ内にネストされていない場合は、フィールドの名前(つまり`field_name`)を使用します。 グループ内にネストされたフィールドの場合、パスはピリオドで区切られたグループ化構造と一致する必要があります。例:`field_group_name.field_name` `parent_group.child_group.field_name` |
| `controlling_value_regex` | 文字列 | フィールドを表示するために存在する必要がある制御フィールドの正規表現。正規表現は(部分文字列ではなく)文字列全体に一致する必要があり、大文字と小文字も区別されます。 |
| `operator` | 文字列 | `controlling_value_regex`値との一致方法を定義する演算子。次のいずれかの演算子を使用できます。`NOT_EQUAL` `EQUAL` `EMPTY` `NOT_EMPTY` `MATCHES_REGEX` |
| `property` | 文字列 | 文字列ターゲットフィールドの特定のプロパティーに基づいて表示条件を設定します。例えば、画像フィールドの`src`プロパティーが特定の値と等しい場合に、このフィールドが表示されるようにできます。デフォルトでは、このフィールドに値が指定されていない場合、表示条件は文字列に変換された`controlling_value_regex`値に基づくことになります。 |
`visibility`オブジェクト内に`occurrence_options`オブジェクトを含めると、繰り返されるフィールドの値数をターゲットにすることもできます。このオブジェクトには、比較する`count`と`operator`の定義を含める必要があります。例えば、別の繰り返しフィールドに少なくとも2つの項目がある場合にのみテキストフィールドを表示するには、`visibility`を次のように定義します。
```json theme={null}
[
{
"type": "group",
"name": "ingredients",
"label": "Recipe ingredients",
"display": "drilldown",
"children": [
{
"name": "ingredient",
"label": "Ingredient",
"occurrence": {
"min": 1,
"max": null,
"default": 1
},
"type": "text",
"default": ["1 cup water"]
},
{
"type": "text",
"label": "Conditional field",
"name": "conditional_field",
"visibility": {
"controlling_field_path": "ingredients.ingredient",
"occurrence_options": {
"count": 2,
"operator": "GREATER_THAN_OR_EQUAL"
}
}
}
]
}
]
```
次のいずれかの`operater`の値を使用できます。
* `"NOT_EQUAL"`
* `"EQUAL"`
* `"EMPTY"`
* `"NOT_EMPTY"`
* `"GREATER_THAN"`
* `"GREATER_THAN_OR_EQUAL"`
* `"LESS_THAN"`
* `"LESS_THAN_OR_EQUAL"`
### 高度な可視性
`visibility`属性で同時に複数の条件をサポートすることはできません。複数の演算子を使用して複数の条件を追加し、演算の順序も指定するには、`advanced_visibility`を使用します。
```json theme={null}
"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"
}]
}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `visibility_rules` | 文字列 | デフォルトでは、このパラメーターの値は`SIMPLE`に設定されます。`advanced_visibility`を使用する場合は、`ADVANCED`に設定します。 |
| `boolean_operator` | 文字列 | 条件付き基準のブール演算子。`AND`または`OR`のいずれかにできます。 |
| `criteria` | 配列 | フィールドを表示するために一致する必要がある条件付き基準を定義する、visibilityオブジェクトからなる配列。 |
| `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`を使用する場合は、正規表現の構文が必要です。 |
一例として、以下に[デフォルトの支払いモジュール](https://developers.hubspot.jp/docs/cms/reference/modules/default-modules)の最初の部分を記載します。完全なコードを確認するには、HubSpotでこのモジュールを複製してからローカル環境にダウンロードして、モジュールの`fields.json`ファイルを表示してください。
```json theme={null}
[
{
"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が表示されます。

支払いリンクを選択すると、上記のUIの後に続いて3つのフィールド(`checkout_location`、`button_text`、`icon`)が表示されます。このようになるのは、`payment`フィールドによって制御され、paymentフィールドの`id`パラメーターのID値を必要とする`visibility`属性が、これらのフィールドに設定されているためです。
`icon`フィールド自体は`advanced_visibility`を使用しており、`payment`フィールドに支払いリンクが存在し、かつ、`add_icon`チェックボックスがオンにされている場合にのみ表示されます。
`fields.json`内で可視性を設定するだけでなく、デザインマネージャーでフィールドの「表示条件」オプションを編集して可視性を設定することもできます。

デザインマネージャーで表示条件を設定した後は、[CLIを使用](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch)してこのモジュールを[フェッチ](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)し、モジュールの`fields.json`ファイル内で`visibility`属性を確認できます。
## 条件付きフィールドの無効化
フィールドに条件を追加して、指定された条件が満たされたときに編集不可にすることができます。フィールドを無効にした場合、コンテンツエディターでコンテキストを提供するために、フィールドの上に表示するメッセージを設定することもできます。

条件とメッセージは、フィールドの`disabled_controls`オブジェクトで設定されます。フィールドを編集可能にするための条件は、`rules`オブジェクト内で設定され、[advanced\_visibility](#field-visibility)と同じ形式に従います。
以下のコードは、`rules`基準の単純な実装と高度な実装の両方を示しています。
* `simple_page`フィールドには、`text_field`が`testing`に設定されている場合にフィールドを無効にするロジックが含まれています。
* `fancy_page`フィールドには、`text_field`または`text_field_2`のいずれかがそれぞれ`testing`と`testing2`に等しくない値に設定されている場合にフィールドを無効にするロジックが含まれています。
```json theme={null}
// 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"
}
]
}
}
}
]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `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セレクターが含まれる、ハイライト表示する対象のスタイルフィールドごとに、次の形式を使用して配列を含めます。
```json theme={null}
// editor-preview.json
{
"selectors": {
"theme.settings.path.1": [ ],
"theme.settings.path.2": [ ],
}
}
```
例えば、以下のコードは、プライマリー フォント フィールドによって制御されるページ要素をハイライト表示します。完全な例については、デフォルトのGrowthテーマの`editor-preview.json`ファイルでご確認ください。
```json theme={null}
// 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"
]
}
}
```

このファイルを作成するには、まず、次の[CLIコマンド](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting)を実行してファイルを生成します。ファイルの生成中にスクリプトが実行されて、初期フィールド セレクター マッピングが設定されます。
```shell theme={null}
hs theme generate-selectors
```
| パラメーター | 説明 |
| - | - |
| `theme-directory-path` | テーマディレクトリーへのパス。 |
このコマンドを実行した後、`editor-preview.json`ファイルを確認し、フィールドとセレクターが適切にマッピングされるように調整する必要があります。[Generate-selectors](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting)コマンドでは、どのフィールドがどのセレクターに影響するかについて基本的な推測が行われるだけなので、テーマがどのように作成されているかに基づいて修正する必要があります。例えばこのコマンドでは、モジュールがスタイル設定をオーバーライドしていたり、マクロが使用されたりしていても検出できません。
設定されているマッピングをテストするには、テーマをアカウントにアップロードし、そのアカウント内でテーマエディターを表示します([設定]>[ウェブサイト]>[テーマ]>[テーマを表示])。
# リッチ テキスト エディターの設定
Source: https://developers.hubspot.jp/docs/cms/reference/fields/rich-text-editor
カスタムモジュール内のリッチ テキスト エディターの機能として、設定ツールバーのコンポーネントを開発者が削除できる機能が用意されました。
開発者の方なら、WYSIWYGエディターの機能によっては使い方を誤ると、ブランドの一貫性を確保できなくなり、コンテンツのデザインとフローに影響が生じたという経験があるはずです。カスタムモジュール内のリッチ テキスト エディターの機能として、fields.jsonファイルの中の`enabled_features`プロパティーを使用して、設定ツールバーのコンポーネントを開発者が削除できる機能が用意されました。
> [!WARNING]
>
> 注:以下は、ローカル開発においてリッチ テキスト フィールドを使用するカスタムモジュールにのみ該当します。この機能を使用しても、リッチ テキスト エディターから削除されたオプションの機能が無効になることはなく、オプションが表示されなくなるだけです。既存のコンテンツが影響を受けないように下位互換性を維持することが目的です。
## enabled\_featuresを使用する方法
リッチ テキスト フィールド オブジェクトを使用しているfields.jsonファイルの中で、以下のように、有効なツールバーオプションを`enabled_features`プロパティーの配列に追加することにより、特定の機能を有効化できます。
```json theme={null}
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
"name": "description",
"label": "Description",
"required": false,
"locked": false,
"type": "richtext",
"default": null,
"enabled_features": ["bold", "link", "image"]
}
```
これにより制作担当者には、以下の画像のように、追加されたオプションのみが有効化された状態でリッチ テキスト エディターが表示されます。
> [!NOTE]
>
> 注:エディターの既定のスタイルに戻す[スタイルをクリア]ボタンなど、一部の機能は常に有効で、削除はできません。`enabled_features`プロパティーを省略すると、全ての機能が表示されます。

## 機能リスト
以下に、`enabled_features`プロパティーを使用する場合に、個別に有効化できる機能を示します。
### コントロールのグループ
| オプション | Description |
| - | - |
| `colors` | テキスト色と背景色のコントロール。 |
| `fonts` | フォントファミリーとフォントサイズのコントロール。 |
| `indents` | アウトデントとインデントのコントロール。 |
| `lists` | 箇条書きと番号リストのコントロール。 |
| `standard_emphasis` | 太字、イタリック、下線のコントロール。 |
| `advanced_emphasis` | 打ち消し線、上付き文字、下付き文字、コード書式設定のコントロール。 |
| `glyphs` | 絵文字、特殊文字、アイコンのコントロール。 |
### テキスト書式設定
| オプション | Description |
| - | - |
| `block` | スタイル切り替えのドロップダウンメニューを表示します。 |
| `font_family` | フォント切り替えのドロップダウンメニューを表示します。 |
| `font_size` | フォントサイズのドロップダウンメニューを表示します。 |
| `bold` | 太字ボタンを表示します。 |
| `italic` | イタリックのボタンを表示します。 |
| `underline` | 下線ボタンを表示します。 |
| `text_color` | テキスト色ボタンを表示します。 |
| `background_color` | 背景色ボタンを表示します。 |
| `alignment` | 位置合わせボタンを表示します。 |
| `bulleted_list` | 箇条書きリストボタンを表示します。 |
| `numbered_list` | 番号リストボタンを表示します。 |
| `lineheight` | 行の高さボタンを表示します。 |
| `outdent` | アウトデントボタンを表示します。 |
| `indent` | インデントボタンを表示します。 |
| `strikethrough` | 取り消し線ボタンを表示します。 |
| `superscript` | 上付き文字ボタンを表示します。 |
| `subscript` | 下付き文字ボタンを表示します。 |
| `code_format` | コード書式設定ボタンを表示します。 |
### 挿入ボタン
| オプション | Description |
| - | - |
| `link` | リンクボタンを表示します。 |
| `image` | 画像ボタンを表示します。 |
| `emoji` | 絵文字ボタンを表示します。 |
| `personalize` | パーソナライズのツールバー項目を表示します。 |
| `cta` | 挿入メニューの下にCTAメニュー項目を表示します。 |
| `embed` | 挿入メニューの下に埋め込みメニュー項目を表示します。 |
| `video` | 挿入メニューの下に動画メニュー項目を表示します。 |
| `table` | 挿入メニューの下にテーブルメニュー項目を表示します。 |
| `charmap` | 挿入メニューの下に特殊文字メニュー項目を表示します。 |
| `anchor` | 挿入メニューの下にアンカーメニュー項目を表示します。 |
| `hr` | 挿入メニューの下に水平線メニュー項目を表示します。 |
| `nonbreaking_space` | 挿入メニューの下に、改行しないスペース(nbsp)のメニュー項目を表示します。 |
| `icon` | 挿入メニューの下にアイコンメニュー項目を表示します。 |
### 詳細オプション
| オプション | Description |
| - | - |
| `source_code` | 詳細メニューの下にソース コード メニュー項目を表示します。 |
| `visual_blocks` | 詳細メニューの下にブロック表示メニュー項目を表示します。 |
# HubLフィルター
Source: https://developers.hubspot.jp/docs/cms/reference/hubl/filters
HubSpotのCMS開発者向けのHubLフィルターの一覧と例。
フィルターはHubLの最終出力に影響を与えます。さまざまなHubL文と式にフィルターを適用することで、サーバーから出力されるテンプレートマークアップを変更できます。
フィルターの基本構文は`|filtername`です。フィルターは文または式のすぐ後に、区切り記号で囲んで追加します。パラメーターを括弧内に追加指定できるフィルターもあります。文字列、数値、およびブール値のパラメーターを使用するフィルターの基本構文は、`|filtername("stringParameter", 10, true)`です。文字列パラメーターについては、引用符で囲む必要があることに注意してください。また、HubLフィルターにはエイリアスが存在し、それをプライマリーフィルターと同じ目的に使用できます。
以下にて、サポートされる全てのHubLフィルターを示します。
> [!WARNING]
>
> ### 注:
>
> CMS Hub上のページやブログ記事では、コンタクトトークンや会社トークンなどの[パーソナライズトークン](https://knowledge.hubspot.com/ja/website-pages/personalize-your-content)にHubLフィルターを適用できますが、Eメールでは適用できません。
## abs
数値の絶対値を取得します。このフィルターを使用すると、常に正の数値が得られます。
```text hubl.txt theme={null}
{% set my_number = -53 %}
{{ my_number|abs }}
```
```text レンダリングされる出力.txt theme={null}
53
```
## add
1つの数値を別の数値に加算します。このフィルターは[+演算子](/docs/cms/reference/hubl/operators-and-expression-tests#math)と同じように機能します。括弧内のパラメーターは、最初の数値に合わせる加算値です。
```text hubl.txt theme={null}
{% set my_num = 40 %}
{{ my_num|add(13) }}
```
```text 出力のレンダリング.txt theme={null}
53
```
## attr
ディクショナリー(辞書型)の属性をレンダリングします。このフィルターの機能は、`content.absolute_url`など、ディクショナリーに含まれる変数を出力する機能と同等です。
```text hubl.txt theme={null}
{{ content|attr("absolute_url") }}
```
```text 出力のレンダリング.txt theme={null}
https://developers.hubspot.com/docs/cms/hubl/filters
```
| パラメーター | 説明 |
| - | - |
| `attribute_name` | どの属性を出力するかを指定します |
## batch
1つのシーケンス内の複数項目をグループ化します。
以下の例では、フルーツの種類からなるシーケンスが変数に格納されています。`batch`フィルターは、シーケンスを反復処理するループに適用されます。入れ子ループが3回実行され、行ごとに3種類のフルーツを出力した後、外側のループが再び実行されます。フルーツが5種類しかないので、最終的な出力では最後の項目が` `(2番目のパラメーター)に置き換えられる点にご注目ください。
```html example.html theme={null}
{% set rows = ["apples", "oranges", "pears", "grapes", "blueberries"] %}
{% for row in rows|batch(3, " ") %}
{% for column in row %}
{{ column }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
apples
oranges
pears
grapes
blueberries
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `linecount` | 数値 | バッチに含める項目の数。 |
| `fill_with` | 文字列 | 項目の欠落がある場合に何で埋めるかを指定します。 |
## between\_times
指定された時間単位を使用して、2つの日時オブジェクト間の差異を計算します。
> [!WARNING]
>
> ### 注:
>
> このフィルターは、日付を返す変数でのみ使用してください。2024年9月30日以降、このフィルターはnull値が渡された場合に現在の日付を返さなくなります。この日付を過ぎると、フィルター内のnull値は2024年9月30日を返します。
```text hubl.txt theme={null}
{% set begin = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{% set end = "2018-07-20T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ begin|between_times(end, "days") }}
```
```text 出力のレンダリング.txt theme={null}
6
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `end` | 日時オブジェクト | 終了日時オブジェクト。 |
| `timeunit` | 文字列 | 有効な時間単位は、`nanos`、`micros`、`millis`、`seconds`、`minutes`、`hours`、`half_days`、`days`、`weeks`、`months`、`years`、`decades`、`centuries`、`millennia`、`eras`です。 |
## bool
テキスト文字列の値をブール値に変換します。
```text hubl.txt theme={null}
{% if "true"|bool == true %}hello world{% endif %}
```
```text 出力のレンダリング.txt theme={null}
hello world
```
## capitalize
変数値の最初の文字を大文字にします。最初の文字が大文字になり、その他の文字は全て小文字になります。スペースまたはハイフンで区切られている後続の単語について、最初の文字は大文字になりません。
```text hubl.txt theme={null}
{% set sentence = "the first letter of a sentence should always be capitalized." %}
{{ sentence|capitalize }}
```
```text 出力のレンダリング.txt theme={null}
The first letter of a sentence should always be capitalized.
```
## center
空白を使用して、指定されたフィールドの長さ内でテキストを中央に配置します。HubSpotのHTMLコンパイラーは自動的に空白を除去するので、このフィルターは推奨されず、特に役立つわけでもありませんが、包括的な説明のためにここで説明しています。
以下の例では、空白が除去されないようにpreタグ内の変数にこのフィルターを適用しています。
```html example.html theme={null}
{% set var = "string to center" %}
before{{ var|center(80) }}after
```
```html example.html theme={null}
before string to center after
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `width` | 数値 | テキストを中央揃えするための空白の長さを指定します。 |
## convert\_rgb
HEX値をRGB文字列に変換します。色変数をRGBに変換して、RGBA CSS宣言で使用する必要がある場合に便利です。以下の例では、色モジュールによって設定された値がRGB値に変換され、RGBA CSS宣言で使用されます。
```html example.html theme={null}
{% set my_color = "#FFFFFF" %}
{{ my_color|convert_rgb }}
{% set my_color2="#000000" %}
```
```html example.html theme={null}
255, 255, 255
```
## cut
値から文字列を除去します。このフィルターを使用すると、一致する特定の部分文字列を切り取ることができます。パラメーターには、削除対象となる部分文字列を指定します。以下の例では、スペースと単語「world」が元の変数値から除去されます。
```text hubl.txt theme={null}
{% set my_string = "Hello world." %}
{{ my_string|cut(" world") }}
```
```text 出力のレンダリング.txt theme={null}
Hello.
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `characters_to_cut` | 文字列 | 削除対象となる部分文字列。 |
## datetimeformat(非推奨)
> [!WARNING]
>
> ### 注:
>
> このフィルターは[非推奨](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-function)になりました。代わりに、より標準化された構文を使用する[format\_datetime](#format-datetime)フィルターを使用してください。
## default
値が未定義の場合に、最初のパラメーターを返します。それ以外の場合、変数の値が出力されます。Falseと評価される変数でdefaultを使用するには、2番目のパラメーターを`true`に設定する必要があります。
以下の1つ目の例では、変数が未定義の場合にメッセージが出力されます。2つ目の例では、未定義ではない空の文字列にフィルターを適用していますが、2番目のパラメーターが原因でメッセージが出力されます。
```text hubl.txt theme={null}
{{ my_variable|default("my_variable is not defined") }}
{{ ""|default("the string was empty", true) }}
```
```text 出力のレンダリング.txt theme={null}
my_variable is not defined the string was empty
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `default_value` | 文字列 | 変数が未定義の場合に返される値。変数が定義されている場合は、変数の値が返されます。 |
| `truthy` | ブール値 | `false`と評価される変数で使用するには、`true`に設定します。 |
## dictsort
ディクショナリー(辞書型)を並べ替えて「キー、値」のペアを生成します。ディクショナリーはデフォルトでは並べ替えられませんが、キーまたは値を基準に並べ替えてディクショナリーを出力できます。最初のパラメーターは、並べ替えで大文字と小文字を区別するかどうかを決定するブール値です。2番目のパラメーターは、キーと値のどちらを基準にディクショナリーを並べ替えるかを決定します。以下の例では、コンタクトについて確認済みの詳細情報を全て含む、並べ替えられたコンタクトディクショナリーを出力します。
```text hubl.txt theme={null}
{% for item in contact|dictsort(false, "value") %}
{{item}}
{% endfor %}
```
```text 出力のレンダリング.txt theme={null}
A sorted contact dictionary
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `case_sensitive` | ブール値 | 並べ替えの際に大文字と小文字を区別するかどうかを指定します。 |
| `sort_by` | `"key"` \| `"value"` | `key`または`value`のどちらを基準に並べ替えるかを指定します。 |
## difference
このフィルターは、2つのセットまたはリストの差異を返します。フィルターから返されるリストには、最初のリストに含まれ、2番目には含まれない一意の要素が全て格納されます。
```text hubl.txt theme={null}
{{ [1, 2, 3]|difference([2, 3, 4, 5]) }}
```
```text 出力のレンダリング.txt theme={null}
[1]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `list` | 配列 | 最初のリストとの差異を見つけるために比較する2番目のリスト。 |
## divide
現在の値を除数で割ります。渡すパラメーターは除数です。このフィルターは、/演算子の代わりになります。
```text hubl.txt theme={null}
{% set numerator = 106 %}
{{ numerator|divide(2) }}
```
```text 出力のレンダリング.txt theme={null}
53
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `divisor` | 数値 | 変数を除算するための数値。 |
## divisible
Divisibleフィルターは、`divisibleby`式評価の代わりになります。値を特定の数で割り切れる場合、trueと評価されます。
```text hubl.txt theme={null}
{% set num = 10 %}
{% if num|divisible(2) %}
The number is divisible by 2
{% endif %}
```
```text 出力のレンダリング.txt theme={null}
The number is divisible by 2
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `divisor` | 数値 | 値を割り切れるかどうかを評価するために使用する数値。 |
## escape\_html
HTML入力の内容をエスケープします。文字列を受け入れ、`&`、`<`、`>`、`‘`、`”`、および`escape_jinjava`文字をHTMLで安全に使用できるシーケンスに変換します。HTMLで使用されているものの、HTMLを許可しないHubL変数には、このフィルターを使用します。
```html example.html theme={null}
{% set escape_string = "This markup is printed as text
" %}
{{ escape_string|escape_html }}
```
```html example.html theme={null}
This markup is printed as text
```
## escape\_attr
HTML属性入力の内容をエスケープします。文字列を受け入れ、`&`、`<`、`‘`、`”`、および`escape_jinjava`文字をHTMLで安全に使用できるシーケンスに変換します。このフィルターは、HTML属性に追加されるHubL変数に使用します。
`href`など、URLを受け入れる属性の値をエスケープする場合は、代わりに`escape_url`フィルターを使用してください。
```html example.html theme={null}
{% set escape_string = "This markup is printed as text" %}
```
```html example.html theme={null}
```
## escape\_jinjava
文字列内の`{`および`}`文字を、Jinjavaで安全に使用できるシーケンスに変換します。このような文字が含まれる可能性のあるテキストをJinjavaで表示する際にこのフィルターを使用します。
```text hubl.txt theme={null}
{% set escape_string = "{{This markup is printed as text}}" %}
{{ escape_string|escape_jinjava }}
```
```text 出力のレンダリング.txt theme={null}
{{This markup is printed as text}}
```
## escape\_js
JavaScript変数宣言に文字列を安全に挿入できるように、(`escape_jinjava`を含む)文字列をエスケープ処理します。このフィルターは、HTMLスクリプト要素内で使用されるHubL変数に使用します。
```text hubl.txt theme={null}
{% set escape_string = "\tThey said 'This string can safely be inserted into JavaScript.'" %}
{{ escape_string|escape_js }}
```
```text 出力のレンダリング.txt theme={null}
\tThey said \x27This string can safely be inserted into JavaScript.\x27
```
## escape\_url
URL入力の内容をエスケープし、指定されたプロトコルを実行し、無効で危険な文字を削除し、HTMLエンティティーをエンコードします。URLが有効な場合は空の値を返します。このフィルターは、有効なURLである必要があるHTML属性内で使用されるHubL変数に使用します。
```text hubl.txt theme={null}
{% set escape_string = "http://example.com/with space/" %}
```
```text 出力のレンダリング.txt theme={null}
```
## escapejson
文字列をJSON値として使用できるように、文字列をエスケープ処理します。
```text hubl.txt theme={null}
{% set escape_string = "" %}
{% require_js position="head" %}
{% end_require_js %}
```
```text 出力のレンダリング.txt theme={null}
```
## filesizeformat
数値を判読可能なファイルサイズ(13 kB、4.1 MB、102 Bytesなど)に変更します。デフォルトでは10進プレフィックス(MBやGBなど)が使用されますが、Mebi(MiB)やGibi(GiB)などのバイナリープレフィックスを使用するには、`binary`パラメーターを`true`に設定します。
```text hubl.txt theme={null}
{% set bytes = 10000 %}
{{ bytes|filesizeformat(binary=true) }}
```
```text 出力のレンダリング.txt theme={null}
9.8 KiB
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `binary` | ブール値 | `true`に設定すると、Mebi(MiB)やGibi(GiB)などのバイナリープレフィックスが使用されます。 |
## first
シーケンス内の最初の項目を返します。
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{{ my_sequence|first }}
```
```text 出力のレンダリング.txt theme={null}
Item 1
```
## float
値を浮動小数点値に変換します。正常に変換できない場合は`0.0`を返します。このデフォルトの動作は、最初のパラメーターを使用することで変更できます。
```text hubl.txt theme={null}
{% set my_text="25" %}
{{ my_text|float + 17 }}
```
```text 出力のレンダリング.txt theme={null}
42.0
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `default` | 数値 | 正常に変換できない場合に返される整数。 |
## forceescape
厳密なHTMLエスケープを実行します。HubSpotの環境では二重にエスケープを行うケースがないため、基本的にはescapeフィルターと同じ動作をします。
```html example.html theme={null}
{% set escape_string = "This markup is printed as text
" %}
{{ escape_string|forceescape }}
```
```html example.html theme={null}
This markup is printed as text
```
## format
Python文字列の書式設定をオブジェクトに適用します。`%s`を別の変数に置換できます。
```text hubl.txt theme={null}
{{ "Hi %s %s"|format(contact.firstname, contact.lastname) }}
```
```text 出力のレンダリング.txt theme={null}
Hi Monty Python
```
## format\_currency(非推奨)
> [!WARNING]
>
> ### 注:
>
> このフィルターは[非推奨](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions)になりました。代わりに、[format\_currency\_value](#format-currency-value)フィルターを使用してください。
## format\_currency\_value
パラメーターとして渡されるポータルのデフォルトの通貨とロケールに基づき、特定の数値の書式を通貨として設定します。非推奨の[format\_currencyフィルター](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#format-currency)を置き換えるものです。
```text hubl.txt theme={null}
{{ 100 | format_currency_value(locale='en-GB', currency='EUR', maxDecimalDigits=6, minDecimalDigits=1) }}
```
```text 出力のレンダリング.txt theme={null}
€100.0
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `locale` | 文字列 | [Javaローカル言語タグ](https://www.oracle.com/java/technologies/javase/jdk8-jre8-suported-locales.html)(英語)。デフォルトはページの`locale.Format : ISO639LanguageCodeInLowercase-ISO3166CountryCodeInUppercase`です。 |
| `currency` | 文字列 | 通貨の[英字のISO 4217コード](https://en.wikipedia.org/wiki/ISO_4217)。デフォルトは、ポータルのデフォルトの通貨です。数値コードは使用できません。 |
| `minDecimalDigits` | 数値 | 出力に含める小数桁数の最小値。デフォルトで、通貨のデフォルトの小数桁数に設定されます。 |
| `maxDecimalDigits` | 数値 | 出力に含める小数桁数の最大値。デフォルトで、通貨のデフォルトの小数桁数に設定されます。 |
## format\_date
日付オブジェクトの日付コンポーネントを書式設定します。
> [!WARNING]
>
> ### 注:
>
> このフィルターは、日付を返す変数でのみ使用してください。2024年9月30日以降、このフィルターはnull値が渡された場合に現在の日付を返さなくなります。この日付を過ぎると、フィルター内のnull値は2024年9月30日を返します。
```text hubl.txt theme={null}
{{ content.publish_date | format_date('long') }}
{{ content.publish_date | format_date('yyyy.MMMM.dd') }}
{{ content.publish_date | format_date('medium', 'America/New_York', 'de-DE') }}
```
```text 出力のレンダリング.txt theme={null}
November 28, 2022 02022.November.28 28.11.2022
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| カスタムパターン | 使用する形式。[Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns)(英語)に従ったカスタムパターンを指定できます。 |
| `timeZone` | 文字列 | [IANA TZDB形式](https://data.iana.org/time-zones/tzdb/)(英語)で出力される日付のタイムゾーン。 |
| `locale` | 文字列 | ロケール対応の形式に使用するロケール。[サポートされているロケールの一覧](https://www.oracle.com/java/technologies/javase/java8locales.html)(英語)を参照してください。 |
## format\_datetime
日付オブジェクトの日付と時刻のコンポーネント両方を書式設定します。このフィルターは、非推奨になった[datetimeformat](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-filter)フィルターの後続となるものです。デフォルトでは、UTC-00:00のタイムゾーンの日時を返します。
> [!WARNING]
>
> ### 注:
>
> このフィルターは、日付を返す変数でのみ使用してください。2024年9月30日以降、このフィルターはnull値が渡された場合に現在の日付を返さなくなります。この日付を過ぎると、フィルター内のnull値は2024年9月30日を返します。
```text hubl.txt theme={null}
{{ content.publish_date | format_datetime('medium', 'America/New_York', 'de-DE') }}
```
```text 出力のレンダリング.txt theme={null}
12/31/69 7:00 PM
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| カスタムパターン | 使用する形式。[Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns)に従うカスタムパターンを指定できます。`long`または`full`を使用する場合、タイムスタンプにはZが含まれ、オフセットがゼロであるUTC時間(つまり`2:23:00 PM Z`)を示します。Z指定子を削除するには`timeZone`を指定してください。 |
| `timeZone` | 文字列 | [IANA TZDB形式](https://data.iana.org/time-zones/tzdb/)(英語)で出力される日付のタイムゾーン。デフォルトではUTC時間を返します。 |
| `locale` | 文字列 | ロケール対応の形式に使用するロケール。[サポートされているロケールの一覧](https://www.oracle.com/java/technologies/javase/java8locales.html)(英語)を参照してください。 |
## format\_number
指定されたロケールに基づいて、特定の数値の書式を設定します。小数点以下の最大精度を設定する2番目のパラメーターを含みます。
```text hubl.txt theme={null}
{{ 1000|format_number('en-US') }}
{{ 1000.333|format_number('fr') }}
{{ 1000.333|format_number('en-US', 2) }}
```
```text 出力のレンダリング.txt theme={null}
1,000
1 000,333
1,000.33
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `locale` | 文字列 | 書式設定に使用するロケール。[サポートされているロケールの一覧](https://www.oracle.com/java/technologies/javase/java8locales.html)(英語)を参照してください。 |
| `maxDecimalDigits` | 数値 | 出力に含める小数桁数の最大値。デフォルトでは、入力値の小数桁数を使用します。 |
## format\_time
日付オブジェクトの時刻コンポーネントを書式設定します。
> [!WARNING]
>
> ### 注:
>
> このフィルターは、日付を返す変数でのみ使用してください。2024年9月30日以降、このフィルターはnull値が渡された場合に現在の日付を返さなくなります。この日付を過ぎると、フィルター内のnull値は2024年9月30日を返します。
```text hubl.txt theme={null}
{{ content.updated | format_time('long') }}
{{ content.updated | format_time('hh:mm a') }}
{{ content.updated | format_time('medium', 'America/New_York', 'de-DE') }}
```
```text 出力のレンダリング.txt theme={null}
3:25:06 PM Z 03:25 PM 10:25:44
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| カスタムパターン | 使用する形式。[Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns)に従うカスタムパターンを指定できます。`long`または`full`を使用する場合、タイムスタンプにはZが含まれ、オフセットがゼロであるUTC時間(つまり`2:23:00 PM Z`)を示します。Z指定子を削除するには`timeZone`を指定してください。 |
| `timeZone` | 文字列 | [IANA TZDB形式](https://data.iana.org/time-zones/tzdb/)(英語)で出力される日付のタイムゾーン。デフォルトではUTC時間を返します。 |
| `locale` | 文字列 | ロケール対応の形式に使用するロケール。[サポートされているロケールの一覧](https://www.oracle.com/java/technologies/javase/java8locales.html)(英語)を参照してください。 |
## fromjson
JSON文字列をオブジェクトに変換します。
```text hubl.txt theme={null}
{% set obj ='{ "name":"Brian","role":"Owner" }' %}
{{ obj|fromjson }}
```
```text 出力のレンダリング.txt theme={null}
{role=Owner, name=Brian}
```
## geo\_distance
地上の2地点間の楕円2D距離を計算します。
```text hubl.txt theme={null}
{{ row.location | geo_distance(37.3435, -122.0344, "mi") }} MI
```
```text 出力のレンダリング.txt theme={null}
861.1655563461395 MI
```
## groupby
共通の属性を基準に、一連のオブジェクトをグループ化します。パラメーターで、グループ化の基準となる共通属性を設定します。
```html example.html theme={null}
{% for group in contents|groupby("blog_post_author") %}
{{ group.grouper }}
{% for content in group.list %}
{{ content.name }}
{% endfor %}
{% endfor %}
```
```text 出力のレンダリング.txt theme={null}
Blog author 1
Post by Blog author 1
Post by Blog author 1
Post by Blog author 1
Blog author 2
Post by Blog author 2
Post by Blog author 2
Post by Blog author 2
Blog author 3
Post by Blog author 3
Post by Blog author 3
Post by Blog author 3
```
| パラメーター | 説明 |
| - | - |
| `attribute` | グループ化の基準となる属性。 |
## indent
空白を使用して、指定されたフィールドの長さ内でテキストをインデントします。HubSpotのHTMLコンパイラーは自動的に空白を除去するので、このフィルターは推奨されず、特に役立つわけでもありませんが、包括的な説明のためにここで説明しています。以下の例では、空白が除去されないように``タグ内の変数に`indent`フィルターを適用しています。最初のパラメーターは空白の幅を制御し、2番目のブール値は最初の行をインデントするかどうかを切り替えます。
```html example.html theme={null}
{% set var = "string to indent" %}
{{ var|indent(2, true) }}
```
```text 出力のレンダリング.txt theme={null}
string to indent
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `width` | 数値 | 適用される空白の幅。 |
| `indent-first` | ブール値 | `true`に設定すると、最初の行がインデントされます。 |
## int
値を整数に変換します。正常に変換できない場合は`0`を返します。このデフォルトの動作は、最初のパラメーターを使用することで変更できます。
```text hubl.txt theme={null}
{% set string="25" %}
{{ string|int + 17 }}
```
```text 出力のレンダリング.txt theme={null}
42
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `default` | 数値 | 正常に変換できない場合に返される整数。 |
## intersect
2つのセットまたはリストの共通部分を返します。フィルターから返されるリストには、両方のリストに含まれる一意の要素が全て格納されます。
```text hubl.txt theme={null}
{{ [1, 2, 3]|intersect([2, 3, 4, 5]) }}
```
```text 出力のレンダリング.txt theme={null}
[2, 3]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `list` | 整列 | 最初のリストとの共通部分を見つけるために比較される2番目のリスト。 |
## ipaddr
値が有効なIPv4またはIPv6アドレスの場合には、`true`と評価されます。
```text hubl.txt theme={null}
{% set ip = "1.0.0.1" %}
{% if ip|ipaddr %}
The string is a valid IP address
{% endif %}
```
```text 出力のレンダリング.txt theme={null}
The string is a valid IP address
```
## join
シーケンスの文字列を連結した1つの文字列を返します。要素間はデフォルトでは空文字列で区切られますが、任意指定のパラメーターを使って区切り文字を定義できます。2番目のパラメーターを使用すると、結合する属性を指定できます。
```text hubl.txt theme={null}
{% set my_list = [1, 2, 3] %}
{% set sep = "---" %}
{{ my_list|join }}
{{ my_list|join("|") }}
{{ my_list|join(sep) }}
```
```text 出力のレンダリング.txt theme={null}
123 1|2|3 1---2---3
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `delimiter` | 文字列 | 文字列の連結に使用する区切り文字。 |
| `attribute` | HubL変数 | オブジェクト内で結合する値の属性。 |
## last
シーケンスの最後の項目を返します。
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{% my_sequence|last %}
```
```text 出力のレンダリング.txt theme={null}
Item 3
```
## length
シーケンスまたはマッピング内の項目数を返します。
```text hubl.txt theme={null}
{% set services = ["Web design", "SEO", "Inbound Marketing", "PPC"] %}
{{ services|length }}
```
```text 出力のレンダリング.txt theme={null}
4
```
## list
値を変換して1つのリストにします。文字列は、角括弧シーケンスの区切り文字`[ ]`で囲まれていない限り、別々の文字として返されます。
```text hubl.txt theme={null}
{% set one = 1 %}
{% set two = 2 %}
{% set three = "three" %}
{% set four = ["four"] %}
{% set list_num = one|list + two|list + three|list + four|list %}
{{ list_num }}
```
```text 出力のレンダリング.txt theme={null}
[1, 2, t, h, r, e, e, four]
```
## log
数値の自然対数を計算します。
```text hubl.txt theme={null}
{{ 10|log }}
{{ 65536|log(2) }}
```
```text 出力のレンダリング.txt theme={null}
2.302585092994046 16.0
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `base` | 数値 | 対数計算に使用する基数。 |
## lower
値に含まれる全ての文字を小文字に変換します。
```text hubl.txt theme={null}
{% set text="Text to MAKE LowercaSe" %}
{{ text|lower }}
```
```text 出力のレンダリング.txt theme={null}
text to make lowercase
```
## map
オブジェクトのシーケンスにフィルターを適用するか、属性を検索します。オブジェクトリストを扱うとき、その中の特定の値だけに対象を絞り込むには、これが便利です。
基本的な使用法は、属性に対するマッピングです。例えば、ディクショナリーの特定の属性に特定の値が存在するかどうかを検査する条件付きロジックを使用する場合です。または、フィルター名と引数を渡してフィルターを起動することもできます。
```text hubl.txt theme={null}
{# Usage 1 #}
Apply a filter to a sequence:
{% set seq = ["item1", "item2", "item3"] %}
{{ seq|map("upper") }}
{# Usage 2 #}
Look up an attribute:
{{ content|map("currentState")}}
```
```text 出力のレンダリング.txt theme={null}
Apply a filter to a sequence: [ITEM1, ITEM2, ITEM3]
Look up an attribute: [DRAFT]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `filter` | 文字列 | オブジェクトのシーケンスに適用するフィルター。 |
## md5
特定のオブジェクトの[md5ハッシュ](https://ja.wikipedia.org/wiki/MD5)を計算します。
```text hubl.txt theme={null}
{{ content.absolute_url|md5 }}
```
```text 出力のレンダリング.txt theme={null}
923adb4ce05a4c6342c04c80be88d15e
```
## minus\_time
日時オブジェクトで一定の時間を差し引きます。
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|minus_time(2, "months") }}
```
```text 出力のレンダリング.txt theme={null}
2018-07-14 14:31:30 2018-05-14 14:31:30
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `diff` | 数値 | 差し引く数量。 |
| `timeunit` | 文字列 | 有効な時間単位は、`nanos`、`micros`、`millis`、`seconds`、`minutes`、`hours`、`half_days`、`days`、`weeks`、`months`、`years`、`decades`、`centuries`、`millennia`、`eras`です。 |
## multiply
1つの値を数値で乗算します。[\*演算子](/docs/cms/reference/hubl/operators-and-expression-tests)と同じ機能です。
```text hubl.txt theme={null}
{% set n = 20 %}
{{ n|multiply(3) }}
```
```text 出力のレンダリング.txt theme={null}
60
```
## plus\_time
日時オブジェクトに一定の時間を加えます。
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|plus_time(5, "days") }}
```
```text 出力のレンダリング.txt theme={null}
2018-07-14 14:31:30 2018-07-19 14:31:30
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `diff` | 数値 | 差し引く数量。 |
| `timeunit` | 文字列 | 有効な時間単位は、`nanos`、`micros`、`millis`、`seconds`、`minutes`、`hours`、`half_days`、`days`、`weeks`、`months`、`years`、`decades`、`centuries`、`millennia`、`eras`です。 |
## pprint
変数をpprintします。変数の型など、デバッグに役立つ情報を出力します。
```text hubl.txt theme={null}
{% set this_var ="Variable that I want to debug" %}
{{ this_var|pprint }}
```
```text 出力のレンダリング.txt theme={null}
(String: Variable that I want to debug)
```
## random
シーケンスからランダムな1つの項目を返します。
> [!WARNING]
>
> ### 注:
>
> このフィルターを使用すると、ページコンテンツの更新時ではなく、定期的にページの[プリレンダリング](/docs/cms/best-practices/testing-staging-performance/prerendering)が実行されます。つまり、フィルタリングされたコンテンツは、ページの再読み込みのたびに更新されるわけではありません。
>
> これは、ブログ記事のランダムなリストの表示など、特定のタイプのコンテンツでは特に問題ではありません。ただし、ページを読み込むたびにコンテンツをランダムに変更する必要がある場合には、代わりにJavaScriptを使用してコンテンツをクライアント側でランダム化する必要があります。
```text hubl.txt theme={null}
{% for content in contents|random %}
Post item markup
{% endfor %}
```
```text 出力のレンダリング.txt theme={null}
Random post
```
## regex\_replace
正規表現パターンを検索して、文字シーケンスで置換します。最初の引数はRE2形式の正規表現パターン、2つ目は置換文字列です。
詳しくは[RE2正規表現の構文](https://github.com/google/re2/wiki/Syntax)(英語)をご確認ください。
```text hubl.txt theme={null}
{{ "contact-us-2"|regex_replace("[^a-zA-Z]", "") }}
```
```text 出力のレンダリング.txt theme={null}
contactus
```
## reject
オブジェクトに[式による検証](/docs/cms/reference/hubl/operators-and-expression-tests)を適用して、該当する要素を拒否することにより、オブジェクトのシーケンスをフィルタリングします。
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|reject("even") }}
```
```text 出力のレンダリング.txt theme={null}
[13, 3, 5, 17]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `exp_text` | 文字列 | オブジェクトに適用する[式評価](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests)の名前。 |
## rejectattr
オブジェクトの属性を検証して該当する要素を拒否することにより、オブジェクトのシーケンスをフィルタリングします。
```html example.html theme={null}
{% for content in contents|rejectattr("post_list_summary_featured_image") %}
{% if content.post_list_summary_featured_image %}
{% endif %}
{{ content.post_list_content|safe }}
{% endfor %}
```
```html example.html theme={null}
Post with no featured image
Post with no featured image
Post with no featured image
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `attribute_name` | 文字列 | 選択する属性を指定します。ドット表記を使用すると、ネストされた属性にアクセスできます。 |
| `exp_test` | 文字列 | オブジェクトに適用する[式評価](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests)の名前。 |
## render
HubLを含む文字列を早期にレンダリングして、出力を他のフィルターに渡すことができるようにします。
```html example.html theme={null}
{{ personalization_token("contact.lastname", "default value")|render|lower }}
```
```html example.html theme={null}
mclaren
```
## replace
部分文字列の全てのインスタンスを、新しいものに置換します。
```html example.html theme={null}
{% if topic %}
Posts about {{ page_meta.html_title|replace("Blog | ", "") }}
{% endif %}
```
```html example.html theme={null}
Posts about topic name
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `old` | 文字列 | 置換の対象にする部分文字列。 |
| `new` | 文字列 | 置換する文字列。 |
| `count` | 数値 | 指定した場合、最初の出現数分のみが置換されます。 |
## reverse
オブジェクトを反転します。または、オブジェクトを逆順に反復処理するイテレーターを返します。リストを反転するには[.reverse()](/docs/cms/reference/hubl/functions#reverse)を使用します
```text hubl.txt theme={null}
{% set nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] %}
{% for num in nums|reverse %}
{{ num }}
{% endfor %}
```
```text 出力のレンダリング.txt theme={null}
10 9 8 7 6 5 4 3 2 1
```
## root
値の平方根を計算します。
```text hubl.txt theme={null}
{{ 16|root }}
{{ 625|root(4) }}
```
```text 出力のレンダリング.txt theme={null}
4 5
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `nth_root` | 数値 | 計算に使用するn乗根。 |
## round
数値を指定された精度で四捨五入します。
```text hubl.txt theme={null}
{{ 52.5|round }}
{{ 52.5|round(0, "floor") }}
```
```text 出力のレンダリング.txt theme={null}
53 52
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `precision` | 数値 | 端数処理の精度を指定します。 |
| `rounding_method` | `'common'`(デフォルト) \| `'ceil'` \| `'floor'` | オプションには、`common`(四捨五入:デフォルト)、`ceil`(常に切り上げ)、`floor`(常に切り下げ)があります。 |
## safe
値に「safe」のマークを付けます。つまり、自動エスケープが有効になっている環境で、この変数はエスケープされません。
```text hubl.txt theme={null}
{{ content.post_list_content|safe }}
```
```html example.html theme={null}
HTML post content that is not escaped.
```
## sanitize\_html
リッチ テキスト コンテンツの出力用にHTML入力のコンテンツをサニタイズ処理します。文字列を受け入れ、許可されていないHTMLタグを削除します。HTMLで使用されており、安全なHTMLを許可するHubL変数に、このフィルターを使用します。
特定のタイプのHTMLタグを許可するパラメーターとして、`FORMATTING`、`BLOCKS`、`STYLES`、`LINKS`、`TABLES`、`IMAGES`を含めることができます。例えば、`sanitize_html(IMAGES)`です。
`sanitize_html`を使用すると、全てのパラメーターがフィルターに含められます。
さらに`STRIP`パラメーターを含めると、全てのHTMLを削除できます。また、ネストされた解釈を防ぐ目的で、全てのコンテンツが`escape_jinjava`を介して実行されます。
```text hubl.txt theme={null}
{% set escape_string = "This markup is
printed as text.
" %}
{{ escape_string|sanitize_html("IMAGES") }}
```
```html example.html theme={null}
This markup is printed as text.
```
## select
オブジェクトを検証して該当する要素だけを選ぶことにより、オブジェクトのシーケンスをフィルタリングします。
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|select("even") }}
```
```html example.html theme={null}
[10, 12, 22]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `exp_text` | 文字列 | オブジェクトを検証する式。 |
## selectattr
オブジェクトの属性を検証して該当する要素だけを選ぶことにより、オブジェクトのシーケンスをフィルタリングします。
```html example.html theme={null}
{% for content in contents|selectattr("post_list_summary_featured_image") %}
{% if content.post_list_summary_featured_image %}
{% endif %}
{{ content.post_list_content|safe }}
{% endfor %}
```
```html example.html theme={null}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `attribute_name` | 文字列 | テストする属性。ドット表記を使用すると、ネストされた属性にアクセスできます。 |
| `exp_test` | 文字列 | オブジェクトに適用する[式評価](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests)の名前。 |
| `val` | 文字列 | テストの対象となる値。 |
## shuffle
シーケンス内の反復の順序をランダムにします。以下の例は、標準的なブログのループをシャッフルします。
> [!WARNING]
>
> ### 注:
>
> このフィルターを使用すると、ページコンテンツの更新時ではなく、定期的にページの[プリレンダリング](/docs/cms/best-practices/testing-staging-performance/prerendering)が実行されます。つまり、フィルタリングされたコンテンツは、ページの再読み込みのたびに更新されるわけではありません。
>
> これは、ブログ記事のランダムなリストの表示など、特定のタイプのコンテンツでは特に問題ではありません。ただし、ページを読み込むたびにコンテンツをランダムに変更する必要がある場合には、代わりにJavaScriptを使用してコンテンツをクライアント側でランダム化する必要があります。
```html example.html theme={null}
{% for content in contents|shuffle %}
Markup of each post
{% endfor %}
```
```html example.html theme={null}
Markup of each post 5
Markup of each post 3
Markup of each post 1
Markup of each post 2
Markup of each post 4
```
## slice
イテレーターをスライスして、これらの項目を含むリストの一覧を返します。最初のパラメーターにはスライスされる項目数を指定し、2番目のパラメーターには空白のスライスに埋める文字を指定します。
```html example.html theme={null}
{% set items = ["laptops", "tablets", "smartphones", "smart watches", "TVs"] %}
{% for column in items|slice(3," ") %}
{% for item in column %}
{{ item }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
laptops
tablets
smartphones
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `slices` | 数値 | スライスされる項目の数。 |
| `filler` | 文字列 | 空白のスライスに埋める文字を指定します。 |
## sort
反復可能データを並べ替えます。このフィルターを使ってHubSpotで属性を基準に並べ替える際には、全てのパラメーターが必須です。最初のパラメーターは、並べ替え順序を逆にするブール値です。2番目のパラメーターは、並べ替えで大文字と小文字を区別するかどうかを決定します。最後のパラメーターは、並べ替え基準となる属性を指定します。以下の例ではブログ内の記事が、名前のアルファベット順でレンダリングされます。
```html example.html theme={null}
{% set my_posts = blog_recent_posts("default", limit=5) %}
{% for item in my_posts|sort(False, False, "name") %}
{{ item.name }}
{% endfor %}
```
```html example.html theme={null}
A post
B post
C post
D post
E post
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `reverse` | ブール値 | 並べ替え順序を逆にするには、`true`に設定します。 |
| `case_sensitive` | ブール値 | `true`に設定すると、並べ替えで大文字と小文字が区別されま。 |
| `attribute` | 文字列 | 並べ替えの基準となる属性。リストを並べ替えるときには省略します。 |
## split
入力文字列を特定の区切り文字で分割して、リストにします。最初のパラメーターは、変数を分割する基準となる区切り文字を指定します。2番目のパラメーターは、変数の分割回数を決定します。残りの項目が存在する場合、それらはグループ化されたままになります。以下の例では、複数の名前からなる1つの文字列が`;`を基準に最初の4回だけ分割されます。
```html example.html theme={null}
{% set string_to_split = "Mark; Irving; Helly; Dylan; Milchick; Harmony;" %}
{% set names = string_to_split|split(";", 4) %}
{% for name in names %}
{{ name }}
{% endfor %}
```
```html example.html theme={null}
Mark
Irving
Helly
Dylan; Milchick; Harmony;
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `character_to_split_by` | 文字列 | 変数を分割する区切り文字を指定します。 |
| `number_of_splits` | 数値 | 変数を分割する回数を指定します。残りの項目(存在する場合)は、グループ化されたままになります。 |
## string
他の型の変数を文字列に変換します。以下の例では、整数が文字列に変換されます(変数の型の変化を確認するために`pprint`を使用しています)。
```text hubl.txt theme={null}
{% set number_to_string = 45 %}
{{ number_to_string|string|pprint }}
```
```text 出力のレンダリング.txt theme={null}
(String: 45)
```
## striptags
SGML/XMLタグを除去して、隣接する空白を1つのスペースで置換します。このフィルターは、変数内のHTMLタグを除去する際に使用できます。
```html example.html theme={null}
{% set some_html = "Some text
" %}
{{ some_html|striptags }}
```
```html example.html theme={null}
some text
```
## strtodate
日付文字列と日付形式を日付オブジェクトに変換します。
```text hubl.txt theme={null}
{{ '3/3/21'|strtodate('M/d/yy') }}
```
```text 出力のレンダリング.txt theme={null}
2021-03-03 00:00:00
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `dateFormat` | 文字列 | 使用する[日付形式](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html)(英語)。 |
## strtotime
日時文字列と日時書式を変換して、日時オブジェクトにします。
```text hubl.txt theme={null}
{{ "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ")|unixtimestamp }}
```
```text 出力のレンダリング.txt theme={null}
1531558890000
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `datetimeFormat` | 文字列 | 使用する[日付と時刻の形式](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html)(英語)。 |
## sum
シーケンス内の数値を全て合算します。最初のパラメーターには任意の属性を指定し、2番目のパラメーターには、変数内に加算するものがない場合に返す値を設定します。
```text hubl.txt theme={null}
// Simple sum
{% set sum_this = [1, 2, 3, 4, 5] %}
{{ sum_this|sum }}
// Sum of attribute
{% set items = [15, 10] %}
{% set dict_var = [{"name": "Item1", "price": "20"}, {"name": "Item2", "price": "10"}] %}
Total: {{ dict_var|sum(attribute="price") }}
```
```text 出力のレンダリング.txt theme={null}
15 Total: 30
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `attribute` | 文字列 | 合計する属性。 |
| `return_if_nothing` | 文字列 | 変数内に加算するものがない場合に返す値。 |
## symmetric\_difference
2つのセットまたはリストの対称差を返します。フィルターから返されるリストには、1つ目のリストに含まれ、2つ目には含まれない一意の要素、または2つ目のリストに含まれ、1つ目には含まれない一意の要素が全て格納されます。
```text hubl.txt theme={null}
{{ [1, 2, 3]|symmetric_difference([2, 3, 4, 5]) }}
```
```text 出力のレンダリング.txt theme={null}
[1, 4, 5]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `list` | 整列 | 1つ目のリストとの対称差を見つけるために比較する2つ目のリスト。 |
## title
見出し表記の値を返します。つまり、英単語の先頭が大文字に、残りの文字は全て小文字になります。
```text hubl.txt theme={null}
{% set my_title="my title should be title case" %}
{{ my_title|title }}
```
```text 出力のレンダリング.txt theme={null}
My Title Should Be Title Case
```
## tojson
オブジェクトをJSON文字列として書き出します。
```text hubl.txt theme={null}
{% for content in contents %}
{{ content.blog_post_author|tojson }}
{% endfor %}
```
```json example.json theme={null}
{
"portalId": 1234567,
"id": 12312253109,
"created": 1566413741989,
"updated": 1566414012799,
"deletedAt": 0,
"fullName": "Sample User",
"email": "sampleUser@example.com",
"userId": null,
"username": null,
"slug": "sample-user",
"jsonBody": {
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"twitter": "",
"website": "https://www.hubspot.com"
},
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"gravatarUrl": "https://app.hubspot.com/settings/avatar/108bb5ac667ded34796271437dfe8d58",
"twitterUsername": "",
"hasSocialProfiles": false,
"website": "https://www.hubspot.com",
"twitter": "",
"displayName": "Sample User"
}
```
## trim
先頭および末尾にある空白を除去します。包括的な説明のためにここで説明していますが、HubSpotでは標準でマークアップから前後の空白が削除されます。
```text hubl.txt theme={null}
{{ " remove whitespace " }}
{{ " remove whitespace "|trim }}
```
```text 出力のレンダリング.txt theme={null}
remove whitespace remove whitespace
```
## truncate
特定の文字数よりも後ろにあるテキストを切り捨てます。デフォルトは255文字です。このカウントにはHTML文字が含まれます。
> [!WARNING]
>
> **注**: このフィルターは単語間のスペースを使用して文字列を短縮するため、日本語などの文字間にスペースがない言語では期待どおりに機能しないことがあります。
```text hubl.txt theme={null}
{{ "I only want to show the first sentence. Not the second."|truncate(40) }}
{{ "I only want to show the first sentence. Not the second."|truncate(35, true, "..........") }}
```
```text 出力のレンダリング.txt theme={null}
I only want to show the first sente..........
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `number_of_characters` | 数値 | テキストが切り捨てられる前の許容文字数。デフォルト値は255文字です。 |
| `breakword` | ブール値 | `true`の場合、長さでテキストが切り捨てられます。`false`の場合は、最後の単語が除去されます。 |
| `end` | 文字列 | 切り捨て後に付加されるデフォルトの記号「...」を変更します。 |
## truncatehtml
HTMLマークアップを考慮しながら(つまり、ネストしている全てのタグが適切に閉じられ)、特定の文字列を切り捨てます。これにより、切り捨て後にタグが開いたままになることが防止されます。HTML文字は、合計文字数にカウントされません。
> [!WARNING]
>
> **注**: このフィルターは単語間のスペースを使用して文字列を短縮するため、日本語などの文字間にスペースがない言語では期待どおりに機能しないことがあります。
```html example.html theme={null}
{% set html_text = "I want to truncate this text without breaking my HTML
" %}
{{ html_text|truncatehtml(28, "..." , false) }}
```
```html example.html theme={null}
I want to truncate this..
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `number_of_characters` | 数値 | テキストが切り捨てられる前の許容文字数。デフォルト値は255文字です。 |
| `end` | 文字列 | 切り捨て後に付加されるデフォルトの記号「...」を変更します。 |
| `breakword` | ブール値 | ブール値。`true`の場合、長さでテキストが切り捨てられます。`false`(デフォルト)の場合は、最後の単語が除去されます。任意のパラメーターのうち1つだけを使用する場合は、例えば`truncatehtml(70, breakwords = false)`のようにキーワード引数を使用します。 |
## unescape\_html
HTMLエンコードされたエンティティーを含むテキストを同等のUnicodeに変換します。
```text hubl.txt theme={null}
{% set escape_string = "me & you" %}
{{ escape_string|unescape_html }}
```
```text 出力のレンダリング.txt theme={null}
me & you
```
## union
2つのセットまたはリストの共通部分を返します。フィルターから返されるリストには、いずれかのリストに含まれる一意の要素が全て格納されます。
```text hubl.txt theme={null}
{{ [1, 2, 3]|union([2, 3, 4, 5]) }}
```
```text 出力のレンダリング.txt theme={null}
[1, 2, 3, 4, 5]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `list` | 整列 | 1つ目のリストに対して結合される2つ目のリスト。 |
## unique
オブジェクトのシーケンスまたはディクショナリーから一意のセットを抽出します。(関数から戻される記事リストなどの)ディクショナリーをフィルタリングする場合、どの属性を基準にディクショナリー項目の重複を削除するかを指定できます。
```text hubl.txt theme={null}
{% set my_sequence = ["one", "one", "two", "three" ] %}
{{ my_sequence|unique }}
```
```text 出力のレンダリング.txt theme={null}
[one, two, three]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `attr` | 文字列 | ディクショナリー値を絞り込む際に使用する属性を指定します。 |
## unixtimestamp
日時オブジェクトをUnixタイムスタンプに変換します。
> [!WARNING]
>
> ### 注:
>
> このフィルターは、日付を返す変数でのみ使用してください。2024年9月30日以降、このフィルターはnull値が渡された場合に現在の日付を返さなくなります。この日付を過ぎると、フィルター内のnull値は`September 30, 2024`を返します。
```text hubl.txt theme={null}
{{ local_dt }}
{{ local_dt|unixtimestamp }}
```
```text 出力のレンダリング.txt theme={null}
2017-01-30 17:11:44 1485814304000
```
## upper
値に含まれる全ての文字を大文字に変換します。
```text hubl.txt theme={null}
{% set text="text to make uppercase" %}
{{ text|upper }}
```
```text 出力のレンダリング.txt theme={null}
TEXT TO MAKE UPPERCASE
```
## urlencode
文字列をエスケープしてUTF-8形式でURLエンコードします。ディクショナリーと通常の文字列、およびペアワイズ反復を受け入れます。
```text hubl.txt theme={null}
{% set encode_value="Escape & URL encode this string" %}
{{ encode_value|urlencode }}
```
```text 出力のレンダリング.txt theme={null}
Escape+%26+URL+encode+this+string
```
## urldecode
エンコードされたURL文字列を元のURLにデコードします。ディクショナリーと通常の文字列、およびペアワイズ反復を受け入れます。
```text hubl.txt theme={null}
{% set decode_value="Escape+%26+URL+decode+this+string" %}
{{ decode_value|urldecode }}
```
```text 出力のレンダリング.txt theme={null}
Escape & URL decode this string
```
## urlize
プレーンテキスト内のURLを、クリック可能なリンクに変換します。追加的な整数をこのフィルターに渡した場合、URLがその数値に短縮されます。2番目のパラメーターは、リンクをrel="no follow"にするかどうかを指示するブール値です。最後のパラメーターでは、リンクを新しいタブで開くかどうかを指定できます。
| パラメーター | タイプ | 説明 |
| - | - | - |
| `shorten_text` | 数値 | URLを指定の数に短縮する整数。 |
| `no_follow` | ブール値 | `true`に設定すると、リンクに`rel="no follow"`が含まれます。 |
| `target="_blank"` | 文字列 | リンクを新しいタブで開くかどうかを指定します。 |
```text hubl.txt theme={null}
{{ "http://hubspot.com/"|urlize }}
{{ "http://hubspot.com/"|urlize(10,true) }}
{{ "http://hubspot.com/"|urlize("",true) }}
{{ "http://hubspot.com/"|urlize("",false,target="_blank") }}
```
```html example.html theme={null}
http://hubspot.com/
http://...
http://hubspot.com/
http://hubspot.com/
```
## wordcount
文字列内の単語数をカウントします。
> [!WARNING]
>
> HTMLが含まれている文字列の正確なカウントを取得する場合は、`striptags`フィルターを使用します。
```text hubl.txt theme={null}
{% set count_words = "Count the number of words in this variable" %}
{{ count_words|wordcount }}
```
```text 出力のレンダリング.txt theme={null}
8
```
## wordwrap
指定された文字数で折り返します。HubSpotではデフォルトで空白が除去されるため、この機能は``で特に役立ちます。
```text hubl.txt theme={null}
{% set wrap_text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet dui. Ut laoreet ultricies quam at fermentum." %}
{{ wrap_text|wordwrap(10) }}
```
```text 出力のレンダリング.txt theme={null}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum
non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet
dui. Ut laoreet ultricies quam at fermentum.
```
| パラメーター | 説明 |
| - | - |
| `character_count` | コンテンツを折り返す文字数。 |
## xmlattr
ディクショナリー内の項目に基づいてHTML/XML属性文字列を作成します。「値なし」および未定義値を除き、全ての値が自動的にエスケープされます。最初のパラメーターがfalseの場合以外は、フィルターから返された項目の前に自動的にスペースが追加されます。
```html example.html theme={null}
{% set html_attributes = {"class": "bold", "id": "sidebar"} %}
```
```html example.html theme={null}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `autospace` | ブール値 | 項目の前にスペースを追加するには、`true`に設定します。 |
# HubL関数
Source: https://developers.hubspot.jp/docs/cms/reference/hubl/functions
利用可能な全てのHubL関数の一覧をご参照いただけます。
HubLの関数は、パラメーターを受け入れて値を生成するという点でフィルターに似ています。ただし、全ての関数を初期テンプレート値に適用する必要はなく、HubSpot環境の他の領域とのやりとりに使用できます。
古いウェブサイトを維持している場合は、[非推奨となったHubL関数のリスト](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions)もご確認ください。
この記事では、各HubL関数とその構文について詳しく説明しています。
## append
リストの末尾に1つの項目を追加します。
```text hubl.txt theme={null}
{% set numbers_under_5 = [1,2,3] %}
{% do numbers_under_5.append(4) %}
{{numbers_under_5}}
```
```text 出力のレンダリング.txt theme={null}
[1, 2, 3, 4]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `item` | Any | リストに付加する項目。 |
## blog\_all\_posts\_url
`blog_all_posts_url`関数は、指定されたブログ内の全てのブログ記事のリストページを指す完全なURLを返します。
以下の例は、この関数をアンカーの`href`として使用する方法を示しています。
```html example.html theme={null}
All Marketing blog posts
```
```html example.html theme={null}
All Marketing blog posts
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
## blog\_author\_url
`blog_author_url`関数は、指定されたブログ執筆者のリストページを指す完全なURLを返します。
以下の例は、この関数をアンカーの`href`として使用する方法を示しています。この関数の例に示されているように、これを`blog_authors`関数と組み合わせることが可能です。
```html example.html theme={null}
Brian Halligan
```
```html example.html theme={null}
Brian Halligan
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | 執筆者のリストページがどのブログにあるかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
| `author_slug` | 文字列型またはHubL変数 | どの執筆者にリンクするかを指定します。`content.blog_post_author.slug`またはハイフン付きの小文字の名前を使用できます。例:`"jane-doe"` |
## blog\_authors
`blog_authors`関数は、指定されたブログのブログ執筆者オブジェクトから成るシーケンスを、スラッグの昇順に並べ替えて返します。このシーケンスを変数の中に保存して反復処理すると、カスタムの執筆者記事フィルターを作成できます。
各執筆者による公開中の記事数にアクセスするには、`author.live_posts`を使用できます。
> [!WARNING]
>
> **注**: この関数では執筆者数の上限が250件に設定されています。また、ページ1件につき10回の呼び出しという上限もあります。
以下の例の第1行は、この関数によって執筆者オブジェクトのシーケンスがどのように返されるかを示しています。残りの部分は、シーケンスを変数の中に保存し、執筆者オブジェクトを反復処理して執筆者リストのリンクをいくつか出力する例を示しています。この例は、ブログに4人の執筆者がいることを想定したものです。
```html example.html theme={null}
{{ blog_authors("default", 250) }}
{% set my_authors = blog_authors("default", 250) %}
```
```html example.html theme={null}
[ Brian Halligan, Dharmesh Shah, Katie Burke, Kipp Bodnar]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
| `limit` | 整数 | 取得する執筆者数の上限を設定します。 |
## blog\_by\_id
`blog_by_id`関数はID別にブログを返します。以下のコード例は、この関数を使ってハイパーリンクされたリスト項目を生成する方法を示しています。
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき10回に制限されています。
```html example.html theme={null}
{% set my_blog = blog_by_id(47104297) %}
```
```html example.html theme={null}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
## blog\_page\_link
`blog_page_link`関数は、ページ番号付きのブログリスト表示のURLを生成します。この関数は1つの数値パラメーターを受け入れ、これによって現在のページ、次のページ、前のページ、または特定のページのリンクを生成できます。この関数は通常、ページ番号付きアンカータグの`href`属性で使用され、ブログ一覧テンプレートで使用する必要があります。
以下に示す例では、アンカー`href`としてこの関数を使用しています。最初の例では、現在のページを出力します。2番目の例では、7ページ目を指定する数値7をパラメーターとして受け入れています。3番目の例では、`next_page_num`変数を使用し、現在のページからの相対ページ番号のリンクを生成しています(前のページを指定するには`last_page_num`変数を使用できます)。最後の例では、`current_page_num`変数と`+`演算子を使用して、現在のページより4つ大きい番号のページへのリンクを作成しています。
```html example.html theme={null}
Current page
Page 7
Next
Page Plus 4
```
```html example.html theme={null}
Page 1
Page 7
Next
Page Plus 4
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `page` | 数値またはHubL変数 | ページ番号のURLまたはHubL変数の生成に使用するページ番号。 |
## blog\_popular\_posts
この関数は、特定数の人気のある記事をシーケンスとしてレンダリングします。このシーケンスを変数の中に保存することができ、forループでそれを反復処理すると、人気のある記事のカスタム記事リストを作成できます。
この関数の結果は6時間にわたりキャッシュされます。キャッシュを使用せずにHubLでブログ記事を取得するには、代わりに[blog\_recent\_tag\_posts](#blog-recent-tag-posts)を使用します。
以下のサンプルコードでは、最初の行にこの関数でどのようにシーケンスを取得するかが示されています。シーケンスは変数として保存され、その変数が[forループ](/docs/cms/reference/hubl/loops)で使用されます。[ブログ記事の変数](/docs/cms/reference/hubl/variables#ブログの変数)では例外なく、`content.`ではなく個々のループ項目の名前を使用する必要があります。この例では`pop_post.name`が使用されています。この手法は、ブログテンプレートやウェブサイトページに対して使用できます。
> [!WARNING]
>
> **注**: この関数では記事数の上限が200件に設定されています。また、ページ1件につき10回の呼び出しという上限もあります。
```html example.html theme={null}
{% set pop_posts = blog_popular_posts("default", 5, ["marketing-tips", "sales-tips"], "popular_past_month", "AND") %}
{% for pop_post in pop_posts %}
{{ pop_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Popular post title 1, Popular post title 2, Popular post title 3, Popular post
title 4, Popular post title 5]
Popular post title 1
Popular post title 2
Popular post title 3
Popular post title 4
Popular post title 5
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。 |
| `limit` | 整数 | シーケンスに追加する投稿数を指定します(最大200件)。指定しない場合は、デフォルトで10に設定されます。 |
| `tag_slug` | 配列 | 投稿を絞り込むための任意のタグのリスト。 |
| `time_frame` | 文字列 | アナリティクス上で投稿を絞り込むための任意の期間。デフォルトの値は`"popular_past_year"`です。次のいずれかにする必要があります。`"popular_all_time"` `"popular_past_year"` `"popular_past_six_months"` `"popular_past_month"` `logical_operator`パラメーターを含める場合、このパラメーターは必須です。 |
| `logical_operator` | 文字列 | `tag_slug`に複数のタグが含まれている場合は、この演算子を使用してまたは`AND`ロジックまたは`OR`ロジックで結果をフィルタリングします。デフォルトでは、この関数は`OR`ロジックを使用して、指定されたタグのいずれかでタグ付けされた記事を返します。このパラメーターを含める場合は、`time_frame`が必須です。 |
## blog\_post\_archive\_url
`blog_post_archive_url`関数は、指定されたブログ上の特定の日付値に対応するアーカイブのリストページの完全なURLを返します。この関数には2つの必須パラメーターと2つの任意指定パラメーターがあります。最初のパラメーターにはブログIDまたは単にキーワード`"default"`を指定します。2番目は、どの年のアーカイブされた記事を表示するかを指定します。
任意指定パラメーターには、それぞれどの月および日のアーカイブされた記事を表示するかが格納されます。
以下の例は、この関数をアンカーの`href`として使用する方法を示しています。
```html example.html theme={null}
Posts from July 5th, 2017
```
```html example.html theme={null}
Posts from July 5th, 2017
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。 |
| `year` | 整数 | 年。 |
| `month` | 整数 | 月(任意)。 |
| `day` | 整数 | 日(任意)。 |
## blog\_recent\_author\_posts
`blog_recent_author_posts`関数は、指定された執筆者のブログ記事オブジェクトのシーケンスを、新しい順に並べ替えて返します。この記事シーケンスを変数の中に保存することができ、forループでそれを反復処理すると、特定の執筆者のカスタム記事リストを作成できます。
この関数は3つのパラメーターを受け入れます。最初のパラメーターにはどのブログから執筆者の記事を収集するかを指定します。値は`"default"`、または(ブログダッシュボードのURLで取得できる)特定のブログのIDです。2番目のパラメーターには、どの執筆者を使用するかを指定します。このパラメーターでは、\*\*`content.blog_post_author.slug`\*\*を使用して現在の記事の執筆者を指定することも、またはハイフン付きの小文字の名前(`"brian-halligan"`など)を受け入れることもできます。3番目のパラメーターには取得する記事数を指定します。
以下の例の第1行には、関数によってどのように執筆者の記事シーケンスが返されるかが示されています。この例では、執筆者名を正確に指定する代わりに現在の記事執筆者が使用されています。シーケンスは1つの変数に保存され、ループ処理されます。[ブログ記事の変数](/docs/cms/reference/hubl/variables#ブログの変数)では例外なく、`content.`ではなく個々のループ項目の名前を使用する必要があります。この例では`author_post.name`が使用されています。この手法はブログテンプレートとページテンプレートで使用できます。
> [!WARNING]
>
> **注**: この関数にはページ1件につき200件の記事、10回の呼び出しという上限があります。
```html example.html theme={null}
{{ blog_recent_author_posts("default", content.blog_post_author.slug, 5 ) }}
{% set author_posts = blog_recent_author_posts("default", content.blog_post_author.slug, 5) %}
{% for author_post in author_posts %}
{{ author_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post by author title 1, Post by author title 2, Post by author title 3, Post by
author title 4, Post by author title 5]
Post by author title 1
Post by author title 2
Post by author title 3
Post by author title 4
Post by author title 5
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
| `author_slug` | 文字列 | 絞り込む執筆者を指定します。 |
| `limit` | 整数 | シーケンスに追加する投稿数を指定します(最大200件)。 |
## blog\_recent\_posts
`blog_recent_posts`関数は、指定されたブログでのブログ記事オブジェクトから成るシーケンスを、新しい順に並べ替えて返します。この記事シーケンスを変数の中に保存することができ、forループでそれを反復処理すると、人気のある記事を示すカスタム記事リストを作成できます。
この関数は2つのパラメーターを受け入れます。最初のパラメーターには、どのブログから人気のある記事を収集するかを指定します。値は`"default"`、または(ブログダッシュボードのURLで取得できる)特定のブログのIDです。2番目のパラメーターには取得する記事数を指定します。
以下の例の第1行には、この関数によってどのようにシーケンスが返されるかが示されています。シーケンスは1つの変数に保存され、ループ処理されます。[ブログ記事の変数](/docs/cms/reference/hubl/variables#ブログの変数)では例外なく、`content.`ではなく個々のループ項目の名前を使用する必要があります。この例では`rec_post.name`が使用されています。この手法は、ブログテンプレートだけでなく通常のページに対しても使用できます。
> [!WARNING]
>
> **注**: この関数にはページ1件につき200件の記事、10回の呼び出しという上限があります。
```html example.html theme={null}
{{ blog_recent_posts("default", 5) }}
{% set rec_posts = blog_recent_posts("default", 5) %}
{% for rec_post in rec_posts %}
{{ rec_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Recent post title 1, Recent post title 2, Recent post title 3, Recent post
title 4, Recent post title 5]
Recent post title 1
Recent post title 2
Recent post title 3
Recent post title 4
Recent post title 5
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
| `limit` | 整数 | シーケンスに追加する投稿数を指定します(最大200件)。 |
## blog\_recent\_tag\_posts
`blog_recent_tag_posts` 関数は、指定されたタグ(複数可)のブログ記事オブジェクトから成るシーケンスを、新しい順に並べ替えて返します。この記事シーケンスを変数の中に保存することができ、forループでそれを反復処理すると、特定のタグのカスタム記事リストを作成できます。
以下のコード例で:
* 第1行は、関数がどのようにタグの記事シーケンスを返すかを示しています
* 第2行は、関数をシーケンス変数に保存する方法を示しています。コードの残りの部分は、forループを使用して変数値を循環処理します。[ブログ記事の変数](/docs/cms/reference/hubl/variables#ブログの変数)では例外なく、`content.`ではなく個々のループ項目の名前を使用する必要があります。この例では`tag_post.name`が使用されています。この手法は、ブログページとウェブサイトページの両方で使用できます。
[関連するブログ記事リストの作成](/docs/cms/reference/hubl/tags/standard-tags#ブログの関連記事)について詳細をご確認ください。
> [!WARNING]
>
> **注**: この関数にはページ1件につき100件の記事、10回の呼び出しという上限があります。
```html example.html theme={null}
{{ blog_recent_tag_posts("default", "marketing-tips", 5) }}
{% set tag_posts = blog_recent_tag_posts("default", ["marketing", "fun", "inbound"], 3, "AND") %}
{% for tag_post in tag_posts %}
{{ tag_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post about Marketing 1, Post about Marketing 2, Post about Marketing 3, Post
about Marketing 4, Post about Marketing 5]
Post about Marketing
Post about Fun
Post about Inbound
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
| `tag_slug` | 文字列 | 絞り込むタグを指定します。最大10個のタグをカンマ区切りで含めることができます。複数の単語を持つタグは、スペースをハイフンに置き換えた小文字にする必要があります。 |
| `limit` | 整数 | シーケンスに追加する投稿数を指定します。`logical_operator`を含める場合、このパラメーターは必須です。 |
| `logical_operator` | 文字列 | `tag_slug`に複数のタグが含まれている場合は、この演算子を使用してまたは`AND`ロジックまたは`OR`ロジックで結果をフィルタリングします。デフォルトでは、この関数は`OR`ロジックを使用して、指定されたタグのいずれかでタグ付けされた記事を返します。このパラメーターを含める場合は、`limit`が必須です。 |
## blog\_tag\_url
`blog_tag_url`関数は、指定されたブログタグのリストページを指す完全なURLを返します。
この関数は2つのパラメーターを受け入れます。最初のパラメーターには、そのタグのリストページがどのブログ内に存在するかを指定します。2番目のパラメーターには、どのタグにリンクするかを指定します。このパラメーターでは、`content.topic_list`の特定のタグを示す\*\*`topic.slug`\*\*を使用できます。または、`"marketing-tips"`などのハイフン付きの小文字の名前を受け入れることもできます。
以下の例は、この関数をアンカーのhrefとして使用する方法を示しています。
```html example.html theme={null}
Inbound Marketing
```
```html example.html theme={null}
Inbound Marketing
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。特定のブログを指定する場合はIDを、デフォルトのブログを指定する場合は`"default"`を使用します。 |
| `tag_slug` | 文字列 | リンク先のタグを指定します。 |
## blog\_tags
`blog_tags`関数は、指定したブログで特によく使用されている(関連するブログ記事の数に基づく)250件のタグのシーケンスを、ブログ記事数順に並べ替えて返します。このシーケンスを変数の中に保存して反復処理すると、カスタムのタグ記事フィルターを作成できます。各タグの記事数にアクセスするには、`tag.live_posts`を使用できます。
この関数は2つのパラメーターを受け入れます。最初のパラメーターには、どのブログからタグを取得するかを指定します。2番目のパラメーターには、取得されるタグ数の上限を指定します。
以下の例の第1行は、関数がどのようにタグオブジェクトのシーケンスを返すかを示しています。例の残りの部分では、シーケンスを変数の中に保存し、タグオブジェクトを反復処理してタグのリンクをいくつか出力する例を示しています。この例では、ブログに4つのタグがあることを想定しています。
> [!WARNING]
>
> **注**: この関数ではタグ数の上限が250件に設定されています。
```html example.html theme={null}
{{ blog_tags("default", 250) }}
{% set my_tags = blog_tags("default", 250) %}
```
```html example.html theme={null}
[ Blogging, Inbound Marketing, SEO, Social Media]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログを使用するかを指定します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
| `limit` | 整数 | 返されるタグの最大数。 |
## blog\_total\_post\_count
この関数は、指定されたブログでの公開済み記事の総数を返します。パラメーターを指定しない場合、デフォルトのブログ記事数をカウントします。または、`"default"`を指定することや、別のブログの記事数をカウントするようにブログIDを指定することもできます。ブログIDは、対象のブログのブログダッシュボードのURLで得られます。
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき10回に制限されています。
```text hubl.txt theme={null}
{{ blog_total_post_count }}
{{ blog_total_post_count(359485112) }}
```
```text 出力のレンダリング.txt theme={null}
16 54
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `selected_blog` | ブログIDまたは"default" | どのブログをカウントするかを指定します。ブログIDは[モジュールのブログフィールド](/docs/cms/reference/fields/module-theme-fields#ブログ)によって返されます。 |
## clear
リストの全ての項目を削除します。`pop()`とは異なり、返されるデータはありません。
```text hubl.txt theme={null}
{% set words = ["phone","home"] %}
{% do words.clear() %}
{{words}}
```
```text 出力のレンダリング.txt theme={null}
[]
```
## color\_contrast
この関数は、[WCAGの基準](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum)(英語)に基づいて色のコントラストを検証します。引数として2つの色を指定する必要があります。また、評価を指定するオプションの引数(`AA`または`AAA`)を含めることもできます。色が基準を満たしているか、基準を超えているかに基づいて、`true`または`false`を返します。
```text hubl.txt theme={null}
{{color_contrast('#FFFFFF','#273749')}}
{{color_contrast('rgb(255, 255, 255)','rgb(229, 237, 245)','AAA')}}
Hey there
```
```text 出力のレンダリング.txt theme={null}
true false Hey there
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `color_1` | 色 | 比較する第1の色。許容値:6桁の16進数コード(`#FFFFFF`) 3桁の16進数コード(`#F0A`) RGBカラーコード(`rgb(12,31,1)`) 16進数コードまたはRGBカラーコードを格納する変数を使用することもできます。例:`theme.primary_color.color` |
| `color_2` | 色 | 第1の色と比較する第2の色。 |
| `rating` | 文字列 | 評価に使用するWCAGの基準。`AA`(デフォルト)または`AAA`のいずれかを指定できます。 |
## color\_variant
この関数は、16進数値または色変数の明暗を指定の程度に応じて調整します。最初のパラメーターは16進数表記の色(例えば#FFDDFF)、つまり16進数値を格納する変数です。2番目のパラメーターでは、この色を調整する程度を0~255の範囲で指定します。この関数をCSSファイルで使用すると、色のバリエーションを作成できます。別のケースとして、色モジュールの色パラメーターでこれを使用すると、色バリエーションを自動生成する基本色をユーザーが指定できます。
以下の例では、`base_color`という変数に16進数表記の色#3A539Bが格納されます。色が-80調整され、より濃い青(#00034B)になります。
```text hubl.txt theme={null}
{% set base_color ="#3A539B" %}
{{ color_variant(base_color, -80) }}
```
```text 出力のレンダリング.txt theme={null}
#00034b
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `base_color` | 16進数カラー文字列 | 変更の始点となる色。例:`#F7F7F7`。 |
| `brightness_offset` | 整数 | 基本色の濃淡調整に使用するプラスまたはマイナスの数値。 |
## content\_by\_id
`content_by_id`関数は、IDを基準にしてランディングページ、ウェブサイトページ、またはブログ記事を返します。この関数が受け入れるパラメーターは、数値のコンテンツIDのみです。
以下のコード例は、この関数を使ってハイパーリンクされたリスト項目を生成する方法を示しています。
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき10回に制限されています。
```html example.html theme={null}
{% set my_content = content_by_id(4715624297) %}
```
```html example.html theme={null}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `id` | ID | 検索するコンテンツのID。 |
## content\_by\_ids
特定のコンテンツIDのリストを基準にして、そのIDにマッチするランディングページ、ウェブサイトページまたはブログ記事から成るディクショナリー(辞書型)を返します。
この関数は1つのパラメーター、つまり検索するページまたはブログ記事のIDから成るリスト(配列)を受け入れます。最大で100個のコンテンツオブジェクトを渡すことができます。以下のコード例は、この関数を使ってハイパーリンクリスト項目を生成する方法を示しています。
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき10回に制限されています。
```html example.html theme={null}
{% set contents = content_by_ids([4715624297, 4712623297, 5215624284]) %}
```
```html example.html theme={null}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `ids` | リスト | 検索するページまたはブログ記事のIDのリスト。最大で100個のコンテンツオブジェクトを渡すことができます。 |
## copy
リストのシャローコピーを返します。`a[:]`と同等の関数です。
「シャローコピー」では新しい複合オブジェクトが構築され、コピー元のオブジェクトへの「参照」が(可能な限り)それに挿入されます。
```text hubl.txt theme={null}
{% set a = ["ham"] %}
{% set b = a.copy() %}
a: {{a}}
b: {{b}}
After Append
{% do a.append("swiss") %}
a: {{a}}
b: {{b}}
```
```text 出力のレンダリング.txt theme={null}
a: [ham] b: [ham] After Append a: [ham, swiss] b: [ham]
```
## count
ある変数がリスト内に出現する回数を返します。
```html example.html theme={null}
{% set attendees = ["Jack","Jon","Jerry","Jessica"] %}
{% set jon_count = attendees.count("Jon") %}
There are {{jon_count}} Jon's in the list.
After append:
{% do attendees.append("Jon") %}
{% set jon_count_after_append = attendees.count("Jon") %}
There are now {{jon_count_after_append}} Jon's in the list.
```
```html example.html theme={null}
There are 1 Jon's in the list.
After append:
There are now 2 Jon's in the list.
```
## crm\_associations
レコードID、関連付けカテゴリー、関連付け定義IDによって、別のレコードに関連付けられているCRMレコードのリストを取得します。
この関数は、オブジェクトおよび`has_more`、`total`、`offset`、`results`の属性を返します。
* `has_more`は、このバッチに含まれるよりも多い結果が存在する(totalがoffsetよりも大きい)ことを示します。
* `total`は、得られる結果の総数です。
* `offset`は、この次の結果バッチに使用されるオフセットです。
* \*`results`\*は、関数のパラメーターに一致する特定の関連オブジェクトから成る配列を返します。
> [!WARNING]
>
> **注**: セキュリティー上の理由から、一般に公開されるページでは、[HubSpotの標準オブジェクトタイプ](https://knowledge.hubspot.com/ja/ja/crm-setup/get-started-with-objects#standard-objects)のうち、`product`オブジェクトと`marketing_event`オブジェクトのみが取得できます。それ以外の標準オブジェクトタイプは、[パスワードで保護](https://knowledge.hubspot.com/ja/cos-pages-editor/how-can-i-password-protect-my-pages)されたページ、または[アクセス権が設定されたCMSのログインを必要とするページでホスティングされる必要があります。](https://knowledge.hubspot.com/ja/articles/kcs_article/cms-pages-editor/control-audience-access-to-pages)カスタムオブジェクトには同様の制約はありません。
```text hubl.txt theme={null}
{% set associated_contacts = crm_associations(847943847, "HUBSPOT_DEFINED", 2, "limit=3&years_at_company__gt=2&orderBy=email", "firstname,email", false) %}
{{ associated_contacts }}
```
```text 出力のレンダリング.txt theme={null}
{has_more=true, offset=3, total=203, results=[{firstname=Aimee, id=905,
email=abanks@company.com}, {firstname=Amy, id=1056, email=abroma@company.com},
{firstname=Abigael, id=957, email=adonahu@company.com}]}
```
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき最大10回に制限されています。それぞれの`crm_associations`呼び出しで、最大100個のオブジェクトを取得できます。デフォルトでは10個のオブジェクトに制限されています。
| パラメーター | タイプ | 説明 |
| - | - | - |
| `id` | ID | 関関連付けの検索元となるレコードのID。 |
| `association category` | 文字列 | 関連付け定義のカテゴリー。有効な値は、`HUBSPOT_DEFINED`、`USER_DEFINED`、`INTEGRATOR_DEFINED`です。このパラメーターは、HubSpotによって定義済みの標準の関連付けタイプの場合は省略できます。 |
| `association type id` | 整数 | 使用する関連付け定義のID。HubSpotでサポートされる標準オブジェクトについては、[使用する関連付けタイプのID](https://developers.hubspot.jp/docs/guides/api/crm/associations)を参照してください。それ以外の場合、この関連付けIDは[CRMオブジェクトスキーマAPI](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)で確認できます。 |
| `query` | 文字列 | `&`で区切った、レコードの`id`またはクエリー文字列。全ての式はANDで互いに結合されます。以下の演算子がサポートされます:`eq`(デフォルト) `neq` `lt` `lte` `gt` `gte` `is_null` `not_null` `in` `nin` `contains`(複数値のプロパティーまたは文字列プロパティーに適用されます。例:"firstname\_\_contains=Tim") クエリーには以下のパラメーターを含めることができます。`limit`:レスポンスとして返される結果の最大数。例:`limit=50`offset `offset`:返される結果の数がlimitパラメーターを超えている場合、結果ページ送りに使用されます。例:`offset=51` `orderBy`:特定のプロパティーに基づいて結果を並べ替えます。例:`orderBy=email`。 |
| `properties` | 文字列 | 任意。返されるカンマ区切りリストのプロパティー。デフォルトでは、一般的なプロパティーから成る小さなセットが返されます。IDプロパティーは常に返されます。プロパティーの一覧は[全てのコンタクトプロパティーの取得](https://developers.hubspot.jp/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties)(英語)と[全ての会社プロパティーの取得](https://developers.hubspot.jp/docs/reference/api/crm/properties/v1-companies#get-all-company-properties)(英語)のエンドポイントにて確認できます。 |
| `formatting` | ブール値 | 任意。ポータル設定に従って日付や通貨などの値の書式を設定します。文字列を未加工のままにするには、これを省略するか`false`を渡します。 |
## crm\_object
クエリーまたはIDを使用して1つのCRMレコードを取得します。レコードは、プロパティーと値から成るディクショナリーとして返されます。
この関数は[カスタムオブジェクトおよびインテグレーターオブジェクトで使用](/docs/cms/start-building/features/data-driven-content/crm-objects)することもできます。
> [!WARNING]
>
> **注**: セキュリティー上の理由から、一般に公開されるページでは、[HubSpotの標準オブジェクトタイプ](https://knowledge.hubspot.com/ja/ja/crm-setup/get-started-with-objects#standard-objects)のうち、`product`オブジェクトと`marketing_event`オブジェクトのみが取得できます。それ以外の標準オブジェクトタイプは、[パスワードで保護](https://knowledge.hubspot.com/ja/cos-pages-editor/how-can-i-password-protect-my-pages)されたページ、または[アクセス権が設定されたCMSのログインを必要とするページでホスティングされる必要があります。](https://knowledge.hubspot.com/ja/articles/kcs_article/cms-pages-editor/control-audience-access-to-pages)カスタムオブジェクトには同様の制約はありません。
> [!TIP]
>
> `in`と`contains`にはどのような違いがありますか?
>
> `in`は、プロパティー値が、指定された値のうちいずれかの値と一致するかどうかを返します。一方`contains`は、複数選択プロパティー値が、指定された全ての値を含むかどうかを返します。
```text hubl.txt theme={null}
{% set contact = crm_object("contact", "email=contact@company.com", "firstname,lastname", false) %}
{% set contact = crm_object("contact", 123) %}
{{ contact.firstname }}
{{ contact.lastname }}
```
```text 出力のレンダリング.txt theme={null}
Brian Halligan
```
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき最大10回に制限されています。
| パラメーター | タイプ | 説明 |
| - | - | - |
| `object_type` | 文字列 | オブジェクトタイプ名。オブジェクトタイプ名では大文字と小文字が区別されます。ポートされるオブジェクトタイプは、[こちら](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#サポートされるcrmオブジェクトタイプ)で確認できます。アカウントで使用できるアカウント固有オブジェクトタイプとインテグレーター オブジェクト タイプの名前を調べるには、[CRMオブジェクトスキーマAPI](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)を使用してタイプ定義を取得し、名前プロパティーを探します。このプロパティーには、関数内で使用する内部オブジェクトタイプの名前が含まれています。組み込みオブジェクトと同名のfunctionForインテグレーター オブジェクト タイプとアカウント固有オブジェクトタイプの場合は、オブジェクトの[完全修飾名](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)(FQN)を使用します。 |
| `query` | 文字列 | 任意。`&`で区切った、レコードの`id`またはクエリー文字列。全ての式はANDで互いに結合されます。以下の演算子がサポートされます:`eq`(デフォルト) `neq` `lt` `lte` `gt` `gte` `is_null` `not_null` `in` `nin` `contains`(複数値のプロパティーまたは文字列プロパティーに適用されます。例:"firstname\_\_contains=Tim") クエリーには以下のパラメーターを含めることができます。`limit`:レスポンスとして返される結果の最大数。例:`limit=50`offset `offset`:返される結果の数がlimitパラメーターを超えている場合、結果ページ送りに使用されます。例:`offset=51` `orderBy`:特定のプロパティーに基づいて結果を並べ替えます。例:`orderBy=email`。 |
| `properties` | 文字列 | 任意。返されるカンマ区切りリストのプロパティー。デフォルトでは、一般的なプロパティーから成る小さなセットが返されます。IDプロパティーは常に返されます。プロパティーの一覧は[全てのコンタクトプロパティーの取得](https://developers.hubspot.jp/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties)(英語)と[全ての会社プロパティーの取得](https://developers.hubspot.jp/docs/reference/api/crm/properties/v1-companies#get-all-company-properties)(英語)のエンドポイントにて確認できます。 |
| `formatting` | ブール値 | 任意。ポータル設定に従って日付や通貨などの値の書式を設定します。文字列を未加工のままにするには、`false`を渡します。 |
> [!WARNING]
>
> **注**: クエリーを作成する際、`range`、`distinct`、`ndistinct`、`startswith`の値は予約済みのキーワードです。これらの名前のいずれかを使用するプロパティーを照会するには、次の形式を使用する必要があります:`range__eq=`(`range=`ではない)。
## crm\_objects
特定のオブジェクトタイプのレコードのリストをHubSpotのCRMから取得します。
この関数は、オブジェクトおよび`has_more`、`total`、`offset`、`results`の属性を返します。
* `has_more`は、このバッチに含まれるよりも多い結果が存在する(totalがoffsetよりも大きい)ことを示します。
* `total`は、得られる結果の総数です。
* `offset`は、この次の結果バッチに使用されるオフセットです。
* `results`は、関数のパラメーターに一致する特定のオブジェクトから成る配列を返します。
クエリーで少なくとも1つの順序パラメーターを使用することで、結果を並べ替えることができます。例えば`crm_objects("contact", "firstname=Bob&order=lastname&order=createdate")`の場合、`"Bob"`という名(ファーストネーム)のコンタクトが、まず姓の順序、次に`createdate`順で並べ替えられます。逆順で並べ替えるには、例えば`order=-createdate`のようにプロパティー名の前に`-`を付加します。CRMオブジェクト関数は[カスタムオブジェクトおよびインテグレーターオブジェクトで使用](/docs/cms/start-building/features/data-driven-content/crm-objects)することもできます。
> [!WARNING]
>
> **注**: セキュリティー上の理由から、一般に公開されるページでは、[HubSpotの標準オブジェクトタイプ](https://knowledge.hubspot.com/ja/ja/crm-setup/get-started-with-objects#standard-objects)のうち、`product`オブジェクトと`marketing_event`オブジェクトのみが取得できます。それ以外の標準オブジェクトタイプは、[パスワードで保護](https://knowledge.hubspot.com/ja/cos-pages-editor/how-can-i-password-protect-my-pages)されたページ、または[アクセス権が設定されたCMSのログインを必要とするページでホスティングされる必要があります。](https://knowledge.hubspot.com/ja/articles/kcs_article/cms-pages-editor/control-audience-access-to-pages)カスタムオブジェクトには同様の制約はありません。
```text hubl.txt theme={null}
{% set objects = crm_objects("contact", "firstname__not_null=&limit=3", "firstname,lastname") %}
{{ objects }}
```
```text 出力のレンダリング.txt theme={null}
{has_more=true, offset=3, total=331, results=[{firstname=Brian, id=44151,
lastname=Halligan}, {firstname=Dharmesh, id=44051, lastname=Shah},
{firstname=George, id=88551, lastname=Washington}]}
```
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき最大10回に制限されています。それぞれの`crm_objects`呼び出しで、最大100個のオブジェクトを取得できます。デフォルトでは10個のオブジェクトに制限されています。
| パラメーター | タイプ | 説明 |
| - | - | - |
| `object_type` | 文字列 | オブジェクトのタイプの名前。オブジェクトタイプ名では大文字と小文字が区別されます。標準的なオブジェクトタイプでは、単数形と複数形を使用できます(例:`contact`、`contacts`)。詳しくは、[サポート対象のオブジェクトタイプ](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#サポートされるcrmオブジェクトタイプ)をご確認ください。アカウントで使用できるアカウント固有オブジェクトタイプとインテグレーター オブジェクト タイプの名前を調べるには、[CRMオブジェクトスキーマAPI](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)を使用して、タイプ定義と名前プロパティーを取得します。組み込みオブジェクトと同名のインテグレーター オブジェクト タイプとアカウント固有オブジェクトタイプの場合は、オブジェクトの[完全修飾名](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)(FQN)を使用します。 |
| `query` | 文字列 | 任意。`&`で区切った、レコードのIDまたはクエリー文字列。全ての式はANDで互いに結合されます。以下の演算子がサポートされます。`eq`(デフォルト) `neq` `lt` `lte` `gt` `gte` `is_null` `not_null` `in` `nin` `contains`(複数値のプロパティーまたは文字列プロパティーに適用されます。例:"firstname\_\_contains=Tim") 例:`"email=contact@company.com"` |
| `properties` | 文字列 | 任意。返されるカンマ区切りリストのプロパティー。デフォルトでは、一般的なプロパティーから成る小さなセットが返されます。IDプロパティーは常に返されます。プロパティーの一覧は[全てのコンタクトプロパティーの取得](https://developers.hubspot.jp/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties)(英語)と[全ての会社プロパティーの取得](https://developers.hubspot.jp/docs/reference/api/crm/properties/v1-companies#get-all-company-properties)(英語)のエンドポイントにて確認できます。レコードIDは、プロパティーリストに明示的に追加されていない場合でも、返されるオブジェクトプロパティーに常に含まれます。 |
| `formatting` | ブール値 | 任意。ポータル設定に従って日付や通貨などの値の書式を設定します。文字列を未加工のままにするには、`false`を渡します。 |
> [!WARNING]
>
> **注**: クエリーを作成する際、`range`、`distinct`、`ndistinct`、`startswith`の値は予約済みのキーワードです。これらの名前のいずれかを使用するプロパティーを照会するには、次の形式を使用する必要があります:`range__eq=`(`range=`ではない)。
## crm\_property\_definition
指定したオブジェクトタイプと1つのプロパティー名のプロパティー定義を取得します。
サポート対象のオブジェクトタイプは、HubSpot標準オブジェクト(コンタクトなど)、ポータル固有のオブジェクト、インテグレーターオブジェクトです。
**HubL**
```hubl theme={null}
{{ crm_property_definition("house_listing", "agent_name") }}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `object_type` | 文字列 | オブジェクトタイプ名。オブジェクトタイプ名では大文字と小文字が区別されます。ポートされるオブジェクトタイプは、[こちら](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#サポートされるcrmオブジェクトタイプ)で確認できます。アカウントで使用できるアカウント固有オブジェクトタイプとインテグレーター オブジェクト タイプの名前を調べるには、[CRMオブジェクトスキーマAPI](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)を使用してタイプ定義を取得し、名前プロパティーを探します。このプロパティーには、関数内で使用する内部オブジェクトタイプの名前が含まれています。組み込みオブジェクトと同名のfunctionForインテグレーター オブジェクト タイプとアカウント固有オブジェクトタイプの場合は、オブジェクトの[完全修飾名](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)(FQN)を使用します。 |
| `property_name` | 文字列 | 定義を取得するプロパティーの名前。大文字と小文字は区別されません。 |
## crm\_property\_definitions
指定されたオブジェクトタイプと一連のプロパティー名のプロパティー定義を取得します。
サポート対象のオブジェクトタイプは、HubSpot標準オブジェクト(コンタクトなど)、ポータル固有のオブジェクト、インテグレーターオブジェクトです。
**HubL**
```hubl theme={null}
{{ crm_property_definitions("house_listing", "agent_name,address") }}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `object_type` | 文字列 | オブジェクトタイプ名。オブジェクトタイプ名では大文字と小文字が区別されます。ポートされるオブジェクトタイプは、[こちら](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#サポートされるcrmオブジェクトタイプ)で確認できます。アカウントで使用できるアカウント固有オブジェクトタイプとインテグレーター オブジェクト タイプの名前を調べるには、[CRMオブジェクトスキーマAPI](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)を使用してタイプ定義を取得し、名前プロパティーを探します。このプロパティーには、関数内で使用する内部オブジェクトタイプの名前が含まれています。組み込みオブジェクトと同名のfunctionForインテグレーター オブジェクト タイプとアカウント固有オブジェクトタイプの場合は、オブジェクトの[完全修飾名](https://developers.hubspot.com/docs/cms/guides/data-driven-content/crm-objects#カスタム-オブジェクト-タイプの詳細を取得する)(FQN)を使用します。 |
| `property_name` | 文字列 | 任意。カンマで区切られた、定義を取得するプロパティーの名前(名前では大文字と小文字は区別されません)。空白の場合、全てのプロパティーの定義が取得されます。 |
## cta
CTAモジュールには、コードバリエーションを含むパラメーターが多数あるので、cta関数を使用するとテンプレート、ページ、Eメールの中に特定のCTAを簡単に生成できます。リッチテキストエディターを使ってCTAを追加するとき、エディターはこの関数を使用します。
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき10回に制限されています。
```text hubl.txt theme={null}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b") }}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", "justifycenter") }}
```
```html example.html theme={null}
Start a HubSpot trial
Start a HubSpot trial
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `guid` | 文字列 | レンダリングするCTAのID。CTAの詳細画面のURLで確認できます。 |
| `align_opt` | 列挙 | CTAの位置を調整します。値なし:`justifyleft`、`justifycenter`、`justifyright`、`justifyfull`。 |
## extend
反復可能オブジェクトの全ての項目を付加することで、リストを拡張します。言い換えると、あるリストの全ての項目を別のリストに挿入します。
```text hubl.txt theme={null}
{% set vehicles = ["boat","car","bicycle"] %}
{% set more_vehicles = ["airplane","motorcycle"] %}
{% do vehicles.extend(more_vehicles) %}
{{vehicles}}
```
```text 出力のレンダリング.txt theme={null}
[boat, car, bicycle, airplane, motorcycle]
```
## file\_by\_id
この関数は、IDを基準に1件のファイルのメタデータを返します。唯一のパラメーターとして、検索するファイルを示す数値IDを受け入れます。一度に複数のファイルを取得するには、代わりに[files\_by\_ids](#files_by_ids)関数を使用します。
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき10回に制限されています。
```text hubl.txt theme={null}
{% set file = file_by_id(123) %}
{{ file.friendlyUrl }}
```
```text 出力のレンダリング.txt theme={null}
https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_color.svg
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `file_id` | 数値 | 検索するファイルのID。 |
## files\_by\_ids
IDを基準に複数のファイルのメタデータを返します。ファイルIDの配列を受け入れます。
> [!WARNING]
>
> **注**: この関数には、1ページあたり10件の呼び出しという制限があります。この関数は、最大100個のファイルIDを受け入れることができます。
```text hubl.txt theme={null}
{% set files = files_by_ids([123,456])%}
{% for file in files %}
URL:{{file.friendlyUrl}}
{% endfor %}
```
```text 出力のレンダリング.txt theme={null}
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/123/example-file-1
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/456/example-file-2
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `file_id` | 数値 | 検索するファイルのID。カンマ区切りで指定します(最大100個)。 |
例えばこの関数を使用して、コンタクトのアップロードされたファイルをループ処理することができます。結果をループ処理するには、[split HubLフィルター](/docs/cms/reference/hubl/filters#split)を使用する必要があります。これは、CRMプロパティーがセミコロン区切りの文字列として返されるためです。
```hubl theme={null}
{% set objects = crm_objects("contact", "email=bh@hubspot.com", "file").results %}
{% for item in objects %}
{% set fileIDs = item.file|split(";") %}
{% set files = files_by_ids(fileIDs) %}
{% for file in files %}
File name: {{file.name}}
Friendly Url: {{file.friendlyUrl }}
Url: {{file.url }}
{% endfor %}
{% endfor %}
```
## flag\_content\_for\_access\_check
ブログ記事で[セルフ登録アクセスが設定されている](https://knowledge.hubspot.com/ja/ja/blog/use-self-registration-for-private-blog-content)場合、訪問者は、記事のコンテンツ全体を表示するには登録またはログインする必要があります。HubSpotのデフォルトのブログ リスト アセットには、この機能が自動的に含まれています。また、アクセスするためにセルフ登録が必要な記事のロック アイコン インジケーターも含まれています。[この関数とそれに対応するAPIを使用してカスタムソリューションを構築する](https://developers.hubspot.com/docs/cms/testing-staging-performance/memberships/overview#アクセス権設定のユーザーフロー)方法の詳細をご確認ください。
この関数は、現在の訪問者がブログ記事にアクセスできるかどうかを確認します。呼び出されると、この関数は次の属性に置き換えられます。
`hs-member-content-access=`
A value of `true` indicates that the blog post requires the visitor to log in to view the full content.
```text hubl.txt theme={null}
{% for content in contents %}
...
{% endfor %}
```
```text 出力のレンダリング.txt theme={null}
...
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `ID` | ID | 現在ログインしている閲覧者に対してチェックされるコンテンツのID。 |
## follow\_me\_links
[アカウントで設定されているソーシャル メディア アカウントへのリンク](https://knowledge.hubspot.com/ja/ja/design-manager/add-social-links-to-hubspot-templates#add-social-accounts-to-the-follow-me-module)を返します。[デフォルトのfollow\_meモジュール](/docs/cms/reference/modules/default-modules#既定のウェブモジュール)で使用されます。
```text hubl.txt theme={null}
{% set fm = follow_me_links() %}
{{ fm }}
```
```text 出力のレンダリング.txt theme={null}
[FollowMeLink{type=URL, id=5142734, altName=RSS,
followMeUrl=http://website.com/rss.xml, iconName=rss,
name=http://website.com/rss.xml}]
```
## format\_address
コンテキストのロケールに基づいて住所の書式を設定します。
```text hubl.txt theme={null}
{{ format_address('en-us', { address: "25 First Street", address2: "2nd Floor", city: "Cambridge", state: "MA", country: "United States", zip: "02141"}) }}
```
```text 出力のレンダリング.txt theme={null}
[25 First Street, 2nd Floor, Cambridge, MA 02141, United States]
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `locale` | 文字列 | 住所の書式設定に適用するロケール。 |
| `address` | 文字列 | 番地。 |
| `address2` | 文字列 | 住所の2行目(建物名、階数、部屋番号など)。 |
| `city` | 文字列 | 住所の市区町村。 |
| `state` | 文字列 | 住所の都道府県。 |
| `country` | 文字列 | 住所の国。 |
| `zip` | 文字列 | 住所の郵便番号。 |
## format\_company\_name
必要に応じて日本語の敬称を追加するように会社名の書式を設定します。
```text hubl.txt theme={null}
{{ format_company_name("companyName", addJapaneseHonorifics) }}
```
```text 出力のレンダリング.txt theme={null}
HubSpot
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `companyName` | 文字列 | 会社の名前。 |
| `useHonorificIfApplicable` | ブール値 | `true`に設定されている場合、コンテキストの言語が日本語であれば、必要に応じて会社名に日本語の敬称が追加されます。 |
## format\_name
必要に応じて、姓の後に名を続け、日本語の敬称を追加するように、個人の名前の書式を設定します。
```text hubl.txt theme={null}
{{ format_name("firstName", "surname", addJapaneseHonorifics) }}
```
```text 出力のレンダリング.txt theme={null}
Hobbes Baron
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `firstName` | 文字列 | 個人の名。 | |
| `surname` | 文字列 | 個人の姓。 | `False` |
| `useHonorificIfApplicable` | ブール値 | `true`に設定されている場合、コンテキストの言語が日本語であれば、必要に応じて日本語の敬称が追加されます。 | |
## format\_datetime
HubLフィルター[format\_datetime](/docs/cms/reference/hubl/filters#format_datetime)]\(/reference/cms/hubl/filters#datetimeformat(非推奨))と同様に、日付オブジェクトの日付と時刻の両方のコンポーネントの書式を設定します。この関数は、非推奨の`datetimeformat`関数に置き換わるものです。
```text hubl.txt theme={null}
{{ format_datetime(content.publish_date, "short", "America/New_York", "en") }}
```
```text 出力のレンダリング.txt theme={null}
12/31/69 7:00 PM
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `format` | 文字列 | 使用する形式。次のいずれかを使用できます。`short` `medium` `long` `full` 英語に従ったカスタムパターン[Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns) |
| `timeZone` | 文字列 | [IANA TZDB形式](https://data.iana.org/time-zones/tzdb/)(英語)で出力される日付のタイムゾーン。 |
| `locale` | 文字列 | ロケール対応の形式に使用するロケール。 |
## geo\_distance
この関数には4つのパラメーターがあり、地球上の2地点間の楕円2D距離を計算します。この関数は、HubDBデータを取得するためのフィルタークエリーとして使用します。
```html example.html theme={null}
{% for row in hubdb_table_rows(1234567, "geo_distance(loc,1.233,-5.678,mi)__gt=500") %}
{{row.name}}
{% endfor %}
```
```html example.html theme={null}
Cambridge, MA
Salem, MA
San Diego, CA
Chicago, IL
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `point1` | 位置 | HubDB列からの位置。 |
| `point2_lat` | 緯度 | point2の緯度。 |
| `point2_long` | 経度 | point2の経度。 |
| `units` | 文字列 | 戻り値の単位。`FT`(フィート)、`MI`(マイル)、`M`(メートル)、`KM`(キロメートル)が使用できます。 |
## get\_asset\_url
この関数は、指定したテンプレートまたはコードファイルの公開URLを返します。この関数のパラメーターは、デザインマネージャー内でのアセットのパスです。コードファイルURLは、公開されるたびに更新されます。したがって、この関数を使用すると常にファイルの最新バージョンを使用していることを確認できます。
**ファイル**を右クリックして[公開URLをコピー]を選択するか、[アクション]をクリックして[公開URLをコピー]を選択することで、アプリ内でこの関数を自動的に生成できます。
以下の例では、デザインマネージャーで作成されたJavaScriptファイルのURLを取得します。これを`
```
## resize\_image\_url
ファイルマネージャーに保存された画像のURLを、リクエスト時に画像のサイズを変更するURLに書き換えます。この関数は1つの必須パラメーターと5つの任意指定パラメーターを受け入れます。少なくとも1つの任意指定パラメーターを渡す必要があります。
必須
* **URL**: HubSpotでホスティングされている画像のURL(文字列)。
任意
* **width**: 画像の新しい幅(ピクセル単位の数値)。
* **height**: 画像の新しい高さ(ピクセル単位の数値)。
* **length**: 画像の新しい長辺(ピクセル単位の数値)。
* **upscale**: 画像の元の寸法よりも拡大される場合でもサイズ変更後の寸法を使用するかどうかを示すブール値(画像がぼやけて表示される可能性があります)。
* **upsize**: 元のバイト数よりも増える場合でもサイズ変更後の画像を返すかどうかを示すブール値。
> [!WARNING]
>
> **注**: 高さまたは幅が4096ピクセルを超える画像は、自動的にサイズ変更されません。代わりに、[手動で画像のサイズを変更](https://knowledge.hubspot.com/ja/ja/files/automatic-image-resizing-on-hubspot-content)する必要があります。
```text hubl.txt theme={null}
{{ resize_image_url("http://your.hubspot.site/hubfs/img.jpg", 0, 0, 300) }}
```
```text 出力のレンダリング.txt theme={null}
http://your.hubspot.site/hubfs/img.jpg?length=300&name=img.jpg
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `url` | 文字列 | HubSpotでホスティングされている画像のURL。 |
| `width` | 整数(px) | 画像の新しい幅(ピクセル単位)。 |
| `height` | 整数(px) | 画像の新しい高さ(ピクセル単位)。 |
| `length` | 整数(px) | 画像の新しい長辺(ピクセル単位)。 |
| `upscale` | ブール値 | 画像の元の寸法よりも拡大される場合でもサイズ変更後の寸法を使用するかどうかを示すブール値(画像がぼやけて表示される可能性があります)。デフォルト値は`false`です。 |
| `upsize` | ブール値 | 元のバイト数よりも増える場合でもサイズ変更後の画像を返すかどうかを示すブール値。デフォルト値は`false`です。 |
## reverse
リスト内の項目の順序を逆にします。受け入れるパラメーターはありません。オブジェクトを逆にするか、リスト内を逆に反復処理するイテレーターを返すには、[`|reverse`](/docs/cms/reference/hubl/filters#reverse)を使用します。
```text hubl.txt theme={null}
{% set numbers = [1,2,3,4] %}
{% do numbers.reverse() %}
{{numbers}}
```
```text 出力のレンダリング.txt theme={null}
[4, 3, 2, 1]
```
## set\_response\_code
レスポンスコードを指定されたコードに設定します。現在、指定できるコードは[404](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404)だけです。これを使用すると、ページから`404`エラーが返されます。
```text hubl.txt theme={null}
{{ set_response_code(404) }}
```
```text 出力のレンダリング.txt theme={null}
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `code` | 整数 | HTTPレスポンスコード。現在、指定できるコードは`404`だけです。 |
## super
この関数は、[extends](/docs/cms/reference/hubl/overview#blocks-and-extends)タグを使用して、親テンプレートの内容を子テンプレート内に出力します。
例えば下記のコードでは、`sidebar`という名前のHubLブロックを使って基本HTMLテンプレートが作成され、`parent.html`として保存されます。その親ファイルを拡張する2番目のテンプレートファイルが作成されます。通常、``は親HTMLのsidebarブロック内に出力されます。しかし、`super`を使用すると、親テンプレートのsidebarブロックの内容が子テンプレートの内容と結合されます。
```html example.html theme={null}
{% extends "custom/page/web_page_basic/parent.html" %}
{% block sidebar %}
Table Of Contents
{{ super() }}
{% endblock %}
```
```html example.html theme={null}
This is the parent template
Table of contents
Sidebar content from parent.
```
## today
今日の始まり(午前0:00)を返します。タイムゾーンをデフォルトのUTCから変更するパラメーターを追加できます(任意)。
```text hubl.txt theme={null}
{{ today() }}
{{ today("America/New_York") }}
{{ unixtimestamp(today("America/New_York").plusDays(1)) }}
```
```text 出力のレンダリング.txt theme={null}
2018-10-23T00:00Z 2018-10-23T00:00-04:00[America/New_York] 1540353600000
```
## to\_local\_time
HubSpotのレポート設定に基づいて、UNIXタイムスタンプをローカル時間に変換します。その後、datetimeformatフィルターを適用して日付の書式を設定できます。
```text hubl.txt theme={null}
{{ to_local_time(eastern_dt) }}
```
```text 出力のレンダリング.txt theme={null}
2015-05-13 10:37:31
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `date` | 日時 | ローカル時間への変換元となるUNIXタイムスタンプ。 |
## topic\_cluster\_by\_content\_id
コンテンツ部分に関連するトピッククラスターを表すHubLディクショナリーを(渡されたコンテンツIDで判別して)返します。これには、関連付けられているピラーページ、コアトピック、サブトピックについてのメタデータが含まれます。これを使用すると、\[関連ピラーページが存在する場合]、それをコンテンツ部分に「自動リンク」させることができます。
取得可能なメタデータがある場所は、attachableContent(現在のコンテンツのメタデータ)、topic(現在のコンテンツの関連トピックメタデータ)、coreTopic(関連クラスターのコアトピックのメタデータ)、およびpillarPage(関連ピラーページのメタデータ)です。
利用可能なプロパティーと属性を全て表示するには、`{{ topicCluster|pprint }}`を使用してください。
```html example.html theme={null}
{{ topic_cluster_by_content_id(content.id) }}
{%- if content.id -%}
{%- set topicCluster = topic_cluster_by_content_id(content.id) -%}
{%- if topicCluster.pillarPage.url.value and topicCluster.pillarPage.publishState == "PUBLISHED" -%}
{%- endif -%}
{%- endif -%}
```
```html example.html theme={null}
{ attachedContent, topic, coreTopic, pillarPage } (AttachedContentWithContext:
{attachedContent=AttachedContent{id=1234, topicId=1234, clusterId=1234,
portalId=0, attachable=Attachable{contentId=124,
url=ValidatedUri{https://www.hubspot.com/}, attachableType=LANDING_PAGE,
title=title, publishState=PUBLISHED, deletedAt=null}, isLinkedToPillarPage=null,
isPillarPage=null, createdAt=1547238986475, updatedAt=1547238986475,
deletedAt=null}, coreTopic=Optional[Topic{id=1234, portalId=0, clusterId=1234,
phrase=TOPIC PHRASE, attachedContent=null, isCoreTopic=false,
createdAt=1547157062081, updatedAt=1547232313421, deletedAt=null}],
pillarPage=Optional[AttachedContent{id=1234, topicId=1234, clusterId=1234,
portalId=0, attachable=Attachable{contentId=null,
url=ValidatedUri{https://www.hubspot.com.com/}, attachableType=EXTERNAL_URL,
title=null, publishState=PUBLISHED, deletedAt=null}, isLinkedToPillarPage=null,
isPillarPage=null, createdAt=1547157062086, updatedAt=1547157062086,
deletedAt=null}], topic=Optional[Topic{id=1234, portalId=0, clusterId=8345,
phrase=topic phrase, attachedContent=null, isCoreTopic=false,
createdAt=1547238962703, updatedAt=1547238962703, deletedAt=null}]})
```
> [!WARNING]
>
> **注**: この関数の呼び出しは、ページ1件につき10回に制限されています。
| パラメーター | タイプ | 説明 |
| - | - | - |
| `content_id` | Id | 検索するページのID。 |
## truncate
Truncate関数の動作は[truncateフィルター](/docs/cms/reference/hubl/filters#truncate)とまったく同じですが、フィルター構文ではなく関数構文を使用します。最初のパラメーターには、文字列を指定します。2番目のパラメーターには、どこで切り捨てるかを長さで指定します。最後のパラメーターには、切り捨てが発生した場合に追加する文字を指定します。
> [!WARNING]
>
> **注**: この関数は単語間のスペースを使用して文字列を短縮するため、日本語などの文字間にスペースがない言語では期待どおりに機能しないことがあります。
```text hubl.txt theme={null}
{{ truncate("string to truncate at a certain length", 19, false, "...") }}
{% set longString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales ultricies velit sit amet ornare." %}
{{ truncate(longString, 40, false, "...") }}
```
```text 出力のレンダリング.txt theme={null}
string to truncate ... Lorem ipsum dolor sit amet, consectetur ...
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `string_to_truncate` | 文字列 | 切り詰められる文字列。 |
| `length` | 整数 | テキストをどこで切り詰めるかを長さで指定します(HTML文字を含む)。 |
| `killwords` | ブール値 | trueの場合、単語の途中であっても、文字列は指定された長さに切り詰められます。 |
| `end` | 文字列 | テキストが切り詰められた位置を示すために付加される文字。 |
## type
この関数は1つの引数を受け入れ、オブジェクトのタイプを返します。返される値は、`"bool"`、`"datetime"`、`"dict"`、`"float"`、`"int"`、`"list"`、`"long"`、`"null"`、`"str"`、`"tuple"`のいずれかです。
```text hubl.txt theme={null}
{{ type("Blog") }}
{% set my_type = type("Blog") %}
{{my_type}}
```
```text 出力のレンダリング.txt theme={null}
str
```
## unixtimestamp
日時オブジェクトを指定した場合、この関数はUnixタイムスタンプを返します。
```text hubl.txt theme={null}
{{ unixtimestamp(d) }}
```
```text 出力のレンダリング.txt theme={null}
1565983117868
```
## update
別のディクショナリーオブジェクトから、または反復可能なキーと値のペアからの要素を使って、ディクショナリーを更新します。この機能を使用して、オブジェクトを結合またはマージします。
```text hubl.txt theme={null}
{% set dict_var = {"authorName": "Douglas Judy", "authorTitle": "Mastermind" } %}
{% do dict_var.update({"authorFriend": "Jake"}) %}
{% do dict_var.update({"authorLocation": "unknown"}) %}
{{ dict_var }}
```
```text 出力のレンダリング.txt theme={null}
{authorName=Douglas Judy, authorTitle=Mastermind, authorFriend=Jake,
authorLocation=unknown}
```
# if文
Source: https://developers.hubspot.jp/docs/cms/reference/hubl/if-statements
HubSpotのHubL if文に関する、CMS開発者向けの実践的なガイド。
モジュールやテンプレートに条件付きロジックを含めるには、HubLの[if文](#basic-if-statement-syntax)と[unless文](#unless-statements)を使用します。if文では、HubLで[サポートされる演算子](/docs/cms/reference/hubl/operators-and-expression-tests)を使用して、[式の検証](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests)を行うことができます。
> [!WARNING]
>
> \*\*注:\*\*Eメールモジュールの条件文の中で[パーソナライズトークン](/docs/cms/reference/hubl/functions#personalization-token)を使用する場合、[モジュールのプログラマブルEメールをオンにする](/docs/cms/start-building/features/data-driven-content/emails-with-programmable-content)必要があります。
>
> [v3](/docs/api-reference/marketing-marketing-emails-v3/guide)または[v4](/docs/api-reference/marketing-single-send-v4/guide)の1回送信APIを介して渡される情報は、`if`文の中では機能しません。これは、情報が入る前にテンプレートがコンパイルされるためです。
## if文の基本構文
HubLでは、テンプレートのロジックの構築にif文を使用します。HubLのif文の構文は、Pythonの条件付きロジックと似ています。`if`文は[文の区切り文字](/docs/cms/reference/hubl/variables-macros-syntax)に囲まれ、`if`文で始まり`endif`で終わります。
if文の基本構文の例を以下に示します。「condition」は、trueまたはfalseを評価するブール値の条件で置き換えます。
```hubl theme={null}
{% if condition %}
If the condition is true print this to template.
{% endif %}
```
基本構文の次は、基本的なif文の実例を示します。以下の例に示すif文では、`my_module`という名前のHubLモジュールと`my_module`という名前の変数がテンプレートに含まれているかどうかをチェックしています。演算子を指定しないif文では、テンプレートのコンテキストにおいてモジュールが定義されているかどうかが評価されることに注意してください。
```hubl theme={null}
{% module "my_module" path="@hubspot/rich_text", label="My rich text module", html="Default module text" export_to_template_context=true %}
{% if widget_data.my_module %}
A module named "my_module" is defined in this template.
{% endif %}
{% set my_variable = "A string value for my variable" %}
{% if my_variable %}
The variable named my_variable is defined in this template.
{% endif %}
```
HubLモジュールの評価時には`if`文内のモジュール名が引用符で囲まれている一方で、変数の検証時には変数名が引用符で囲まれていない点に注意してください。上記の例では、モジュールも変数もテンプレート上に存在するため、文が評価された結果、マークアップが出力されます。これらの例では、モジュールと変数が定義済みかどうかだけが確認され、モジュールと変数に値が含まれているかどうかは確認されないことに注意してください。
次に、モジュールがテンプレート上に存在しているかどうかではなく、モジュールに値が含まれているかどうかを評価する`if`文について説明します。この場合は[export\_to\_template\_context](/docs/cms/reference/modules/export-to-template-context)パラメーターを使用する必要があります。以下の例では、コンテンツエディター上でテキストモジュールに値が割り当てられている場合に、マークアップが出力されます。モジュールのテキストフィールドがクリアされている場合は、マークアップがレンダリングされません。カスタムモジュールについては、簡略化された`widget.widget_name`構文があります。この構文については[この例](/docs/cms/reference/modules/configuration)で説明しています。
```text input.txt theme={null}
{% module "product_names" path="@hubspot/text", label="Enter the product names that you would like to render the coupon ad for", value="all of our products", export_to_template_context=True %}
{% if widget_data.product_names.value %}
For a limited time, get 50% off {{ widget_data.product_names.value}}!
{% endif %}
```
```text output.txt theme={null}
For a limited time get 50% off all of our products!
```
## elifとelseの使用
追加の条件文や、1つ以上の条件がfalseの場合に実行されるルールを使用した高度な`if`文を作成できます。`elif`文を使用すると、直前の条件の後に評価される条件をロジックに追加できます。\*\*`else`\*\*文は、他の全ての条件がfalseの場合に実行されるルールを定義します。1つのif文の中で使用できる`elif`文の数に制限はありませんが、`else`文の使用は1つに限られます。
[`<=`演算子](/docs/cms/reference/hubl/operators-and-expression-tests#comparison)を使用して変数の値をチェックするif文の基本構文の例を以下に示します。この例では、テンプレートで「Variable named number is less than or equal to 6.(変数numberは6以下です)」と出力されます。
```hubl theme={null}
{% set number = 5 %}
{% if number <= 2 %}
Variable named number is less than or equal to 2.
{% elif number <= 4 %}
Variable named number is less than or equal to 4.
{% elif number <= 6 %}
Variable named number is less than or equal to 6.
{% else %}
Variable named number is greater than 6.
{% endif %}
```
もう1つ、choiceモジュールを使用して、ユーザーが選択した部門に従って経歴ページの見出しをレンダリングする例を紹介します。この例では、choiceモジュールの特定の事前定義値のチェックに[== 演算子](/docs/cms/reference/hubl/operators-and-expression-tests#comparison)を使用しています。
```hubl theme={null}
{% choice "department" label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}
{% if widget_data.department.value == "Marketing" %}
Want to join our amazing Marketing team?!
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Sales" %}
Are you a Sales superstar?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Dev" %}
Do you love to ship code?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% else %}
Want to work with our awesome customers?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% endif %}
```
## unless文
`unless`文は、`if`文と似た条件文ですが、if文とは逆のロジックとして機能します。1つのブール値条件がtrueと評価されない場合に、初めのタグと終わりのタグで囲まれたコードがレンダリングおよびコンパイルされます。unless文は\*\*`unless`**で始まり**`endunless`で終わります。\*\*`unless`文では`else`を使用できますが、`elif`は使用できません。
以下の例では、リッチ テキスト フィールドに値が割り当てられていない場合に「Under construction」(準備中)という見出しが出力されます。リッチ テキスト フィールドに値が含まれている場合は、その値が表示されます。
```hubl theme={null}
{% module "my_page_content" path="@hubspot/rich_text", label="Enter your page content", html="" export_to_template_context=true %}
{{ widget_data.my_page_content.html }}
{% unless widget_data.my_page_content.html %}
This page is under construction.
Come back soon!
{% endunless %}
```
## ifchanged
HubLではif文とunless文の他に、`ifchanged`文があります。この文は、このタグを前回呼び出した後で特定の変数が変更された場合にだけマークアップをレンダリングする場合に使用します。
## インラインif文
HubLではインライン`if`文がサポートされています。[演算子と式の検証](/docs/cms/reference/hubl/operators-and-expression-tests)による簡潔な条件ロジックを作成する際に使用できます。
```hubl theme={null}
{% set color = "Blue" if is_blue is truthy else "Red" %} // color == "blue"
{{ "Blue" if is_blue is truthy else "Red" }} // "Blue"
{% set dl = true %}
Download PDF
```
## 三項演算子
また[演算子と式の検証](/docs/cms/reference/hubl/operators-and-expression-tests#logical)による条件文を簡単に記述する際には、三項演算子を使用することもできます。
```hubl theme={null}
// If the variable is_blue is true, output "blue", otherwise output"red"
{{ is_blue is truthy ? "blue" : "red" }}
// Set the variable is_red to false if is_blue is true, otherwise set to true
{% set is_red = is_blue is truthy ? false : true %}
```
# forループ
Source: https://developers.hubspot.jp/docs/cms/reference/hubl/loops
Forループは、HubLでのオブジェクトのシーケンスに対する反復処理に使用できます。
forループは、HubLでのオブジェクトのシーケンスに対する反復処理に使用できます。主に[ブログコンテンツ](/docs/cms/start-building/building-blocks/templates/blog)をリスト形式でレンダリングする場合に使用されますが、他のシーケンス変数を並べ替える場合にも使用できます。
forループは、`{% for %}`文で始まり`{% endfor %}`文で終わります。`{% for %}`文では、シーケンス項目の名前に続き、`in`を使ってシーケンス名を指定します。`for`文の始まりから終わりまでの間のコードが、反復の度に出力されます。このコードには通常、各シーケンス項目の出力変数が含まれます。forループの基本構文は以下のとおりです。
```hubl theme={null}
{% for item in items %}
{{ item }}
{% endfor %}
```
変数値のシーケンスをリストに出力する方法を以下の例に示します。
```html example.html theme={null}
{% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %}
Languages ;
{% for language in languages %}
{{ language }}
{% endfor %}
```
```html example.html theme={null}
Languages
HTML
CSS
Javascript
Python
Ruby
PHP
Java
```
## ループプロパティー
ループの反復中に、[条件文](/docs/cms/reference/hubl/if-statements)を使用してループの動作を定義できます。変数プロパティー`loop.index`によって、ループの現在の反復数(イテレーション)がカウントされます。他にも反復数をさまざまな方法でカウントするloop変数プロパティーがあります。これらのプロパティーについては以下に示します。
| 変数 | Description |
| - | - |
| `loop.cycle` | シーケンスリスト間を循環するヘルパー関数。後述の説明を参照してください。 |
| `loop.depth` | 再帰ループでのレンダリングの現在の深さを示します。レベル1から開始します。 |
| `loop.depth0` | 再帰ループでのレンダリングの現在の深さを示します。レベル0から開始します。 |
| `loop.first` | この変数は、ループの最初の反復である場合にtrueとして評価されます。 |
| `loop.index` | ループの現在の反復数。この変数はカウントを1から開始します。 |
| `loop.index0` | ループの現在の反復数。この変数はカウントを0から開始します。 |
| `loop.last` | この変数は、ループの最後の反復である場合にtrueとして評価されます。 |
| `loop.length` | シーケンスの項目の数。 |
| `loop.revindex` | ループの終わりまでの反復数。1までカウントダウンします。 |
| `loop.revindex0` | ループの終わりまでの反復数。0までカウントダウンします。 |
さまざまなループ変数の使用例を以下にいくつか示します。以下の基本的な例では、`loop.index`を使用して、反復の度に出力されるカウントを行います。
```html example.html theme={null}
{% set loopy = ["Content", "Social", "Contacts", "Reports"] %}
{% for app in loopy %}
{{ loop.index }}. {{app}}
{% endfor %}
```
```html example.html theme={null}
1. Content
2. Social
3. Contacts
4. Reports
```
次の例では、条件文を使用して、ループの長さが特定の数で`divisibleby`(割り切れる)かどうかをチェックします。次に、記事項目divの幅をレンダリングします。この例では標準のブログ記事ループを使用し、ループに6件の記事があると仮定しています。
```html example.html theme={null}
{% for content in contents %}
{% if loop.length is divisibleby 4 %}
Post content
{% elif loop.length is divisibleby 3 %}
Post content
{% else %}
Post content
{% endif %}
{% endfor %}
```
```html example.html theme={null}
Post content
Post content
Post content
Post content
Post content
Post content
Post content
```
## ネストしたループ
ループを他のループでネストすることもできます。子forループは、親forループが反復される度に実行されます。以下の例では、親項目の``の中でネストしている``でレンダリングするスクリプトを、ここで説明するインラインの方法ではなく、``要素を使用して別のファイルから読み込む場合は、代わりにHubL関数[`require_js(absolute_url)`](/docs/cms/reference/hubl/functions#require-js)を使用します。
```text 入力.txt theme={null}
{{ standard_header_includes }}
{% require_js position="footer" %}
{% end_require_js %}
{{ standard_footer_includes }}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `position` | 文字列 | インラインスクリプトをレンダリングする位置を設定します。使用可能な値は、`"head"`および`"footer"`です。 | `"footer"` |
## リッチテキスト
WYSIWYGコンテンツエディターを作成します。
```text 入力.txt theme={null}
{% rich_text "rich_text" %}
{% rich_text "left_column" label="Enter HTML here" html="My rich text default content
" %}
Block Syntax Example:
{% widget_block rich_text "right_column" overrideable=True, label="Right Column" %}
{% widget_attribute "html" %}
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Remember:
Bullets are great
For spelling out benefits and
Turning visitors into leads.
{% end_widget_attribute %}
{% end_widget_block %}
```
```text 出力.txt theme={null}
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're offering, and the form
header closes the deal. Over here you can explain why your offer is so great
it's worth filling out a form for.
Remember:
Bullets are great
For spelling out benefits and
Turning visitors into leads.
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `html` | 文字列 | モジュールのデフォルトのリッチテキストコンテンツ。 | `Something Powerful Tell The Reader More The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Remember:
Bullets are great For spelling out [benefits](#) and Turning visitors into leads. ` |
## RSSリスティング
内部または外部のRSSフィードからコンテンツのリストを読み込みます。
> [!WARNING]
>
> ### 注:
>
> このモジュールは、クライアント側で非同期的に読み込まれます。そのため、読み込まれた後にフィードを操作する場合は、その操作を処理するグローバルJS関数を定義する必要があります。関数`hsRssFeedComplete(feeds)`を使用してください。`feeds`には完了した全てのフィードのjQueryセレクターを渡します。この関数でDOMオブジェクトを直接操作できます。
```text 入力.txt theme={null}
{% rss_listing "rss_listing" %}
{% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `show_title` | ブール値 | RSSフィードタイトルを表示または非表示にします。 | `True` |
| `show_date` | ブール値 | 投稿日を表示します。 | `True` |
| `show_author` | ブール値 | 執筆者名を表示します。 | `True` |
| `show_detail` | ブール値 | `limit_to_chars`パラメーターによって設定された最大文字数までの記事要約を表示します。 | `True` |
| `title` | 文字列 | RSSフィードリストの上の見出しを入力します。 | |
| `limit_to_chars` | 数値 | 要約に表示する文字の最大数。 | `200` |
| `publish_date_format` | 文字列 | 公開日の形式。指定可能な値は、`"short"`、`"medium"`、および`"long"`です。`"MMMM d, yyyy 'at' h:mm a"`などのカスタム形式も利用できます。 | `"short"` |
| `attribution_text` | 文字列 | 執筆者を記事に関連付けるテキスト。 | `"by"` |
| `click_through_text` | 文字列 | 記事要約の最後にあるクリックスルーリンクに表示されるテキスト。 | `"Read more"` |
| `publish_date_text` | 文字列 | 記事がいつ公開されたかを示すテキスト。 | `"posted at"` |
| `include_featured_image` | ブール値 | HubSpotが生成したRSSフィードの記事リンクと共にキービジュアルを表示します。 | `False` |
| `item_title_tag` | 文字列 | 各記事タイトルのHTMLタグを指定します。 | `span` |
| `is_external` | ブール値 | 外部ブログのRSSフィードを取得します。 | `False` |
| `number_of_items` | 数値 | 表示する記事の最大数。 | `5` |
| `publish_date_language` | 文字列 | 公開日の言語を指定します。 | `en_US` |
| `rss_url` | 文字列 | RSSフィードが所在するURL。 | |
| `content_group_id` | 文字列 | フィードソースが内部ブログの場合、ブログのID。 | |
| `select_blog` | 文字列 | 内部HubSpotブログフィードを選択するために使用できます。 | `default` |
| `feed_source` | 文字列 | RSSフィードのソースを設定します。内部の場合、標準形式は`{rss_url="", is_external=False, content_group_id="2502431580"}`です。外部の場合、標準形式は`{rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}`です。 | |
| `tag_id` | 数値 | フィードソースが内部ブログの場合、タグのID。 | |
## セクションヘッダー
Htmlの見出しと``サブヘッダーを生成します。
```text 入力.txt theme={null}
{% section_header "section_header" %}
{% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header" %}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `header` | 文字列 | ヘッダーに表示するテキスト。 | `"A clear and bold header"` |
| `subheader` | 文字列 | サブヘッダーに表示するテキスト。 | `"A more subdued subheader"` |
| `heading_level` | 文字列 | セマンティックHTMLの見出しレベル。h1からh6までがサポートされます。 | `"h1"` |
## シンプルメニュー
シンプルメニューでは、ページレベルで変更できる基本的な[ナビゲーションメニュー](/docs/cms/start-building/building-blocks/modules/menus-and-navigation)を作成できます。通常のメニューモジュールとは異なり、シンプルメニューはウェブサイト設定のナビゲーション画面からは管理されず、テンプレートとページエディターから管理されます。[ブロック構文](/docs/cms/reference/modules/using-modules-in-templates#block-syntax)を使用してデフォルトのメニューツリーを設定できます。
```text 入力.txt theme={null}
{% simple_menu "simple_menu" %}
{% simple_menu "my_simple_menu" orientation="horizontal", label="Simple Menu" %}
Block Syntax Example:
{% widget_block simple_menu "block_simple_menu" overrideable=True, orientation="horizontal", label="Simple Menu" %}
{% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %}
{% end_widget_block %}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `orientation` | 列挙 | ページのメニュー項目の方向をスタイル設定できるようにするための、メニューマークアップのクラスを定義します。指定可能な値は、`"horizontal"`および`"vertical"`です。 | `"horizontal"` |
| `menu_tree` | JSON | ページリンク名とターゲットURLを含むメニュー構造。 | `[]` |
## ソーシャルシェアリング
ソーシャルシェアリングタグは、特定のページをシェアするために使用できるソーシャルメディアのアイコンを生成します。このモジュールを[ブロック構文](/docs/cms/reference/modules/using-modules-in-templates#block-syntax)と組み合わせると、アイコン画像などをカスタマイズできます。
```text 入力.txt theme={null}
{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}
Block Syntax Example:
{% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True %}
{% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `use_page_url` | ブール値 | trueの場合、モジュールはデフォルトでページのURLを共有します。 | `True` |
| `link` | 文字列 | `use_page_url`がfalseの場合、共有する別のURLを指定します。 | |
| `pinterest` | JSON | Pinterestリンク形式とアイコン画像ソースのパラメーター。 | `See block syntax example, above` |
| `twitter` | JSON | Twitterリンク形式とアイコン画像ソースのパラメーター。 | `See block syntax example, above` |
| `linked_in` | JSON | LinkedInリンク形式とアイコン画像ソースのパラメーター。 | `See block syntax example, above` |
| `facebook` | JSON | Facebookリンク形式とアイコン画像ソースのパラメーター。 | `See block syntax example, above` |
| `email` | JSON | Eメール シェア リンク形式とアイコン画像ソースのパラメーター。 | `See block syntax example, above` |
## スペーサー
スペーサータグは空のspanタグを生成します。このタグは、スペーサーとして機能するようにスタイル設定できます。ドラッグ&ドロップレイアウトで、スペーサーモジュールはspan1~span12のクラスが指定されたコンテナーでラップされ、モジュールが12列のレスポンシブグリッドでどれほどのスペースを占めるかを指定します。
```text 入力.txt theme={null}
{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}
```
```text 出力.txt theme={null}
```
## システム ページ タグ
次のタグは、パスワード リセット ページやEメール配信登録(サブスクリプション)ページなどの[システムページ](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/templates/overview#system-pages)で使用できます。
### Eメールバックアップ配信停止
Eメール受信者が配信を停止しようとするときにHubSpotがそのEメールアドレスを確認できない場合は、Eメール受信者に対してバックアップ配信解除タグが表示されます。このタグは、コンタクトがEメールコミュニケーションの配信を停止するEメールアドレスを入力するためのフォームをレンダリングします。これは、[配信解除バックアップシステムテンプレート](https://knowledge.hubspot.com/ja/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)に使用する必要があります。
```text 入力.txt theme={null}
{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `header` | 文字列 | 配信停止フォームの上に、テキストをh1タグで囲んで表示します。 | `"Email Unsubscribe"` |
| `input_help_text` | 文字列 | Eメール配信停止フォームフィールドの上に、ヘルプテキストをh3タグで囲んで表示します。 | `"Your email address:"` |
| `input_placeholder` | 文字列 | Eメールアドレスのフォームフィールド内にプレースホルダーテキストを追加します。 | `"email@example.com"` |
| `button_text` | 文字列 | 配信停止フォームの送信ボタンのテキストを変更します。 | `"Unsubscribe"` |
### Eメール配信登録
このモジュールは、Eメール受信者が配信設定を編集するときにレンダリングされます。これは、[配信設定システムテンプレート](https://knowledge.hubspot.com/ja/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)に使用する必要があります。
```text 入力.txt theme={null}
{% email_subscriptions "email_subscriptions" %}
{% email_subscriptions "email_subscriptions"
resubscribe_button_text="Yes, resubscribe me!",
unsubscribe_single_text="Uncheck the types of emails you do not want to receive:",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n",
unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?",
button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences",
unsubscribe_all_option="Unsubscribe me from all mailing lists.",
unsubscribe_all_text="Or check here to never receive any emails:"
%}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `header` | 文字列 | 配信設定フォームの上に、テキストをh1タグで囲んで表示します。 | `"Communication Preferences"` |
| `subheader_text` | 文字列 | 配信停止設定の上、見出しの下のテキストを設定します。 | `"If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_single_text` | 文字列 | 配信登録オプションの上に、``で囲んで表示するテキストを設定します。 | `"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"` |
| `unsubscribe_all_option` | 文字列 | [全てのEメール配信を停止]チェックボックス入力の隣のテキストを設定します。 | `"Unsubscribe me from all mailing lists."` |
| `button_text` | 文字列 | 配信設定を更新する送信ボタンのテキストを設定します。 | `"Update email preferences"` |
| `resubscribe_button_text` | 文字列 | コンタクトが配信に再登録する場合の送信ボタンのテキストを設定します。 | `"Yes, resubscribe me!"` |
### Eメール配信登録確認
Eメール配信登録の更新確認は、受信者が配信設定を更新するとき、または配信解除する際のサンキューテンプレートに追加できるモジュールです。これは、[配信設定システムテンプレート](https://knowledge.hubspot.com/ja/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)に使用する必要があります。
```text 入力.txt theme={null}
{% email_subscriptions_confirmation "email_subscriptions_confirmation" %}
{% email_subscriptions_confirmation "email_subscriptions_confirmation"
label="Subscriptions Update Confirmation",
unsubscribe_all_success="You have successfully unsubscribed from all email communications.",
subscription_update_success="You have successfully updated your email preferences.",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n"
%}
```
```text 出力.txt theme={null}
You have successfully updated your email preferences.
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `header` | 文字列 | 配信停止フォームの上に、テキストをh1タグで囲んで表示します。 | `"Communication Preferences"` |
| `subheader_text` | 文字列 | 確認メッセージの上のテキストを設定します。 | `"If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_all_success` | 文字列 | 全てのEメールコミュニケーションを配信停止した際に表示されるテキストを設定します。 | `"You have successfully unsubscribed from all email communications."` |
| `subscription_update_success` | 文字列 | 受信者が配信設定を更新した際のテキストを設定します。 | `"You have successfully updated your email preferences."` |
### メンバーシップのログイン
[非公開コンテンツ](https://knowledge.hubspot.com/ja/website-pages/require-member-registration-to-access-private-content)へのアクセスするためのログインフォームを作成します。
```text 入力.txt theme={null}
{% member_login "my_login" %}
{% member_login "my_login"
email_label="Email",
password_label="Password",
remember_me_label="Remember Me",
reset_password_text="Forgot your password?",
submit_button_text="Login",
show_password="Show password"
%}
```
```text 出力.txt theme={null}
You've made too many attempts at this request. Please try this action again
in a few minutes.
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `email_label` | 文字列 | Eメール入力フィールドのラベル。 | `"Email"` |
| `password_label` | 文字列 | パスワード入力フィールドのラベル。 | `"Password"` |
| `remember_me_label` | 文字列 | [ログイン情報を記憶する]チェックボックスのラベル。 | `"Remember Me"` |
| `reset_password_text` | 文字列 | パスワード リセット ハイパーリンクのテキスト。 | `"Forgot your password?"` |
| `submit_button_text` | 文字列 | 送信ボタンのテキスト。 | `"Login"` |
| `show_password` | 文字列 | パスワード表示リンクのテキスト。 | `"Show password"` |
### メンバーシップ登録
[非公開コンテンツ](https://knowledge.hubspot.com/ja/website-pages/require-member-registration-to-access-private-content)にアクセスするための登録フォームを作成します。
```text 入力.txt theme={null}
{% member_register "my_register" %}
{% member_register "my_register"
email_label="Email",
password_label="Password",
password_confirm_label="Confirm Password",
submit_button_text="Save Password",
show_password="Show password"
%}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `email_label` | 文字列 | Eメール入力フィールドのラベル。 | `"Email"` |
| `password_label` | 文字列 | パスワード入力フィールドのラベル。 | `"Password"` |
| `password_confirm_label` | 文字列 | パスワード確認フィールドのラベル。 | `"Confirm Password"` |
| `submit_button_text` | 文字列 | 送信ボタンのテキスト。 | `"Save Password"` |
| `show_password` | 文字列 | パスワード表示リンクのテキスト。 | `"Show password"` |
### パスワードリセットのリクエスト
パスワードで保護されたページにアクセスするためのパスワードリセットEメールを送信するフォームを作成します。
```text 入力.txt theme={null}
{% password_reset_request "my_password_reset_request" %}
{% password_reset_request "my_password_reset_request"
email_label="Email",
submit_button_text="Send Reset Email"
%}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `email_label` | 文字列 | Eメール入力フィールドのラベル。 | `"Email"` |
| `submit_button_text` | 文字列 | 送信ボタンのテキスト。 | `"Send Reset Email"` |
| `password_reset_message` | 文字列 | パスワードリセットEメールをリクエストした後に表示されるメッセージ。 | `False` |
### パスワードリセット
パスワードで保護されたページにアクセスするためのパスワード リセット フォームをレンダリングします。
```text 入力.txt theme={null}
{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `password_label` | 文字列 | パスワード入力フィールドのテキストラベル。 | `"Email"` |
| `password_confirm_label` | 文字列 | パスワード確認入力フィールドのテキストラベル。 | `"Send Reset Email"` |
| `submit_button_text` | 文字列 | フォーム送信ボタンのテキストラベル。 | `False` |
| `show_password` | 文字列 | 入力されたパスワード値を表示するボタンのテキストラベル。 | `False` |
| `password_requirements` | 文字列 | パスワード要件を説明するテキストラベル。 | `False` |
### パスワードプロンプト
パスワードで保護されたページにパスワードプロンプトを追加します。
```text 入力.txt theme={null}
{% password_prompt "password_prompt" %}
{% password_prompt "my_password_prompt"
submit_button_text="Submit",
bad_password_message="Sorry, please try again.\n",
label="Password Prompt"
%}
```
```text 出力.txt theme={null}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `submit_button_text` | 文字列 | パスワード入力フィールドの下にあるボタンのラベル。 | `"Submit"` |
| `bad_password_message` | 文字列 | 正しくないパスワードが入力された場合に表示されるメッセージ。 | `"Sorry, please try again.
"` |
| `password_placeholder` | 文字列 | パスワードフィールド内のプレースホルダーテキストを定義します。 | `"Password"` |
## テキスト
1行テキストを作成します。このタグは、`no_wrapper=True`パラメーターを指定してマークアップと組み合わせて使用すると便利です。例えば、定義済みアンカーのターゲット定義をエンドユーザーに許可する場合、`no_wrapper=True`を指定したテキストモジュールを`href`に入力できます。
```text 入力.txt theme={null}
{% text "text" %}
{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
```
```text 出力.txt theme={null}
This is the default value for this text field
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `value` | 文字列 | 1行テキストフィールドのデフォルトのテキストを設定します。 |
## テキストエリア
テキストエリアはユーザーがプレーンテキストを入力できる点でテキストモジュールと似ていますが、コンテンツエディター上で大きなエリアを提供できます。このモジュールではHTMLはサポートされません。定義済みのラッピングタグ内で直接使用する場合は、`no_wrapper=true`パラメーターを追加します。
```text 入力.txt theme={null}
{% textarea "my_textarea" %}
{% textarea "my_textarea" label="Enter plain text block", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.", no_wrapper=True %}
```
```text 出力.txt theme={null}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis
lacus vehicula rutrum.
```
| パラメーター | タイプ | 説明 |
| - | - | - |
| `value` | 文字列 | テキストエリアのデフォルトのテキストを設定します。 |
## 動画プレーヤー
[埋め込み、共有、トラッキングを許可]設定が有効になっているファイルマネージャーの動画ファイルの動画プレーヤーをレンダリングします。
**入力**
```hubl theme={null}
{% video_player "embed_player" %}
{% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
```
| パラメーター | タイプ | 説明 | デフォルト値 |
| - | - | - | - |
| `hide_playlist` | ブール値 | 動画のプレイリストを非表示にします。 | `True` |
| `playlist_color` | 文字列 | プレイリストの16進表記の色の値。 | |
| `play_button_color` | 文字列 | 再生ボタンと一時停止ボタンの16進表記の色の値。 | `#2A2A2A` |
| `embed_button` | ブール値 | プレーヤーに埋め込みボタンを表示します。 | `False` |
| `viral_sharing` | ブール値 | プレーヤーにソーシャルネットワークのシェアボタンを表示します。 | `False` |
| `width` | 数値 | 埋め込み動画プレーヤーの幅。 | `Auto` |
| `height` | 数値 | 埋め込み動画プレーヤーの高さ。 | `Auto` |
| `player_id` | 数値 | 埋め込む動画の`player_id`。 | |
| `style` | 文字列 | プレーヤーの追加のスタイル。 | |
| `conversion_asset` | JSON | プレーヤーのイベント設定。動画再生の前または後にCTAまたはフォームをレンダリングできます。このパラメーターは、type(FORMまたはCTA)、id(typeオブジェクトのGUID)、position(POSTまたはPRE)という3つのパラメーターを含むJSONオブジェクトを受け入れます。 | `See above example` |
| `placeholder_alt_text` | 文字列 | 動画の代替テキスト。 | |
# HubL変数
Source: https://developers.hubspot.jp/docs/cms/reference/hubl/variables
HubSpotのテンプレートでは、さまざまな事前定義変数をウェブサイトやEメールの要素のレンダリングに活用できます。このページでは、このような変数のリストをリファレンスとして掲載しています。
HubSpotのテンプレートでは、さまざまな事前定義変数をウェブサイトやEメールの要素のレンダリングに活用できます。このページでは、このような変数のリファレンスとしてリストを掲載しています。[HubLテンプレート](/docs/cms/reference/hubl/variables-macros-syntax)または[モジュール](/docs/cms/start-building/building-blocks/templates/html-hubl-templates)に[独自の変数を作成する方法](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)についてはそれぞれ詳細をご確認ください。
このページに記載されている変数のほとんどは任意指定ですが、テンプレートからEメールやページを作成する上で必須の変数もいくつかあります。
> [!WARNING]
>
> 以下の変数は、[変数とマクロのページ](/docs/cms/reference/hubl/variables-macros-syntax)に記載されているように、変数を`}}`区切り文字で囲むことで、個別に使用できます。これらの変数は、HubLテンプレート言語の他の部分([ループ](/docs/cms/reference/hubl/loops)、[フィルター](/docs/cms/reference/hubl/filters)、[関数](/docs/cms/reference/hubl/functions)、[タグ](/docs/cms/reference/hubl/tags/standard-tags)など)でも使用できます。
## 全てのテンプレートで利用可能な変数
以下のHubL変数をEメール、ページ、またはブログのテンプレートで使用できます。
これらの変数からの出力に関する追加情報を見るには、以下に示すように[pprintフィルター](/docs/cms/reference/hubl/filters#pprint)を使用できます。
```text 入力.txt theme={null}
{% set variable = content %}
{{variable|pprint}}
```
```text 出力.txt theme={null}
(ContentMeta: { "canonicalUrl" : "https://www.website.com/url-slug",
"deferDynamicValues" : false, "featuredImageAltText" : "", "featuredImageHeight"
: 0, "featuredImageUrl" : "", "featuredImageWidth" : 0, "htmlTitle" : "",
"linkRelCanonicalUrl" : "https://www.website.com/url-slug", "metaDescription" :
"", "metaKeywords" : "", "name" : "", "unescapedHtmlTitle" : "",
"unescapedMetaDescription" : null })
```
\| 変数 | 型 | 説明 |
\| --- | --- | --- | --- |
\| `account` | ディクショナリー | 既知のコンタクトの[関連付けられたプライマリー会社](https://knowledge.hubspot.com/ja/records/associate-records#understand-the-primary-company-association)から、[会社プロパティー値](/docs/api-reference/crm-properties-v3/guide)を格納するディクショナリー。この変数にピリオドと内部プロパティー名を追加することで、特定の会社プロパティー(カスタムとデフォルトの両方)にアクセスできます。例えば、`account.name`はコンタクトに関連付けられているプライマリー会社の名前を出力します。\
\
この変数を使用すると、ページキャッシュが無効になります。詳しくは[ページプリレンダリングとJavaScriptの代替案](/docs/cms/best-practices/testing-staging-performance/prerendering)をご確認ください。 |
\| `company_domain` | 文字列 | [ウェブサイト]>[ページ]>[ブランディング]>[ロゴのリンク]に設定されている会社のドメインを出力します。 | \*\* \*\*\*\* \***\* \*\*** \*\* |
\| `contact` | ディクショナリー | 既知のコンタクトに関する[コンタクトプロパティー値](/docs/api-reference/crm-properties-v3/guide)を格納するディクショナリー。この変数にピリオドと内部プロパティー名を追加することで、特定のコンタクトプロパティー(カスタムとデフォルトの両方)にアクセスできます。例えば、`contact.firstname`ではコンタクトの下の名前が出力されます。\
\
この変数を使用すると、ページキャッシュが無効になります。詳しくは[ページプリレンダリングとJavaScriptの代替案](/docs/cms/best-practices/testing-staging-performance/prerendering)をご確認ください。 |
\| `content` | ディクショナリー | 特定のコンテンツ(Eメール、ページ、記事など)に関連するさまざまなプロパティーを格納するディクショナリー。 |
\| `content.absolute_url` | 文字列 | ページ、記事、またはEメールのウェブページバージョンのURL全体を出力します。 |
\| `content.archived` | ブール値 | ページまたはEメールがユーザーによってアーカイブ済みの場合に、`true`と評価されます。 |
\| `content.author_email` | 文字列 | コンテンツ作成者のEメールアドレス。 |
\| `content.author_name` | 文字列 | コンテンツ作成者の姓名。 |
\| `content.author_username` | 文字列 | コンテンツ作成者のHubSpotユーザー名。 |
\| `content.campaign` | 文字列 | このページまたはEメールに関連付けられているマーケティングキャンペーンのGUID。この固有IDは、キャンペーンツール内の特定のキャンペーンのURLで確認できます。 |
\| `content.campaign_name` | 文字列 | このページ、この記事、またはこのEメールに関連付けられているマーケティングキャンペーンの名前。 |
\| `content.created` | 日時 | コンテンツが最初に作成された時刻を示す日時オブジェクト(UTC時刻)。[Datetimeフィルター](/docs/cms/reference/hubl/filters#datetimeformat)を使用して、この変数の書式を設定できます。 |
\| `content.meta_description` | 文字列 | ページのメタディスクリプションを取得するときには、`page_meta.meta_description`変数を使用することをお勧めします。 |
\| `content.name` | 文字列 | 記事、Eメール、またはページの名前。ページとEメールの場合は内部コンテンツ名が出力され、記事の場合は記事のタイトルが出力されます。ブログ記事の場合、表示される記事のタイトルです。その他のコンテンツタイプの場合、一般に内部名です。この変数にはラッパーが含まれているので、ブログ記事に組み込まれている場合にはユーザーインターフェイス上で編集できます。ラッパーなしでコンテンツ名を出力するには、`page_meta.name`を使用します。 |
\| `content.publish_date` | 日時 | コンテンツが公開された時刻を表す日時オブジェクト(UTC時刻)。[format\_datetimeフィルター](/docs/cms/reference/hubl/filters#format-datetime)を使用して、この変数の書式を設定できます。 |
\| `content.publish_date_localized` | 文字列 | アカウントの[デフォルトの設定](https://knowledge.hubspot.com/ja/account-management/change-your-language-and-region-settings)で定義されたタイムゾーンを使用してコンテンツが公開された日時を表す文字列。この変数は、[言語と日付形式の設定](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#set-your-blog-s-date-formats)の影響も受けます。 |
\| `content.template_path` | 文字列 | デザインマネージャーでのテンプレートのファイルパス(例:`custom/page/web_page_basic/my_template.html`)。 |
\| `content.slug` | 文字列 | ページ、記事、またはEメール(ウェブページバージョン)のURLスラッグ。これは、ドメインの後に続く値です。例えば、`https://example.com/about-us`の中のスラッグは`about-us`です。URL全体を指定するには、代わりに`content.absolute_url`使用します。 |
\| `content.updated` | 日時 | ユーザーが最後にコンテンツを更新した日時を表す日時オブジェクト(UTC時刻)。Datetimeフィルターを使用して、この変数の書式を設定できます。最初の公開時の`content.publish_date`とは等しくありません。[`|between_times`](/docs/cms/reference/hubl/filters#between-times)フィルターを使用します。 |
\| `content_id` | 文字列 | ページ、記事、またはEメールの一意のIDを出力します。このIDはエディターのURLで確認できます。この変数は`content.id`のエイリアスとして使用できます。 |
\| `favicon_link` | 文字列 | ファビコンのソースURLを出力します。詳しくは[HubSpotでのファビコンの設定](https://knowledge.hubspot.com/ja/branding/edit-your-logo-favicon-and-brand-colors#add-or-edit-your-favicon)をご確認ください。 |
\| `hub_id` | 文字列 | ご使用のHubSpotアカウントのポータルID。 |
\| `hubspot_analytics_tracking_code` | 文字列 | アナリティクストラッキングコードが含まれます。`standard_footer_includes`が既にトラッキングコードをレンダリングしているため、このタグは必ずしも必要ではありません。 |
\| `local_dt` | 日時 | レポート設定で定義されているタイムゾーンでの現在時刻を表す日時オブジェクト。この変数を使用すると、現在の時間を返す必要があるため、ページキャッシュが無効になります。詳しくは[ページプリレンダリングとJavaScriptの代替案](/docs/cms/best-practices/testing-staging-performance/prerendering)をご確認ください。 |
\| `local_time_zone` | 文字列 | HubSpotのレポート設定で指定されているタイムゾーン。 |
\| `page_meta.canonical_url` | 文字列 | このページにアクセスするための正式なURL。通常はクエリー文字列パラメーターが含まれません。これを`rel="canonical"`タグに使用してください。HubSpotによりURLが自動的に正規化されます。 |
\| `page_meta.html_title` | 文字列 | ページのタイトル。この変数をHTMLテンプレートの``タグで使用します。 |
\| `page_meta.meta_description` | 文字列 | ページのメタディスクリプション。この変数はHTMLテンプレートの「description」の` `タグで使用します。 |
\| `page_meta.name` | 文字列 | `content.name`のエイリアス。 |
\| `portal_id` | 文字列 | `hub_id`変数のエイリアス。 |
\| `request_contact` | ディクショナリー | リクエストされたコンタクトに関するデータを含むディクショナリー。Eメールテンプレートでは使用できません。この変数を使用すると、ページキャッシュが無効になります。詳しくは[ページプリレンダリングとJavaScriptの代替案](/docs/cms/best-practices/testing-staging-performance/prerendering)をご確認ください。 |
\| `site_settings` | ディクショナリー | [色やフォント](#color-and-font-settings)、[Eメールフッターの詳細](#email-variables)など、ページ、ブログ、Eメールのさまざまな設定を含むディクショナリー。 |
\| `year` | 文字列 | 現在の年を出力します。 |
## Eメールの変数
Eメールテンプレートで使用できるHubL変数を以下に示します。いくつかの変数は他のコンテンツタイプでも使用可能です。例えば[色とフォントの設定変数](#color-and-font-settings)を使用して、Eメールの色やフォントの設定を他の場所で参照することができます。
### Eメールテンプレートの必須変数
[CAN-SPAM](https://knowledge.hubspot.com/ja/marketing-email/edit-office-location-information-in-email-footers)に準拠するには、HubSpot経由で送信される全てのEメールに、特定の会社情報とオプトアウト情報を掲載する必要があります。この情報は以下の変数によって設定され、これらの変数を含める必要があります。これらのトークンの値は、アカウントの[マーケティングEメール設定](https://knowledge.hubspot.com/ja/marketing-email/edit-office-location-information-in-email-footers#edit-your-default-email-footer-information-in-your-settings)から取得されます。
その他の任意指定のEメール変数については、[このページで後述](#email-content)します。
| 変数 | 型 | 説明 |
| - | - | - |
| `site_settings.company_city` | 文字列 | 会社の市区町村を出力します。 |
| `site_settings.company_name` | 文字列 | 会社名を出力します。 |
| `site_settings.company_state` | 文字列 | 会社の都道府県を出力します。 |
| `site_settings.company_street_address_1` | 文字列 | 会社の住所を出力します。 |
| `unsubscribe_link` | 文字列 | 受信者が配信設定の管理やEメール配信の解除を行えるページのURLを出力します。この変数は``アンカータグの`href`属性で使用します。 |
### 色とフォントの設定
[マーケティングEメールの設定](https://knowledge.hubspot.com/ja/marketing-email/manage-your-marketing-email-account-settings)には、Eメールに出力できる基本的な色とフォントの制御設定がいくつかあります。なお、これらの変数の一部は、変数の前に`site_settings.`を追加することで、ページテンプレートやブログテンプレートでも使用できます。
| 変数 | 型 | 説明 |
| - | - | - |
| `background_color` | 文字列 | 背景色を16進数値で設定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.background_color`を使用します。 |
| `body_border_color` | 文字列 | 本文の境界線の色を16進数値で設定します。このオプションは、設定の[境界線の色のオプション]ドロップダウンメニューで[Eメールの境界線の色を手動で設定]を選択すると使用可能になります\*\*。 \*\*\_ \_ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.body_border_color`を使用します。 |
| `body_border_color_choice` | 文字列 | この変数の値は、設定の[境界線の色のオプション]ドロップダウンメニューで制御されます。\_ \_値は`BORDER_AUTOMATIC`、`BORDER_MANUAL`、`BORDER_NONE`です。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.body_border_color_choice`を使用します。 |
| `body_color` | 文字列 | 本文の色を16進数値で設定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.body_color`を使用します。 |
| `primary_accent_color` | 文字列 | 基本アクセントカラーを16進数値で設定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.primary_accent_color`を使用します。 |
| `primary_font` | 列挙 | 基本フォントの設定を文字列として指定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.primary_font`を使用します。 |
| `primary_font_color` | 文字列 | 基本フォント色を16進数値で設定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.primary_font_color`を使用します。 |
| `primary_font_size` | 文字列 | 基本フォントサイズを`px`値に設定します。ブログテンプレートには`site_settings.primary_font_size`を使用します。 |
| `primary_font_size_num` | 数値 | 基本フォントサイズの数値(`px`を除く)。 |
| `secondary_accent_color` | 文字列 | 第2基本アクセントカラーを16進数値で設定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.secondary_accent_color`を使用します。 |
| `secondary_font` | 列挙 | 第2基本フォントを文字列として設定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.secondary_font`を使用します。 |
| `secondary_font_color` | 文字列 | 第2基本フォント色を16進数値で設定します。ページテンプレートやブログテンプレートでこの値を出力するには、`site_settings.secondary_font_color`を使用します。 |
| `secondary_font_size_num` | 文字列 | 第2基本フォントサイズの数値(`px`を除く)。 |
### Eメールの内容
| 変数 | 型 | 説明 |
| - | - | - |
| `content.create_page` | ブール値 | Eメールのウェブページバージョンがある場合は、`True`になります。 |
| `content.email_body` | リッチテキスト | Eメールの本文。この変数によってリッチテキストモジュールがレンダリングされます。 |
| `content.emailbody_plaintext` | 文字列 | プレーンテキストのEメール本文を変更します(任意指定)。 |
| `content.from_name` | 文字列 | Eメール送信者の名前。 |
| `content.reply_to` | 文字列 | Eメールの返信用アドレス。 |
| `content.subject` | 文字列 | Eメールの件名。 |
| `email_body_padding` | 文字列 | [Eメール本文のパディング設定](https://knowledge.hubspot.com/ja/marketing-email/manage-your-marketing-email-account-settings#size)。 |
| `email_body_width` | 文字列 | [Eメール本文の幅の設定](https://knowledge.hubspot.com/ja/marketing-email/manage-your-marketing-email-account-settings#size)。 |
| `site_settings.company_street_address_2` | 文字列 | アカウントの[CAN-SPAMフッター設定](https://knowledge.hubspot.com/ja/marketing-email/edit-office-location-information-in-email-footers)の住所2を出力します。 |
| `site_settings.office_location_name` | 文字列 | アカウントの[CAN-SPAMフッター設定](https://knowledge.hubspot.com/ja/marketing-email/edit-office-location-information-in-email-footers)のオフィス所在地名を出力します。 |
| `subscription_confirmation_url` | 文字列 | 配信設定確認ページのURLを出力します。このURLは送信時に動的に生成されます。 |
| `subscription_name` | 文字列 | Eメールに指定されているEメールタイプの名前を出力します。 |
| `unsubscribe_anchor` | 文字列 | 配信停止ページにリンクされた"unsubscribe"(配信停止)という語を含むアンカータグを生成します。 |
| `unsubscribe_link_all` | 文字列 | 配信設定を管理するためのリンクではなく、全てのEメールコミュニケーションの配信を解除するリンクをレンダリングします。 |
| `unsubscribe_section` | 文字列 | 配信停止リンクとヘルプテキストを含む配信停止セクションを表示します。 |
| `view_as_page_section` | 文字列 | Eメールのウェブページバージョンを表示するリンク(ヘルプテキスト付き)を生成します。 |
| `view_as_page_url` | 文字列 | Eメールのウェブページバージョンを表示するリンクを生成します。 |
### 非公開コンテンツEメールの変数
[非公開コンテンツEメールテンプレート](https://knowledge.hubspot.com/ja/website-pages/require-member-registration-to-access-private-content#customize-your-membership-registration-page-and-email-templates)に使用されるEメールテンプレートの内部でのみ利用可能な変数を以下に示します。
| 変数 | 型 | 説明 |
| - | - | - |
| `membership_company_name` | 文字列 | アカウントの[非公開コンテンツ設定](https://knowledge.hubspot.com/ja/website-pages/manage-private-content-settings#edit-general-settings-for-private-content)で設定されている会社名。 |
| `membership_domain` | 文字列 | 非公開コンテンツウェブサイトのドメイン。 |
| `membership_logo_src` | 文字列 | アカウントの[ブランドキット設定](https://knowledge.hubspot.com/ja/branding/edit-your-logo-favicon-and-brand-colors)で設定されている、表示するロゴのURL。 |
| `membership_logo_alt` | 文字列 | アカウントの[ブランドキット設定](https://knowledge.hubspot.com/ja/branding/edit-your-logo-favicon-and-brand-colors)で設定されている、ロゴの`alt`属性。 |
| `membership_registration_link` | URL | 非公開コンテンツウェブサイトの登録ページへのリンク。 |
| `membership_password_saved_link` | URL | パスワード保存ページへのリンク。このリンクによって、訪問者がアクセスできるランダムな制限付きページにリダイレクトされます。 |
| `membership_password_reset_link` | URL | 非公開コンテンツウェブサイトのパスワードリセットページへのリンク。 |
| `membership_passwordless_auth_link` | URL | パスワードレスのメンバーログインページへのリンク。 |
| `membership_verify_registration_link` | URL | 登録確認ページへのリンク。 |
| `membership_website_admin` | 文字列 | アカウントの[非公開コンテンツ設定](https://knowledge.hubspot.com/ja/website-pages/manage-private-content-settings#edit-general-settings-for-private-content)で設定されているウェブサイト管理者の名前。 |
## ウェブサイトページの変数
サイトページ、ランディングページ、システムページ、ブログに使用できる変数を以下に示します。
### 必須のページテンプレート変数
コードファイルを編集可能なページまたはブログテンプレートとして公開するには、以下の変数を含める必要があります。これらの変数を含まないHTMLファイルを公開して別のテンプレート内で使用するには、[テンプレートアノテーション](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations)に`isAvailableForNewContent: false`を含めます。
| 変数 | 型 | 説明 |
| - | - | - |
| `standard_footer_includes` | 文字列 | [HubSpotトラッキングコード](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#hubspot-tracking-code)と、[**コンテンツ設定**](https://app.hubspot.com/l/settings/website/pages/all-domains/page-templates)のフッターHTMLに含まれるその他のコード、または特定のページのオプションをレンダリングします。このタグを本文終了タグの直前に挿入する必要があります。 |
| `standard_header_includes` | 文字列 | [jQuery、layout.css](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#included-cms-files)、添付されるスタイルシート、meta viewportタグ、Googleアナリティクスのトラッキングコード、その他のメタ情報、およびドメインレベル、テンプレートレベル、ページレベルでheadタグに付加されるコードを追加します。この変数はHTMLテンプレートの``に追加する必要があります。 |
### コンテンツとコンタクトの変数
| 変数 | 型 | 説明 |
| - | - | - |
| `builtin_body_classes` | 文字列 | テンプレートを使用して作成されたコンテンツのマークアップ(コンテンツタイプやコンテンツ名など)を区別する便利なクラスを動的に出力します。これにより、さまざまなタイプのコンテンツや特定のページのスタイルを容易に設定できます。この変数は、コードテンプレートの本文タグのclass属性で使用します。 |
| `request_contact.is_logged_in` | 文字列 | リクエスト元コンタクトがウェブサイトの[非公開コンテンツ](https://knowledge.hubspot.com/ja/website-pages/require-member-registration-to-access-private-content)にログインしているかどうか。この変数では、リクエスト元コンタクトがログイン済みの場合は`true`、ログアウトしている場合は`false`の値が返されます。[接続済みのドメイン](https://knowledge.hubspot.com/ja/domains-and-urls/connect-a-domain-to-hubspot)のいずれかを使用して、コンタクトを`https://www.yourdomain.com/_hcms/mem/logout`に誘導することで、ログアウトしてもらうことができます。 この変数を使用すると、ページキャッシュが無効になります。詳しくは[ページプリレンダリングとJavaScriptの代替案](/docs/cms/best-practices/testing-staging-performance/prerendering)をご確認ください。 |
| `request_contact.list_memberships` | 文字列 | コンタクトがメンバーとして含まれるリストを表すIDのディクショナリー。この変数を使用すると、ページキャッシュが無効になります。詳しくは[ページプリレンダリングとJavaScriptの代替案](/docs/cms/best-practices/testing-staging-performance/prerendering)をご確認ください。 |
| `content.language` | ディクショナリー | ページの言語設定に関する情報のディクショナリー。`content.language.languageTag`はページの言語識別子(`"en"`や`"es"`など)を返します。 `content.language.textDirection.value`は、ページの言語のテキスト方向(`"rtl"`や`"ltr"`など)を返します。 |
## HTTPリクエストの変数
HTTPページリクエストに関する情報を出力する変数を以下に示します。これらの変数の中には、ページの読み込み時にデータを動的に入力する必要があるため、ページキャッシュの妨げになるものがあります。詳しくは[ページプリレンダリングとJavaScriptの代替案](/docs/cms/best-practices/testing-staging-performance/prerendering)をご確認ください。
| 変数 | 型 | 説明 |
| - | - | - |
| `request.cookies` | ディクショナリー | Cookieの値にマップされたCookie名のディクショナリー。この変数を使用すると、ページキャッシュが無効になります。 |
| `request.domain` | 文字列 | このページへのアクセスに使用されるドメイン。 |
| `request.full_url` | 文字列 | このページへのアクセスに使用されるURL。 |
| `request.path` | 文字列 | URLのパス要素。 |
| `request.path_and_query` | 文字列 | URLのパスとクエリーの要素。 |
| `request.query` | 文字列 | URLのクエリー文字列の要素。`request.query_dict`により、自動的にクエリー文字列がキーと値のペアに分割されます。ほとんどの場合、未加工のクエリーに対してはこれを使用することを推奨します。 |
| `request.query_dict` | ディクショナリー | 名前->値のディクショナリーに変換されたクエリー文字列。 |
| `request.referrer` | 文字列 | HTTPリファラー(現在のページにリンクされているページのURL)。この変数を使用すると、ページキャッシュが無効になります。 |
| `request.remote_ip` | 文字列 | 訪問者のIPアドレス。この変数を使用すると、ページキャッシュが無効になります。 |
| `request.scheme` | 文字列 | リクエストのプロトコル(`http`または`https`)。 |
| `request.search_engine` | 文字列 | このページを見つけるのに使用された検索エンジン(該当する場合)。例えば、`google`、`aol`、`live`、`yahoo`、`images.google`などです。 |
| `request.search_keyword` | 文字列 | このページを見つけるのに使用されたキーワードフレーズ(該当する場合)。 |
| `request.headers` | 文字列 | 利用可能なリクエストヘッダーのディクショナリー。この変数を使用すると、各リクエストの個別のヘッダーを解釈する必要があるため、ページキャッシュが無効になります。 |
## ブログの変数
ブログテンプレートで使用可能な変数を以下に示します。記事リストでのみ使用できる変数と、ブログ記事でのみ使用できる変数があります。
| 変数 | 型 | 説明 |
| - | - | - |
| `blog_author` | 文字列 | この変数には、ブログ執筆者リストページのブログ執筆者情報が含まれます。[ブログ執筆者リストのマークアップを表示する](/docs/cms/start-building/building-blocks/templates/blog#if-blog-author-statement)条件付きロジックを作成する場合に使用できます。また、以下のプロパティーも含まれます。`blog_author.avatar` `blog_author.bio` `blog_author.display_name` `blog_author.email` `blog_author.facebook` `blog_author.google_plus` `blog_author.has_social_profiles` `blog_author.linkedin` `blog_author.twitter` `blog_author.website` |
| `content.blog_post_author` | 文字列 | この変数には、特定の記事の各ブログ記事執筆者の情報が含まれます。以下のプロパティーが含まれています。`content.blog_post_author.avatar` `content.blog_post_author.bio` `content.blog_post_author.display_name` `content.blog_post_author.email` `content.blog_post_author.facebook` `content.blog_post_author.google_plus` `content.blog_post_author.has_social_profiles` `content.blog_post_author.linkedin` `content.blog_post_author.slug` `content.blog_post_author.twitter` `content.blog_post_author.website` |
| `blog` | 文字列 | `group`のエイリアス。例えば、`blog.absolute_url`と`group.absolute_url`のいずれかを使用できます。 |
| `content.comment_count` | 整数 | 現在のブログ記事のコメント数。 |
| `content.comment_list` | 文字列 | 現在のブログ記事のコメントのリスト。 |
| `current_page_num` | 整数 | ビュー内のブログ記事の現在のページを示す整数インデックス。 |
| `content.featured_image` | 文字列 | ブログの公開時に選択されたキービジュアルのソースURL。 |
| `content.featured_image_alt_text` | 文字列 | キービジュアルの代替テキスト。 |
| `last_page_num` | 整数 | ビュー内のブログ記事の最終ページを示す整数インデックス。 |
| `next_page_num` | 整数 | ビュー内のブログ記事の次のページを示す整数インデックス。 |
| `content.next_post_featured_image` | 文字列 | 次のブログ記事のキービジュアルのURL(存在する場合)。 |
| `content.next_post_featured_image_alt_text` | 文字列 | 次の記事のキービジュアルの代替テキスト(代替テキストが存在する場合)。 |
| `content.next_post_name` | 文字列 | 次のブログ記事の名前(存在する場合)。 |
| `content.next_post_slug` | 文字列 | 次のブログ記事のURLスラッグ(存在する場合)。 |
| `content.post_body` | 文字列 | ブログ記事の本文。 |
| `content.post_list_content` | 文字列 | リストページ用に変更された、ブログ記事の本文コンテンツ。最終的な出力は、[ブログの要約設定](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#select-your-blog-templates)の影響を受けます。設定でキービジュアルが有効になっている場合、この変数を指定すると、[「続きを読む」セパレーター](https://knowledge.hubspot.com/ja/blog/create-and-publish-blog-posts)よりも上にある全ての画像が自動的に削除されます。 |
| `content.post_list_summary_featured_image` | 文字列 | ブログリスティングテンプレートで使用される記事要約のキービジュアル。これは[ブログ設定](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#select-your-blog-templates)で設定されます。 |
| `content.post_summary` | 文字列 | ブログ記事の要約(サマリー)。このコンテンツは、ブログエディターの[「続きを読む」セパレーター](https://knowledge.hubspot.com/ja/blog/create-and-publish-blog-posts)により決定されます。 |
| `content.previous_post_featured_image` | 文字列 | 前のブログ記事のキービジュアルのURL(存在する場合)。 |
| `content.previous_post_featured_image_alt_text` | 文字列 | 前の記事のキービジュアルの代替テキスト(代替テキストが存在する場合)。 |
| `content.previous_post_name` | 文字列 | 前のブログ記事の名前(存在する場合)。 |
| `content.previous_post_slug` | 文字列 | 前のブログ記事のURLスラッグ(存在する場合)。 |
| `content.publish_date_localized` | 文字列 | ブログ記事が公開された日時を表す文字列。ブログの[言語設定と日付形式](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#set-your-blog-s-date-formats)に基づいて書式が設定されます。 |
| `simple_list_page` | ブール値 | リクエストされたページが、全てのブログ記事へのリンクを含む「全ての記事」ページであるかどうかを示します。 |
| `content.topic_list` | ディクショナリー | これを使用すると、ループ処理によってトピックリストのマークアップをレンダリングできます。`{% for topic in content.topic_list %}` その中の項目には、プロパティー`name`と`slug`が含まれています。 |
| `contents` | 文字列 | [ブログのリストページ](/docs/cms/start-building/building-blocks/templates/blog#if-is-listing-view-statement)上にある、forループを使って反復処理されるブログ記事のシーケンスです。 |
| `contents.total_count` | 整数 | (定期、トピック、執筆者などの)リスト内の記事の合計数。 |
| `contents.total_page_count` | 整数 | 1ページ当たりの記事数に基づく、記事ページの合計数。 |
| `contents_topics` | 文字列 | contents(記事のシーケンス)内の全てのブログトピックのリストを取得します。 |
| `group` | ディクショナリー | ブログ全体に関連する変数を含むディクショナリー。 |
| `group.absolute_url` | 文字列 | ブログのベースURL。 |
| `group.allow_comments` | ブール値 | コメントが許可されている場合は`true`と評価されます。 |
| `group.description` | 文字列 | [ブログ設定](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#select-your-blog-templates)で指定されている、ブログのメタディスクリプション。特定のリストページのメタディスクリプションに使用されます。 |
| `group.header` | 文字列 | ブログのヘッダー。 |
| `group.html_title` | 文字列 | ``タグに表示される、このブログのタイトル。 |
| `group.id` | 文字列 | ブログの一意のID。このIDは、特定のブログのブログダッシュボードのURLで確認できます。 |
| `group.language` | ディクショナリー | ブログの言語に関する情報を含むディクショナリー。`group.language.languageTag`を条件文で使用すると、多言語ブログの言語バリエーションごとに異なるコンテンツをレンダリングできます。 |
| `group.public_title` | 文字列 | レンダリングページの最上部に表示される、このブログのタイトル。 |
| `group.show_summary_in_listing` | ブール値 | [ブログ設定](https://knowledge.hubspot.com/ja/blog/use-a-featured-image-on-a-page-or-blog-post#display-featured-images-on-a-blog-listing-page)で指定されている、ブログのリスティングページに記事要約を表示するかどうか。 |
| `group.slug` | 文字列 | このブログへのパス。 |
| `group.use_featured_image_in_summary` | ブール値 | [ブログ設定](https://knowledge.hubspot.com/ja/blog/manage-your-blog-template-and-settings#select-your-blog-templates)で指定されている、キービジュアルを記事要約に表示するかどうか。 |
| `archive_list_page` | ブール値 | ページがブログのアーカイブページである場合は`true`を返します。例えば、`https://www.example.com/blog/archive/2020/02`は`true`を返します。 |
## CRMオブジェクトによる動的ページ
[CRMオブジェクトの動的ページを作成](/docs/cms/start-building/features/data-driven-content/hubdb/overview#crm-object-dynamic-pages)するときに使用される変数を以下に示します。これらの変数は、CRMオブジェクトの動的ページでのみ使用できます。
| 変数 | 型 | 説明 |
| - | - | - |
| `dynamic_page_crm_object` | ディクショナリー | ページリクエストパスに一致する動的ページのCRMオブジェクト。リクエストがリストページを対象としている場合、この値は`null`になります。 |
| `dynamic_page_crm_object_type_fqn` | 文字列 | CRMオブジェクトの完全修飾名(FQN)。FQNは、オブジェクトに割り当てられた一意のIDです。これには、HubSpotアカウントのIDとオブジェクト名が含まれます。FQNは[`crm_objects`関数](/docs/cms/reference/hubl/functions#crm-objects)で使用できます。 |
## HubDBの変数
[HubDB](/docs/cms/start-building/features/data-driven-content/crm-objects#hubdb-dynamic-pages)で動的ページを作成するときに使用される変数を以下に示します。これらの変数は、[HubDB動的ページ](/docs/cms/start-building/features/data-driven-content/hubdb/overview#hubdb-dynamic-pages)でのみ使用できます。
| 変数 | 型 | 説明 |
| - | - | - |
| `dynamic_page_hubdb_table_id` | 長整数 | ページエディターの[詳細設定]タブで選択されているテーブルのID。\_ \_ |
| `dynamic_page_hubdb_row` | ディクショナリー | ページリクエストパスに一致する動的ページのHubDB行。リクエストがリストページを対象としている場合、この値は`null`になります。 |
| `row.hs_id` | 長整数 | HubDB行の内部ID。 |
| `row.hs_name` | 文字列 | HubDB行の名前。 |
| `row.hs_path` | 文字列 | HubDB行のパス。これを使用すると、`dynamic_page_hubdb_table_id`で指定されたテーブル内の1行へのリクエストが解決されます。 |
| `row.hs_child_table_id` | 長整数 | HubDB行の子テーブルID。ネストしたテンプレートを作成するために使用できます。 |
| `row.hs_parent_row` | ディクショナリー | HubDB行の親行。ネストしたテンプレートの子テーブルを使用する場合にのみ使用できます。 |
| `dynamic_page_route_level` | 整数 | 複数レベル動的テンプレート内のページの現在の深さ。値は`0`から始まり、テーブル階層が1つ加わるごとに増えていきます。 |
## メニューノードの変数
[HubLメニュー関数](/docs/cms/reference/hubl/functions#menu)により返されるオブジェクトで使用できる変数を以下に示します。
| 変数 | 型 | 説明 |
| - | - | - |
| `node.label` | 文字列 | ページのメニューラベル。 |
| `node.url` | 文字列 | ページのURL。 |
| `node.pageId` | 数値 | ページのID(HubSpot内の場合)。 |
| `node.contentGroupId` | 数値 | ページのブログID(HubSpotブログ記事の場合)。 |
| `node.parentNode` | オブジェクト | 現在のノードの親ノード。親ノードの`children`プロパティーには、現在のノードが含まれます。 |
| `node.children` | リスト | 現在のノードの子ノードのリスト。 |
| `node.activeBranch` | ブール値 | ノードが現在のページの最上位分岐内にある場合は`true`となります。 |
| `node.activeNode` | ブール値 | ノードが現在のページである場合は`true`となります。 |
| `node.level` | 数値 | 最上位のノードから現在のノードまでのレベル数(深さ)。 |
| `node.pageTitle` | 文字列 | コンテンツページの名前(HubSpot内の場合)。 |
| `node.slug` | 文字列 | ページのパススラッグ。 |
| `node.linkTarget` | 文字列 | ページのターゲットリンク。 |
## アプリ内エディターおよびプレビュー変数
次の変数を使用すると、コンテンツがコンテンツエディターまたはプレビューアーで表示されているかどうかを確認できます。例えば、それらを使用して、ライブページでコードが実行されている間はエディターでコードが実行されないようにすることができます。
```hubl theme={null}
{% if is_in_page_editor %}
Display something different within the page editor.
{% endif %}
```
| 変数 | 型 | 説明 |
| - | - | - |
| `is_in_hs_app` | 文字列 | コンテンツがHubSpotアプリ内で表示されている場合、`true`を返します。 |
| `is_in_editor` | 文字列 | コンテンツが任意のコンテンツエディター内で表示されている場合、`true`を返します。 |
| `is_in_global_content_editor` | 文字列 | コンテンツがグローバルコンテンツエディター内で表示されている場合、`true`を返します。 |
| `is_in_theme_editor` | 数値 | コンテンツがテーマエディター内に表示されている場合、`true`を返します。 |
| `is_in_page_editor` | 文字列 | コンテンツがページエディター内で表示されている場合、`true`を返します。 |
| `is_in_blog_post_editor` | 文字列 | コンテンツがブログ記事エディター内で表示されている場合、`true`を返します。 |
| `is_in_email_editor` | 文字列 | コンテンツがEメールエディター内で表示されている場合、`true`を返します。 |
| `is_in_previewer` | 数値 | コンテンツが任意のプレビューコンテキスト内で表示されている場合、`true`を返します。 |
| `is_in_theme_previewer` | オブジェクト | コンテンツがテーマプレビューアー内で表示されている場合、`true`を返します。 |
| `is_in_template_previewer` | 文字列 | コンテンツがテンプレートプレビューアー内で表示されている場合、`true`を返します。 |
| `is_in_page_previewer` | 文字列 | コンテンツがページプレビューアー内で表示されている場合、`true`を返します。 |
| `is_in_blog_post_previewer` | 文字列 | コンテンツがブログ記事プレビューアー内で表示されている場合、`true`を返します。 |
| `is_in_email_previewer` | 文字列 | コンテンツがEメールプレビューアー内で表示されている場合、`true`を返します。 |
| `is_in_module_previewer` | 文字列 | コンテンツがモジュールプレビューアー内で表示されている場合、`true`を返します。 |
# HubLの変数とマクロ構文
Source: https://developers.hubspot.jp/docs/cms/reference/hubl/variables-macros-syntax
HubLの変数とマクロを使用してHubSpots CMSとEメールで動的なページを作成する方法について説明します。
HubLでは、値の保存やテンプレートへの出力に変数を使用します。変数はテンプレートのロジックで使用することも、forループで繰り返し使用することもできます。テンプレートで繰り返し使用されるコードの動的な部分を出力するには、変数のほかに、マクロを使用することもできます。
変数は`}}`で囲まれた式です。変数の基本的な構文を次に示します。
```hubl theme={null}
// variables
{{ variable }}
{{ dict.attribute }}
```
## 変数
変数は、式の中の単一の語、またはディクショナリー(辞書型)の属性のいずれかです。HubLでは、ディクショナリー(**dicts**)と呼ばれるPythonベースのデータ構造を使用して、さまざまな変数のセットを保存します。例えば、HubSpotではディクショナリー「content」を使用して、そのテンプレートで作成されたコンテンツに関する多くの属性を格納しています。`content.absolute_url`と指定した場合、特定のコンテンツのURLが出力されます。
HubSpotには、ページやブログ、Eメールのテンプレートに使用できる多数の定義済み変数が用意されています。[変数のリファレンスリスト](/docs/cms/reference/hubl/variables)があります。アカウントからページを閲覧するときに[開発者情報](/docs/cms/start-building/introduction/developer-environment/troubleshooting/troubleshooting#developer-info)を表示することもでき、そのページ内で利用可能な変数が表示されます。
変数の値やディクショナリーの属性をテンプレートに出力するほかに、ユーザー独自の変数を定義することもできます。1つの変数内に文字列、ブール値、整数、シーケンスを格納したり、ディクショナリーを作成したりできます。変数は、文の区切り文字の内側で、「set」を使って定義します。格納された変数を出力するには、変数名を式として記述します。以下では、さまざまなタイプの情報を変数に格納し、出力しています。
変数は1つの単語にするか、スペースの代わりに下線を使用する(my\_variableなど)必要があります。**HubLでは、ハイフンで連結した変数名はサポートされません。**
```text hubl.txt theme={null}
{% set string_var = "This is a string value stored in a variable" %}
{{ string_var}}
{% set bool_var = True %}
{{ bool_var}}
{% set int_var = 53 %}
{{ int_var}}
{% set seq_var = ["Item 1", "Item 2", "Item 3"] %}
{{ seq_var}}
{% set var_one = "String 1" %}
{% set var_two = "String 2" %}
{% set sequence = [var_one, var_two] %}
{{ sequence }}
{% set dict_var = {"name": "Item Name", "price": "$20", "size":"XL"} %}
{{ dict_var.price }}
```
```text output.txt theme={null}
This is a string value stored in a variable True 53 [Item1, Item2, Item3]
[String 1, String 2] $20
```
上記の例はそれぞれに異なる型の変数を格納しています。最後の例では2つの別々の変数を1つのシーケンスとして格納しています。
変数は、値を出力するほかにも、[if文](/docs/cms/reference/hubl/if-statements)内、[filter](/docs/cms/reference/hubl/filters)パラメーターや[function](/docs/cms/reference/hubl/functions)パラメーターとして使用したり、[forループ](/docs/cms/reference/hubl/loops)で反復処理(シーケンス変数のみ)に使用したりできます。
一般的な使用例の1つに、スタイルシートでよく使われるCSSの値を変数を使用して定義する方法があります。例えば、ある色をCSSファイル全体で繰り返し使用しているとします。この色を変数を使用して定義しておけば、変数の値を変更するだけで、色を変更できます。次にファイルを公開したときに、その変数に対する参照が全て更新されます。
```css example.css theme={null}
{% set primaryColor = "#F7761F" %}
a {
color: {{ primaryColor }}; {# prints variable HEX value #}
}
```
```text output.txt theme={null}
a {
color: #f7761f;
}
```
## マクロ
HubLマクロでは、動的な値を使用して複数の文を出力できます。例えば、同じコードブロックを何度も記述するような場合は、マクロを使用すると便利です。マクロに渡す引数を切り替えることで、そのコードブロックを出力できます。
マクロは、HubL文の中で定義し、名前を付け、引数を指定します。このマクロを別の文で呼び出して動的な値を渡すと、動的な引数を持つ最終的なコードブロックが出力されます。マクロの基本的な構文を次に示します。
```hubl theme={null}
{% macro name_of_macro(argument_name, argument_name2) %}
{{ argument_name }}
{{ argument_name2 }}
{% endmacro %}
{{ name_of_macro("value to pass to argument 1", "value to pass to argument 2") }}
```
マクロから空白文字が改行として返される場合は、テンプレート内の空白文字を手動で取り除くことができます。ブロック、コメント、変数の式の先頭または末尾にマイナス記号(`-`)を追加すると、そのブロックの前または後の空白文字が削除されます。
```hubl theme={null}
{% macro name_of_macro(argument_name, argument_name2) -%}
{{ argument_name }}
{{ argument_name2 }}
{%- endmacro %}
```
以下の実用例では、さまざまなベンダープレフィックスを含むCSS3プロパティーを動的な値と合わせて出力するために、マクロを使用しています。この例では、1つのmacroタグで5行のコードを出力できます。
```css example.css theme={null}
{% macro trans(value) %}
-webkit-transition: {{value}};
-moz-transition: {{value}};
-o-transition: {{value}};
-ms-transition: {{value}};
transition: {{value}};
{% endmacro %}
a {
{{ trans("all .2s ease-in-out") }}
}
```
```text output.txt theme={null}
a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
```
> [!WARNING]
>
> マクロにおいて、再帰コードを利用できるようになります。信頼性とパフォーマンスの問題を防ぐため、マクロのネスト可能な階層は最大20になっています。この上限を超えると、`max recursion limit of 20 reached for macro `というエラーが返されます。
## 呼び出し
場合によっては、動的な追加情報をマクロブロックに渡す必要があるかもしれません。例えば、引数のほかに、長いコードをマクロに挿入する場合です。これを行うには、callブロックとcaller()を使用します。callブロックは基本的にマクロと同じように機能しますが、callブロックに名前は指定しません。caller()式で、callブロックの内容をどこに表示するかを指定します。
以下の例では、2つの引数に加えて、1つの``がマクロに追加されています。
```html example.html theme={null}
{% macro render_dialog(title, class) %}
{{ title }}
{{ caller() }}
{% endmacro %}
{% call render_dialog("Hello World", "greeting") %}
This is a paragraph tag that I want to render in my.
{% endcall %}
```
```text output.txt theme={null}
Hello World
This is a simple dialog rendered by using a macro and a call block.
```
## インポート
マクロには、あるテンプレートファイルから別のテンプレートファイルにインポートして使用できる便利な機能もあります。これには、**import**タグを使用する必要があります。importタグでは、マクロが含まれているテンプレートへのDesign Manager(デザインマネージャー)ファイルパスを指定し、インポート先テンプレート内でのマクロ名を指定することができます。その後に、それらのマクロに値を渡すことができます。マクロを再定義する必要はありません。
例えば、次の2つのマクロが含まれている.htmlテンプレートファイルがあるとします。1つのマクロはheaderタグを設定するために定義し、もう1つはfooterタグを生成するために定義しています。このファイルはデザインマネージャーに`my_macros.html`という名前で保存されています。
```hubl theme={null}
{% macro header(tag, title_text) %}
<{{ tag }}>{{ title_text }} {{tag}}>
{% endmacro %}
{% macro footer(tag, footer_text) %}
<{{ tag }}>{{ footer_text }} {{tag}}>
{% endmacro %}
```
これらのマクロを使用するテンプレートでは、`my_macros.html`ファイルへのファイルパスを指定したimportタグを使用します。また、マクロのグループには名前を付けます(この例では`header_footer`)。そして、そのインポートしたテンプレートに付けた名前にマクロ名を追加することでマクロを実行できます。以下の例を参照してください。
```html example.html theme={null}
{% import "custom/page/web_page_basic/my_macros.html" as header_footer %}
{{ header_footer.header("h1", "My page title") }}
Some content
{{ header_footer.footer("h3:", "Company footer info") }}
```
```text output.txt theme={null}
Some content
```
## from
別の.htmlファイルに含まれている全てのマクロではなく、特定のマクロのみをインポートする場合は、**from**タグを使用します。fromタグでは、インポートするマクロのみを指定します。通常、**import**を使用する方が柔軟性は向上しますが、この代替手段もサポートされます。
次の例では、この記事の前のセクションと同じ`my_macros.html`ファイルを利用します。ただし、今回は、全てのマクロをインポートするのではなく、footerマクロのみを利用します。
```html example.html theme={null}
{% from "custom/page/web_page_basic/my_macros.html" import footer %}
{{ footer("h2", "My footer info") }}
```
```text output.txt theme={null}
```
## ループ内の変数
> [!WARNING]
>
> ループ内で定義した変数は、そのループの範囲内に制限され、ループの外側から呼び出すことはできません。
ループ外で定義した変数をループ内から呼び出すことはできますが、その逆はできません。
また、dictに値を設定する場合やリスト操作を実行する場合にオブジェクトを変化させるために、関数を使用できます。以下の例では[`.update`リスト操作](/docs/cms/reference/hubl/functions#update)を使用しています。
```text input.txt theme={null}
{% set obj = {val : 0} %}
{% for i in range(0, 10) %}
{% do obj.update({val: obj.val + i }) %}
{% endfor %}
{{ obj.val }}
```
```text output.txt theme={null}
45
```
# モジュールの設定
Source: https://developers.hubspot.jp/docs/cms/reference/modules/configuration
カスタムモジュールを設定する方法についてご確認ください。
モジュールを作成する際には、モジュールの表示場所、識別方法、編集方法などを決定するオプションが多数あります。
[ローカルで開発する](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)場合、モジュールは`.module`サフィックスが付いたフォルダーとして保存されます。これらのフォルダー内には、モジュールの設定用ファイルと、モジュールのレンダリングに使用されるコードが含まれています。モジュールの設定は[meta.json](#meta-json)ファイルに保存されますが、フィールドは別途[fields.json](/docs/cms/start-building/building-blocks/modules/overview#fields-json)ファイルに設定されます。
設定の大半は、[デザインマネージャー](/docs/cms/start-building/introduction/developer-environment/design-manager)のモジュールエディターからも変更できます。

概要レベルでは、`meta.json`ファイル内でモジュールオプションをローカルで設定します。これには次のプロパティーを含めることができます。
| パラメーター | 型 | 説明 | デフォルト値 | |
| - | - | - | - | - |
| `icon` | 文字列 | モジュールのアイコンとして使用する画像のURL。 | | |
| `label` | 文字列 | コンテンツエディターに表示されるモジュールのラベル。 | | |
| `module_id` | 数値 | パスから独立した、モジュールの固有ID。 | | |
| `is_available_for_new_content` | ブール値 | HubSpotのモジュールエディターの右上隅にある切り替えスイッチの値。モジュールがコンテンツで使用可能かどうかを指定します。 | `true` | |
| `global` | ブール値 | モジュールがグローバルかどうかを示します。 | `false` | |
| `content_types` | 配列 | モジュールを使用できる[コンテンツタイプ](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)の`array`。次の1つ以上を指定できます。`ANY`:以下に示すタイプ全て。 `LANDING_PAGE`:ランディングページ。 `SITE_PAGE`:ウェブサイトページとテンプレート。 `BLOG_POST`:ブログ記事とテンプレート。 `BLOG_LISTING`:ブログリストのテンプレート。 `EMAIL`:EメールとEメールテンプレート。 `KNOWLEDGE_BASE`:ナレッジ ベース ページとテンプレート。 `QUOTE_TEMPLATE`:見積もりテンプレート。 `CUSTOMER_PORTAL`:カスタマー ポータル テンプレート。 `WEB_INTERACTIVE`:ウェブインタラクティブ。 `SUBSCRIPTION`:配信登録テンプレート。 `MEMBERSHIP`:メンバーシップテンプレート。 モジュールがHubSpot内のどの領域でも使用されない場合は、値を`["NONE"]`ではなく、空の配列である`[]`に設定します。このフィールドは以前は`host_template_types`という名前でした。以前のフィールド名を使用しているモジュールは引き続き機能しますが、今後は`content_types`を使用することをお勧めします。 | | |
| `css_assets` | 配列 | モジュールが依存するCSSファイルを含む`array`。相対パスを使用できます。例:`"css_assets": [{ "path": "../path/to/file.css" }]` | `[]` | |
| `css_render_options` | オブジェクト | `async`を`true`または`false` | `{"async": false}` | にして、モジュールCSSによる非同期レンダリングを行うかどうかを設定します。 |
| `js_assets` | 配列 | モジュールが依存するJavaScriptファイルを含む`array`。相対パスを使用できます。例:`"js_assets": [{ "path": "../path/to/file.js" }]` | `[]` | |
| `js_render_options` | オブジェクト | レンダリングされたページに追加するモジュールのJavaScriptタグを変更します。次のオプションがあります。`position`:`head`、`footer` `async`:`true`、`false` `defer`:`true`、`false` `type`:`string` | `{"position":"footer"}` | |
| `inline_help_text` | 文字列 | モジュール上部の青い情報ボックスに表示されるヘルプテキスト(400文字まで)。モジュールを使用するのに必要な情報が示されます。フィールド固有のヘルプテキスト情報を伝達したい場合は、[ヘルプテキストフィールドのドキュメント](/docs/cms/reference/fields/module-theme-fields#properties-used-by-all-fields)を参照してください。 | `null` | |
| `master_language` | 文字列 | [翻訳が有効](https://knowledge.hubspot.com/ja/design-manager/create-translations-of-your-modules)になっている場合、モジュールのフィールドの最初の作成時に使用された言語の言語コード。例:`en` | | |
| `placeholder` | オブジェクト | モジュールの[プレースホルダーコンテンツ](/docs/cms/reference/hubl/tags/standard-tags#editor-placeholders)を設定します。次のプロパティーが含まれます。`show_module_icon`:モジュールアイコンを表示するかどうかを示します。`true`または`false`。 `title`:エディターでモジュールに表示されるタイトル。文字列。 `description`:エディターでモジュールに表示される説明。文字列。 | | |
| `categories` | 配列 | 最大3つの[モジュールカテゴリー](#add-categories)を含む配列。例: | `"categories":["FORMS_AND_BUTTONS"]` | |
| `content_tags` | 配列 | タグ名と`"USER"`の`source`を含む[モジュールタグオブジェクト](#adding-categories-and-tags)の配列。例:`"content_tags": [{` `"name" : "BUTTONS",` `"source" : "USER"``}]` | | |
個々のモジュール設定オプションの詳細については、以下をご覧ください。
## アイコンの追加
モジュールには、[デザインマネージャー](/docs/cms/start-building/introduction/developer-environment/design-manager)に表示されるアイコンと、コンテンツクリエイターのために視覚的なコンテキストを提供するページおよびEメールエディターを含めることができます。テーマ内の異なるタイプのモジュールに対して異なるアイコンを使用することをお勧めします。アイコンは、[マーケットプレイスプロバイダーの場合は必須](/docs/cms/marketplace/template-guidelines)です。
アイコンの追加方法は2種類あり、[デザインマネージャー](#add-an-icon-using-the-design-manager)または[CMS CLI](#add-an-icon-using-the-cli)を使用できます。
モジュールアイコンには、サイズが10KB以下の`.svg`ファイルを使用する必要があります。アイコンを最適化するには、シンプルな単色のアイコンにしてください。複数の色を使用したアイコンは、自動的に変換されます。レンチとペイントブラシのアイコンが、デフォルトのモジュールアイコンとして表示されます。
デザインマネージャーを使用してアイコンを追加するには、次の手順に従います。
1. HubSpotアカウントにて、**マーケティング**>**ファイルとテンプレート**>**デザインツール**の順に進みます。
2. 左サイドバーを使用して編集する**モジュール**を見つけて、**モジュール名**をクリックします。
3. モジュールエディターの右サイドバーで、モジュールタイトルの横にある**アイコン**をクリックします。
4. アイコンをアップロード/選択します。変更を公開すると、ページエディターとデザインマネージャー内にアイコンが表示されます。

ローカルで開発する際にアイコンを追加するには、モジュールの`meta.json`ファイルを開き、`icon`パラメーターの値を追加または編集して、ファイルマネージャーからのSVGを指定します。
```json theme={null}
// meta.json
{
"global": false,
"content_types": ["PAGE"],
"icon": "http://example.com/hubfs/code.svg",
"label": "Code block",
"smart_type": "NOT_SMART",
"is_available_for_new_content": true,
"inline_help_text": "This module is for code snippets."
}
```
## ラベルを変更する
エディター内に表示されるモジュールのラベルは、モジュールの名前とは別に調整できます。自分に分かりやすい名前を付け、コンテンツ作成者には異なる名前を表示できるので、ローカル環境で開発を行う際に便利です。
ローカル環境では`label`パラメーターを変更してラベルを設定します。デザインマネージャーでは、モジュールエディターのモジュール名の下にフィールドがあります。

## モジュールをグローバルにする
通常のモジュールの場合、ページ、Eメール、テンプレートの各モジュールインスタンスのコンテンツは独立しています。使い方によっては、モジュールの全てのインスタンスのコンテンツを同じにすると便利な場合があります。ローカルで開発する際は、`global`を`true`に設定すると、モジュールをグローバルにすることができます。
デザインマネージャーを使用して、[ドラッグ&ドロップテンプレートのモジュールをグローバルに変換する](https://knowledge.hubspot.com/ja/design-manager/use-global-content-across-multiple-templates#create-new-global-content-in-the-design-manager:~:text=To%20convert%20an%20existing%20local%20module%20or%20group)こともできます。
## モジュールの使用箇所を制御する
ローカルで開発する際は、`hostTemplateTypes`プロパティーにより、モジュールを使用できるコンテンツのタイプを制御できます。[利用可能なテンプレートタイプ](/docs/cms/start-building/building-blocks/templates/overview#template-types)について詳細をご確認ください。モジュールでは、ページに直接追加できないように、`is_available_for_new_content`を`false`に設定して非表示にすることもできます。これは、ナビゲーションメニュー用および検索用に作成されたモジュールなどで役立ちます。
デザインマネージャーでこの更新を行うには、右側のサイドバーにある\*\*[テンプレートタイプ]\*\*オプションをクリックします。

## CSSとJavaScriptの依存関係を追加する
モジュールインスタンスを含む全てのページにCSSとJavaScriptを追加する際に`module.css`および`module.js`を使用することに加えて、モジュール間で共有される依存関係は`css_assets`および`js_assets`で付加することができます。パスには`meta.json`ファイルに対する絶対パスまたは相対パスを使用することが可能です。
```json theme={null}
{
"css_assets": [
{
"path": "../path/to/file.css"
}
],
"js_assets": [
{
"path": "../path/to/file.js"
}
]
}
```
> [!WARNING]
>
> **警告**: 相対パスを使用して依存関係を参照している場合に、`hs fetch --overwrite`を実行してローカル開発用モジュールを更新すると、相対パスが絶対パスによって上書きされます。
デザインマネージャーでは、モジュールエディターの右側のサイドバーにある\_\_[リンク済みファイル]セクションを使用して、CSSファイルとJavaScriptファイルをモジュールにリンクできます。

## カテゴリーとタグを追加する
モジュールにカテゴリーとタグを割り当てて、HubSpotツール内でモジュールを分類することができます。
* [カテゴリー](#categories):モジュールにカテゴリーを割り当てると、コンテンツエディターUI内でモジュールをグループに分類できます。これにより、コンテンツクリエイターはHubSpotでコンテンツを作成する際に、より簡単にモジュールを見つけることができます。カテゴリーについては、次の点に注意してください。
* 1つのモジュールには最大3つのカテゴリーを割り当てることができます。カテゴリーは事前定義されており、カスタマイズすることはできません。
* 現在、カテゴリーはコンテンツエディターUIには表示されません。ただし、エディターで分類が利用可能な場合は、カテゴリーを割り当てることができます。
* 未分類のモジュールは\_\_「全ての」カテゴリーで使用できます。
* [タグ](#tags):タグを割り当てると、デザインマネージャー内でモジュールを分類できます。これにより、テンプレートを作成する際に、より簡単にモジュールを見つけることができます。
デザインマネージャーでは、モジュールエディターの右側のサイドバーにある\_\_[タグをフィルター]セクションを使用して、カテゴリーとタグを割り当てることができます。利用可能なカテゴリーとタグの詳細については、以下をご覧ください。

ローカルでは、次のようにモジュールの`meta.json`ファイルにカテゴリーとタグを追加できます。
```json theme={null}
{
"label": "Custom module",
"categories": ["image_and_video", "commerce"],
"content_tags": [
{
"name": "BUTTONS",
"source": "USER"
},
{
"name": "CTA",
"source": "USER"
}
],
"is_available_for_new_content": true
}
```
### カテゴリー
モジュールの`categories`配列には、次のカテゴリーを3つまで含めることができます(大文字と小文字は区別されません)。
| カテゴリー | 説明 |
| - | - |
| `blog` | ブログ固有のモジュール(最近の投稿リストなど)。 |
| `body_content` | コンテンツをグラフィカルに表示するようにフォーマットされたモジュール(画像ギャラリーなど)。 |
| `commerce` | コマース固有のモジュール(価格カードなど)。 |
| `design` | コンテンツの構造とレイアウトに影響を与えるモジュール(アコーディオンなど)。 |
| `functionality` | ページ上の動的な応答または動作を含むモジュール(メニューなど)。 |
| `forms_and_buttons` | サイト訪問者がデータを入力して送信できるモジュール。 |
| `media` | 画像、アイコン、動画、バナーなどの要素を含むモジュール。 |
| `social` | ソーシャルメディア固有のモジュール(ソーシャルシェアなど)。 |
| `text` | テキストのみを含むモジュール。 |
### タグ
モジュールの`content_tags`配列には、次のモジュール タグ オブジェクトのいずれかを含めることができます(大文字と小文字は区別されます)。
**コンテンツタイプ**:
* `ACCORDION`
* `ANIMATION`
* `BLOG_POST`
* `BUTTONS`
* `CODE`
* `CTA`
* `FEED`
* `FORM`
* `ICON`
* `IMAGE`
* `LISTS`
* `LOGO`
* `MENU`
* `RICH_TEXT`
* `SLIDER`
* `TEXT`
* `VIDEO`
**関数**:
* `BANNER`
* `BLOG`
* `BRANDING`
* `CALCULATOR`
* `CONVERSION`
* `EMAIL`
* `GALLERY`
* `HEADERS`
* `INTERACTION`
* `LAYOUT`
* `MAP`
* `MULTIMEDIA`
* `NAVIGATION`
* `PROGRESS_BAR`
* `SEARCH`
* `SETTINGS`
* `SOCIAL`
* `TRANSLATION`
# デフォルトのモジュールのバージョン管理
Source: https://developers.hubspot.jp/docs/cms/reference/modules/default-module-versioning
# デフォルトのウェブモジュール
Source: https://developers.hubspot.jp/docs/cms/reference/modules/default-modules
ウェブサイトページ、ブログ記事、ブログリストテンプレートを作成するためにHubSpotが提供しているデフォルトのモジュールをご紹介します。これらのモジュールは、Eメールテンプレートで使用するデフォルトのEメールモジュールとは別のものです。
この記事では、ウェブサイトページ、ブログ記事、ブログリストページのテンプレートを作成するためにHubSpotが提供しているデフォルトのモジュールをご紹介します。見積もりテンプレートを作成するために使用できるデフォルトのモジュールもあります。
ローカルで開発する際は、モジュールのパス(例:`hs fetch @hubspot/linked_image.module`)を使用して特定のデフォルトのモジュールを[取得](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#fetch-files)できます。
デフォルトのモジュールのコードを確認するには、デザインマネージャーの`@hubspot`フォルダーに格納されているモジュールを表示して複製します。このコードでは、一部のデフォルトモジュールは、現在のアカウントに属するIDではなく、デフォルトのアカウントID 7052064を使用します。

> [!WARNING]
>
> ### 注:
>
> デフォルトのウェブモジュールは、Eメールテンプレートで使用する[デフォルトのEメールモジュール](/docs/cms/start-building/building-blocks/modules/default-email-modules)とは別のものです。Eメールテンプレートに次のいずれかのデフォルトのウェブモジュールが含まれている場合は、[対応するEメール固有のモジュールに置き換える](https://developers.hubspot.jp/docs/guides/cms/content/templates/default-email-modules)必要があります。
>
> * `cta`
> * `header`
> * `linked_image`
> * `logo`
> * `post_filter`
> * `post_listing`
> * `section_header`
> * `social_sharing`
> * `text`
## ブログコメント
ブログ記事やブログリストでサポートされています。
```hubl theme={null}
{% module "blog_comments" path="@hubspot/blog_comments" %}
```
## ブログのEメール配信登録
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `select_blog` | ブログ | モジュールに使用するブログ。 | |
| `title` | 文字列 | モジュールのタイトル(h3タグで囲みます)。 | `"Subscribe Here!"` |
| `response_message` | リッチテキスト | フォームの送信時に表示されるメッセージ。 | `Thanks for subscribing!` |
## ブログ記事
このモジュールをブログリストページに追加すると、ブログ記事に移動するクリック可能なボタンを使用して、各記事のタイトル、キービジュアル、執筆者、公開日などを含むブログ記事のプレビューを表示できるようになります。
このデフォルトのモジュールはReactを使用して作成されており、[ソースコードはGitHubで確認](https://github.com/HubSpot/cms-react/tree/main/default-react-modules/src/components/modules/BlogPosts-V0)できます。
> [!WARNING]
>
> ### 注:
>
> * デザインマネージャーからこのモジュールにアクセスすることはできません。このモジュールは、コードテンプレート内でHubLを使って参照し、[ブログリストページエディター](https://knowledge.hubspot.com/ja/blog/edit-a-blog-listing-page)内に追加できます。
> * このモジュールは、非推奨になった以前の`blog_listing`モジュールを置き換えるものです。
```hubl theme={null}
{% module "blog_posts"
path="@hubspot/blog_posts"
layout="grid",
columns=4,
displayForEachListItem=[
"image",
"title",
"authorName",
"tags",
"publishDate",
"description",
"button"
]
%}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `layout` | 選択肢 | 各ブログ記事プレビューのコンテンツレイアウト。`grid`(デフォルト):基本グリッドで記事を並べます。 `singleColumn`:1列で記事を並べます。キービジュアルは、記事の他のコンテンツの上に独自の行で配置されます。 `sideBySide`:1列で記事を並べます。キービジュアルは、記事のコンテンツと水平に並べます。 | `grid` |
| `columns` | 数値 | `grid`レイアウトを使用する場合の1行当たりの記事数。`2`、`3`、`4`のいずれかにできます。 | `3` |
| `alternateImage` | ブール値 | `sideBySide`レイアウトを使用する場合、このブール値を`true`に設定すると、記事プレビューの右側と左側に交互にキービジュアルが並べられます。 | `false` |
| `fullImage` | ブール値 | `grid`レイアウトまたは`singleColumn`レイアウトを使用する場合、このブール値を`true`に設定すると、キービジュアルが記事プレビューの背景になります。 | `false` |
| `displayForEachListItem` | 配列 | 各ブログ記事プレビューに含めるコンテンツ。次の選択肢があります。`image`:記事のキービジュアル。 `title`:記事のタイトル。 `authorImage`:記事の執筆者の画像。 `authorName`:記事の執筆者の名前。 `tags`:記事のブログタグ。 `publishDate`:記事の公開日。 `description`:記事のメタディスクリプション。 `button`:ブログ記事にリンクする、続きを読むボタン。 | `[ 'image', 'title', 'authorImage', 'authorName', 'tags', 'publishDate', 'description', 'button' ]` |
| `buttonText` | 文字列 | 続きを読むボタンに表示されるテキスト(このボタンが含まれる場合)。 | `Read more` |
## ブログ記事フィルター
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "post_filter" path="@hubspot/post_filter" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `select_blog` | ブログ | 表示するブログを選択します。デフォルトでは、ブログテンプレートで使用する場合は現在のブログが使用され、その他の場合はプライマリーブログが使用されます。 | |
| `filter_type` | 選択肢 | 表示するフィルターリンクのタイプ。次の選択肢があります。 | `tag` |
| `order_by` | 選択肢 | フィルターリンクの値の順序。次の選択肢があります。 | `post_count` |
| `list_title` | テキスト | H3見出し。 | `"Posts by Tag"` |
| `max_links` | 数値 | 表示するフィルターリンクの数。全て表示する場合は空白のままにします。 | `5` |
| `expand_link_text` | テキスト | `max_links`の値を超える数のリンクが使用可能な場合に表示するテキスト。 | `"See all"` |
## ブログ記事リスト
ページ、ブログリスト、ブログ記事でサポートされています。
> [!WARNING]
>
> ### 注:
>
> このモジュールの新しいバージョンが2024年3月末にリリースされました。詳しくは[新しいデフォルトの記事リストモジュール](/docs/cms/reference/modules/default-module-versioning#post-listing)についてご確認ください。
```hubl theme={null}
{% module "post_listing" path="@hubspot/post_listing" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `select_blog` | ブログ | 表示するブログを選択します。デフォルトでは、ブログテンプレートで使用する場合は現在のブログが使用され、その他の場合はプライマリーブログが使用されます。 | |
| `listing_type` | 選択肢 | 記事リストのタイプ。次の選択肢があります。`recent`:最新。 `popular_all_time`:最も人気の高い記事。 `popular_past_year`:過去1年間で最も人気の高い記事。 `popular_past_six_months`:過去6か月間で最も人気の高い記事。 `popular_past_month`:過去1か月間で最も人気の高い記事。 | `recent` |
| `list_title` | テキスト | H3見出し。 | `"Recent Posts"` |
| `max_links` | 数値 | 表示する記事の最大数。 | `5` |
## ボタン
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "button" path="@hubspot/button" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `link` | リンク | ボタンによるリダイレクト先URL。 | `{ "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false }` |
| `button_text` | テキスト | ボタンに表示されるテキスト。 | `"Add a button link here"` |
| `style` | オブジェクト | `override_default_style`(ブール値) `button_font`(フォント) `button_color`(色) `text_hover_color`(色) `button_hover_color`(色) | `{ "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } }` |
## CTA(Call-To-Action)
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "cta" path="@hubspot/cta" %}
```
| パラメーター | 型 | 説明 |
| - | - | - |
| `guid` | 文字列 | CTAのグローバル固有ID。 |
## データを削除
2025年5月26日をもってこのモジュールは非推奨となり、[データプライバシーリクエストページ機能](https://knowledge.hubspot.com/ja/privacy-and-consent/manage-data-privacy-requests)に移行されました。
このモジュールのリファレンス情報は、[非推奨のモジュールドキュメント](/docs/cms/versions-deprecations/deprecated/modules#delete-data)に移動されました。
## 区切り
ページでサポートされています。2022年8月25日以降に作成されたアカウントでは、[このモジュールの新しいバージョン](/docs/cms/reference/modules/default-module-versioning#divider)を利用できます。詳しくは[この更新に関する情報](https://developers.hubspot.com/changelog/divider-module-v1)をご確認ください。
```hubl theme={null}
{% module "divider" path="@hubspot/divider" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `height` | 数値 | 区切り線の高さ(px)。 | `1` |
| `width` | 数値 | 区切り線の幅のパーセンテージ(%)。 | `50` |
| `color` | 色 | 区切り線の色(16進数)と不透明度(数値)。 | `{ "color": "#000000", "opacity": 100 }` |
| `line_type` | 選択肢 | 線のタイプ。次の選択肢があります。 | `solid` |
| `alignment` | 選択肢 | 区切り線の水平方向の位置合わせ。次の選択肢があります。 | `center` |
| `show_padding` | ブール値 | 区切りの上下に設けられる余白の表示または非表示を指定します。 | `false` |
| `padding` | 数値 | 区切り線の上下に設けられる余白のピクセル(px)値。このオプションは、`show_padding`が`true`に設定されている場合に使用可能になります。 | `5` |
## データをダウンロード
2025年5月26日をもってこのモジュールは非推奨となり、[データプライバシーリクエストページ機能](https://knowledge.hubspot.com/ja/privacy-and-consent/manage-data-privacy-requests)に移行されました。
このモジュールのリファレンス情報は、[非推奨のモジュールドキュメント](/docs/cms/versions-deprecations/deprecated/modules#download-data)に移動されました。
## フォーム
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "form"
path="@hubspot/form"
form={
"form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
"response_type": "redirect",
"message": "Thanks for submitting the form.",
"redirect_id": null,
"redirect_url": "http://www.google.com"
}
%}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `title` | テキスト | H3見出し | |
| `form` | オブジェクト | 次のフィールドを含むフォームオブジェクト。`form_id`:使用するフォームのID。 `response_type`:フォーム送信後に訪問者に表示する内容。 `message`:インラインメッセージ(`response_type`が`inline` `redirect_id`に設定されている場合)。:リダイレクト先ページのID(`response_type`が`redirect`に設定されている場合)。 `redirect_url`:リダイレクト先URL(`response_type`が`redirect`に設定されている場合)。 | |
| `{ "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" }` | | | |
| `notifications_are_overridden` | ブール値 | フォームのデフォルトではなく、フォームの通知Eメールを送信するかどうかを指定します。 | `false` |
| `notifications_override_email_addresses` | Eメール | `notifications_are_overridden`が`true`の場合に送信するEメールのカンマ区切りリスト。 | |
| `follow_up_type_simple` | ブール値 | フォローアップEメールの送信を有効にするかどうかを指定します。 | `false` |
| `simple_email_for_live_id` | Followupemail | フォローアップEメールのID。`follow_up_type_simple`が`true`の場合に使用可能になります。 | |
| `sfdc_campaign` | Salesforcecampaign | Salesforce連携がアクティブな場合のキャンペーンID。 | |
## ヘッダー
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "header" path="@hubspot/header" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `value` | テキスト | 見出しのテキスト。 | `"A clear and bold header"` |
| `header_tag` | 選択肢 | 見出しのレベルを選択します。`h1`から`h6`まで選択できます。 | `h1` |
## 水平方向スペーサー
ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。
```hubl theme={null}
{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}
```
## アイコン
ページ、ブログリスト、ブログ記事でサポートされています。アイコンは、Font Awesome 5.0.10および5.14.0のアイコンセットから取得できます。
```hubl theme={null}
{% module "icon" path="@hubspot/icon" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `name` | 文字列 | アイコンの名前。 | `"hubspot"` |
| `purpose` | 選択肢 | アイコンの目的を分類するスクリーンリーダー用のアクセシビリティーオプション。有効な値は次の通りです。`decorative:`スクリーンリーダーで読み上げられません。 `semantic:`スクリーンリーダーで読み上げられます。 | `"decorative"` |
| `title` | 文字列 | アイコンにタイトルを割り当てるアクセシビリティーオプション。 | |
| `style` | 文字列 | アイコンのタイプ。`solid`、`regular`、`light`、`thin`、`duotone`のいずれかを指定できます。 | `"solid"` |
| `unicode` | 文字列 | アイコンのUnicode値。 | `f3b2` |
## 画像
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "linked_image" path="@hubspot/linked_image" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `img` | 画像 | 次のフィールドを含む画像オブジェクト。`src`:画像のURL。 `alt`:画像の代替テキスト。 `loading`:次の遅延読み込みオプションがあります。 `width`:px値。 `height`:px値。 | `{ "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "loading": "disabled", "width": 200, "height": 200 }` |
| `link` | テキスト | 画像のリンク(オプション)。 | |
| `target` | ブール値 | 新しいタブでリンクを開くかどうかを指定します。 | `false` |
## 画像グリッド
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `slides` | オブジェクト | 各スライドの情報を含むオブジェクト。オブジェクトには次のフィールドが含まれます。`img`:画像のURL。 `link_url`:スライドのリンク先URL。 `hover_messages`:画像にカーソルを合わせると表示されるテキスト。 | `[ { "show_caption": false, "open_in_new_tab": false } ]` |
| `display_mode` | 選択肢 | 画像ギャラリーの表示モード。次の選択肢があります。`standard`:標準スライダー。 `thumbnail`:サムネイルナビゲーター。 `lightbox`:Lightboxギャラリー。 | `standard` |
| `lightboxRows` | 数値 | `display_mode`が`lightbox`の場合に表示するLightboxギャラリーの行数。 | `3` |
| `loop_slides` | ブール値 | `display_mode`が`standard`または`thumbnail`の場合にスライドを循環して表示するかどうかを指定します。 | `true` |
| `auto_advance` | ブール値 | `display_mode`が`standard`または`thumbnail`の場合に自動的に次のスライドに進むかどうかを指定します。 | `true` |
| `num_seconds` | 数値 | `display_mode`が`standard`または`thumbnail`の場合に次のスライドに進むまでの時間の間隔(秒数)。 | `5` |
| `show_pagination` | ブール値 | `display_mode`が`standard`または`thumbnail`の場合にナビゲーションボタンを表示するかどうかを指定します。 | `true` |
| `sizing` | 選択肢 | `display_mode`が`standard`または`thumbnail`の場合にスライドの高さを設定します。次の選択肢があります。`static`:高さ固定。 `resize`:高さ変更可能。 | `static` |
| `transition` | 選択肢 | `display_mode`が`standard`または`thumbnail`の場合に使用する、スライドの遷移スタイル。次の選択肢があります。`slide`:スライド切り替え。 `fade`:フェードによる遷移。 | `slide` |
| `caption_position` | 選択肢 | `display_mode`が`standard`または`thumbnail`の場合に表示する、スライドのキャプションの位置。次の選択肢があります。`below`:常に画像の下にキャプションを表示します。 `superimpose`:画像の上にキャプションを重ねて表示します。 | `below` |
## 画像ギャラリー
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "gallery" path="@hubspot/gallery" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `slides` | オブジェクト | 各スライドの情報を含むオブジェクト。オブジェクトには次の情報が含まれます。`img`:画像のURL。 `show_caption`:スライドのキャプションを表示するかどうかを指定するブール値。 `caption`:キャプションのリッチテキスト。 `link_url`:スライドのリンク先URL。 `open_in_new_tab`:リンクを新しいタブで開くかどうかを指定するブール値。 | `[ { "show_caption": false, "open_in_new_tab": false } ]` |
| `display_mode` | 選択肢 | 画像ギャラリーの表示モード。次の選択肢があります。`standard`:標準スライダー。 `thumbnail`:サムネイルナビゲーター。 `lightbox`:Lightboxギャラリー。 | `standard` |
| `lightboxRows` | 数値 | `display_mode`が`lightbox`の場合に表示するLightboxギャラリーの行数。 | `3` |
| `loop_slides` | ブール値 | `display_mode`が`standard`または`thumbnail`の場合にスライドを循環して表示するかどうかを指定します。 | `true` |
| `auto_advance` | ブール値 | `display_mode`が`standard`または`thumbnail`の場合に自動的に次のスライドに進むかどうかを指定します。 | `true` |
| `num_seconds` | 数値 | `display_mode`が`standard`または`thumbnail`の場合に次のスライドに進むまでの時間の間隔(秒数)。 | `5` |
| `show_pagination` | ブール値 | `display_mode`が`standard`または`thumbnail`の場合にナビゲーションボタンを表示するかどうかを指定します。 | `true` |
| `sizing` | 選択肢 | `display_mode`が`standard`または`thumbnail`の場合にスライドの高さを設定します。次の選択肢があります。`static`:高さ固定。 `resize`:高さ変更可能。 | `static` |
| `transition` | 選択肢 | `display_mode`が`standard`または`thumbnail`の場合に使用する、スライドの遷移スタイル。次の選択肢があります。`slide`:スライド切り替え。 `fade`:フェードによる遷移。 | `slide` |
| `caption_position` | 選択肢 | `display_mode`が`standard`または`thumbnail`の場合に表示する、スライドのキャプションの位置。次の選択肢があります。`below`:常に画像の下にキャプションを表示します。 `superimpose`:画像の上にキャプションを重ねて表示します。 | `below` |
## 画像スライダーギャラリー
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "unique_name"
path="@hubspot/image_slider_gallery",
slides=[
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "1 An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
},
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "2 An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
}
]
slideshow_settings={
"slides": {
"per_page": 1,
"sizing": "natural",
"aspect_ratio": "16/9",
"show_captions": true,
"caption_position": "below"
},
"movement": {
"transition": "slide",
"loop_slides": false,
"auto_advance": false,
"auto_advance_speed_seconds": 5
},
"navigation": {
"show_main_arrows": true,
"show_thumbnails": false,
"show_dots": false
}
}
%}
```
| パラメーター | 型 | 説明 |
| - | - | - |
| `slides` | フィールドグループ | 次のフィールドが含まれるフィールドグループ。`img`:画像のURL。 `caption`:画像のキャプションのリッチテキスト。 `link_url`:スライドのリンク先URL。 |
| `slideshow_settings` | フィールドグループ | 画像スライダー設定のフィールドグループ。次のフィールドグループがあります。`slides`:次の情報を含むスライド設定。`per_page`:1ページあたりのスライドの数。 `sizing`:画像のサイズ設定。 `aspect_ratio`:画像の縦横比。 `show_captions`:ブール値。 `movement`:画像のスライド動作の設定。 `navigation`:画像のナビゲーション設定。 |
| `default_text` | フィールドグループ | モジュールのデフォルトのテキスト要素。次の要素が含まれます。`default_caption`:画像のキャプション。 `default_image_alt_text`:画像のテキスト。 `slider_aria_label`:モジュールのデフォルトのエリアラベル。 `arial_label_thumbnails`:モジュールのデフォルトのエリアサムネイル。 `slider_nav_aria_label`:モジュールナビゲーションのデフォルトのエリアラベル。 `prev`:前のスライドに移動することを示すテキスト。 `next`:次のスライドに移動することを示すテキスト。 `first`:最初のスライドに移動することを示すテキスト。 `slideX`:X番目のスライドに移動することを示すテキスト。 `pageX`:X番目のページに移動することを示すテキスト。 `play`:自動再生を開始することを示すテキスト。 `pause`:自動再生を一時停止することを示すテキスト。 `carousel`:カルーセルテキスト。 `select`:表示するスライドを選択することを示すテキスト。 `slide`:スライドのテキスト。 `slidelabel`:スライドのラベル。 |
## 言語切り替え機能
ページでサポートされています。
```hubl theme={null}
{% module "language_switcher" path="@hubspot/language_switcher" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `display_mode` | 選択肢 | 言語切り替え機能のテキストの言語。次のオプションがあります。`pagelang`:言語切り替え機能が有効になっているページの言語で各言語の名前を表示します。 `localized`:各言語の名前をそれぞれの言語で表示します。 `hybrid`:2つの組み合わせ。 | `localized` |
## ロゴ
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "logo" path="@hubspot/logo" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `img` | 画像 | 次のフィールドを含む画像オブジェクト。`override_inherited_src`:設定されているデフォルトのロゴをオーバーライドします。 `src`:画像のURL。 `alt`:ロゴの代替テキスト。 | `{ "override_inherited_src": false, "src": null, "alt": null }` |
| `link` | テキスト | ロゴのリンク(オプション)。URLが指定されていない場合、ロゴは[ブランド設定](https://knowledge.hubspot.com/ja/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo)で設定されているロゴURLにリンクされます。 | |
| `open_in_new_tab` | ブール値 | 新しいタブでリンクを開くかどうかを指定します。 | `false` |
| `suppress_company_name` | ブール値 | 画像が選択されていない場合に会社名を非表示にするかどうかを指定します。 | `true` |
| `heading_level` | 選択肢 | 選択されている画像がなく、`suppress_company_name`が`false`に設定されている場合の見出しのレベルを選択します。`h1`から`h6`まで選択できます。 | `h1` |
## ロゴグリッド
コンテナーのカスタマイズ可能なグリッドで、ロゴを均一に表示できます。ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "logo grid"
path="@hubspot/logo_grid"
group_logos=[
{
"logo": {
"loading": "lazy",
"alt": "company_logo",
"src": "https://www.example.com/Logos/color/logo.png"
}
},
{
"logo": {
"loading": "lazy",
"alt": "company2_logo",
"src": "https://www.example.com/Logos/color/logo2.png"
}
},
{
"logo": {
"alt": "lorem-logo",
"height": 40,
"loading": "lazy",
"max_height": 40,
"max_width": 175,
"src": "https://www.example.com/Logos/color/logo3.png",
"width": 175
}
}
],
styles={
"group_logo": {
"group_background": {
"aspect_ratio": "1/1",
"background_color": {
"color": "#8E7CC3",
"opacity": 100
}
},
"group_spacing": {
"padding": {
"padding": {
"bottom": {
"units": "px",
"value": 75
},
"left": {
"units": "px",
"value": 75
},
"right": {
"units": "px",
"value": 75
},
"top": {
"units": "px",
"value": 75
}
}
}
},
"max_logo_height": 85
},
"group_logo_grid": {
"column_count": 3,
"grid_gap": 54
}
}
%}
```
| パラメーター | 型 | 説明 |
| - | - | - |
| `group_logos` | 配列 | グリッド内の各ロゴのオブジェクトを含む配列。 |
| `logo` | オブジェクト | `group_logos`に含まれる、グリッド内の各ロゴのオブジェクト。各ロゴには、次のパラメーターを含めることができます。`src`:ロゴのファイルパス。 `loading`ロゴの[遅延読み込み](/docs/cms/best-practices/testing-staging-performance/lazy-loading)動作。 `alt`:ロゴの代替テキスト。 `height`:ロゴの高さ。 `width`:ロゴの幅。 `max_height`:ロゴの最大高さ。 `max_width`:ロゴの最大幅。 |
| `styles` | 配列 | グリッドレイアウト、ロゴコンテナー、およびロゴ画像に影響するスタイルフィールドを含む配列。この配列には、次のスタイルグループが含まれています。`group_logo`:ロゴコンテナーとロゴ画像に影響するスタイル。次のフィールドが含まれます。`group_background`:グリッドコンテナーの縦横比と背景色を設定するスタイル。縦横比のオプションには、`1/1`、`4/3`、`16/9`があります。 `group_spacing`:ロゴコンテナーの内側のパディングを設定するスタイル。幅の広いロゴの場合、パディングの値を大きくすると、ロゴの幅が狭くなります。 `max_logo_height`:各ロゴの最大高さ。 `group_logo_grid`:グリッドのレイアウトを設定するスタイル。次のフィールドが含まれます。`column_count`:グリッドの列の数。 `grid_gap`:グリッド項目間の間隔。 |
## ミーティング
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "meetings" path="@hubspot/meetings" %}
```
| パラメーター | 型 | 説明 |
| - | - | - |
| `meeting` | ミーティング | ミーティングリンクを選択します。 |
## ソーシャルログインのアクセス権設定
[メンバーシップページに](/docs/cms/start-building/features/memberships/overview)Google とFacebookのログインオプションが表示されます。サインイン時は、CRM内のコンタクトレコードのEメールアドレスに結び付いたアカウントを使用する必要があります。有効にするソーシャルログインを選択できます。
アクセス権設定を利用可能なログインページでサポートされています。
```hubl theme={null}
{% module "social" path="@hubspot/membership_social_logins",
clientid=""
appid=""
facebook_enabled=true
google_enabled=true
%}
```
> [!NOTE]
>
> Facebookを使用する場合は、[Facebook開発者アカウント](https://developers.facebook.com/docs/development/register)と、基本的な設定を使用して[作成したFacebookアプリ](https://developers.facebook.com/docs/development/create-an-app)が必要です。これらの要件を満たした上で、作成したアプリのIDをモジュールに渡します。
>
> Googleを使用する場合は、Googleアカウントと[認証情報の作成](https://developers.google.com/identity/sign-in/web/sign-in#create_authorization_credentials)が必要になります。これらの要件を満たした上で、アプリのクライアントIDをモジュールに渡します。
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `facebook_appid` | 文字列 | FacebookアプリのID。 | |
| `facebook_enabled` | ブール値 | Facebookログインのボタンを有効にするかどうかを指定します。`facebook_appid`が必要です。 | `False` |
| `google_clientid` | 文字列 | GoogleクライアントのID。 | |
| `google_enabled` | ブール値 | Googleログインのボタンを有効にするかどうかを指定します。`google_clientid`が必要です。 | `False` |
## メニュー
ページ、ブログ記事、ブログリストでサポートされています。
独自のカスタムメニューを作成する場合は、HubSpotの[menu()関数](/docs/cms/reference/hubl/functions#menu)をお試しください。
```hubl theme={null}
{% module "menu" path="@hubspot/menu" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `id` | メニュー | メニューのID。 | |
| `root_type` | 選択肢 | 詳細メニュータイプ。次の選択肢があります。`site_root`:常に最上位ページをメニューに表示します。 `top_parent`:表示中のセクションに関連するページをメニューに表示します。 `parent`:表示中のページに関連するページをメニューに表示します。 `breadcrumb`:パンくず形式のパスメニュー(横フローを使用)。 | `site_root` |
| `max_levels` | 選択肢 | メニューで展開可能なメニューツリーの子の数を指定します。`1`から`10`まで選択できます。 | `2` |
| `flow` | 選択肢 | メニューの向き。次の選択肢があります。 | `horizontal` |
| `flyouts` | ブール値 | 子メニュー項目にカーソルを合わせたときに詳細表示を有効にするかどうかを指定します。 | `true` |
## ページフッター
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "page_footer" path="@hubspot/page_footer" %}
```
## パスワードプロンプト
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "password_prompt" path="@hubspot/password_prompt" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `submit_button_text` | テキスト | 送信ボタンに表示されるテキスト。 | `"Submit"` |
| `password_placeholder` | テキスト | パスワードフィールドのプレースホルダーテキスト。 | `"Password"` |
| `bad_password_message` | リッチテキスト | パスワードが正しく入力されていない場合に表示されるメッセージ。 | `"Sorry, please try again. "` |
## 支払い
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "payments" path="@hubspot/payments" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `payment` | 文字列 | 特定の支払いリンクを使用するようにモジュールを設定するには、支払いリンクのIDを含めます。支払いリンクを編集する際に、URLで[このIDを確認](/docs/cms/reference/fields/module-theme-fields#link)できます。 | |
| `checkout_location` | 文字列 | 支払いフォームを新しいタブで開くか、オーバーレイで開くかを設定します。有効な値は次の通りです。`new_tab`:新しいタブで支払いフォームを開きます。 `overlay`:スライド式のオーバーレイで支払いフォームを開きます。 | `"new_tab"` |
| `button_text` | 文字列 | ご注文の確認ボタンのテキストを設定します。 | `"Checkout"` |
| `button_target` | 選択肢 | ボタンでHubSpot支払いリンクと外部リンクのどちらを使用するかを設定します。次の選択肢があります。`payment_link` `custom_link` | `"payment_link"` |
| `button_link` | リンク | `button_target`を`custom_link`に設定した場合、外部リンクの宛先を設定します。次のリンクタイプがサポートされています。 | `EXTERNAL` |
## 製品
アカウントの[製品ライブラリー](https://knowledge.hubspot.com/ja/products/how-do-i-use-products)に含まれている製品が表示されます。ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module
path="@hubspot/product",
product={
"id" : 2124070179
},
group_button={
"button_text" : "Buy",
"override_product_button" : true,
"button_override" : {
"no_follow" : false,
"open_in_new_tab" : false,
"sponsored" : false,
"url" : {
"href" : "https://www.test.com",
"type" : "EXTERNAL"
}
},
group_description={
"description_override" : "Monthly gym membership with access to shared locker facilities.",
"override_product_description" : true
},
group_name={
"heading_level" : "h3",
"name_override" : "Gym membership",
"override_product_name" : true
},
group_image={
"image_override" : {
"alt" : "360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS",
"height" : 360,
"loading" : "lazy",
"src" : "https://2272014.fs1.hubspotusercontent-na1.net/hubfs/2272014/360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS.jpg",
"width" : 640
},
"override_product_image" : true
}
%}
```
| パラメーター | 型 | 説明 |
| - | - | - |
| `product` | 製品 | 表示する製品を製品IDで指定します。 |
| `group_button` | フィールドグループ | デフォルトでは、製品に設定されているURLにユーザーを誘導するためのボタンがモジュールに表示されます。このボタンによる誘導先をカスタマイズするには、このオプションのフィールドグループと併せて次のフィールドを含めます。`button_text`:ボタンのテキストを設定する文字列。 `override_product_button`:デフォルトのボタンリンク設定をオーバーライドする場合は、`true`に設定します。さらに、`button_override`オブジェクトを含めます。詳細については、以下の`button_override`をご参照ください。 |
| `button_override` | オブジェクト | `group_button`フィールドグループで、`override_product_button`が`true`に設定されている場合、このパラメーターによってボタンのURL動作が設定されます。`no_follow`:リンクの[no\_follow](https://ahrefs.com/blog/nofollow-links/)動作を指定するブール型フィールド。 `open_link_in_new_tab`:リンクの開く動作を指定するブール型フィールド。 `url`:ボタンの誘導先を指定するオブジェクト。 `url`フィールドでは、`type`フィールドを使用して誘導先のタイプを設定できます。このフィールドは、次のコンテンツタイプでサポートされています。`EXTERNAL`:標準URL。URLは`href`フィールドに含めます。 `CONTENT`:HubSpotページ。ページIDは`content_id`フィールドに含めます。 `PAYMENT`:支払いリンク。支払いリンクは`href`フィールドに含めます。 `EMAIL_ADDRESS`:Eメールアドレス。Eメールアドレスは`href`フィールドに含めます。 |
| `group_name` | フィールドグループ | デフォルトでは、このモジュールの上部にh3として製品名が表示されます。名前をカスタマイズするには、このオプションのフィールドグループと併せて次のフィールドを含めます。`heading_level`:見出しのサイズ。`h1`~`h6`を指定できます。 `override_product_name`:製品名ではなくテキストを指定する場合は、`true`に設定します。 `name_override`:モジュールの上部に表示する文字列。 |
| `group_description` | フィールドグループ | デフォルトでは、製品に設定されている説明がモジュールに表示されます。説明をカスタマイズするには、このオプションのフィールドグループと併せて次のフィールドを含めます。`override_product_description`:製品の説明をカスタマイズする場合は、`true`に設定します。 `description_override`:新しい説明を含む文字列。 |
| `group_image` | フィールドグループ | デフォルトでは、製品に設定されている画像がモジュールに表示されます。この画像をカスタマイズするには、このオプションのフィールドグループと併せて次のフィールド含めます。`override_product_image`:新しい画像を指定する場合は、`true`に設定します。 `image_override`:新しい画像を指定するオブジェクト。このオブジェクトには次のプロパティーが含まれています。`alt` `height` `loading` `src` `width` |
## 見積もりのダウンロード
見積もりテンプレートでサポートされています。
```hubl theme={null}
{% module "download" path="@hubspot/quote_download" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `button_text` | 文字列 | ダウンロードボタンに表示されるテキスト。 | `Download` |
| `download_error` | 文字列 | ダウンロードに失敗した場合に表示されるエラーメッセージ。 | `There was a problem downloading the quote. Please try again.` |
## 見積もりの支払い
見積もりテンプレートでサポートされています。
```hubl theme={null}
{% module "payment" path="@hubspot/quote_payment" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `heading_text` | 文字列 | 見積もりテンプレートの支払いセクションの上に表示される見出し。 | `Payment` |
| `heading_tag` | 選択肢 | `heading_text`を表示するために使用する見出しのタイプ。有効な値は、`h1`、`h2`、`h3`、`h4`、`h5`、`h6`です。 | `h3` |
| `checkout` | 文字列 | 支払いボタンのテキスト。 | `Pay now` |
| `needs_signature` | 文字列 | 署名が必要な場合のボタンテキスト。 | `Payment can't be made because the quote isn't fully signed.` |
| `checkout_error` | リッチテキスト | 注文手続き中にエラーが発生した場合に表示されるメッセージ。 | `There was a problem setting up checkout. Please contact the person who sent you this quote.` |
| `payment_status_error` | リッチテキスト | 支払いを試行中にエラーが発生した場合に表示されるメッセージ。 | `There was a problem loading the payment status for this quote. Please try refreshing the page.` |
| `paid` | 文字列 | 支払いが正常に完了したことを示すステータスインジケーター。 | `Paid` |
| `payment_processing` | 文字列 | 支払いが処理中であることを示すステータスインジケーター。 | `Payment processing` |
## 見積もりの署名
見積もりテンプレートでサポートされています。
```hubl theme={null}
{% module "signature" path="@hubspot/quote_signature" %}
```
見積もりに電子署名が必要な場合は、`esignature`オブジェクトに含まれる次のフィールドを使用できます。
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `pretext` | リッチテキスト | 電子署名の説明テキスト。 | `Before you sign this quote, an email must be sent to you to verify your identity. Find your profile below to request a verification email.` |
| `verify_button` | 文字列 | 確認ボタンに表示されるテキスト。 | `Verify to sign` |
| `failure` | 文字列 | 署名情報を取得できない場合に表示されるアラートテキスト。 | `There was a problem retrieving the signature information. Please reload the page.` |
| `verification_sent` | 文字列 | 認証リクエストが見積もり署名者に正常に送信されると表示されるステータスインジケーター。 | `Verification sent` |
| `signed` | 文字列 | 見積もりが正常に署名されると表示されるテキスト。 | `Signed` |
見積もりに印刷された署名が必要な場合、`print_signature`オブジェクトに含まれる次のフィールドを使用できます。
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `header` | リッチテキスト | 署名セクションの上部に表示されるテキスト。 | `Signature` |
| `signature` | 文字列 | 署名フィールドの横に表示されるテキスト。 | `Signature` |
| `date` | 文字列 | 日付フィールドの横に表示されるテキスト。 | `Date` |
| `printed_name` | 文字列 | 印刷された名前フィールドの横に表示されるテキスト。 | `Printed name` |
| `countersignature` | オブジェクト | 連署セクションのコンテンツを含むオブジェクト。このオブジェクトには、次のフィールドを含めることができます。`header`:連署セクションの上部に表示されるテキスト。 `countersignature`:連署フィールドの横に表示されるテキスト。 `date`:日付フィールドの横に表示されるテキスト。 `printed_name`:印刷された名前フィールドの横に表示されるテキスト。 | `Signed` |
## 商品項目
見積もりテンプレートでサポートされています。このモジュールには、カスタム見積もりで使用されるデフォルトのテキストも含まれています。
```hubl theme={null}
{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `title` | テキスト | 商品項目列のタイトル。 | `Column description` |
| `use_additional_product_property` | ブール値 | ユーザーが製品のプロパティーから追加の商品項目列を選択するために使用できるチェックボックスを表示するかどうかを指定します。 | `False` |
| `additional_product_properties` | 選択肢 | 製品プロパティー。次の選択肢があります。`price`:商品項目の価格。 `item_description`:商品項目の説明。 `quantity`:商品項目の数。 `amount`:商品項目の合計金額。 `hs_recurring_billing_start_date`:定期的な商品項目の請求開始日。 `discount`:商品項目に適用される割引金額。 | |
| `crm_product_property` | CRMオブジェクトプロパティー | 商品項目列のヘッダーとして表示する製品プロパティーを選択します。 | |
## リッチテキスト
全てのテンプレートタイプでサポートされています。
```hubl theme={null}
{% module "rich_text" path="@hubspot/rich_text" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `html` | リッチテキスト | HTMLブロック。 | ` ## Something Powerful \n ### Tell The Reader More \n The headline and subheader tells us what you're [offering](https://developers.hubspot.jp/docs\"#\"), and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for. \n Remember: \n\nBullets are great \nFor spelling out [benefits](https://developers.hubspot.jp/docs\"#\") and \nTurning visitors into leads. \n ` |
## RSSリスティング
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "rss_listing" path="@hubspot/rss_listing" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `title` | テキスト | H3見出し。 | `"Test"` |
| `rss_feed_type` | 選択肢 | RSSフィードのタイプ。次の選択肢があります。`blog` - HubSpotでホスティングされているブログ。 `external` - 外部のRSSフィード。 | `blog` |
| `rss_url` | テキスト | `rss_feed_type`が`external`の場合に使用するRSS URL。 | |
| `content_group_id` | ブログ | `rss_feed_type`が`blog`の場合に使用するブログのID。 | |
| `topic_id` | タグ | `rss_feed_type`が`blog`の場合にフィルター基準として使用するタグのID(オプション)。 | |
| `number_of_items` | 数値 | 表示する記事の最大数。 | `5` |
| `include_featured_image` | ブール値 | キービジュアルを含めるかどうかを指定します。 | `false` |
| `show_author` | ブール値 | 執筆者名を表示するかどうかを指定します。 | `true` |
| `attribution_text` | テキスト | 執筆者を記事に関連付けるテキスト。`show_author`が`true`の場合に表示されます。 | `"by"` |
| `show_detail` | ブール値 | 記事のサマリーテキストを表示するかどうかを指定します。 | `true` |
| `limit_to_chars` | 数値 | `show_detail`が`true`の場合のサマリーテキストの長さを制限します。 | `200` |
| `click_through_text` | テキスト | `show_detail`が`true`の場合に、記事サマリーの最後にあるクリックスルーリンクに表示されるテキスト。 | `"Read more"` |
| `show_date` | ブール値 | 公開日を表示するかどうかを指定します。 | `true` |
| `publish_date_format` | 選択肢 | `show_date`が`true`の場合に使用する公開日の形式。次の選択肢があります。`short`(例:06/11/06 12:00PM) `medium`(例:Jun 6, 2006 12:00:00 pm) `long`(例:June 6, 2017 12:00:00 pm EDT) `MMMM d, yyyy 'at' h:mm a`(例:June 6, 2006 at 12:00 pm) `h:mm a 'on' MMMM d, yyyy`(例:12:00 pm on June 6, 2006) | `short` |
| `publish_date_text` | テキスト | `show_date`が`true`の場合に使用する、記事の公開日時を示すテキスト。 | `"posted at"` |
## サイト検索入力
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "search_input" path="./local-search_input"
placeholder="Search"
include_search_button=true
results={
"use_custom_search_results_template": "true",
"path_id": "77977569400"
}
%}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `field_label` | テキスト | 検索入力のラベルテキスト。 | |
| `placeholder` | テキスト | 入力フィールドのプレースホルダーテキスト。 | `"Search"` |
| `include_search_button` | ブール値 | 検索ボタンを含めるかどうかを指定します。 | `false` |
| `content_types` | オブジェクト | 検索結果に含めるコンテンツのタイプを指定します。このオブジェクトには、ブール値を設定する次のキーが格納されます。`website_pages` `landing_pages` `blog_posts` `knowledge_articles` | `{ "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }` |
| `results` | オブジェクト | カスタム検索結果ページを使用するためのコントロールを有効にするオブジェクト。次のプロパティーが含まれます。 `use_custom_search_results_template`**(ブール値)**: このブール値を`true`に設定すると、ユーザーがカスタム検索結果ページを選択できるようになります。デフォルト値は`false`です。 `path_id`**(文字列)**: 検索結果に使用するページのID。ここで参照するページには、検索結果モジュールが含まれている必要があります。 | |
## 検索結果
ページ、ブログ記事、ブログリストでサポートされています。
```hubl theme={null}
{% module "search_results" path="@hubspot/search_results" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `display_featured_images` | ブール値 | 項目のキービジュアルを表示するかどうかを指定します。 | `false` |
## セクションヘッダー
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "section_header" path="@hubspot/section_header" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `header` | テキスト | セクションヘッダーのコンテンツ。 | `"A clear and bold header"` |
| `heading_level` | 選択肢 | `header`の見出しレベル。`h1`から`h6`まで選択できます。 | `h1` |
| `subheader` | テキスト | セクションの小見出しの段落のテキスト。 | `"A more subdued subheader"` |
## シンプルメニュー
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "simple_menu" path="@hubspot/simple_menu" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `menu_tree` | シンプルメニュー | シンプルメニューオブジェクト。 | `[]` |
| `orientation` | 選択肢 | メニューの向き。次の選択肢があります。 | `horizontal` |
## ソーシャルフォロー
ソーシャルメディアのプロフィールへのリンクを追加して、コンテンツエディターでドラッグ&ドロップ操作によってリンクを並べ替えることができます。ソーシャルURLに基づいて自動的にアイコンが挿入されますが、これらのアイコンはオーバーライドできます。
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "social_follow" path="@hubspot/social_follow" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `link` | テキスト | エディターで追加したソーシャルページのリンク先。 | |
| `open_in_new_window` | ブール値 | `false`に設定すると、リンクが同じブラウザータブで開きます。 | `true` |
| `is_podcast` | ブール値 | `true`に設定すると、デフォルトのアイコンやカスタムアイコンではなく、ポッドキャストアイコンが表示されます。 | `false` |
| `customize_alt_text` | ブール値 | デフォルトでは、代替テキストが自動的に生成されます。`true`に設定すると、`aria_label`フィールドを使用して、デフォルトの代替テキストをカスタムの値でオーバーライドできます。 | `false` |
| `aria-label` | 文字列 | `customize_alt_text`が`true`の場合、このフィールドでアイコンの代替テキストを設定します(例:`Follow us on Facebook`)。この説明は、スクリーンリーダーが目の不自由なユーザーにアイコンについて説明するために使用されます。 | `False` |
| `customize_icon` | ブール値 | デフォルトでは、リンクURLに基づいてアイコンが自動入力されます。`true`に設定すると、`custom_icon`フィールドを使用して、提供されている他のアイコン(Font Awesome 6.4.2)のいずれかを選択できます。 | `false` |
| `custom_icon` | アイコン | `customize_icon`が`true`で、`is_podcast`が`false`の場合、このフィールドを使用して、提供されているアイコンのセットからカスタムアイコンを指定します。Font Awesome 6.4.2で提供されているアイコンが使用可能です。 | |
## ソーシャルシェアリング
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "social_sharing" path="@hubspot/social_sharing" %}
```
注:以下に示されているデフォルトの列に含まれる変数`social_link_url`の値は、`link`パラメーターの値と同じです。
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `link` | テキスト | この宛先リンクは、ソーシャルネットワークで共有しやすいように短縮されます。 | |
| `facebook` | オブジェクト | このオブジェクトには次のフィールドが含まれます。`enabled`:ソーシャルアイテムを有効にするためのブール値。 `custom_link_format`:ソーシャル共有者のURLとしてのカスタムURL。 | `{ "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" }` |
| `twitter` | オブジェクト | このオブジェクトには次のフィールドが含まれます。`enabled`:ソーシャルアイテムを有効にするためのブール値。 `custom_link_format`:ソーシャル共有者のURLとしてのカスタムURL。 | `{ "enabled": false, "custom_link_format": "https://twitter.com/intent/tweet?original_referer=\{\{ social_link_url }}&url={{ social_link_url }}&source=tweetbutton&text={{ social_page_title\|urlencode }}" }` |
| `linkedin` | オブジェクト | このオブジェクトには次のフィールドが含まれます。`enabled`:ソーシャルアイテムを有効にするためのブール値。 `custom_link_format`:ソーシャル共有者のURLとしてのカスタムURL。 | `{ "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" }` |
| `pinterest` | オブジェクト | このオブジェクトには次のフィールドが含まれます。`enabled`:ソーシャルアイテムを有効にするためのブール値ソーシャルアイテムを有効にするためのブール値。 `custom_link_format`:ソーシャル共有者のURLとしてのカスタムURL。 `pinterest_media`:次のフィールドを含む画像オブジェクト。`src`:画像のURL。 `alt`:画像の代替テキスト。 | `{ "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url={{ social_link_url }}&media={{ pinterest_media }}", "pinterest_media": { "src": "", "alt": null } }` |
| `email` | オブジェクト | このオブジェクトには次のフィールドが含まれます。`enabled`:ソーシャルアイテムを有効にするためのブール値。 `custom_link_format`:ソーシャル共有者のURLとしてのカスタムURL。 | `{ "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" }` |
## タブ付きカード
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module
path="@hubspot/tabbed_card",
tabs=[
{
"content" : "This is the descriptive text contained in tab 1.
",
"tab_label" : "Tab 1 label"
},
{
"content" : "This is the descriptive text contained in tab 2.
",
"tab_label" : "Tab 2 label"
}
],
fixed_height=false
%}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `tabs` | フィールドグループ | 各タブのタブラベルとテキストコンテンツを含むフィールドグループ。次のフィールドがあります。`tab_label`:タブのラベル。 `content`:タブのリッチテキストコンテンツ。 | `"Some additional information in one line"` |
| `fixed_height` | ブール値 | デフォルトでは、タブを切り替えてもコンテナーの高さが変わらないように、タブの高さは固定されます。このブール値を`false`に設定すると、タブ付きカードコンテナーの高さが、アクティブなタブのコンテンツに応じて調整されます。 | `False` |
## 1行テキスト
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "text" path="@hubspot/text" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `value` | テキスト | このパラメーターにテキストを追加します。 | `"Some additional information in one line"` |
## 動画
ページ、ブログリスト、ブログ記事でサポートされています。
```hubl theme={null}
{% module "video" path="@hubspot/video" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `video_type` | 選択肢 | 動画のタイプ。次の選択肢があります。`embed`:外部ソースからコードを埋め込みます。 `hubspot_video`:HubSpotでホスティングされている動画。 | `embed` |
| `hubspot_video` | 動画プレーヤー | HubSpotでホスティングされている動画。`video_type`が`hubspot_video`に設定されている場合に使用されます。 | |
| `embed_field` | 埋め込み | 次の埋め込みタイプを使用できます。`oembed` `html`:動画の埋め込みコード。 | |
| `oembed_thumbnail` | 画像 | `video_type`が`embed`に、`embed_field`が`oembed`に設定されている場合に、埋め込みサムネイル画像をオーバーライドします。 | |
| `style_options` | オブジェクト | `oembed_thumbnail_play_button_color`色フィールドを含むオブジェクト。 | `{"oembed_thumbnail_play_button_color":"#ffffff"}` |
| `placeholder_fields` | オブジェクト | このオブジェクトには次のフィールドが含まれます。`placeholder_title`:テキストフィールド。 `placeholder_description`:テキストフィールド。 | `{"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."}` |
## 動画埋め込み(ランディングページ)
ページでサポートされています。
```hubl theme={null}
{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `url` | テキスト | 動画のURL。VimeoとYouTubeのURLがサポートされています。 | `"https://www.youtube.com/watch?v=X1Rr5BFO5rg"` |
| `is_full_width` | ブール値 | 動画を全幅に設定(`true`)、または手動で幅と高さを設定(`false`)するかを指定します。 | `true` |
| `max_width` | 数値 | 最大幅(px) | `800` |
| `max_height` | 数値 | 最大高さ(px) | `450` |
## WhatsAppリンク
ページ、ブログ記事、ブログ リスト ページでサポートされています。[WhatsAppチャネルの接続](https://knowledge.hubspot.com/ja/inbox/connect-whatsapp-to-the-conversations-inbox)が必要です。
```hubl theme={null}
{% module "whatsapp_link" path="@hubspot/whatsapp_link", label="whatsapp_link" %}
```
| パラメーター | 型 | 説明 | デフォルト値 |
| - | - | - | - |
| `whatsapp_number` | URL | [アカウントに接続されているWhatsAppチャネル](https://knowledge.hubspot.com/ja/inbox/connect-whatsapp-to-the-conversations-inbox)の中から選択します。 | |
| `optin_text` | 選択肢 | [オプトインとオプトアウトのテキスト](https://knowledge.hubspot.com/ja/inbox/collect-consent-for-whatsapp-conversations#subscribe-a-contact-using-opt-in-keywords-in-a-whatsapp-thread)。 | |
| `whatsapp_display` | 選択肢 | ボタンにテキストまたはWhatsAppアイコン、あるいはその両方を表示するかを選択します。次の選択肢があります。`text_and_icon` `text` `icon` | `text_and_icon` |
| `icon_position` | 選択肢 | ボタン上のアイコンの位置。`left`と`right`が選べます。 | `left` |
| `button_text` | 文字列 | ボタンのテキスト。 | `Chat on WhatsApp` |
| `whatsapp_icon_title` | 文字列 | スクリーンリーダー用のアイコンのテキスト。 | `WhatsApp Icon` |
# export_to_template_context
Source: https://developers.hubspot.jp/docs/cms/reference/modules/export-to-template-context
Export_to_template_contextは、モジュールを実際に表示せずに、モジュールのパラメーターをテンプレート環境で使用できるようにするパラメーターです。このパラメーターは、全てのHubLモジュールタグに使用できます。これらのパラメーターを取得し、変数に保存し、テンプレートのロジックに含めるには、widget_dataタグを使用します。
`export_to_template_context`は、HubLタグを実際に表示することなく、HubLタグのパラメーターをテンプレート環境で使用するためのパラメーターです。このパラメーターは、全ての[HubLタグ](/docs/cms/reference/hubl/tags/standard-tags)に使用できます。これらのパラメーターを取得し、[変数](/docs/cms/reference/hubl/variables-macros-syntax)に保存し、テンプレートのロジックに含めるには、`widget_data` dict(ディクショナリー)を使用します。
表示されていないHubLタグのパラメーターをテンプレートのコンテキストで使用できれば、コンテンツエディターでのテンプレートの表示方法をユーザーが決めることが可能になります。例えば、ユーザーがフィールドに値を入力したときに、特定のコードブロックのみを表示する必要があるとします。これは、このパラメーターを使用することで実現できます。
まず、HubLタグに`export_to_template_context=True`を追加する必要があります。次に、`widget_data.module.parameter_you_want_to_retreive`を使用します。
```hubl theme={null}
{% module "job_title" path="@hubspot/text", label="Enter a Job Title", value="Chief Morale Officer", export_to_template_context=True %}
{# Makes the parameters available to be stored and used in template logic #}
{{ widget_data.job_title.body.value }}
{# Prints the value of the HubL tag but can also be used in template logic #}
```
以下では、この考え方の適用例をいくつか紹介します。
## カスタムモジュール内での利用
`export_to_template_context=True`は、カスタムモジュールにとっては実質的な機能はないため、カスタムモジュールではサポートされません。テンプレート内のモジュールには[すでにアクセスできる](#retrieving-parameters-from-modules-already-rendered-on-the-template)ので、モジュール内の値を取得するために`export_to_template_context`を使用する必要がありません。モジュールの出力を非表示にする必要がある場合は、何も出力しないようにモジュールを作成できます。つまり、モジュールで何かを表示するかどうかを有効または無効にするブール値フィールドを含めます。
## ユーザーが選択できる背景画像
この例では、画像HubLタグを作成し、それを表示することなくテンプレートのコンテキストにエクスポートします。`widget_data`タグで`src`パラメーターを取得し、styleタグの背景画像のソースとして表示します。
```hubl theme={null}
{% module "background_image" path="@hubspot/image" label='Select a background image',
src='http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg',
export_to_template_context=True %}
Supercharge your app with HubSpot
Build powerful integrations for a global community of users
```
これはコードテンプレートでも実現できますが、通常はカスタムモジュールを作成して、ページエディターのユーザーに最適な編集環境を提供することをお勧めします。このようなHubLタグは個別のフィールドとして表示されますが、関連するフィールドが複数存在する場合もあります。カスタムモジュールを使用すると、ページエディターではモジュールの全てのフィールドがグループ化された状態で表示されます。
## 定義済みのマークアップを表示するための選択フィールド
以下の例では、`export_to_template_context`パラメーターと[選択モジュール](/docs/cms/reference/hubl/tags/standard-tags#choice)を組み合わせて、求人ページのバナーメッセージを変更しています。ユーザーがUIを使用して部門を選択すると、ユーザーが実際にコンテンツを編集しなくても見出しが変更されます。
```hubl theme={null}
{% module "department" path="@hubspot/choice", label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}
{% if widget_data.department.value == "Marketing" %}
Want to join our amazing Marketing team?!
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Sales" %}
Are you a Sales superstar?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Dev" %}
Do you love to ship code?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% else %}
Want to work with our awesome customers?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% endif %}
```
これと同じ機能を、カスタムモジュール内の選択フィールドを使用して再現できます。カスタムモジュールのUIでは、値とラベルの両方を含む選択オプションを非常に簡単に作成できます。
## テンプレートにすでに表示されているモジュールからパラメーターを取得する
ページにすでに表示されているモジュールまたはタグからパラメーターを取得する場合は、`widgets`という名前のdict内でそのモジュールにアクセスできます。`export_to_template_context`パラメーターは必須ではありません。構文は次のとおりです。
```hubl theme={null}
// HubL
{{ content.widgets.name_of_module.body.parameter }}
{{ content.widgets.my_text.body.value }}
```
> [!WARNING]
>
> **注:**`content.widgets`はグローバルモジュールにアクセスしないので、上記のメソッドはグローバルモジュールのフィールドからの値の取得をサポートしません。
フィールドによってデータの保存形式が異なるため、表示するデータへのアクセス方法を確認するには、多くの場合、[開発者情報](/docs/cms/start-building/introduction/developer-environment/troubleshooting/troubleshooting#developer-info)を使用すると便利です。
## HubLモジュール情報をブログリストに出力する
ブログテンプレートは、一般的にはブログに使用されますが、他の種類のリストを作成するために流用することもできます。前述の手法を使用してこの目的を達成できます。
例えば、会社が受信した報道記事のリストレイアウトを作成するとして、記事にリンクせずに、リストを別のページにリンクする場合があります。
[academy.hubspot.com/projects](https://academy.hubspot.com/projects)でこの考え方の実例を確認できます。プロジェクト リスト ページはブログ リスト テンプレートですが、個々の記事は通常のHubSpotページにリンクしています。制作担当者はエディターでリンク先を指定します。
個々のブログ記事のコードの先頭で、テキストフィールドを定義します。記事にこのテキストを表示しない場合は、`export_to_template_context`を使用します。
```hubl theme={null}
{% module "custom_blog_link" path="@hubspot/text", label="Link to external press item", export_to_template_context=True %}
```
このテキストフィールドはブログ記事ごとに編集できます。次に、リスト内のリンクを定義する必要があります。しかし、widget\_dataは記事のコンテキストにのみ存在するため、別の構文を使用してウィジェットデータを取得し、リンクに設定する必要があります。この場合は、`content.widgets.custom_blog_link.body.value`を使用します。ブログリストでは`widget_data`を使用できませんが、そのフィールドの値は個々のコンテンツのウィジェットのコンテキスト内に保存されます。
各記事を含むこのカスタムリンクを表示する基本的なブログリストのループを以下に示します。この方法を使用する場合は、ブログ記事ごとに自動的に作成されたサブディレクトリーをrobots.txtファイルに追加して、空の記事がGoogle などのクローラーによってクロールされないようにする必要があります。
```hubl theme={null}
{% for content in contents %}
Click here to see this press feature!
{% endfor %}
```
# カスタムモジュールのコーディング
Source: https://developers.hubspot.jp/docs/cms/reference/modules/files
カスタムモジュールは、ウェブサイト全体で使用できる再利用可能な要素です。速度、ユーザーエクスペリエンス、アクセシビリティーに関するベストプラクティスを考慮しながら構築します。
ページ、ブログ、[見積もり](/docs/cms/start-building/building-blocks/templates/quotes)(英語)のモジュールを作成する場合は、モジュールのコンテンツ、スタイル設定、機能を制御するための3つのフロントエンド関連ファイルがモジュール内にあります。
* module.html
* module.css
* module.js
> [!NOTE]
>
> Eメールモジュールは、module.cssとmodule.jsに対応していません。理由としては、EメールクライアントではJavaScriptがサポートされないことと、リンクされたCSSファイルのサポートが限られていることが挙げられます。
これらのファイルは、モジュールのインスタンスがページ上にある場合には、常にページ上にレンダリングされます。
特定のページ内に同じモジュールのインスタンスが複数ある場合、HubSpotによってそのモジュールの`module.css`と`module.js`が1回だけ読み込まれます。既定では、`module.css`と`module.js`が非同期的に読み込まれることはありませんが、モジュールのmeta.jsonに[css\_render\_options and js\_render\_options](https://developers.hubspot.jp/docs/cms/building-blocks/modules/configuration)を含めることで、この動作を変更できます。
モジュールはデザインマネージャー内で作成するか、または[HubSpot CLI](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli)を使用してローカル環境で作成できます。モジュールファイルは、デザインマネージャー上ではマルチペインエディターに表示されます。
ローカルでモジュールを確認すると、ファイルはmodule-name.moduleフォルダーに格納されます。

モジュールの作成と管理にデザインマネージャーまたはCLIのいずれを使用するかは、チームの状況や好みに応じて決めます。

[効率的な開発者ワークフローの構築](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)に記載されている推奨事項を参照してください。
## HTML + HubL(module.html)
module.htmlファイルはHTMLおよびHubLを対象としています。一般に、モジュールがページエディターまたはテンプレートファイルのどこに配置されているかに応じて、module.htmlファイルの内容がどこにレンダリングされるかが決まります。
このファイルは、モジュールがどこに配置されていても、ページ内で[HubL include](https://developers.hubspot.jp/docs/cms/hubl#including-files-in-files)と同じように動作します。module.htmlファイルからは、[HubLを使ってモジュールのフィールド値にアクセスできます](https://developers.hubspot.jp/docs/cms/building-blocks/modules#using-module-field-data-to-render-html)。
## CSS(module.css)
モジュールにCSSを追加するには、`module.css`ファイルを使用します。
一般に、`module.css`ではHubLのごく一部のサブセットのみがサポートされます。ただし、モジュールとリンクされたアセットとして画像を追加する場合に[`module_asset_url("my-image.png")`](/docs/cms/reference/hubl/functions#module-asset-url)を使用できます。これにより、画像などのアセットをモジュール自体にパッケージ化できます。例:
```css theme={null}
.testimonial-module__wrapper {
background: url("{{ module_asset_url("bg-pattern.png") }}");
background-repeat: repeat;
min-height: 200px;
width: 100%;
display: block;
}
```
ここでは、モジュール内のフィールドに基づいてモジュールが動的に変化するように、モジュールのCSSを設定する方法を説明します。
### モジュールフィールド値に基づくスタイル
モジュールのフィールドに基づいてモジュールのスタイルに効果を与えるには、いくつかの方法があります。特定の用途に応じて最適な方法を選択してください。
* [CSSクラス](#css-classes)
* [require\_cssブロック](#require-css-block)
* [インラインスタイル](#inline-styles)
#### CSSクラス
編集時に選択可能なオプションをモジュールのスタイルにあらかじめ設定しておくには、モジュールフィールドを追加して、`module.css`ファイルのCSSクラスに対応するクラスを`module.html`ファイル内で設定することができます。
例えば、画像とテキストの1つのモジュールがある状況が考えられます。選択フィールドに基づいてテキストの右または左に画像を制作担当者が配置できるようにする必要がありします。このためには、`module.html`と`module.css`ファイルを次のように設定できます。
```hubl theme={null}
{# module.position is a choice field with two values "img-left" or "img-right". This dictates the order they appear on desktop. Controlled by CSS #}
{% inline_text field="heading" value="{{ module.heading }}" %}
{% inline_rich_text field="text" value="{{ module.text }}" %}
```
```css theme={null}
/* module.css */
/* CSS that makes the image show adjacent to the text,
and positioned based on the positioning field.*/
/* The media query ensures that on mobile the image
will always appear above the text for
visual consistency. */
@media (min-width: 768px) {
.img-text__wrapper {
display: flex;
align-items: row;
}
.img-text__img,
.img-text__text {
flex: 1;
padding: 10px;
}
.img-text--img-right {
flex-direction: row-reverse;
}
}
```
### require\_cssブロック
特定のプロパティーを制作担当者が直接制御できる必要があり、クラスが適切でない場合は、`require_css`ブロックにスタイルタグを使用する方法が最適です。
クラスを使用することなく制作担当者が特定のプロパティーを直接制御できるようにするには、`require_css`タグ内に`module.html`ファイルにスタイルを追加できます。例:
```hubl theme={null}
{% if module.image.src %}
{% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
{% if module.image.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif module.image.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
{% endif %}
{% endif %}
{% require_css %}
{% end_require_css %}
```
`module.html`ではHubLをレンダリングできるので、モジュールフィールド値をCSS変数として使用できます。制作担当者がページエディター上でフィールドを更新すると、該当するCSSが更新されます。このようなブロックによって、`
{% end_require_css %}
```
### インラインスタイルを追加する
わずかな数のプロパティーを制作担当者が細かく制御できる必要があり、クラスが適切でない場合は、HTMLのスタイル属性に値を直接追加することができます。
```hubl theme={null}
{# Module.html #}
{% inline_rich_text field="richtext" value="{{ module.richtext }}" %}
```
プロパティーの数が多くてコードが読みにくくなった場合は、`require_css`ブロック手法への切り替えを検討してください。
### 特定のCSSファイルをインポートする
`require_css`は、module.htmlに追加することで、特定のモジュールまたはテンプレートの表示に特定のCSSファイルが必要なことをHubSpotに示すためのHubL関数です。cssファイルを指すリンクタグが、`standard_header_includes`内でページの``に追加されます。
`require_css`関数では、特定のページ上のモジュールやテンプレートで同じCSSファイルが何回必要とされるかにかかわらず、そのCSSファイルが1回だけ読み込まれます。複数のモジュール間でスタイルが共有される可能性があっても、サイトの全ページで使われるメインのスタイルシートにCSSを直接追加することが望ましくない状況では、この方法が優れています。
`require_css`もリンクによるCSSファイルも同じ目的で利用できますが、`require_css`はフィールド値に基づく条件付きで使用できます。これにより、不要なコードの読み込みが防止されます。
```hubl theme={null}
{{ require_css(get_asset_url("/modules/shared_layout_styles.css")) }}
```
## JavaScript(module.js)
JavaScriptをモジュールに追加するには、`module.js`ファイルを使用します。
`module.css`ファイルと同様に`module.js`ファイルでもHubLはサポートされません。
### フィールド値に基づくスクリプト記述
モジュールにはいくつかの作成方法があり、フィールド値に基づくJavaScriptの動作が異なります。どの方法をどのような状況で使用するかを理解しておくことで、モジュールが使用される全てのページでパフォーマンス面でのメリットが得られます。
例えば、カスタム画像モジュールがあり、Lightboxで画像が開くように制作担当者が設定できる必要があるとします。制作担当者がこの設定を必要とするのは特定の画像のみで、全てのモジュールインスタンスとは限りません。
### データ属性
データ属性は、開発者が要素に追加するHTML 5標準のカスタム属性です。`class="yourClassName"`と同じように、`data-your-attribute="yourValue"`が全ての要素でサポートされます。
```hubl theme={null}
{% if module.image.src %}
{% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
{% if module.image.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif module.image.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
{% endif %}
{% endif %}
```
データ属性を使用すると、module.jsファイルでの処理用としてモジュールインスタンスのフィールド値を渡すことができます。
この値をmodule.jsファイル内で使用するには、モジュールの全てのインスタンスに対してループ処理を行う必要があります。モジュールに固有のクラス名をモジュールの最も外側にあるラッパー要素に追加することで、その名前を対象として各モジュールインスタンスをループ処理できます。
```js theme={null}
// module.js
let imgModules = document.getElementsByClassName("img-module");
Array.from(imgModules).forEach(function (element) {
// loop through each of the instances of the module
// set data attributes to variables to make it easy to work with
let isLightboxEnabled = element.dataset.lightbox;
let captionStyle = element.dataset.caption;
if (isLightboxEnabled) {
element.addEventListener("click", function () {
showLightbox(captionStyle); // Execute your code for the action you want to take, you can pass your data attributes into functions from libraries.
});
}
});
```
データ属性によって、module.js内で各モジュールインスタンスのフィールド値を取得できます。
### require\_jsブロック
JavaScriptテンプレートライブラリーや、Vue.jsまたはReact.jsなどのリアクティブフレームワークを使用する高度なケースでは、データの出力だけを自分で対応し、レンダリングはフレームワーク側で処理する方が望ましい場合があります。
この場合、テンプレートスクリプトからアクセス可能な変数を提供するには、[`require_js`](/docs/cms/reference/hubl/functions#require-js)ブロックで囲んだスクリプトタグを使用します。
```hubl theme={null}
{% require_js %}
{% end_require_js %}
```
この手法は、レンダリング元となる初期データセットを高度なアプリケーションに提供する際に役立ちます。これにより、データを取得するための最初のJavaScript呼び出しが不要になります。
### require\_js
[`require_js`](/docs/cms/reference/hubl/functions#require-js)は、特定のモジュールまたはテンプレートの正常な読み込みに特定のJavaScriptファイルが必要であることを、HubSpotに示すためのHubL関数です。この関数には、ファイルへのパスと、ファイルの追加先となる位置(“head”または“footer”)の2つの入力パラメーターがあります。
モジュール内では、`require_js`をmodule.htmlにのみ追加できます。`require_js`ステートメントで参照されるJavaScriptファイルは、ページ内のモジュールやテンプレートで何回必要とされるかにかかわらず、ページごとに1回だけ読み込まれます。これによりHTTPリクエスト数が減少し、コードの重複も防止できます。
これは次のような状況で役立ちます。
* 同じJavaScriptを必要とする複数のモジュールまたはテンプレートがある場合、`require_js`を使用することでモジュール間でスクリプトを共有できます。
* webpackのようなJavaScriptバンドラーを使用する場合、jsファイルを特定の1つの位置に出力する方が簡単なことがあります。`require_js`を使用すると、JavaScriptをモジュールに関連付けることができます。
`require_js`もリンクによるJavaScriptファイルも同じ目的で利用できますが、`require_js`にはフィールド値に基づく条件を付けることができます。これにより、不要なコードの読み込みが防止されます。さらに、必要な場合にはJavaScriptをheadに読み込む方法もあります。
> [!TIP]
>
> JavaScriptはレンダリングの妨げになるので、[`require_js`](/docs/cms/reference/hubl/functions#require-js)がJavaScriptを配置する位置は既定でfooterになっています。[パフォーマンスの最適化に関する詳細をご覧ください。](/docs/cms/best-practices/testing-staging-performance/speed)
## 関連情報
* [CMS Hubで構築したウェブサイトのパフォーマンス最適化](/docs/cms/best-practices/testing-staging-performance/speed)
* [モジュール](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)
* [モジュールフィールド](https://developers.hubspot.jp/docs/guides/cms/content/fields/overview)
# ビルド健全性チェック
Source: https://developers.hubspot.jp/docs/cms/reference/react/build-health-checks
# @hubspot/cms-componentsライブラリー
Source: https://developers.hubspot.jp/docs/cms/reference/react/cms-components-library
# Islands
Source: https://developers.hubspot.jp/docs/cms/reference/react/islands
# JS Partials
Source: https://developers.hubspot.jp/docs/cms/reference/react/js-partials
# ローカル開発
Source: https://developers.hubspot.jp/docs/cms/reference/react/local-development
# CMS Reactのスタイル
Source: https://developers.hubspot.jp/docs/cms/reference/react/styling
# CMS Reactのテスト
Source: https://developers.hubspot.jp/docs/cms/reference/react/testing
# サーバーレス関数リファレンス(デザインマネージャー)
Source: https://developers.hubspot.jp/docs/cms/reference/serverless-functions/serverless-functions
デザインマネージャーで構築するサーバーレス関数のリファレンス情報(serverless.json、関数ファイル、エンドポイント、CLIコマンド、パッケージの管理など)
> **サポートされる製品**
> [!WARNING]
>
> ### 注:
>
> このページには、デザインマネージャーを使用して作成されたサーバーレス関数のリファレンス情報が含まれています。これはCMSページのサーバーレス関数を作成する従来の方法であり、現在もサポートされています。ただし、今後は[HubSpot開発者プロジェクトを使ったサーバーレス関数の作成とデプロイ](/docs/cms/start-building/features/serverless-functions/getting-started-with-serverless-functions)が推奨されます。プロジェクトベースのサーバーレス関数には、サードパーティーの依存関係を含めることができ、非公開のアプリアクセストークンを介した認証により直接アクセスできます。
この記事では、[サーバーレスの`.functions`フォルダー](/docs/cms/start-building/features/serverless-functions/overview#serverless-function-folders)内にあるファイルと、サーバーレス関数で使用できるCLIコマンドについて説明します。
サーバーレス関数の概要については、[サーバーレス関数の概要](/docs/cms/start-building/features/serverless-functions/overview)をご確認ください。
[JavaScriptのレンダリングされたモジュールとパーシャル](https://github.hubspot.com/cms-js-building-block-examples/)のプロジェクトを使用してサーバーレス関数を作成する方法の詳細については、[開発者プロジェクトのドキュメント](https://developers.hubspot.jp/docs/cms/reference/serverless-functions/serverless-functions-in-projects)をご参照ください。
## Serverless.json
`.functions`フォルダーの`serverless.json`ファイルには、サーバーレス関数構成が保存されます。これは必須ファイルであり、これによって関数が[APIエンドポイント](#endpoints)にマッピングされます。
```json theme={null}
{
"runtime": "nodejs20.x",
"version": "1.0",
"environment": {
"globalConfigKey": "some-value"
},
"secrets": ["secretName"],
"endpoints": {
"events": {
"file": "function1.js",
"method": "GET"
},
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"CONFIG_KEY": "some-other-value"
},
"secrets": ["googleKeyName", "otherkeyname"]
}
}
}
```
| キー | 型 | 説明 |
| - | - | - |
| `runtime` | 文字列 | ランタイム環境。[Node.js](https://nodejs.org/ja/about/) v20(`nodejs20.x`)をサポートします。 |
| `version` | 文字列 | HubSpotサーバーレス関数スキーマバージョン(現在のバージョンは1.0) |
| `environment` | オブジェクト | 関数の実行時に[環境変数](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env)として渡される構成用の変数。環境変数に基づいて、実際のAPIの代わりにテストバージョンを使用するロジックを追加する場合などに使用します。 |
| `secrets` | 配列 | サーバーレス関数が認証に使用する[シークレット](#secrets)の名前を含む配列。このファイルにはシークレット値を直接格納するのではなく、シークレット名の参照だけを格納してください。 |
| `endpoints` | オブジェクト | APIエンドポイントは、公開されるパスと、functionsフォルダー内の特定のJavaScriptファイルへのそれらのパスのマッピングを定義します。詳しくは[APIエンドポイント](#endpoints)をご参照ください。 |
> [!NOTE]
>
> HubSpotは2025年10月1日で[Node 18のサポートを終了](https://developers.hubspot.com/changelog/deprecation-of-node-v18-in-all-serverless-functions-and-cli)します。同日以降、ランタイムがv20未満のサーバーレス関数はデプロイできなくなります。\\
> [!WARNING]
>
> ### 注:
>
> シークレットと環境変数に同じ名前を割り当てないでください。同じ名前を割り当てると、関数で値が返されるときに競合が発生します。
### APIエンドポイント
各APIエンドポイントには独自の[環境変数](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env)とシークレットを設定できます。APIエンドポイント外で指定した変数は、全ての関数とAPIエンドポイントに適用する設定として使用されます。
```json theme={null}
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"configKey": "some-other-value"
},
"secrets": ["googleAPIKeyName","otherKeyName"]
}
```
| キー | 型 | 説明 |
| - | - | - |
| `method` | 文字列または文字列の配列 | このAPIエンドポイントでサポートされている[HTTPメソッド(複数可)](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Methods)。デフォルトでは[GET](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Methods/GET)です。 |
| `file` | 文字列 | APIエンドポイントの実装を含むJavaScript関数ファイルへのパス。 |
エンドポイントを呼び出すには、HubSpotアカウントに接続されたドメインのいずれか(デフォルトの`.hs-sites.com`サブドメインを含む)で以下のURL構造のURLを呼び出します。
`https://{domainName}/_hcms/api/{endpoint-name/path}?portalid={hubId}`
| パラメーター | 説明 |
| - | - |
| `domainName` | HubSpotアカウントに接続されているドメイン。 |
| `/_hcms/api/` | サーバーレス関数用に予約されたパス。全てのAPIエンドポイントは、このパスに存在しています。 |
| `endpoint-name/path` | `serverless.json`ファイルで指定したAPIエンドポイントの名前またはパス。 |
| `portalid` | HubSpotアカウントIDを含む任意のクエリーパラメーター。これをリクエストに含めることで、モジュールとテンプレートのプレビュー時に関数のテストを行えます。 |
例えば、`website.com`と`subdomain.brand.com`の両方がアカウントに接続されている場合、`https://website.com/_hcms/api/{endpoint-name/path}`または`https://subdomain.brand.com/_hcms/api/{endpoint-name/path}`を使用して関数を呼び出すことができます。
## 関数ファイル
`serverless.json`構成ファイルに加え、`.functions`フォルダーには関数を定義する[Node.js](https://nodejs.org/ja/) JavaScriptファイルが格納されます。[Request](https://github.com/request/request#readme)ライブラリーを利用して、[HubSpot API](https://developers.hubspot.jp/docs/api-reference/overview)や他のAPIへのHTTPリクエストを行うこともできます。
以下に例を示します。
```js theme={null}
// Require axios library, to make API requests.
const axios = require("axios");
// Environment variables from your serverless.json
// process.env.globalConfigKey
exports.main = (context, sendResponse) => {
// your code called when the function is executed
// context.params
// context.body
// context.accountId
// context.limits
// secrets created using the CLI are available in the environment variables.
// process.env.secretName
//sendResponse is what you will send back to services hitting your serverless function.
sendResponse({ body: { message: "my response" }, statusCode: 200 });
};
```
### コンテキストオブジェクト
コンテキストオブジェクトには、次のパラメーターに格納された、関数の実行に関するコンテキスト情報が含まれています。
| パラメーター | 説明 |
| - | - |
| `accountId` | 関数が含まれているHubSpotアカウントのID。 |
| `body` | `application/json`のコンテンツタイプを持つ`POST`リクエストが送信された場合に取り込まれます。 |
| `contact` | リクエストがCookieにひも付けられたコンタクトから送信された場合、contactオブジェクトには一連の基本的なコンタクトプロパティーに加え、以下の情報が格納されます。`vid`:コンタクトの訪問者ID。 `isLoggedIn`:CMSメンバーシップ(アクセス権設定)を使用している場合、コンタクトがドメインにログインすると、この値が`true`に設定されます。 `listMemberships`:当該コンタクトがメンバーとなっているコンタクトリストIDの配列。 |
| `headers` | APIエンドポイントに対してクライアントから送信された[ヘッダー](#headers)が含まれます。 |
| `params` | クエリー文字列値、およびHTMLフォームによるPOST値が取り込まれます。文字列によるキーと文字列の配列による値のマップとして構成されます。`context.params.yourvalue` |
| `limits` | [サーバーレス関数のレート制限](/docs/cms/start-building/features/serverless-functions/overview#know-your-limits)にどの程度近づいているかに関する情報を返します。`executionsRemaining`:1分当たりの残っている実行数。 `timeRemaining`:残っている実行可能時間。 |
### ヘッダー
APIエンドポイントにアクセスしているクライアントのヘッダーを把握する必要がある場合は、`context.body`を使用して情報にアクセスする場合と同じ方法で、`context.headers`を使用して該当するヘッダーにアクセスできます。
以下の表に、HubSpotが提供する一般的なヘッダーの一部を記載します。完全なリストについては、[MDNのHTTPヘッダーのドキュメント](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers)をご参照ください。
| ヘッダー | 説明 |
| - | - |
| `accept` | クライアント側で処理できるコンテンツタイプを[MIMEタイプ](https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/MIME_types)として示します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `accept-encoding` | クライアント側で処理できるコンテンツエンコーディングを示します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `accept-language` | 使用される言葉とロケールを示します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `cache-control` | キャッシュ用のディレクティブを保持します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `connection` | ネットワーク接続が開いたままかどうかを示します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `cookie` | クライアントから送信されたCookieが格納されます。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `host` | リスニングサーバーのドメイン名とTCPポート番号を示します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `true-client-ip` | エンドユーザーのIPアドレス。詳しくは[Cloudflare true-client-ip](https://developers.cloudflare.com/network/true-client-ip-header/)をご参照ください。 |
| `upgrade-insecure-requests` | レスポンスの暗号化と認証について、クライアント側の設定を示します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `user-agent` | アプリケーション、オペレーティングシステム、アプリケーションベンダー、バージョンを識別するためのベンダー定義文字列。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
| `x-forwarded-for` | プロキシーまたはロードバランサーを通過するクライアントの発信元IPアドレスを識別します。詳しくは[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Accept)をご参照ください。 |
#### ヘッダーの送信によるリダイレクト
「location」ヘッダーと`301` statusCodeを含むレスポンスを送信することで、サーバーレス関数からリダイレクトを実行できます。
```js theme={null}
sendResponse({
statusCode: 301,
headers: {
Location: "https://www.example.com",
},
});
```
### APIエンドポイントからCookieを設定する
サーバーレス関数によって、クライアント(ウェブブラウザー)にCookieを設定するように指示できます。
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
'Set-Cookie': 'myCookie1=12345; expires=...; Max-Age=...',
statusCode: 200
});
}
```
### 1つのヘッダーに複数の値を設定する
複数の値をサポートするヘッダーには、`multiValueHeaders`を使用して値を渡すことができます。例えば、ブラウザーに複数のCookieを設定するように指示できます。
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
multiValueHeaders: {
'Set-Cookie': [
'myCookie1=12345; expires=...; Max-Age=...',
'myCookie2=56789; expires=...; Max-Age=...'
]
},
statusCode: 200
});
}
```
## シークレット
サーバーレス関数リクエストを認証する必要がある場合は、シークレットを使用して、APIキーや非公開アプリのアクセストークンなどの値を保存します。CLIを使用して、それらの値を保存するシークレットをHubSpotアカウントに追加することができます。その後でこれらの値にアクセスするには、環境変数(`process.env.secretName`)を使用します。シークレットの管理には、HubSpot CLIで以下のコマンドを使用します。
* [`hs secrets list`](https://developers.hubspot.jp/docs/guides/cms/tools/hubspot-cli/cli-v7#list-secrets)
* [`hs secrets add`](https://developers.hubspot.jp/docs/guides/cms/tools/hubspot-cli/cli-v7#add-a-secret)
* [`hs secrets delete`](https://developers.hubspot.jp/docs/guides/cms/tools/hubspot-cli/cli-v7#remove-a-secret)
CLIを使用して追加されたシークレットは、そのシークレット名を含む`secrets`配列を追加することで、関数で使用できるようになります。これにより、関数コードを[バージョン管理](/docs/cms/start-building/introduction/developer-environment/github-integration)に保存し、シークレットを公開せずに使用できるようになります。ただし、コンソールログを使用して、またはレスポンスとして、シークレットの値を返してはいけません。そうした場合、ログや、サーバーレス関数を呼び出すフロントエンドページでシークレットが公開されてしまいます。
> [!WARNING]
>
> ### 注:
>
> キャッシュ保存のため、更新されたシークレット値が表示されるまでに1分ほどかかる場合があります。シークレットを更新したばかりで、まだ古い値が表示されている場合は、1分ほどしてからもう一度ご確認ください。
## フォーム要素からサーバーレス関数を使用する
サーバーレス関数の送信時には、JavaScriptを使ってフォーム送信を処理し、リクエストに`"contentType" : "application/json"`ヘッダーを使用します。`