最終更新日: 2025年8月28日
HubSpot CMSとその機能性を理解するには、モジュールを理解することが重要です。モジュールとは、テンプレートで使用したり、ドラッグ＆ドロップエリアおよびフレキシブルカラムを使用してページに追加したりできる、再利用可能なコンポーネントのことです。HubSpot提供のモジュールを使用できるだけでなく、開発者は独自のモジュールを作成して、お客様の声やフォトギャラリーといったあらゆる目的で使用できます。モジュールを作成するには、ローカルの開発ツールを使用するか、デザインマネージャーを使用します。 モジュールは2つの要素で構成されています。
  1. 一連のフィールドを使用して作成されたユーザーインターフェイス。ユーザーがモジュールインスタンスを編集するときに表示されます。
  2. CSSとJSが関連付けられたHTML+HubLテンプレートフラグメント。これによりHTMLの出力が定義されます。

​
例

モジュールの理解を深めるために、シンプルな「チームメンバー」モジュールを例として説明します。このモジュールは、写真、チームメンバーの名前と役職、簡単な自己紹介からなります。CMSウェブページに組み込まれると、次のように表示されます。
チーム メンバー モジュール インスタンス

​
編集用ユーザーインターフェイス

開発者はフィールドを使用して、モジュールのユーザーインターフェイス（UI）を構築します。続いて、開発するモジュールの種類、必要なデータ、編集方法に基づいて、使用するフィールドを選択します。この例では、モジュールに次のフィールドを使用しています。
  1. チームメンバーの写真に使用する画像フィールド
  2. チームメンバーの名前と役職に使用する2つのテキストフィールド
  3. 簡単な自己紹介に使用するリッチ テキスト フィールド
制作担当者がモジュールを編集する際のUIは、開発者がモジュールに追加したフィールドと各フィールドの設定方法に基づいて組み立てられます。
チーム メンバー モジュール エディター

​
モジュールとモジュールインスタンス

モジュールに関する2つの頻出用語があります。その違いを理解することが重要です。
  • モジュール - ：テンプレートやページに追加できる、再利用可能な構成要素。
  • モジュールインスタンス - ：ページ上にレンダリングされた個々のモジュール。モジュールインスタンスはそれぞれ別個のフィールド値を使用できるため、同じモジュールであっても、モジュールインスタンスによっては外観が異なる場合があります。

​
fields.json

モジュールのフィールドはオブジェクト配列としてJSONで定義されます。各フィールドに、名前、型、既定値があります。編集方法を制御するフィールドのタイプによっては、他にもプロパティーがあります。 
// fields.json
[
  {
    "name": "team_member_photo",
    "label": "Team Member Photo",
    "required": true,
    "responsive": true,
    "resizable": true,
    "type": "image",
    "default": {
      "src": "",
      "alt": ""
    }
  },
  {
    "name": "team_member_name",
    "label": "Team member name",
    "required": true,
    "type": "text",
    "default": "Joshua Beck"
  },
  {
    "name": "team_member_position",
    "label": "Team member position",
    "required": true,
    "type": "text",
    "default": "CEO, Co-Founder"
  },
  {
    "name": "team_member_bio",
    "label": "Team member bio",
    "required": true,
    "type": "richtext",
    "default": "<p>Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.</p>"
  }
]
使用可能な全てのフィールドの詳細については、モジュールとテーマのフィールドを参照してください。

​
モジュール フィールド データを使用してHTMLをレンダリングする

各フィールドの値は、モジュールのHTML+HubLフラグメントでmodule変数を介して使用できます。各フィールドのデータにアクセスするには、module変数のプロパティーを使用します。チーム メンバー モジュールの例では、チームメンバーの名前にアクセスするために{{ module.team_member_name }}プロパティーを使用します。 
<section class="team-member">
  <img class="team-member__image" src="{{ module.team_member_image.src }}" alt="{{ module.team_member_image.alt }}">
  <h3 class="team-member__name">{{ module.team_member_name }}</h3>
  <p class="team-member__position">{{ module.team_member_position }}</p>
  <div class="team-member__bio">{{ module.team_member_bio }}</div>
</section>

​
テンプレートでのモジュールの使用

モジュールをテンプレートに追加するには、module、module_block、またはdnd_moduleタグを使用し、パラメーターとしてモジュールのパスを指定します。モジュールに含まれるフィールドの既定値は、テンプレートレベルでのオーバーライドもできます。下の例の後半部分のように、フィールド名に対応するmoduleタグにパラメーターを追加してください。 
{% module "unique_identifier" path="/modules/team-member.module" %}

{# override default values in a module instance #}

{% module "unique_identifier"
  path="/modules/team-member.module",
  team_member_name="Brian Halligan",
  team_member_position="CEO"
%}
モジュールを相互にネストすることはできません。ほとんどの場合、モジュール同士をネストさせる必要が生じるのはレイアウト上の理由からです。その場合の対処法として、通常はドラッグ＆ドロップエリア内のセクションを使用するのが適切です。

​
アクセシビリティーの向上にも役立つモジュール

モジュールはウェブサイト全体で使用されます。複数のページで使用されたり、同じページ上で複数回使用されたりすることもあります。このことから、アクセシビリティーを念頭にモジュールのHTML、CSS、JSを作成すると、障害がある人とない人の両方にとって非常に使いやすいサイトを実現できる可能性があります。

​
モジュールによってローカライズが容易に

アクセシビリティーの場合と同様に、モジュール内の全てのコンテンツがフィールドによって構築されるようにモジュールを作成しておくと、後でローカライズできます。例えば、「Featured articles」というモジュールがあるとします。「Featured articles」というテキストをハードコードする代わりに、テキストフィールドまたはリッチ テキスト フィールドを使用します。その結果、テキストを他の言語に変更することが可能になります。CMSのローカライズの詳細については、多言語を参照してください。

​
はじめに

モジュールを使い始めるには、モジュールの基本操作チュートリアルを参照してください。

​
関連情報