> ## 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.

# テンプレートマーケットプレイス | モジュール要件

> HubSpotテンプレートマーケットプレイスへの提出時にテーマのモジュールが満たす必要のある要件について説明します。

'HubSpotテンプレートマーケットプレイスへの提出時にテーマのモジュールが満たす必要のある要件について説明します。';

テンプレートマーケットプレイスにモジュールを提出するための要件について説明します。これらの要件は、テーマ内のモジュールおよび独立したモジュールの両方に当てはまります。

## モジュールの制限事項

モジュールには、[HubDB](https://developers.hubspot.com/docs)、[サーバーレス関数](https://developers.hubspot.com/docs)の呼び出し、[CRMオブジェクトフィールド](/cms/reference/fields/module-theme-fields#crm-object)を含めることはできません。

独立したモジュールとして、次のモジュールタイプを構築しないでください。

* HTML
* 全幅モジュール
* フォームとマルチステップフォーム
* スペーサーモジュール、または非UIページ構造を作成するモジュール
* 既定のモジュール機能と重複するモジュール
* コマース固有のモジュール
* Eメール固有のモジュール

## モジュールのコンテンツ

モジュールラベルとヘルプテキスト、フィールド、既定のコンテンツの要件については、以下で詳しく説明します。

### モジュールラベルとヘルプテキスト

* モジュールには、モジュールの目的を明確に示す記述的なラベルを付ける必要があります。例えば、*視差スクロールを備えたヒーローバナー*というラベルは分かりやすく記述されていますが、*ヒーローバナー*および*ギャラリー*というラベルは説明が不十分です。
* モジュールラベルには、「ヒーローバナー01」のように数字を含めることはできません。\_ \_
* モジュールラベルにアンダースコアを含めることはできません。
* モジュールラベルには、*カラム（Column）*を表す*Col*のような略語を含めることはできません。
* モジュールの使用方法をさらに詳しく伝えるために、モジュールには（該当する場合）[インラインのヘルプテキスト](/cms/reference/modules/configuration#meta-json)を含める必要があります。
* モジュールに[既定のモジュール](/cms/reference/modules/default-modules)と同じ名前を付けることはできません。
* 独立モジュールの場合、モジュールラベルはテンプレート掲載情報での名前と一致する必要があります。例えば、テンプレート掲載情報で「スクロール可能なSuperAwesomeバナー」となっている場合は、モジュールのラベルもこれと同じにする必要があります。\_ \_

<DndSection>
  ![listing-name](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/listing-name.png)

  ![module-label](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/module-label.png)
</DndSection>

### 既定のコンテンツ

* 既定のフィールドに「Lorem ipsum」テキストを含めることはできません。\_ \_
* 既定のフィールドコンテンツはフィールドの目的を表す必要があります。
  * メニューフィールドを含める場合、モジュールでは既定のコンテンツオプションとして「メニューを選択」を使用する必要があります。\_ \_
  * フォームフィールドを含める場合、モジュールでは既定のコンテンツオプションとして「フォームを選択」を使用する必要があります。\_ \_
  * ブログ セレクター フィールドを含める場合、モジュールでは既定のコンテンツオプションとして「ブログを選択」を使用する必要があります。\_ \_
* モジュールに既定のコンテンツを追加する必要がない場合は、代わりに[モジュールプレースホルダー](/cms/reference/hubl/tags/standard-tags#editor-placeholders)を使用して、コンテンツクリエイターがコンテンツを配置するスペースを視覚的に把握できるようにしてください。

### モジュールアイコン

モジュールには、モジュールに割り当てられたカスタムアイコン（既定のアイコンの代わりとなるもの）を含める必要があります。会社のロゴ（AppleやAmazonのロゴなど）をアイコンとして使用しないでください。テーマに含まれるモジュールの場合、各モジュールには固有で関連性のあるアイコンが必要です。

詳しくは[モジュールアイコンの追加方法](/cms/reference/modules/configuration#adding-an-icon)をご確認ください。

### サードパーティーのアカウントが必要なモジュール

個々のモジュールの場合、モジュールにサードパーティーのアカウントが必要な場合は、テンプレートの説明にその旨を記載する必要があります。例えば、モジュールでGoogle Maps Platformを使用している場合、「このモジュールを使用するにはGoogle Cloud（Google Maps Platform）のアカウントが必要です」という注意書きをテンプレートの説明に含める必要があります。\_ \_

## モジュールフィールド

テーマ内のモジュールおよび独立したモジュールに関する以下の特定の要件をご確認ください。

* テーマ内のモジュール：
  * 特定のフィールドに関するインライン ヘルプ テキストと具体的な既定のコンテンツが含まれている必要があります。
  * 少なくとも[1つのロゴフィールド](/cms/reference/fields/module-theme-fields#logo)は、アカウントの[ブランド設定](/cms/start-building/building-blocks/fields/brand-and-settings-inheritance)を継承する必要があります。画像フィールドを使用してロゴをレンダリングする場合、画像フィールドはブランド設定を継承する必要はありません。
* テーマ内のモジュールと独立モジュールの両方：
  * モジュールフィールド名は、フィールドの目的を説明するものでなければなりません。例えば、役職・職種の入力用にテキストフィールドが作成されている場合、「役職・職種」は説明として適切ですが、「名称」は不適切です。
  * 提出される全てのテンプレートで、HubSpotの全ての既定のモジュールが適切にスタイル設定され表示される必要があります。

### fields.jsonおよびmodule.htmlの設定

テーマと独立モジュールの間の機能互換性を確保するには、モジュールが色フィールドとフォントフィールドを[継承する](/cms/reference/fields/overview#inherited-fields)必要があります。そのためには、`fields.json`ファイル内で`default_value_path`、`property_value_paths`のどちらかまたは両方を定義します。また、`module.html`ファイル内でテーマフィールドへの参照を追加します。[これらの要件について詳しくご確認ください](https://developers.hubspot.com/docs#module-compatibility-with-themes)。

## モジュールのコード品質

### モジュールは自己完結型でなければならない

#### テーマモジュール

テーマモジュールに必要な全てのファイル（CSSやJavaScriptなど）がテーマフォルダーに格納されてテーマディレクトリーに入っている必要があります。デザインマネージャーで、リンク済みファイル機能を使用できます。あるいは、相対ファイルパスを指定した[require\_js()](/cms/reference/hubl/functions#require-js)または[require\_css()](/cms/reference/hubl/functions#require-css)関数を使用してファイルをインクルードします。

Slick.jsなどの一般的なライブラリーの場合、`require_js()`または`require_css()`関数で、ホスティング場所となっているCDNへの絶対URLを使ってこれらを含めることができます。

<Alert type="warning" titleText="注：">
  注：クロスポータル参照は解決されないので、開発ポータルに含まれるアセットへの絶対URLを使用しないでください。
</Alert>

#### 独立モジュール

独立したモジュールの場合、全てのCSSおよびJavascriptファイルが`module.css`または`module.js`に含まれている必要があります。あるいは、`require_js()`または`require_css()`関数で、ホスティング場所となっているCDNへの絶対URLを使ってファイルを含めます。リンク済みファイル機能をデザインマネージャーで使用することはできません（テーマモジュールでのみ使用可能です）。

`module.js`Module.jsはDOM内で`require_js`または`require_css`ファイルの前に含まれるので、以下のアノテーションを使用して、`module.js`セクションに含まれるJavascriptを遅延させる必要があります。

```js theme={null}
document.addEventListener("DOMContentLoaded", function () {
  // Put Javascript here
});
```

全てのスクリプトとファイルは、モジュールの[HTML](/cms/reference/hubl/functions#require-js)の先頭でレンダリングされる必要があります。

### 独立モジュールのコード制限

以下の制限は、独立したモジュールにのみ当てはまります。

* 可能であれば[簡素なJS](http://vanilla-js.com/)を使用することをお勧めします。jQueryを使用しないサイトにjQueryライブラリーを追加すると、競合が発生してウェブサイトページの速度が低下する可能性があります。
* jQueryライブラリーを使用する場合は、[require\_js()](/cms/reference/hubl/functions#require-js)関数を使用してライブラリーをインクルードします。これにより、複数のjQueryライブラリーによる競合を避けるためにアカウント設定のチェックボックス（ブール値）でjQueryが無効にされている場合でも、ライブラリーがインクルードされます。

```js theme={null}
{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}
```

### カテゴリー

* 全ての独立モジュールには、少なくとも1つのカテゴリーが必要です。テーマの一部分として提出されるモジュールではカテゴリーが必須ではありませんが、ベストプラクティスとして少なくとも1つを含めることをお勧めします。[モジュールにカテゴリーを追加する](/cms/reference/modules/configuration)方法についてご確認ください。

### クラス名セレクター

* クラス名セレクターの前にモジュール名の接頭辞を付ける必要があり、その際にはスペースをハイフンに置き換えます。例えば、以下に示すのは`example-button`というボタン用の`module.html`ファイルで、それぞれのクラス名とCSSセレクターがその名前を反映しています。

```hubl theme={null}
<style>
{% scope_css %}
{# Button wrapper #}
 {% if module.styles.group_alignment.alignment %}
  .example-button-wrapper {
   text-align: {{ module.styles.group_alignment.alignment.horizontal_align }};
   }
 {% endif %}

{# Button #}

.example-button {
 {% if module.styles.group_background.color.color %}
  background-color: rgba({{ module.styles.group_background.color.color|convert_rgb }}, {{ module.styles.group_background.color.opacity / 100 }});
 {% endif %}
 }
 {% end_scope_css %}
</style>
{% end_require_css %}

{##### Module HTML #####}

<div class="example-button-wrapper">
 <a href="{{ href }}" class="example-button"
 {% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
 >
  {{ module.button_text }}
 </a>
</div>
```

### スタイルとJavascript

* スタイル：
  * モジュールには空でないスタイルグループが含まれる必要があります。
  * モジュール内でインラインスタイルをハードコーディングすることは推奨されません。代わりに、フィールドでスタイルを制御できるようにして、動的インラインスタイルを使用してください。
* JavaScript：
  * JavaScriptは、モジュールの複数インスタンスを表すことができる必要があります。JSペインのJavaScriptは、モジュールの使用回数にかかわらず、1ページにつき1度だけ読み込まれます。
  * JavaScriptではモジュール固有のクラス名でDOM要素を参照して、モジュール外部の要素に意図しない影響が及ばないようにする必要があります。

モジュールを作成する際には、`{{name}}`という組み込み変数を使用できます。この変数は、複雑なモジュールのCSSとJSマークアップで役立つ、モジュールのインスタンスID（HTML+HubLパネルでのみ使用可能）を取得します。詳しくは[開発者ドキュメント](/cms/reference/modules/files#require-css-block)をご覧ください。

## フィールドの構成

以下のフィールドの構成とグループ化の要件を満たす必要があります。

### コンテンツタブ

* フィールドグループ内に少なくとも1つの制御設定がある場合は、全ての制御設定を、その機能によってラベル付けされたカテゴリーにグループ化する必要があります。
* ［コンテンツ］タブに追加されるモジュールフィールドで、モジュールのコンテンツをカスタマイズできるようにする必要があります。\_ \_例えば、画像、アイコン、代替（Alt）テキストのコントロールや、リンク制御設定などです。

### スタイルタブ

モジュールのスタイル フィールド グループは一貫性を持ち、パターンに従う必要があります。以下は、スタイル フィールド グループの推奨される順序です。これらのグループは、トップレベルに配置することも、[1つのグループにネスト](#multi-level-grouping)することもできます。また、空のグループは削除できます。

* [プリセット](#presets)
* テキスト
* 背景
* 境界線
* Hover
* 角
* 間隔
* 位置合わせ
* 上記以外のカスタムスタイルグループ
* 詳細

次のフィールドタイプが存在する場合は、［スタイル］タブに含める必要があります。\_ \_

* [位置合わせ](/cms/reference/fields/module-theme-fields#alignment)
* [背景画像](/cms/reference/fields/module-theme-fields#background-image)
* [境界線](/cms/reference/fields/module-theme-fields#border)
* [カラー](/cms/reference/fields/module-theme-fields#color)
* [フォント](/cms/reference/fields/module-theme-fields#font)
* [グラデーション](/cms/reference/fields/module-theme-fields#gradient)
* [間隔](/cms/reference/fields/module-theme-fields#spacing)
* [テキストの位置合わせ](/cms/reference/fields/module-theme-fields#text-alignment)

<Alert type="info">
  ［コンテンツ］タブから［スタイル］タブにフィールドを移動する場合は、[エイリアスマッピングを使用](/cms/start-building/building-blocks/fields/alias-mapping)して、公開中ページですでに使用されているモジュールのスタイルを維持する方法を確認してください。
</Alert>

* アニメーションオプションは、常にフィールドグループリストの末尾近くに置く必要があります。

* コンテンツクリエイターがコードスニペットまたはCSSを追加できるようにするオプションは、フィールドグループリストの末尾にある「詳細」というラベルのフィールドにグループ化する必要があります。\_ \_

* コントロールは、全てのモジュールで標準化する必要があります。例えば、境界線の半径のコントロールを持つことができる全ての要素は、そのコントロールを提供する必要があります。一部のモジュールで、他のモジュールに存在しないコントロールを提供することは避けてください。

* ［スタイル］タブに追加されたモジュールフィールドは、モジュールのスタイルを設定する方法を提供する必要があります。\_ \_以下に例を示します。
  * 色、テキストスタイル、位置合わせ、間隔、境界線、角の半径などのスタイルオプション。
  * ホバー効果やスライドイン効果などのアニメーション。
  * さまざまなスタイルを同時に変更することを目的とする、ダークテーマとライトテーマなどのプリセット。

### フィールドの構成の例

#### プリセット

プリセットは、限られたオプションのセットをコンテンツクリエイターに提供したい場合に使用でき、通常テーマ設定に紐付けられています。例えば、Growthテーマに含まれている「Icon（アイコン）」モジュールには「ダーク」カラーと「ライト」カラーのプリセットが含まれており、ウェブサイト全体で使用すると一貫性を提供できます。

#### 複数レベルのグループ化

スタイルフィールドをトップレベルに配置するかネストするかを決定する際には、次の例を考慮してください。

<DndSection>
  <DndModule numCols={6}>
    <div>
      Growthテーマに含まれている「Icon（アイコン）」モジュールは、単一のコンポーネントであるため、全てのスタイルオプションがトップレベルに配置されます。したがって、全てのスタイルオプションがこの1つのコンポーネントに影響します。\_ \_
    </div>
  </DndModule>

  <DndModule numCols={6}>
    ![growth-theme-icon-module](https://www.hubspot.jp/hubfs/Knowledge_Base_2021/Developer/growth-theme-icon-module.png)
  </DndModule>
</DndSection>

<DndSection>
  <DndModule numCols={6}>
    <div>
      Growthテーマに含まれている「スピーカーカード」モジュールには、カードの画像とテキストコンテンツという複数のコンポーネントが含まれています。\_ \_したがって、モジュールスタイルはコンポーネントごとにグループ化されており、コンテンツクリエイターが各コンポーネントのスタイルを設定するためのプロセスが明確化されます。
    </div>
  </DndModule>

  <DndModule numCols={6}>
    ![growth-theme-speaker-card](https://www.hubspot.jp/hubfs/Knowledge_Base_2021/Developer/growth-theme-speaker-card.png)
  </DndModule>
</DndSection>

#### 個々のフィールドのグループ化

以下のボタンモジュールには、［プリセット］、［テキスト］、［背景］などのグループが含まれています。［角］フィールドグループには角の半径のコントロールしか含まれていませんが、一貫性のあるコンテンツ作成体験を提供するためにグループ化されています。

![module-requirements-2\_1](https://www.hubspot.jp/hubfs/Knowledge_Base_2021/Developer/module-requirements-2_1.png)![button-styles](https://www.hubspot.jp/hubfs/Knowledge_Base_2023/button-styles.png)