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

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

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

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

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

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

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

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

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

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

モジュールのフィールドはオブジェクト配列としてJSONで定義されます。各フィールドに、名前、型、既定値があります。編集方法を制御するフィールドのタイプによっては、他にもプロパティーがあります。

使用可能な全てのフィールドの詳細については、モジュールとテーマのフィールドを参照してください。

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

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

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

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

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

• モジュールを設定する
• テンプレートでモジュールを使用する
• 既定のモジュール
• モジュールエディター