モジュールとは
モジュールの基本的な仕組み
まずモジュールを使用するには、テンプレート側で予め「モジュールを使用する」ということを宣言しなければなりません。先ほどのデモ動画の最初の画面がテンプレート編集画面で、これは既に
- Header（見出し）モジュール
- Imageモジュール
- Rich Textモジュール
を埋め込んでいる状態です。
テンプレートにモジュールを埋め込んでいる状態
この状態で、このテンプレートを利用してページを生成すると、ページ編集画面においてそれぞれのモジュールが編集可能となります。
ページ編集画面におけるモジュールの一覧
Headerモジュールのようにコンテンツの編集がシンプルなものもあれば、ImageモジュールやRich Textモジュールのようにカスタマイズ性が高いものもあります。
左からHeaderモジュール、Imageモジュール、Rich Textモジュールの各編集画面
なお、今回ヘッダー（見出しを意味するHeaderモジュールではなく、サイトヘッダー）とフッターはRich TextモジュールにHTMLを入れて表示していますが、これらはページ編集画面で編集されることを想定していないため、テンプレート側で予め2つのRich Textモジュールに対しページ編集画面での編集を禁止しています。
モジュールを自由に増減できるフレキシブルカラム
「モジュールの基本的な仕組み」セクションで解説した例では、
- Headerモジュール
- Imageモジュール
- Rich Textモジュール
がテンプレートに直接埋め込まれているため、「このページではRich Textモジュールを追加したい」「このページではImageを無くしたい」などの制御を行うことができません。これを解消するのが、フレキシブルカラムという仕組みです。
フレキシブルカラムとは、大まかに言えば「モジュールを自由に追加・削除できるエリア」で、テンプレートに予め設置しておくと各ページの編集画面で使用できるようになります。今回はフレキシブルカラムのラベルを「コンテンツエリア」としました。
フレキシブルカラムをテンプレートに設置した状態
この状態でページ編集画面を開くと、モジュール一覧部分に「コンテンツエリア」というラベルのフレキシブルカラムが追加されたことがわかります。このフレキシブルカラムの「新規モジュールを追加」リンクから、任意のモジュールを追加していきます。
フレキシブルカラムの「新規モジュールを追加」リンクから、Headerモジュールを追加した
モジュールの追加は、左側のツールバーの「+」をクリックして展開されるメニューからも行うことができます。先ほどの方法では新規追加するモジュールは必ずフレキシブルカラムの末尾に追加されますが、こちらの方法では追加時に任意の位置を指定することができます。また、モジュールを連続して追加しやすいのもこちらの方法です。
「+」をクリックして展開されるメニューからモジュールを追加した
一度追加したモジュールは、フレキシブルカラム内でドラッグ&ドロップすることで順番を自由に入れ替えることも可能です。
フレキシブルカラム内のモジュールの順番を入れ替えた
- ページ内にフレキシブルカラムが複数ある
- かつモジュールの移動先のフレキシブルカラムに、最低1つモジュールがある
という条件を満たす場合は、モジュールを他のフレキシブルカラムに移動することも可能です。下記キャプチャでは予めテンプレートに「コンテンツエリア2」というフレキシブルカラムを新たに追加し、フレキシブルカラム間のモジュール移動のデモを行っています。
Imageモジュールを他のフレキシブルカラムに移動した
テンプレートに設置したフレキシブルカラム内に、モジュールを予め埋めこんでおくことも可能です。モジュールを予め埋め込むことで、「どんなモジュールを使用してページを作ってもらいたいか」というコンテンツ制作の指針にすることができます。
フレキシブルカラム内にモジュールを予め埋め込んだ状態
この状態でテンプレートからページを新規作成すると、次のキャプチャのようにページ編集画面に予め埋め込んだモジュールが表示されます。
フレキシブルカラム内にモジュールを予め埋め込んだテンプレートから生成したページ編集画面
なお、モジュールを予め埋め込む前から同テンプレートを使用して生成したページには、この変更は適用されません。あくまで新規に生成するページが対象となります。これはモジュール内のデフォルト値に関しても同様です。HubSpotではフレキシブルカラム内のモジュールの状態、またはモジュール内のコンテンツに関して、ページ編集画面にて設定したコンテンツが基本的に優先されます。
またフレキシブルカラムは、執筆時現在でウェブサイトページのテンプレートにのみ使用できる点に注意が必要です。残念ながらブログやEメールテンプレートでは使用できません。
複数のモジュールを組み合わせるカスタムモジュール
HubSpotが提供しているモジュールとフレキシブルカラムの組み合わせにより、ページ内のコンテンツを簡単、かつ自由に編集できることはわかりました。
しかし実際のwebサイトは標準モジュールで提供されているようなシンプルなコンテンツだけでなく、「画像とタイトルとテキストが横並びになっている」というように幾つかの要素で1つのコンポーネントを形成していることがあります。
画像とテキスト群によって1つのコンポーネントとなっている例
WYSIWYGエディタを利用した従来のCMSのページ更新方式では、次のようなコードを直接WYSIWYGエディタにHTMLとしてペーストしてコンテンツを更新していました。これはHubSpotのRich Textモジュールを利用しても、同様の方針をとることができます。
<div class="bl_profMedia02">
<p class="bl_profMedia02_imgWrapper">
<img alt="写真：増田 彰" src="https://cdn2.hubspot.net/hubfs/3111128/corporate/assets/img/corporate/photo_officer-1.png">
</p>
<div class="bl_profMedia02_body">
<p class="bl_profMedia02_position">代表取締役社長</p>
<p class="bl_profMedia02_name">増田 彰</p>
<div class="bl_profMedia02_txt">
<p>2001年3月株式会社ニューズ・ツー・ユー入社。2004年に上海支社の立ち上げメンバーとなり、中国にてパートナー企業の教育、Webサイト制作、運営管理のアウトソーシングを担う。2011年にマーケティング・コミュニケーション部長、2012年7月に取締役就任。2015年1月株式会社ニューズ・ツー・ユー、株式会社パンセ 代表取締役社長就任。</p>
</div>
<!-- /.bl_profMedia02_txt -->
</div>
<!-- /.bl_profMedia02_body -->
</div>
<!-- /.bl_profMedia02 -->
しかしながら、この方針は
- ページ更新者がHTMLを理解していなければならない
- 各ページにおいて構造が同じHTMLをコピー&ペーストするため、万が一HTMLに変更が必要な場合、対象ページ全てを開いてWYSIWYGエディタから変更を加えなければならない
という問題を抱えていました。
この問題を一挙に解決したのが、HubSpot標準のモジュールを組み合わせて独自のモジュールを新たに作成する「カスタムモジュール」という機能です。カスタムモジュールを駆使することでサイトを更新するマーケター、サイトを管理するエンジニア双方に都合のよい運用体制を構築することができます。そのためHubSpot CMSの使い勝手の良さは、半分以上の割合で「カスタムモジュールが上手く設計・構築できるか」に依存するといっても過言ではありません。
カスタムモジュールの作成
まず、試しにカスタムモジュールを作成してみましょう。デザインマネージャーの [ファイル] → [新規ファイル] からファイル作成ポップアップを表示し、「モジュール」選択します。次の画面で「ページテンプレート」「ブログテンプレート」にチェックを入れ、モジュールコンテンツ範囲が「ローカルモジュール」になっていることを確認してモジュール名を入力します。そうするとカスタムモジュールが作成され、編集画面に移ります。
カスタムモジュール作成の流れ
この状態で、試しに先ほどのコードを入れてカスタムモジュールを公開し、ページ編集画面のフレキシブルカラムから追加してみましょう。コードを入れただけでは表示こそされるのものの、コンテンツをページ編集画面から編集することはできません。
カスタムモジュールにコードのみを追加してページ編集画面で読み込んだ状態
カスタムモジュールを編集可能にする
カスタムモジュールのコンテンツを編集できるようにするには、コンテンツに応じて使用するHubSpot標準モジュールをカスタムモジュールに追加する必要があります。なお、カスタムモジュール内に追加されたHubSpot標準モジュールは「フィールド」と呼ばれます。HubSpot標準モジュールのほか、カスタムモジュール専用のフィールドも幾つか用意されています。
今回のコンポーネントにおいて、コンテンツとして編集したいのは
- 画像
- 肩書き
- 名前
- 略歴
ですので、この4つをフィールドとして追加します。
今回のコンポーネントに必要なフィールド
下記の動画が、カスタムモジュールにフィールドを追加し、ページ編集画面にて編集可能にするための設定です。フィールドを追加した後は、必ずそのフィールドの値を出力するためのコードの既存のHTMLに埋め込みます。
以上が、カスタムモジュールの基本的な作成・使用方法です。カスタムモジュールは大変奥が深い機能であるため、詳細な解説は別途ページを設けたいと思います。
コンテンツの一括管理
サイトヘッダーやフッターなど、全ページに共通のコンテンツは
- 1. モジュールのグローバルグループ化
- 2. グローバルモジュールの作成
- 3. 独立したコードファイルとして切り出して、各テンプレートからincludeする
の3通りの管理方法があります。
3に関してはテンプレート制作のナレッジになってしまうため、本ページでは解説しません。1、2は作成方法・管理方法ともに若干似通っています。大まかな使い分けの指針として
- コンテンツを簡単に管理したい、またはドラッグ＆ドロップ形式のテンプレートを利用している→1
- コードも交えてコンテンツを詳細に編集したい→2
と捉えておくとよいでしょう。
2の作成方法は、カスタムモジュール作成時のポップアップで「グローバルモジュール」を選択する方法と、ドラッグ＆ドロップのテンプレートにおいてモジュールの編集メニューからグローバルモジュール化する2通りあります。
ドラッグ＆ドロップのテンプレートにおいて、モジュールの編集メニューからグローバルモジュール化する方法
下記は、1のモジュールをグローバルグループにしたデモです（※本来はこの手順でグローバルグループが作成されるのですが、本ページ執筆時は原因不明のエラーが起こってしまいました。）。
グローバルグループの作成手順
MAIL NOTIFY
