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

モジュールには、デザインマネージャー、ページエディター、Eメールエディターで使用されるアイコンを設定できます。マーケットプレイスでアセットを提供する場合は、これらのアイコンが必須になります。アイコンには、コンテンツ作成者にモジュールの用途を視覚的に示す目的があります。したがって、テーマに含めるモジュールのタイプごとに異なるアイコンを使用することが最適です。アイコンの追加方法は2種類あり、デザインマネージャーまたはCMS CLIを使用できます。
ローカル開発の際にアイコンを追加するには、モジュールのmeta.json
ファイルを開き、icon
パラメーターの値を追加または編集して、ファイルマネージャーからのSVGを指定します。
エディター内に表示されるモジュールのラベルは、モジュールの名前とは別に調整できます。自分に分かりやすい名前を付け、コンテンツ作成者には異なる名前を表示できるので、ローカル環境で開発を行う際に便利です。ローカル環境ではlabel
パラメーターを変更してラベルを設定します。デザインマネージャーでは、モジュールエディターのモジュール名の下にフィールドがあります。

通常のモジュールの場合、ページ、Eメール、テンプレートの各モジュールインスタンスのコンテンツは独立しています。使い方によっては、モジュールの全てのインスタンスのコンテンツを同じにすると便利な場合があります。これはglobal
をtrue
に設定することで実現できます。
ドラッグ&ドロップテンプレートのモジュールをユーザーインターフェイス側でグローバルに変換することも可能です。
モジュールの使用は、hostTemplateTypes
を設定することで特定のコンテンツタイプに限定できます。モジュールでは、ページに直接追加できないように、is_available_for_new_content
をfalse
に設定して非表示にすることもできます。is_available_for_new_content
を使用して非表示にする例としては、ナビゲーションメニュー用および検索用に作成したモジュールが挙げられます。
また、これらの両方をモジュールエディターで管理することもできます。
モジュールインスタンスを含む全てのページにCSSとJavaScriptを追加する際にmodule.css
およびmodule.js
を使用することに加えて、モジュール間で共有される依存関係はcss_assets
およびjs_assets
で付加することができます。パスにはmeta.json
ファイルに対する絶対パスまたは相対パスを使用することが可能です。
警告:相対パスを使用して依存関係を参照している場合に、hs fetch --overwrite
を実行してローカル開発用モジュールを更新すると、相対パスが絶対パスによって上書きされます。
モジュールのmeta.json
ファイルには、以下の表に記載のパラメーターを追加できます。
Parameter | Type | Description | 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 | モジュールを使用できるコンテンツタイプを含む |
["PAGE", "BLOG_POST", "BLOG_LISTING"]
|
css_assets
| Array | モジュールが依存するCSSファイルを含む 例: |
[]
|
css_render_options
| Object |
|
{"async": false}
|
js_assets
| Array | モジュールが依存するJavaScriptファイル含む 例: |
[]
|
js_render_options
| Object | レンダリングされたページに追加するモジュールのJavaScriptタグを変更します。次のオプションがあります。
|
{"position":"footer"}
|
inline_help_text
| String | モジュール上部の青い情報ボックスに表示されるヘルプテキスト(300文字まで)。 モジュールの使用に必要な情報の提供に最適です。フィールドに固有のヘルプテキスト情報を示す場合は、フィールドのヘルプテキストに関するドキュメントを参照してください。 |
null
|
master_language
| String | モジュールのフィールドが記述された当初に使用された言語の言語コード。 例: | |
placeholder
| Object | モジュールのプレースホルダーコンテンツを設定します。次のプロパティーが含まれます。
|
False
|
貴重なご意見をありがとうございました。