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

​

モジュールの制限事項

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

​

モジュールのコンテンツ

​

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

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

​

既定のコンテンツ

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

​

モジュールアイコン

​

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

​

モジュールフィールド

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

​

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

​

モジュールのコード品質

​

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

​

テーマモジュール

​

独立モジュール

document.addEventListener('DOMContentLoaded', function () {
  // Put Javascript here
});

​

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

• 可能であれば簡素なJSを使用することをお勧めします。jQueryを使用しないサイトにjQueryライブラリーを追加すると、競合が発生してウェブサイトページの速度が低下する可能性があります。
• jQueryライブラリーを使用する場合は、require_js()関数を使用してライブラリーをインクルードします。これにより、複数のjQueryライブラリーによる競合を避けるためにアカウント設定のチェックボックス（ブール値）でjQueryが無効にされている場合でも、ライブラリーがインクルードされます。

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

​

カテゴリー

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

​

クラス名セレクター

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

<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要素を参照して、モジュール外部の要素に意図しない影響が及ばないようにする必要があります。

​

フィールドの構成

​

コンテンツタブ

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

​

スタイルタブ

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

• 位置合わせ
• 背景画像
• 境界線
• カラー
• フォント
• グラデーション
• 間隔
• テキストの位置合わせ

• アニメーションオプションは、常にフィールドグループリストの末尾近くに置く必要があります。
• コンテンツクリエイターがコードスニペットまたはCSSを追加できるようにするオプションは、フィールドグループリストの末尾にある「詳細」というラベルのフィールドにグループ化する必要があります。_ _
• コントロールは、全てのモジュールで標準化する必要があります。例えば、境界線の半径のコントロールを持つことができる全ての要素は、そのコントロールを提供する必要があります。一部のモジュールで、他のモジュールに存在しないコントロールを提供することは避けてください。
• ［スタイル］タブに追加されたモジュールフィールドは、モジュールのスタイルを設定する方法を提供する必要があります。_ _以下に例を示します。
  • 色、テキストスタイル、位置合わせ、間隔、境界線、角の半径などのスタイルオプション。
  • ホバー効果やスライドイン効果などのアニメーション。
  • さまざまなスタイルを同時に変更することを目的とする、ダークテーマとライトテーマなどのプリセット。

​

フィールドの構成の例

​

プリセット

​

複数レベルのグループ化

​

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