最終更新日: 2025年8月28日
高いレベルでは、meta.jsonファイル内でモジュールオプションをローカルで設定します。これには次のプロパティーを含めることができます。
ParameterTypeDescriptionDefault
icon文字列モジュールのアイコンとして使用する画像のURL。
label文字列コンテンツエディターに表示されるモジュールのラベル
module_id数値パスから独立した、モジュールの固有ID。
is_available_for_new_contentブール値HubSpotのモジュールエディターの右上隅にあるトグルの値。モジュールがコンテンツで使用可能かどうかを指定します。true
globalブール値モジュールがグローバルかどうかを示します。false
host_template_types配列モジュールを使用できるコンテンツタイプのarray。["PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL"]のうち1つまたは複数です。
css_assets配列モジュールが依存するCSSファイルを含むarray。相対パスを使用できます。例："css_assets": [{ "path": "../path/to/file.css" }][]
css_render_optionsオブジェクトasyncをtrueまたはfalseにして、モジュールCSSによる非同期レンダリングを行うかどうかを設定します。{"async": false}
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文字列モジュール上部の青い情報ボックスに表示されるヘルプテキスト（300文字まで）。モジュールの使用に必要な情報を指定します。フィールド固有のヘルプテキスト情報を伝達したい場合は、ヘルプ テキスト フィールドのドキュメントを参照してください。null
master_language文字列翻訳が有効になっている場合、モジュールのフィールドの最初の作成時に使用された言語の言語コード。例：en
placeholderオブジェクトモジュールのプレースホルダーコンテンツを設定します。次のプロパティーが含まれます。
  • show_module_icon：モジュールアイコンを表示するかどうか。true、false。
  • title：エディターでモジュールに表示するタイトル（文字列）
  • description：エディターでモジュールに表示する説明（文字列）
categories配列最大3つのモジュールカテゴリーを含む配列。例として、以下のような場合が挙げられます。 "categories":["FORMS_AND_BUTTONS"]
content_tags配列タグ名と"USER"のsourceを含むモジュール タグ オブジェクトの配列。例として、以下のような場合が挙げられます。 "content_tags": [{ "name" : "BUTTONS", "source" : "USER"``}]
個々のモジュール設定オプションの詳細については、以下をご覧ください。

​
アイコンの追加

モジュールには、デザインマネージャーに表示されるアイコンと、コンテンツクリエイターのために視覚的なコンテキストを提供するページおよびEメールエディターを含めることができます。テーマ内の異なるタイプのモジュールに対して異なるアイコンを使用することをお勧めします。アイコンは、マーケットプレイスプロバイダーの場合は必須です。 アイコンの追加方法は2種類あり、デザインマネージャーまたはCMS CLIを使用できます。 モジュールアイコンには、サイズが10KB以下の.svgファイルを使用する必要があります。アイコンを最適化するには、シンプルな単色のアイコンにしてください。複数の色を使用するアイコンは自動的に変換されます。レンチとペイントブラシのアイコンが、既定のモジュールアイコンとして表示されます。 デザインマネージャーを使用してアイコンを追加するには、次の手順に従います。 ローカルで開発する際にアイコンを追加するには、モジュールのmeta.jsonファイルを開き、iconパラメーターの値を追加または編集して、ファイルマネージャーからのSVGを指定します。 
// meta.json
{
  "global": false,
  "host_template_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."
}

​
ラベルを変更する

​
モジュールをグローバルにする

通常のモジュールの場合、ページ、Eメール、テンプレートの各モジュールインスタンスのコンテンツは独立しています。使い方によっては、モジュールの全てのインスタンスのコンテンツを同じにすると便利な場合があります。ローカルで開発する際は、globalをtrueに設定すると、モジュールをグローバルにすることができます。 デザインマネージャーを使用して、ドラッグ＆ドロップテンプレートのモジュールをグローバルに変換することもできます。

​
モジュールの使用箇所を制御する

ローカルで開発する際は、hostTemplateTypesプロパティーにより、モジュールを使用できるコンテンツのタイプを制御できます。利用可能なテンプレートタイプについて詳細をご確認ください。モジュールでは、ページに直接追加できないように、is_available_for_new_contentをfalseに設定して非表示にすることもできます。これは、ナビゲーションメニュー用および検索用に作成されたモジュールなどで役立ちます。 デザインマネージャーでこの更新を行うには、右側のサイドバーにある［テンプレートタイプ］オプションをクリックします。
edit-module-template-type

​
CSSとJavaScriptの依存関係を追加する

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

​
カテゴリーとタグを追加する

モジュールにカテゴリーとタグを割り当てて、HubSpotツール内でモジュールを分類することができます。
  • カテゴリー：モジュールにカテゴリーを割り当てると、コンテンツエディターUI内でモジュールをグループに分類できます。これにより、コンテンツクリエイターはHubSpotでコンテンツを作成する際に、より簡単にモジュールを見つけることができます。カテゴリーについては、次の点に注意してください。
    • 1つのモジュールには最大3つのカテゴリーを割り当てることができます。カテゴリーは事前定義されており、カスタマイズすることはできません。
    • 現在、カテゴリーはコンテンツエディターUIには表示されません。ただし、エディターで分類が利用可能な場合は、カテゴリーを割り当てることができます。
    • 未分類のモジュールは「全ての」カテゴリーで使用できます。
  • タグ：タグを割り当てると、デザインマネージャー内でモジュールを分類できます。これにより、テンプレートを作成する際に、より簡単にモジュールを見つけることができます。
デザインマネージャーでは、モジュールエディターの右側のサイドバーにある［タグをフィルター］セクションを使用して、カテゴリーとタグを割り当てることができます。利用可能なカテゴリーとタグの詳細については、以下をご覧ください。
edit-module-filter-tags
ローカルでは、次のようにモジュールのmeta.jsonファイルにカテゴリーとタグを追加できます。 
// meta.json
{
  "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