NocobaseでHubspotのクローンを作る_CRMオブジェクト編
2025.04.28近年、企業の顧客関係管理（CRM）の重要性がますます高まっています。多くの企業が、顧客との関係を強化し、ビジネスを成長させるために、様々なCRMツールを導入しています。
その中でも、Hubspotは非常に人気のあるCRMプラットフォームの一つです。Hubspotは、マーケティング、セールス、カスタマーサービスなど、幅広い機能を提供し、多くの企業で活用されています。
しかし、Hubspotは高機能である一方、中小企業やスタートアップにとっては、コストが負担になる場合があります。また、独自のビジネスプロセスに合わせてカスタマイズしたいというニーズも出てきます。
そこで、本記事では、ノーコードプラットフォームであるNocobaseを使って、Hubspotをクローンし、独自のCRMシステムを構築することを目標に進めていきます。
前提
- Nocobaseをインストールし、起動できていること
※ セルフホストする環境 - Hubspotのアカウントを作り、ログインできている
- 無料プランを使って参考にします
CRM(顧客管理)のオブジェクト
本記事ではまずCRMの機能を実装していこうと思います
Hubspotのデータモデルを見ると
- コンタクト
- HubSpotユーザーのビジネスに関与する人
- チケット
- 顧客の質問やサポート依頼が追跡され、解決される場所
- 会社
- HubSpotユーザーのビジネスに関連したやりとりがある全ての企業
の3つのオブジェクトがあります。
データモデルの設計
NocobaseでCRMオブジェクトを構築していきます。
データソースの設定ページで、左の設定を押してコレクションのページにいきます。
コレクションの作成から一般データテーブルを選択し、コンタクト・チケットのコレクションを作成します。
会社は親会社を設定するプロパティがあるため、親子関係を表せるツリーコレクションにしておきます。
コンタクト
https://knowledge.hubspot.com/ja/properties/hubspots-default-contact-properties
を参考にしつつフィールドを定義します。
要件によっては必要なものとそうでないのがありそうですが、ひとまず最低限使いそうなフィールドを作成しました。
チケット
を参考にしつつフィールドを定義します。
会社
を参考にしつつフィールドを定義します。
コレクションの関連付け1
このようにHubspotでは各各オブジェクトを関連付けてデータを連携することができます。
コンタクトとチケット、コンタクトと会社、チケットと会社などです。
Nocobaseでもフィールドに関連付けを指定することが可能ですので、先ほど作成したコレクション同士を関連付けさせてみます。
以下の設定にしていきます
- コンタクトとチケット: 多対多
- コンタクトと会社: 多対多
- チケットと会社: 多対多
多対多のフィールドタイプを選択し、2つのコレクションのIDを保存する中間コレクションが作成されます。
これを関連づけたいコレクション毎に設定していきます。
-
コンタクトとチケット
-
コンタクトと会社
-
チケットと会社
このように中間テーブルを介した関連付けをNocobaseで作成できます。
コレクションの関連付け2
Nocobaseにはインストールしたら自動で出来上がるコレクションが2つあります。
ユーザーと役割の2つで、これはNocobaseにログインして使用するユーザーを表すものです。
Hubspotでもコンタクトの担当者、チケットの担当者、会社の担当者というのがあるので、
Nocobaseでも同じように関連付けを行なっておきます。
HubSpot基本的に多対1の関係になっているようですので、そのように作ってみます。
- コンタクトと担当者(ユーザー): 多対1
- チケットと担当者(ユーザー): 多対1
- 会社と担当者(ユーザー): 多対1
このようにユーザーコレクションとの紐付けを行うフィールドを3つのコレクションで作成します。
UIの構築
設計したデータモデルに基づいて、チケット管理、コンタクト管理、会社管理のUIを構築します。NocobaseのUIビルダーを使用すると、ドラッグ＆ドロップなどの直感的な操作でUIを作成できます。
ページ作成
ページを作成し、各ページのブロックを追加します。
ファーストビューには登録したデータの一覧を見れるようにテーブルブロックを置いてみます。
作成したコレクションを選択できるので、ページ毎に置いておきます。
カラムの設定では表示させたいコレクションのフィールドを決定できます。
操作の設定では、追加、削除、インポートなど、Nocobase側で用意されているコレクションに対する操作アクションを追加できます。
追加ボタンを押したらデフォルトでは画面の右側にドロワー画面が表示されます。
ここに追加フォームを設定していきます。現在のコレクションを選択すると、テーブルで選んだコレクションと同じものが使用できます。
追加登録のフォームに必要なフィールドを選択し、保存ボタンを画面上に追加しておきます。
これを3つのコレクション分行います。
データの出しわけ
Hubspotではコンタクトなら、全てのコンタクト・自分が担当のコンタクト・未割り当てのコンタクト といった感じでタブ毎に表示させる内容を変えることが可能になっていますね。
これをNocobaseでもやってみます。
まずはタブを作成します。ページのメニュー（右上にある）からタブを有効にするのチェックを入れます。
するとこのように既存のページがタブ化され、新しいタブの作成もできるUIに変更されるので、出したいタブを作成します。
新しいタブのページには既存と同じようにテーブルを設置します。
※ 既存のテーブルをテンプレート保存し、それを複製しておくと時短になります。
データを出し分けるには、テーブルメニューのデータ範囲の設定 から行えます。
例えば、自分が担当のものだったら、上記のように担当者のメールアドレスが現在のログインユーザーと同じ という条件で対応できます。
編集画面
データを何か追加すると、テーブルにそのデータが表示されるます。
操作メニューから編集を追加することで、編集画面をオープンできるリンクを作成できます。
編集フォームはフォーム（編集）を選択して設置できます。
あとは追加フォームと同じように編集したい項目をクリックして置いていきます。
ワークフローの設定
必要に応じて、ワークフローを設定します。例えば、新しいコンタクトやチケットが登録された際に、自動的に営業担当者に通知するワークフローなどを作成できます。
設定ページのワークフローメニューから追加できます。
Nocobaseを使ってHubspotのCRM機能をクローンする方法について、導入編として行なってみました。
UIを使って登録や編集するという最低限できることのみを行いました。
作り込むとなると結構大変にはなりますが、Nocobaseを使うことで、ノーコードで高機能なCRMシステムを構築できるようになります。
※ APIがあるので外部連携も可能
