モジュールシステムの概要

CMS Hubとその機能性を理解するには、モジュールを理解することが重要です。モジュールとは、テンプレートで使用したり、ドラッグ&ドロップエリアおよびフレキシブルカラムを使用してページに追加したりできる、再利用可能なコンポーネントのことです。HubSpot提供のモジュールを使用できるだけでなく、開発者は独自のモジュールを作成して、お客様の声やフォトギャラリーといったあらゆる目的で使用できます。モジュールを作成するには、ローカルの開発ツールを使用するか、デザインマネージャーを使用します。

モジュールは2つの要素で構成されています。

  1. 一連のフィールドを使用して作成されたユーザーインターフェイス。ユーザーがモジュールインスタンスを編集するときに表示されます。
  2. CSSとJSが関連付けられたHTML+HubLテンプレートフラグメント。これによりHTMLの出力が定義されます。

具体的な例

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

Team member module instance

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

開発者はフィールドを使用して、モジュールのユーザーインターフェイス(UI)を構築します。続いて、開発するモジュールの種類、必要なデータ、編集方法に基づいて、使用するフィールドを選択します。この例では、モジュールに次のフィールドを使用しています。

  1. チームメンバーの写真に使用する、画像フィールド
  2. チームメンバーの名前と役職に使用する、2つのテキストフィールド
  3. 簡単な自己紹介に使用する、リッチ テキスト フィールド

制作担当者がモジュールを編集する際のUIは、開発者がモジュールに追加したフィールドと各フィールドの構成方法に基づいて組み立てられます。

Team member module editor

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

モジュールに関する2つの頻出用語があります。その違いを理解することが重要です。

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

fields.json

モジュールのフィールドはオブジェクト配列として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レンダリング

各フィールドの値は、module変数を介してモジュールのHTML+HubLフラグメント上で利用できます。各フィールドのデータにアクセスするには、module変数のプロパティーを使用します。チーム メンバー モジュールの例では、チームメンバーの名前にアクセスするために{{ module.team_member_name }}プロパティーを使用します。

HubL
<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>

テンプレートでモジュールを使用する

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

HubL
{% module "unique_identifier" path="/modules/team-member.module" %}


{# モジュールインスタンスで既定値をオーバーライド #}

{% module "unique_identifier"
  path="/modules/team-member.module",
  team_member_name="Brian Halligan",
  team_member_position="CEO"
%}

モジュールを相互にネストすることはできません。ほとんどの場合、モジュール同士をネストさせる必要が生じるのはレイアウト上の理由からです。その場合の対処法として、通常はドラッグ&ドロップエリア内のセクションを使用するのが適切です。

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

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

使ってみる

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

使い方の詳細


参考になりましたか? *
こちらのフォームには開発者向けドキュメントに関するご意見をお聞かせください。なお、HubSpot製品に関するご意見は、アイデアフォーラム(英語)にお寄せください。