【質問】HubDBを利用した一覧表示の仕組みについてご教示ください。

[c_atsushi]

初めて投稿させていただきます。

質問先が間違っておりましたら、ご指摘くださいませ。

HubDBを利用したとあるページの実現方法についてご教示いただきたいです。

【やりたいこと】
　HubDBを利用して、HubDBの特定の表のレコードを一覧表示したい。（以下、一覧画面と呼びます）
　一覧画面では、初期表示後に表の列Xと列Yをそれぞれプルダウンなどで指定し、再度のその指定した列の値が一致するレコードのみを抽出、一覧表示できるようにしたいです。

【理解できていると思うところ】

• HubDBの特定の表の取得方法や、条件を指定して特定のレコードを取得する。
• 取得した列Xと列Yの値をプルダウンで表示する。
• 初期表示時の一覧表示。

【困っている点】

• HubSpotで初期表示後にユーザーの操作により、特定の条件で再度HubDBから条件に合致した表を取得し、表示する仕組みがわかっておりません。
• 具体的には初期表示後に一覧画面の列Xと列Yのプルダウンをそれぞれ指定した際に、列Xと列Yの値に合致した特定のレコードだけを取得し表示する仕組みがHubSpotでどうすべきかがわからない状態です。
• WordPressや私が行ってきた開発では初期表示後にプルダウンが選択されたら、サーバー側に同期、または非同期通信で再度指定した条件でHubDBから値を抽出して返却するような仕組みで実装してきましたが、HubSpotではそれが可能かが不明です。

【お聞きしたいこと】

1. 一覧画面の初期表示後にユーザーがプルダウンなどで指定した際にその条件に合致するレコードを再度表示しなおすことは可能でしょうか。
2. もし可能であれば、その仕組みとサンプルのコードなどをご教示頂けると非常に助かります。

【補足】

• 自身のエンジニア経験は２年未満となります。
• HubSpotに関しては利用してから半年ほどとなります。
• HubDBの新規作成やレコードの追加は可能です。
• 今回の質問で想定しているHubDBの表は以下のようなイメージで質問しております。
  　　列A　・・・　タイトル（テキスト）
  　　列X　・・・　カテゴリ（選択）
  　　列Y　・・・　タグ　　（選択）　

質問の内容、前提の情報などが不足している点があるかと思います。
質問をいただければ追加で記載させていただきます。
かなり困っておりまして何かヒントでも頂けると幸いです。
宜しくお願いいたします。

[assi · Accepted solution]

@c_atsushi 基本的にご共有いただいたことは全て実現可能ですね！

ユーザーの選択に応じて絞り込みを行うには、まず大きく2つのやり方があります。

• 予めHubDBの行を全件一覧表示させている場合
  • この場合は、ユーザーの操作に応じてJavaScriptで絞り込みを行うだけです
• 行を全件は表示させていない場合
  • 絞り込み条件に合わせてHTTP経由で都度HubDBにアクセスします。こちらについて少し詳しく解説します。

前提として、HubDBはHTTP経由でのアクセスが可能です。HubDBの設定にて「パブリックAPIアクセスを許可」をONにするとこの機能が有効になり、URLを開けばHubDBのデータが取得できるようになります。

設定箇所：https://share.cleanshot.com/CC6skt

アクセスURL：https://api.hubapi.com/cms/v3/hubdb/tables/1051109/rows?portalId=3111128

1051109の箇所はHubDBのテーブルIDが、portalIdの後はHubSpotのポータルIDが入ります（これも、左記キャプチャのURLに含まれているものです）。

ここからが本題ですが、このURLにクエリ文字列を加えることで行の絞り込みや並べ替えをした状態でデータの取得ができます。下記は、上記URLに「&tags__contains=デザイン&genre__eq=コーポレートサイト」というクエリ文字列を加えた結果です。

https://api.hubapi.com/cms/v3/hubdb/tables/1051109/rows?portalId=3111128&tags__contains=%E3%83%87%E3...

この「tags」「genre」はそれぞれHubDBの列名で、「contains」や「eq」はオペレーターとなっています。

つまり「&tags__contains=デザイン&genre__eq=コーポレートサイト」は「tagsにデザインを含んでおり、かつgenreがコーポレートサイトと等しい」という条件になっています。

このようにして、URLベースで絞り込みを行うことができます。

他のオペレーターや、行の並び替えについては下記のドキュメントに記載があります。

https://developers.hubspot.com/docs/api/cms/hubdb#filter-returned-rows

[assi · Accepted solution]

@c_atsushi 基本的にご共有いただいたことは全て実現可能ですね！

ユーザーの選択に応じて絞り込みを行うには、まず大きく2つのやり方があります。

• 予めHubDBの行を全件一覧表示させている場合
  • この場合は、ユーザーの操作に応じてJavaScriptで絞り込みを行うだけです
• 行を全件は表示させていない場合
  • 絞り込み条件に合わせてHTTP経由で都度HubDBにアクセスします。こちらについて少し詳しく解説します。

前提として、HubDBはHTTP経由でのアクセスが可能です。HubDBの設定にて「パブリックAPIアクセスを許可」をONにするとこの機能が有効になり、URLを開けばHubDBのデータが取得できるようになります。

設定箇所：https://share.cleanshot.com/CC6skt

アクセスURL：https://api.hubapi.com/cms/v3/hubdb/tables/1051109/rows?portalId=3111128

1051109の箇所はHubDBのテーブルIDが、portalIdの後はHubSpotのポータルIDが入ります（これも、左記キャプチャのURLに含まれているものです）。

ここからが本題ですが、このURLにクエリ文字列を加えることで行の絞り込みや並べ替えをした状態でデータの取得ができます。下記は、上記URLに「&tags__contains=デザイン&genre__eq=コーポレートサイト」というクエリ文字列を加えた結果です。

https://api.hubapi.com/cms/v3/hubdb/tables/1051109/rows?portalId=3111128&tags__contains=%E3%83%87%E3...

この「tags」「genre」はそれぞれHubDBの列名で、「contains」や「eq」はオペレーターとなっています。

つまり「&tags__contains=デザイン&genre__eq=コーポレートサイト」は「tagsにデザインを含んでおり、かつgenreがコーポレートサイトと等しい」という条件になっています。

このようにして、URLベースで絞り込みを行うことができます。

他のオペレーターや、行の並び替えについては下記のドキュメントに記載があります。

https://developers.hubspot.com/docs/api/cms/hubdb#filter-returned-rows

[c_atsushi]

@assi さま

ご丁寧に回答を頂きまして、誠にありがとうございます！

いただきました内容でだいぶイメージがつきました。

共有いただいたドキュメントと回答内容から少し実装して確認してみます。

この度はありがとうございました！

[natsumimori]

半田さんアドバイス助かります！

@c_atsushi さん、ぜひご参考になさってください＾＾

[natsumimori]

@c_atsushi さん、コミュニティーへの投稿ありがとうございます＾＾

HubDBにお詳しいと思われるメンバーの方をメンションさせていただきますね。

@assi さん @KMurota さん

何かアドバイスしていただけることがあれば、ぜひお願いいたします🙏

[KMurota · Accepted solution]

@natsumimori 
メンションありがとうございます。
@c_atsushi 
すでに@assi さんの方でご回答＆解決があったようで、よかったです。
Hublをタグされているようなので、HubSpotのCMSご利用と予想して付け加えると、API fetchしなくともHublを使用してDBデータを表示させることも可能です。
https://developers.hubspot.jp/docs/cms/hubl
Queryの際のパラメーターはAPIリクエストと同じです。
https://developers.hubspot.jp/docs/cms/features/hubdb#:~:text=%E3%83%9B%E3%83%BC%E3%83%A0,%E3%81%8C%...

二次元配列に格納して出し入れしてもよいかと存じます。

[c_atsushi]

@KMurota さま

ご返信、誠にありがとうございます！

関連ドキュメントのURLも記載頂き、大変助かります。

初めての投稿で質問自体がわかりにくかったかと思いますが、

ご親切にありがとうございました。

頂きましたドキュメント読み込み、色々な実装方法で試してみます！

[c_atsushi]

@natsumimori 

ご紹介ありがとうございました！

回答も頂きまして、解決できそうです！