HubLモジュールでのHubDB表示

HubDBデータの表示方法

スプレッドシートから同期したHubDBのデータを、HubSpotのWebサイトやブログに表示する方法を解説します。

表示にはカスタムモジュールを使用します。Design Managerで作成し、HubL（HubSpotのテンプレート言語）でHubDBからデータを取得して表示します。

モジュールの作成手順

1. Design Managerを開く

HubSpot管理画面 → マーケティング → ファイルとテンプレート → Design Manager

2. 新規モジュールを作成

「ファイル」→「新規ファイル」→「モジュール」
モジュール名を入力（例: HubDB Product List）
「作成」をクリック

3. フィールドを追加

モジュールの設定画面で、HubDBテーブルIDを入力できるフィールドを追加します。

右側の「フィールドを追加」をクリック
「テキスト」を選択
フィールド名: hubdb_table_id
ラベル: HubDB テーブルID
デフォルト値にテーブルIDを入力

なぜテーブルIDをフィールドにするか

テーブルIDをフィールドにすることで、同じモジュールを異なるHubDBテーブルで再利用できます。ブログやLPごとに表示するデータを切り替えられます。

HubLコードの実装

基本的なデータ取得と表示

module.htmlに以下のようなコードを記述します。

{% set tableid = module.hubdb_table_id %}
{% set rows = hubdb_table_rows(tableid) %}

<div class="product-list">
  {% for row in rows %}
  <div class="product-item">
    <h3>{{ row.hs_name }}</h3>
    <p>{{ row.description }}</p>
  </div>
  {% endfor %}
</div>

ページネーション付きの表示

データが多い場合は、ページネーションを追加します。

{% set tableid = module.hubdb_table_id %}
{% set table_info = hubdb_table(tableid) %}

{# ページあたりの表示件数 #}
{% set batch_num = 12 %}

{# 現在のページ番号を取得 #}
{% if not request.query_dict.page_num %}
  {% set page_num = 1 %}
  {% set offset_num = 0 %}
{% elif request.query_dict.page_num %}
  {% set page_num = request.query_dict.page_num %}
  {% set offset_num = page_num|add(-1) * batch_num %}
{% endif %}

{# クエリを組み立ててデータ取得 #}
{% set query = "limit=" ~ batch_num ~ "&offset=" ~ offset_num %}
{% set rows = hubdb_table_rows(tableid, query) %}

{# データ表示部分 #}
<div class="products" id="list">
  {% for row in rows %}
  <div class="product-item">
    <div class="product-image">
      <img src="{{ row.image_url }}" alt="{{ row.hs_name }}">
    </div>
    <div class="product-info">
      <h4>{{ row.hs_name }}</h4>
      {% if row.description %}
        <p>{{ row.description }}</p>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>

{# ページネーション #}
{% set nav = hubdb_table_rows(tableid) %}
{% set total_pages = nav|length|divide(batch_num) %}

<div class="pagination">
  {% if page_num > 1 %}
    <a href="{{ content.absolute_url }}?page_num={{ page_num|add(-1) }}#list">
      前へ
    </a>
  {% endif %}

  <span>{{ page_num }} / {{ total_pages|round(0, 'ceil') }}</span>

  {% if total_pages > page_num %}
    <a href="{{ content.absolute_url }}?page_num={{ page_num|add(1) }}#list">
      次へ
    </a>
  {% endif %}
</div>

CSSスタイルの例

module.cssに記述するスタイルの例です。

グリッドレイアウト

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-item {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-item img {
  max-width: 100%;
  width: 100%;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 10px;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-item {
    padding: 10px;
  }
}

ページネーションスタイル

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

.pagination a {
  padding: 10px 20px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.pagination a:hover {
  background-color: #333;
  color: #fff;
}

モジュールの使用方法

ブログ記事への挿入

ブログ記事の編集画面を開く
「モジュールを追加」をクリック
作成したHubDBモジュールを選択
HubDBテーブルIDを入力
公開

LPへの配置

Design Managerでテンプレートを編集
ドラッグ＆ドロップでモジュールを配置
モジュール設定でテーブルIDを指定

HubL関数リファレンス

HubDBを扱う主なHubL関数です。

関数	用途	例
hubdb_table(id)	テーブル情報を取得	{% set info = hubdb_table(123) %}
hubdb_table_rows(id)	全行を取得	{% set rows = hubdb_table_rows(123) %}
hubdb_table_rows(id, query)	クエリ付きで取得	{% set rows = hubdb_table_rows(123, "limit=10") %}
hubdb_table_row(table_id, row_id)	特定の行を取得	{% set row = hubdb_table_row(123, 456) %}

hubdb_table(id)

用途テーブル情報を取得

例{% set info = hubdb_table(123) %}

hubdb_table_rows(id)

用途全行を取得

例{% set rows = hubdb_table_rows(123) %}

hubdb_table_rows(id, query)

用途クエリ付きで取得

例{% set rows = hubdb_table_rows(123, "limit=10") %}

hubdb_table_row(table_id, row_id)

用途特定の行を取得

例{% set row = hubdb_table_row(123, 456) %}

よく使うクエリパラメータ

パラメータ	説明	例
limit	取得件数の上限	limit=10
offset	スキップする件数	offset=20
orderBy	ソート順	orderBy=order_num
orderBy (DESC)	降順ソート	orderBy=created_at&order=DESC

limit

説明取得件数の上限

例limit=10

offset

説明スキップする件数

例offset=20

orderBy

説明ソート順

例orderBy=order_num

orderBy (DESC)

説明降順ソート

例orderBy=created_at&order=DESC

条件分岐の活用

HubLでは条件分岐を使って、データの有無に応じた表示が可能です。

{% if row.special_flag %}
  <span class="badge">おすすめ</span>
{% endif %}

{% if row.stock_status == 'in_stock' %}
  <span class="stock in">在庫あり</span>
{% elif row.stock_status == 'low' %}
  <span class="stock low">残りわずか</span>
{% else %}
  <span class="stock out">在庫切れ</span>
{% endif %}

まとめ

HubLモジュールでHubDBを表示するポイント：

フィールドでテーブルIDを指定: 再利用性を高める
ページネーション: 大量データは分割表示
レスポンシブ対応: モバイルでの表示を考慮
条件分岐: データに応じた動的な表示

スプレッドシートから同期したデータを、自由なデザインでWebサイトに表示できるようになります。