モジュールを設定する

Last updated:

モジュールを作成する際には、モジュールの表示場所、識別される方法、編集方法などを決定するオプションが多数あります。ローカルでは、モジュールは、.moduleが末尾に付いたフォルダーとして表示されます。このフォルダー内には、モジュールの設定用ファイルと、レンダリングに使用されるコードが含まれています。設定はmeta.jsonファイルに格納されます。フィールドは別途、fields.jsonファイルによって設定します。設定の大半は、デザインマネージャーのモジュールエディターからも変更できます。 

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

アイコンの追加

モジュールには、デザインマネージャー、ページエディター、Eメールエディターで使用されるアイコンを設定できます。マーケットプレイスでアセットを提供する場合は、これらのアイコンが必須になります。アイコンには、コンテンツ作成者にモジュールの用途を視覚的に示す目的があります。したがって、テーマに含めるモジュールのタイプごとに異なるアイコンを使用することが最適です。アイコンの追加方法は2種類あり、デザインマネージャーまたはCMS CLIを使用できます。

Add an icon using the design manager

  1. デザインマネージャーでモジュールを開きます。
  2. モジュールエディターのタイトルとモジュールタイプの横にボタンのアイコンが表示されます。このボタンを選択すると、アイコン アップロード フィールドが表示されます。
  3. アイコンをアップロードまたは選択すると、ページエディターとデザインマネージャーに表示されるようになります。
Change Icon

CLIを使用してアイコンを追加する

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

モジュールアイコンの作成

モジュールアイコンには、サイズが10KB以下の.svgファイルを使用します。アイコンを最適化するには、シンプルかつ単色にしてください。複数の色を使用したアイコンは、自動的に変換されます。レンチとペイントブラシのアイコンが、既定のモジュールアイコンとして表示されます。

ラベルを変更する

エディター内に表示されるモジュールのラベルは、モジュールの名前とは別に調整できます。自分に分かりやすい名前を付け、コンテンツ作成者には異なる名前を表示できるので、ローカル環境で開発を行う際に便利です。ローカル環境ではlabelパラメーターを変更してラベルを設定します。デザインマネージャーでは、モジュールエディターのモジュール名の下にフィールドがあります。

モジュールエディター、ラベルフィールド

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

通常のモジュールの場合、ページ、Eメール、テンプレートの各モジュールインスタンスのコンテンツは独立しています。使い方によっては、モジュールの全てのインスタンスのコンテンツを同じにすると便利な場合があります。これはglobalをtrueに設定することで実現できます。 

ドラッグ＆ドロップテンプレートのモジュールをユーザーインターフェイス側でグローバルに変換することも可能です。

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

モジュールの使用は、hostTemplateTypesを設定することで特定のコンテンツタイプに限定できます。モジュールでは、ページに直接追加できないように、is_available_for_new_contentをfalseに設定して非表示にすることもできます。is_available_for_new_contentを使用して非表示にする例としては、ナビゲーションメニュー用および検索用に作成したモジュールが挙げられます。

また、これらの両方をモジュールエディターで管理することもできます。

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を実行してローカル開発用モジュールを更新すると、相対パスが絶対パスによって上書きされます。

meta.json

モジュールのmeta.jsonファイルには、以下の表に記載のパラメーターを追加できます。

ParameterTypeDescription Default
icon
String

モジュールのアイコンとして使用する画像のURL。

 null
label
String

コンテンツエディターに表示されるモジュールのラベル
module_id
Number

パスから独立した、モジュールの固有ID。
is_available_for_new_content
Boolean

HubSpotのモジュールエディターの右上隅にあるトグルの値。モジュールがコンテンツで使用可能かどうかを指定します。

 true
global
Boolean

モジュールがグローバルかどうかを示します。

 false
host_template_types
Array

モジュールを使用できるコンテンツタイプを含むarray。[ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ]のうち1つまたは複数。

 ["PAGE", "BLOG_POST", "BLOG_LISTING"]
css_assets
Array

モジュールが依存するCSSファイルを含むarray。相対パスを使用できます。

例："css_assets": [{ "path": "../path/to/file.css" }]

 []
css_render_options
Object

asyncをtrueまたはfalseにして、モジュールCSSによる非同期レンダリングを行うかどうかを設定します。 

 {"async": false}
js_assets
Array

モジュールが依存するJavaScriptファイル含むarray。相対パスを使用できます。

例："js_assets": [{ "path": "../path/to/file.js" }]

 []
js_render_options
Object

レンダリングされたページに追加するモジュールのJavaScriptタグを変更します。次のオプションがあります。

  • position：head、footer
  • async：true、false 
  • defer：true、false 
  • type：string

 

 {"position":"footer"}
inline_help_text
String

モジュール上部の青い情報ボックスに表示されるヘルプテキスト（300文字まで）。

モジュールの使用に必要な情報の提供に最適です。フィールドに固有のヘルプテキスト情報を示す場合は、フィールドのヘルプテキストに関するドキュメントを参照してください。

 null
master_language
String

モジュールのフィールドが記述された当初に使用された言語の言語コード。

例：en
placeholder
Object

モジュールのプレースホルダーコンテンツを設定します。次のプロパティーが含まれます。

  • show_module_icon：モジュールアイコンを表示するかどうか。true、false。
  • title：エディターでモジュールに表示するタイトル（文字列）
  • description：エディターでモジュールに表示する説明（文字列）
 False
参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。