モジュールを設定する

Last updated:

モジュールを作成する際には、モジュールの表示場所、識別される方法、編集方法などを決定するオプションが多数あります。

ローカルで開発する場合、モジュールは.moduleサフィックスが付いたフォルダーとして保存されます。これらのフォルダー内には、モジュールの設定用ファイルと、モジュールのレンダリングに使用されるコードが含まれています。モジュールの設定はmeta.jsonファイルに保存されますが、フィールドはfields.jsonファイルで個別に設定されます。

設定の大半は、デザインマネージャーのモジュールエディターからも変更できます。 

ローカルに表示されるモジュールフォルダー構造

高いレベルでは、meta.jsonファイル内でモジュールオプションをローカルで設定します。これには次のプロパティーを含めることができます。

ParameterTypeDescription Default
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ファイルを使用する必要があります。アイコンを最適化するには、シンプルな単色のアイコンにしてください。複数の色を使用するアイコンは自動的に変換されます。レンチとペイントブラシのアイコンが、既定のモジュールアイコンとして表示されます。

デザインマネージャーを使用してアイコンを追加するには、次の手順に従います。

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. 

  2. Use the left sidebar to locate the module you want to edit, then click the module name.
  3. In the right sidebar of the module editor, click the icon next to the module title. 
  4. Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
edit-module-icon-crop

ローカルで開発する際にアイコンを追加するには、モジュールの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." }

ラベルを変更する

エディター内に表示されるモジュールのラベルは、モジュールの名前とは別に調整できます。自分に分かりやすい名前を付け、コンテンツ作成者には異なる名前を表示できるので、ローカル環境で開発を行う際に便利です。

ローカル環境ではlabelパラメーターを変更してラベルを設定します。デザインマネージャーでは、モジュールエディターのモジュール名の下にフィールドがあります。

edit-module-label

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

通常のモジュールの場合、ページ、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
参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。