HubSpot CMSの概要

ここでは優れたウェブサイトの構築に向けて、HubSpotのコンテンツ マネジメント システム（CMS）における開発の主なポイントを紹介します。CMS Hubを最大限に活用するには、HTML、JavaScript、CSSなどのウェブ開発の基本に関する専門知識が求められます。

CMS Hubを初めて使用する方には、クイックスタートチュートリアル（英語）を読んでから、必要に応じてこの記事に戻ることをお勧めします。

HubSpot CMSは、企業がウェブでのプレゼンスを向上できるよう、コンテンツを作成して管理するマーケティング担当者を支援することを重点目標として設計されています。HubSpot CRMには、ウェブサイトのコンテンツ、リード（見込み客）の情報収集機能、アナリティクスが統合されており、サイトの訪問者に応じたパーソナライズされた体験を簡単に創出してビジネス全体に活用できるように構築されています。

HubSpot CMS開発者の主な役目は、コンテンツの制作担当者としてではなく「イネーブラー」としての役割を果たすことです。このことからHubSpot CMSでは、テーマおよびモジュールシステムとドラッグ＆ドロップエリアにより、開発者のニーズと制作担当者のニーズがバランス良く満たされるようになっています。

適切なCMS Hubサイトは、制作担当者のニーズを理解しながら制作者とのコラボレーションを通じて開発されます。こうしたサイトであれば、開発者の継続的なサポートとメンテナンスの必要性も軽減されます。CMS Hubでの開発作業中は、制作担当者にページがどのように表示されるか、制作担当者にとってどのような操作感であるか、継続的なプレビューを行ってください。こうした取り組みが、可能な限りコンテンツ作成者が自力で作業できるサイトの実現につながります。

CMSのホスティングとメンテナンスはHubSpotが行います。つまり、開発者がプラグインの管理、更新、ホスティング、スケーリング、セキュリティーについて心配する必要はありません。その代わり、開発者が自身でCMSをホスティングする場合よりも制約があります。例えば、システムの基本要素を手作業で、またはプラグインを使用して変更したり拡張したりすることはできません。また、レンダリングの詳細を操作すること、データベースのコンテンツに直接アクセスして変更することもできません。

開発者が作成するコンテンツ（テーマ、テンプレート、モジュール、JavaScript、CSSなど）は、デベロッパー ファイル システム内に保存されます。一方、ページコンテンツ（ページ、ブログ記事）は強力なブロックベースのWYSIWYGエディター内で設計、作成されたメディアファイル（制作担当者が作成した画像、PDFなど）はウェブアプリベースのファイルマネージャーに保存されます。WYSIWYGとは「what you see is what you get」の略で、最終的な出力と同じものが編集画面に表示されるエディターのことです。

ページのレンダリング時に、HubSpotはドメインに応じて多数のHubSpotサーバーのうちの1つにリクエストをルーティングし、そのサーバー上でページをレンダリングして、可能な場合はそのページをコンテンツ配信ネットワーク（CDN）にキャッシュします。

HubSpot CMSでは、さまざまなタイプのコンテンツを作成可能です。コンテンツのタイプによっては、制作担当者に表示されるユーザーインターフェイスにわずかな違いがあります。開発者はこれらの違いを認識しておかなければなりません。 

ウェブサイトページとランディングページは互いに独立して作成されますが、すべてのページはテンプレートに基づきます。制作担当者にとって、ランディングページを構築するプロセスとウェブサイトページを構築するプロセスはほぼ同じです。ただし、ウェブサイトページは組織のウェブサイトの一部として情報を提供し、オーガニック検索で見つけやすく設計される一方、ランディングページは一般に特定のマーケティングオファーまたはキャンペーンに関連付けられる（例：特定のコンタクトリストに送信されるマーケティングEメールからリンクされる）点が異なります。 

マーケティング担当者向けのUIとしては、これらのタイプのページのアナリティクスと編成も独立して体系化されています。これは、ランディングページには多くの場合、特定のコンバージョン目標があるためです。

HubSpotのブログには2つのビューがあります。1つはリストページのビュー、もう1つは個々のブログ記事のビューです。各ブログ記事はそれぞれのビューに取り込まれます。ブログ記事とリスティングページで同じテンプレートを共有するようにブログを設定することも、リスティングページとブログ投稿で別々のテンプレートを使用するように設定することもできます。ただし、ブログ投稿の間では同じテンプレートを共有する必要があります。詳細はブログ テンプレート マークアップとHubSpotでブログを作成して管理する方法をご確認ください。

HubSpotでは、いくつかの方法でEメールを作成できます。

• 従来型Eメール：CMSプラットフォーム上には従来型Eメールツールが構築されているため、ウェブサイトページとランディングページを作成する場合と同様の方法でEメールテンプレートとEメールモジュールを作成できます。マークアップを完全に制御するEメールテンプレートを作成することもできます。
• ドラッグ＆ドロップEメール：ドラッグ＆ドロップエディターでEメールを作成する場合、カスタムテンプレートを使用することはできませんが、コンテンツ制作担当者はHubSpotのドラッグ＆ドロップ操作のインターフェイスを使用して、これらのEメールのレイアウトとコンテンツを作成できます。

アプリ内エディターを使用して、またはテンプレートにハードコーディングしてページのコンテンツを作成できるだけでなく、構造化データソースを使用して、HubLで動的ページのコンテンツを取り込むこともできます。ページにコンテンツを取り込むには、次のデータソースを使用できます。

• HubDB：HubDBテーブルのセルにデータを保存します。
• CRMレコード：コンタクト、会社、カスタムオブジェクトなどのデータをCRMレコードに保存します。

構造化コンテンツを使用して動的ページを作成するということは、データソースを更新することによって直接ウェブページとページのコンテンツを作成、編集、削除できることを意味します。HubSpotブログと同様に、一連の動的ページには、データソースのインスタンスを表示する単一のリスティングページと、個々のインスタンスごとの別個のページを含めます。HubLを使用することで、ページに表示されるデータを完全に構成できます。

例えば、営業チームのそれぞれのメンバーに対応する各行に情報を格納するHubDBテーブルを作成できます。HubSpotはそのHubDBテーブルを使用して、各テーブル行に格納された主な詳細（各営業担当者の名前や画像など）を表示するリスティングページと、営業担当者ごとの詳細（プロフィール、電話番号など）を表示する個別のページを生成します。営業担当者が後で別のチームに異動した場合は、HubDBテーブルからその営業担当者の行を削除すれば、HubSpotが自動的にその営業担当者の詳細ページを削除し、リスティングページからもその営業担当者を除去します。 

コアアセット（テンプレート、テーマ、モジュール、およびこれらをサポートするJavaScript、CSSファイル、画像）は、デベロッパー ファイル システム内に作成されます。このファイルシステムは、デザインマネージャーの左側のパネル、またはローカル開発ツールを使用してローカルで同期されたフォルダー内で確認できます。ファイルシステム内では、アセットを相互に絶対パスまたは相対パスで参照可能です。

内部では、これらのファイルはデータベース内のエントリーにマッピングされます。このことから、デベロッパー ファイル システムにアクセスするには、SSHやFTPではなくHubSpot CLIツールを使用します。特定のファイルシステムに見られるような機能（アクセス権限、シンボリックリンクなど）は、デベロッパー ファイル システムには備わっていません。

これは従来のCMSのアプローチとは異なりますが、ファイルのリンク切れや構文エラーが本番ではなく公開する時点で検出されるため、実際のトラフィックがウェブサイトに到達した際の予想外のエラーを防ぐための対策にもなります。

制作担当者が新しいページを作成するときは、CMSがファイルシステム内のテンプレートを検出して制作担当者に提示します。したがって、ファイルシステムの構造は開発者の裁量に任されます。モジュールを/modules/フォルダー内に保管したり、JavaScriptを/js/フォルダー内に保管したりする必要はありません。ただし、CMSのボイラープレートのサンプルコード（英語）と同じようにアセットを整理することをお勧めします。 

テーマ、テンプレート、モジュール、フィールドは、開発者がCMS Hubで最も頻繁に扱うオブジェクトです。このさまざまなオブジェクトを効果的に使用することで、開発者が設定したスタイルとレイアウトのガイドラインに従って、制作担当者が自力で自由にウェブサイトを編集し、改良を重ねられるようになります。

テーマとモジュールに含まれるフィールドには、特定のデータタイプ（数値、文字列、リッチテキスト、画像）が設定されます。オブジェクトをレンダリングする際にこれらのフィールドを使用する方法、そしてWYSIWYGエディター内でのフィールドの配置と表示は、ユーザーが制御できます。制作担当者がWYSIWYGエディターでフィールドの値を設定すると、レンダリング時にそれらの値がテーマまたはモジュールに適用されます。

テーマは、ウェブサイトの外観と操作感を定義して、快適なコンテンツ編集環境を創出するための最上位のオブジェクトです。テーマには、テンプレート、モジュール、CSSファイル、JavaScriptファイル、画像などを組み込むことができます。

テーマを使用することで、一連のフィールドを作成して、制作担当者がCSSを編集しなくても全体のスタイルを制御できるようにすることができます。CSSファイル内で、制御の適用対象を指定し、他の制御を継承するように設定したり、マーケティング担当者に対してテーマエディターで表示、配置する方法を管理したりできます。制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開します。

これらのテーマフィールドは、サイト全体でグローバルに設定することも、ページレベルでオーバーライドすることもできます。

テンプレートは、ページで使用する、基礎となるマークアップとスタイルを定義します。テンプレートを使用するページには、そのテンプレートで定義されたマークアップとスタイルが適用されます。テンプレートにはHubL、HTML、JavaScriptファイルとCSSファイルへのリンクを含めることができます。また、テンプレートが特定のタイプのコンテンツで使用されるように制限することもできます。テンプレートに含めるマークアップとスタイルは完全に開発者の自由裁量に委ねられますが、マーケティング担当者が簡単にページを編集できるよう、いくつかのベストプラクティスに従ってCMSの主要な機能を使用することをお勧めします。以下に、いくつかのベストプラクティスをご紹介します。

• テーマの一部としてテンプレートを作成し、テーマレベルのCSS（テーマフィールドを含む）を使用して、スタイル設定の大部分をテンプレート内で行えるようにします。こうすると、制作担当者がCSSを編集しなくても、グローバルおよびローカルのスタイルの一貫性を確保しながら変更できるようになります。
• ページ上のコンポーネントの大半にモジュールを使用して、ウェブサイト全体でモジュールを再編成および再利用できるようにします。この後、モジュールの詳細について説明します。
• サイト内のページをはじめ、主要なページコンテンツにはできるだけドラッグ＆ドロップエリアを使用するようにします。ドラッグ＆ドロップエリアを使用すると、ページを構成するモジュールの既定のレイアウトを設定する一方で、マーケティング担当者が柔軟に独自のレイアウトとスタイルを編集できます。
• ウェブサイト全体に一貫して表示するヘッダーやフッターなどの共有コンテンツを含めるには、グローバルパーシャルを使用します。

テンプレートを作成するには、HTML+HubLを使用することも、デザインマネージャー内の ドラッグ＆ドロップ操作のインターフェイスを使用することもできます。ただし、コード化されたテンプレートのほうが、ドラッグ＆ドロップ操作のインターフェイスよりも細かく制御でき、機能性にも優れているためにお勧めです。例えば、ドラッグ＆ドロップエリアをサポートなどがあります。

モジュールは、CMS Hubのテンプレートやページに配置できる、再利用可能なコンポーネントです。モジュールにはマーケティング担当者用のコントロールを組み込み、ウェブサイトの再利用可能かつ編集可能なコンポーネントを作成するために連動するHubL/HTMLマークアップ、CSS、JavaScriptを追加します。

モジュールのコントロールはフィールドで定義されます。したがって、優れたモジュールを作成するには、ページ上での表示とコンテンツ編集者の作業性の両方を考慮する必要があります。

HubSpot CMSには、ヘッダー、リッチテキスト、ボタン、CTAなどの一般的な既定のモジュールが用意されています。これらのモジュールを基本的なコンポーネントとして使用する一方で、要素をゼロから作成して、テーマとテンプレートに合った、より特徴的なレイアウトを設定することもできます。例えば、アコーディオン、スライダー、タブなどのモジュールを作成できます。

モジュールはオブジェクトであり、ページ上のモジュールはそのオブジェクトのインスタンスであると見なせます。つまり、モジュールに含まれるHubL、CSS、またはJavaScriptに加えた変更は、所定のポータル内のページまたはテンプレートに含まれる、そのモジュールの全てのインスタンスに適用されます。モジュールはポータル間で移植することもできます。デザインマネージャーに組み込まれているコピーツールを使用する、マーケットプレイスで販売する、ローカル開発ツールで直接コードを共有するといった場合も、移植可能です。つまり、デザインソリューションを一度実装すれば、複数のページやポータルでそのソリューションを使用できます。さらに、ソリューションの更新が必要になったら、複数のページや複数のテンプレートを編集しなくても、ソリューションの変更を全てのページに適用できます。

テーマにもモジュールを組み込むことができます。この場合、テーマフィールドを使用してモジュールの外観を操作し、制作担当者が優れた外観のモジュールに簡単にアクセスできるよう、ページエディター内で目立たせることもできます。

モジュールの概要ガイドで詳細をご確認ください。

フィールドは、制作担当者がテーマやモジュールに渡されるパラメーターを調整するために使用するコントロールです。フィールドには型があります。型にはブール、テキスト、URL、選択肢、ファイルなどのシンプルなものもあれば、スタイル設定されたフォントといった複雑なフィールドもあります。また、コンテンツの別の部分へのリンクやHubSpotシステム内のフォームへのリンクなど、HubSpot固有のフィールドも使用できます。

モジュールに配列を渡すリピーター内にフィールドを配置することもできます。例えば、画像カルーセルに、「alt」テキストが関連付けられた一連の画像を渡す必要があるとします。この場合、多数の画像フィールドとテキストフィールドを作成する代わりに、画像フィールドとテキストフィールドをそれぞれ1つ作成して、繰り返しグループ内に配置できます。

モジュールのフィールドは、デザインマネージャー内で指定するか、fields.jsonファイル内でこの構文を使用して指定します。テーマのフィールドは、fields.jsonファイル内のテーマのルートに指定する必要があります。

HubSpotのCMSではHubSpot Markup Language、略してHubL（「ハブル」と発音）を使用します。HubLは、JinjavaというJinjaベースのテンプレートエンジンをHubSpotが拡張した言語です。HubLは数多くのHubSpot固有のマークアップを採用しています。また、Jinjaの機能のうちサポートされない機能もあります。ページのレンダリング時に、HubLは一貫してサーバーサイドで実行されます。

HubLでは、シンプルなテンプレート作成言語で使用する変数、forループ、if文などの機能を使用できるだけでなく、複雑なマクロのレンダリング、データフェッチ、およびタグ、関数、フィルターのマッピングもサポートしています。 

HubLで可能なことの限界に達したときは、HubSpotに備わっているAPIでよりカスタマイズされたソリューションを作ることもできます。「CMS Hub Enterprise」アカウントではサーバーレス関数を使用して、高度なサーバー サイド プログラミングを行うことができます。 

CMS Hub上での開発中に特定の言語機能について詳細を調べるには、HubL言語リファレンスをご覧ください。