> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt > Use this file to discover all available pages before exploring further. # モジュールの設定 > カスタムモジュールを設定する方法についてご確認ください。 モジュールを作成する際には、モジュールの表示場所、識別方法、編集方法などを決定するオプションが多数あります。 [ローカルで開発する](/developer-tooling/local-development/hubspot-cli/install-the-cli)場合、モジュールは`.module`サフィックスが付いたフォルダーとして保存されます。これらのフォルダー内には、モジュールの設定用ファイルと、モジュールのレンダリングに使用されるコードが含まれています。モジュールの設定は[meta.json](#meta-json)ファイルに保存されますが、フィールドは別途[fields.json](/cms/start-building/building-blocks/modules/overview#fields-json)ファイルに設定されます。 設定の大半は、[デザインマネージャー](/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` | 配列 | モジュールを使用できる[コンテンツタイプ](/cms/start-building/building-blocks/drag-and-drop/tutorial)の`array`。次の1つ以上を指定できます。モジュールが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":"footer"}` | | | `inline_help_text` | 文字列 | モジュール上部の青い情報ボックスに表示されるヘルプテキスト（400文字まで）。モジュールを使用するのに必要な情報が示されます。フィールド固有のヘルプテキスト情報を伝達したい場合は、[ヘルプテキストフィールドのドキュメント](/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` | オブジェクト | モジュールの[プレースホルダーコンテンツ](/cms/reference/hubl/tags/standard-tags#editor-placeholders)を設定します。次のプロパティーが含まれます。 | | | | `categories` | 配列 | 最大3つの[モジュールカテゴリー](#add-categories)を含む配列。例： | `"categories":["FORMS_AND_BUTTONS"]` | | | `content_tags` | 配列 | タグ名と`"USER"`の`source`を含む[モジュールタグオブジェクト](#adding-categories-and-tags)の配列。例：`"content_tags": [{` `"name" : "BUTTONS",` `"source" : "USER"``}]` | | | 個々のモジュール設定オプションの詳細については、以下をご覧ください。 ## アイコンの追加 モジュールには、[デザインマネージャー](/cms/start-building/introduction/developer-environment/design-manager)に表示されるアイコンと、コンテンツクリエイターのために視覚的なコンテキストを提供するページおよびEメールエディターを含めることができます。テーマ内の異なるタイプのモジュールに対して異なるアイコンを使用することをお勧めします。アイコンは、[マーケットプレイスプロバイダーの場合は必須](/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. アイコンをアップロード/選択します。変更を公開すると、ページエディターとデザインマネージャー内にアイコンが表示されます。 edit-module-icon-crop ローカルで開発する際にアイコンを追加するには、モジュールの`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`パラメーターを変更してラベルを設定します。デザインマネージャーでは、モジュールエディターのモジュール名の下にフィールドがあります。 edit-module-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`プロパティーにより、モジュールを使用できるコンテンツのタイプを制御できます。[利用可能なテンプレートタイプ](/cms/start-building/building-blocks/templates/overview#template-types)について詳細をご確認ください。モジュールでは、ページに直接追加できないように、`is_available_for_new_content`を`false`に設定して非表示にすることもできます。これは、ナビゲーションメニュー用および検索用に作成されたモジュールなどで役立ちます。 デザインマネージャーでこの更新を行うには、右側のサイドバーにある\*\*［テンプレートタイプ］\*\*オプションをクリックします。 edit-module-template-type ## 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" } ] } ``` **警告**: 相対パスを使用して依存関係を参照している場合に、`hs fetch --overwrite`を実行してローカル開発用モジュールを更新すると、相対パスが絶対パスによって上書きされます。 デザインマネージャーでは、モジュールエディターの右側のサイドバーにある\_\_［リンク済みファイル］セクションを使用して、CSSファイルとJavaScriptファイルをモジュールにリンクできます。 edit-module-linked-files ## カテゴリーとタグを追加する モジュールにカテゴリーとタグを割り当てて、HubSpotツール内でモジュールを分類することができます。 * [カテゴリー](#categories)：モジュールにカテゴリーを割り当てると、コンテンツエディターUI内でモジュールをグループに分類できます。これにより、コンテンツクリエイターはHubSpotでコンテンツを作成する際に、より簡単にモジュールを見つけることができます。カテゴリーについては、次の点に注意してください。 * 1つのモジュールには最大3つのカテゴリーを割り当てることができます。カテゴリーは事前定義されており、カスタマイズすることはできません。 * 現在、カテゴリーはコンテンツエディターUIには表示されません。ただし、エディターで分類が利用可能な場合は、カテゴリーを割り当てることができます。 * 未分類のモジュールは\_\_「全ての」カテゴリーで使用できます。 * [タグ](#tags)：タグを割り当てると、デザインマネージャー内でモジュールを分類できます。これにより、テンプレートを作成する際に、より簡単にモジュールを見つけることができます。 デザインマネージャーでは、モジュールエディターの右側のサイドバーにある\_\_［タグをフィルター］セクションを使用して、カテゴリーとタグを割り当てることができます。利用可能なカテゴリーとタグの詳細については、以下をご覧ください。 edit-module-filter-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`