開発者向けCMS機能

CMS Hub開発機能の概要

HubSpot CMS Hubは、マーケターが使いやすいだけでなく、開発者が柔軟にカスタマイズできる機能も備えています。

HubLテンプレート言語

HubLとは

HubL（HubSpot Markup Language）は、HubSpot CMS専用のテンプレート言語です。

HTMLにHubL構文を組み込むことで、動的なコンテンツを生成できます。

HubLの基本構文

{# コメント #}

{# 変数の出力 #}
{{ content.meta_description }}

{# 条件分岐 #}
{% if request.query_dict.campaign %}
  キャンペーンからの訪問です
{% endif %}

{# ループ #}
{% for item in module.items %}
  <div>{{ item.title }}</div>
{% endfor %}

HubLでできること

機能	説明	活用例
変数	ページやモジュールのデータを出力	{{ page.title }}
フィルター	データを加工して出力	{{ date\|datetimeformat }}
条件分岐	条件に応じた表示切替	ログイン状態で表示変更
ループ	リストデータを繰り返し表示	ブログ記事一覧
マクロ	再利用可能な処理を定義	共通パーツの関数化
インクルード	別ファイルを読み込み	ヘッダー・フッターの共通化

変数

説明ページやモジュールのデータを出力

活用例{{ page.title }}

フィルター

説明データを加工して出力

活用例{{ date|datetimeformat }}

条件分岐

説明条件に応じた表示切替

活用例ログイン状態で表示変更

ループ

説明リストデータを繰り返し表示

活用例ブログ記事一覧

マクロ

説明再利用可能な処理を定義

活用例共通パーツの関数化

インクルード

説明別ファイルを読み込み

活用例ヘッダー・フッターの共通化

React対応（2025年〜）

最新のHubSpot CMSでは、HubLに加えてReactでテンプレートやモジュールを構築することも可能になりました。

Reactコンポーネントでモジュール作成
ローカル開発サーバーでの開発
モダンなフロントエンド開発ワークフロー

Design Manager

視覚的な開発環境

Design Managerは、HubSpot CMS内の開発者向けツールです。ブラウザ上でテンプレートやモジュールを編集できます。

主な機能

ファイル管理: テンプレート、CSS、JS、画像ファイルの管理
コードエディタ: シンタックスハイライト付きのエディタ
プレビュー: 編集結果をリアルタイムで確認
バージョン管理: 変更履歴の保存と復元

ファイル構成

/templates
  ├── pages
  │   ├── home.html
  │   └── about.html
  ├── partials
  │   ├── header.html
  │   └── footer.html
  ├── layouts
  │   └── base.html
  └── blog
      ├── blog-listing.html
      └── blog-post.html
/modules
  ├── hero-banner.module
  └── cta-button.module
/css
  └── main.css

カスタムモジュール

モジュールとは

モジュールは、ページ上に配置できる再利用可能なコンポーネントです。

マーケターがドラッグ＆ドロップで配置し、設定画面から内容を編集できます。

モジュールの構成要素

ファイル	役割
module.html	表示内容（HubL + HTML）
module.css	スタイル定義
module.js	動的な振る舞い
fields.json	編集可能なフィールド定義
meta.json	モジュールの設定情報

module.html

役割表示内容（HubL + HTML）

module.css

役割スタイル定義

module.js

役割動的な振る舞い

fields.json

役割編集可能なフィールド定義

meta.json

役割モジュールの設定情報

フィールドタイプ

モジュールで利用できる主な入力フィールドです。

フィールド	用途
テキスト	見出し、ボタンテキストなど
リッチテキスト	本文、説明文
画像	バナー、アイコン
リンク	URL、内部リンク
選択	ドロップダウン、ラジオボタン
真偽値	ON/OFF設定
繰り返し	複数アイテムのリスト
グループ	関連フィールドのまとめ

テキスト

用途見出し、ボタンテキストなど

リッチテキスト

用途本文、説明文

画像

用途バナー、アイコン

リンク

用途URL、内部リンク

選択

用途ドロップダウン、ラジオボタン

真偽値

用途ON/OFF設定

繰り返し

用途複数アイテムのリスト

グループ

用途関連フィールドのまとめ

カスタムモジュールの例

CTAボタンモジュールの例：

// fields.json
[
  {
    "name": "button_text",
    "label": "ボタンテキスト",
    "type": "text",
    "default": "詳しくはこちら"
  },
  {
    "name": "button_link",
    "label": "リンク先",
    "type": "link"
  },
  {
    "name": "button_style",
    "label": "スタイル",
    "type": "choice",
    "choices": [
      ["primary", "メイン"],
      ["secondary", "サブ"]
    ]
  }
]

テーマ開発

HubSpotテーマの構造

テーマは、サイト全体のデザインを統一するためのパッケージです。

テーマの構成

テーマ

サイト全体のデザインシステム

テンプレート

ページ種類ごとのレイアウト

モジュール

再利用可能なコンポーネント

スタイル

CSS・テーマ設定

Elevateテーマ

2025年からデフォルトテーマとして提供されている「Elevate」は、以下の特徴を持ちます。

カスタマイズ可能なテンプレート群
モダンなデザインパターン
テーマ設定での簡単なブランドカスタマイズ
レスポンシブ対応

ステージング・公開管理

下書きとプレビュー

ドラフト保存: 公開前の変更を下書きとして保存
プレビューリンク: 公開前のページを関係者に共有
デバイス別プレビュー: PC/タブレット/モバイルでの表示確認

公開予約

特定の日時に自動公開
キャンペーン開始に合わせた一斉公開
複数ページのスケジュール管理

バージョン管理

リビジョン履歴: 過去の編集内容を保存
ロールバック: 以前のバージョンに戻す
変更差分: 何が変わったかを確認

ローカル開発環境

HubSpot CLI

コマンドラインツールでローカル開発が可能です。

# CLIのインストール
npm install -g @hubspot/cli

# プロジェクトの初期化
hs init

# ファイルのアップロード
hs upload src dist

# ファイルの監視（自動アップロード）
hs watch src dist

開発ワークフロー

ローカル開発の流れ

① ローカルで開発

VS Codeなどのエディタでテンプレート・モジュールを編集

② HubSpot CLIで同期

hs watchで変更を自動アップロード

③ Design Managerで確認

ブラウザでプレビュー確認

④ 公開

テスト完了後、本番環境に公開

まとめ

CMS Hub Professionalの開発者向け機能により、以下が実現します。

柔軟なカスタマイズ: HubLで自由なテンプレート開発
再利用性: カスタムモジュールでコンポーネント化
視覚的な開発: Design Managerでブラウザ内編集
モダンな開発: React対応、CLI、ローカル開発
安全な公開: ステージング、プレビュー、バージョン管理

マーケターの使いやすさと開発者の柔軟性を両立したCMS環境を構築できます。