🐈

【初心者向け】HubDB で動的ページを作ってみよう

2024/08/04に公開1件

はじめに

HubSpotってエディター上で簡単にページが作れる反面、たくさんページを作る必要があるサイト（製品カタログページや事例ページなど）については大量のページをちまちま作成したり、毎度編集画面にアクセスして、書き換えて更新ボタンポチってたりして・・・ってちょっと面倒ではありますよね。

HubSpotにはそんなニーズに応えたHub DBという機能があります。
今回はHubDBを使った動的ページの作成にトライしてみようと思います(p*･ω･)p

HubDBとは

公式ドキュメントから言葉をお借りすると、

HubDBは、データを行、列、セルに保存する、スプレッドシートによく似たテーブルを作成するために使用するツールです

とのこと。名前にもある通りHubSpotの中にデータベース（DB）を使って、ページやメール作成にその情報を使えるよってことみたいです。

今回挑戦する"動的ページ"はHubDBにある情報を取得して、動的にページを生成するものになります。
＊どうページが生成されてるの？って部分についてはこちらのサイト↓が参考になるかと思います。

準備

必要になるスペック

HubDBでページを作るにはテンプレートをいじいじする必要があります∩(´・ヮ・`)∩
ので、デザインマネージャーの画面に触ったことがない・HubLってなんぞ？って方には少し難しいかも。

今回はテーマやCSS部分は放置して、~~見た目はひどく原始的だけど~~ 簡単に作れる方法でトライしていこうとおもいます。

おともだち

以下３つのドキュメントがお友達です。以下の手順でも参照した箇所を📖アイコンで示します

やってみよう

では早速作っていきましょうΣ＝＝＝＝⊂(　つ・ω・)つ

今回作成するページ

（私は猫さまが大好きなので）猫種をまとめたページを作りました 🐈
実用性の低さはご容赦ください

構成としては猫種の種別を一覧で出すページを用意し、それぞれの猫種の名前や説明、動画や画像をHubDBの動的ページで作成しています。

手順

HubDBを作成する
HubDBにデータを追加する
HubDBを公開する
テンプレートを作成する
ページを作成する

1. HubDBを作成する

HubDBのテーブル（データをいれる表）を作ります。

HubSpotにログインしてメニューの［コンテンツ］＞［HubDB］を選択
画面右上の［テーブルを作成］をクリック
テーブルのラベル（表示名）とテーブル名（内部値）を設定します

今回は "cat_breeds" としています（既にCatsは作っていたので・・・）

📖 ドキュメント：テーブルを作成する

2. HubDBにデータを追加する

この状態ではデータをいれる枠ができただけなので、実際に表示していきたいデータを追加していきます。

ここでは追加方法として２つあります。

画面上で追加する
CSVファイルをインポートする
今回はどっちもやってみます

2-1. 画面上でデータを追加する

作成されたテーブルに行と列を追加していきます。
編集画面の右上にある［アクション］から追加が可能です。

今回は下表の形にしていこうと思います😺

ID	猫種	説明	画像	動画
行のID（自動付与）	猫種の名前	猫種の説明	かわいい画像	かわいい動画
--	テキスト	リッチテキスト	画像	動画

列名やタイプについては列にマウスオーバーして出てくる ▼をクリック＞［✎編集］して、設定を行います。

列が用意できたら行にコンテンツを追加していきます。
リッチテキストや画像についてはマウスオーバーをするとボタンがでてくるので、そこから編集／ファイル選択をします。

いろいろとポチポチして1行出来上がりました。

出典

今回画像はAIで生成して、テキストはWikipedia。動画は以下よりお借りしてます
Video by cottonbro studio: https://www.pexels.com/video/a-woman-petting-her-cat-6865083/
Video by Thirdman: https://www.pexels.com/video/close-up-video-of-a-cat-8944043/

📖 参考記事：テーブルデータの追加と編集

2-2. CSVファイルをインポートする

ただこのままだと大量の猫さまを入れてくには日がくれてしまいます ( >д<).;':
そこで２つめの方法もトライしていきます。

スプレッドシートやExcelにHubDBに追加したい情報を作成します。
列名はHubDBの列名と一致させます。

＊画像については、HubSpotのファイル機能にアップロードした上でリンクを取得します

ファイルが用意できたら、HubDBの［アクション］＞［インポート］をクリックして［追加］を選択します。

CSVファイルをインポートして、CSVの列名とHubDB側の列名をマッピングします。

今回は列の内部値を使ったのでそのまま読み取ってくれました

インポートを使うことで一気にかわいい猫さまが増えました！便利便利。

📖 参考記事：CSVでテーブルデータをインポート

3. HubDBを公開する

用意した動画も追加したので、テーブルを公開しますヽ(•̀ω•́ )ゝ✧

公開の前にテーブルが動的ページで使えるように設定をしときます
［アクション］＞［設定を変更］をクリックして、［行データを使用した動的ページ作成を有効化］のスイッチをONにします。

その下のメタデータについては任意で指定します

スイッチをONにすると新たに［ページタイトル］、［ページのパス］という列が出現します。
これらは各動的ページのタイトルとパスにあたります。ポチポチ設定しましょう

📖 参考記事：テーブル設定の管理

ここまで来たら右上にある［公開］ボタンを押しちゃいます！ヽ(•̀ω•́ )ゝ✧
公開されましたよ～的なメッセージが表示されたらOKです

4. テンプレートを作成する

ではいよいよHubDBを使ったページ作成に着手します₍₍ (ง ˘ω˘ )ว ⁾⁾

この↓開発者ドキュメントに沿って進めていきたいと思います。

4-1. テンプレートを作成する

HubDBを使ったページを作るにはページのテンプレートにまじないをかけておく必要がありますので、テンプレートから作成していきます。

デザインマネージャーの画面にアクセスして、［ファイル］＞［新規ファイル］から［HTML+HubL］のテンプレートを作成します。

ひとまずルートフォルダ内に置いてますが、任意の場所で問題ないです

4-2. HubDBのデータが出るようにおまじないする

作成されたテンプレートでは、自動でページ構成を用意してくれてます。

やさしい

ただ、今回はドラッグアンドドロップでページ編集しないので、<body>タグの中にある"dnd_area"の部分は削除しちゃいます。

    {% dnd_area "dnd_area"
      label="Main section"
    %}

    {% end_dnd_area %}

まず動的ページを作るのに必要なおまじない🪄その1を追加します。
📖公式ドキュメントにある以下コードをコピペして・・・

{% if dynamic_page_hubdb_row %}
    <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1>
    <h2>{{ dynamic_page_hubdb_row.name }}</h2>
    <h3>{{ dynamic_page_hubdb_row.role }}</h3>
    <p>{{dynamic_page_hubdb_row.bio}}</p>

{% endif %}

次の形に書き換えます

{% if dynamic_page_hubdb_row %}
    <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1>
    <h2>{{ dynamic_page_hubdb_row.name }}</h2>
    <img src="{{dynamic_page_hubdb_row.image.url}}">
    <p>{{dynamic_page_hubdb_row.description}}</p>
    {% video_player "embed_player" player_id="{{dynamic_page_hubdb_row.video}}" %}
{% endif %}

ここでは動的ページ側で、HubDBのどの情報を取得して表示するかを定義してます。

HubDBの行に関連付けられたページタイトル（hs_name）をh1タグで表示する
猫種の名前をh2タグで表示する
画像を表示する
猫種の説明をpタグで表示する
動画を表示させる
という具合です。

📖動画挿入に関しては以下参照です：

次におまじない🪄その2を追加します。
📖公式ドキュメントにある以下コードをコピペして・・・

{% elif dynamic_page_hubdb_table_id %}
    <ul>
    {% for row in hubdb_table_rows(dynamic_page_hubdb_table_id) %}
        <li><a href="{{ request.path }}/{{ row.hs_path }}">{{ row.hs_name }}</a></li>
    {% endfor %}
    </ul>

{% endif %}の前の行に追加します

{% if dynamic_page_hubdb_row %}
    <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1>
    <h2>{{ dynamic_page_hubdb_row.name }}</h2>
    <img src="{{dynamic_page_hubdb_row.image.url}}">
    <p>{{dynamic_page_hubdb_row.description}}</p>
    {% video_player "embed_player" player_id="{{dynamic_page_hubdb_row.video}}" %}
{% elif dynamic_page_hubdb_table_id %}
    <ul>
    {% for row in hubdb_table_rows(dynamic_page_hubdb_table_id) %}
        <li><a href="{{ request.path }}/{{ row.hs_path }}">{{ row.hs_name }}</a></li>
    {% endfor %}
    </ul>
{% endif %}

追加した部分はページに動的ページへのパス（URL）を箇条書きで表示させるためのおまじないです。

17-29行目が今回記述した箇所です