HubSpotコネクタを使用してアプリを開発

注: この記事の情報は機密情報であり、 LovableプライベートベータのHubSpotコネクタ の参加者のみを対象としています。ここに挙げた情報は公開しないでください。

HubSpotのConnector for Lovableを使用すると、HubSpotのデータを使用してカスタムアプリやユーザーインターフェイスを作成できます。管理者がアクセス権を設定すると、ユーザーはHubSpotをLovableに接続し、自然言語を使用してアプリを記述し、他のユーザーとアプリを共有できます。

各ユーザーのHubSpotデータアクセス権は、既存のHubSpotユーザー権限に基づきます。Lovableアプリを開発またはアクセスする際、HubSpotでアクセス権が付与されているHubSpotデータにのみアクセスできます。管理者は、Lovableアプリを構築できるユーザーと、Lovable用のHubSpotコネクターにアクセスできるユーザーを制御します。

始める前に

HubSpotのデータを使用してLovableでアプリを構築する前に、以下の点を確認する必要があります。

• スーパー管理者:HubSpotでの 「HubSpot Connector for Lovable」権限を付与 し、どのユーザーがコネクターとLovableが開発したアプリをインストールできるかを承認します。
• 管理者としての役割:HubSpotパートナーは、ワークスペースでHubSpotコネクターを有効にします。
• アプリを構築するユーザー:HubSpotアカウントを使用してLovableに接続し、アプリを構築して、他のユーザーと共有します。
• アプリにアクセスするユーザー:Lovable製のアプリにアクセスしますが、アプリを自分で構築しているわけではありません。
• HubSpot上のデータの範囲は個々のユーザーに設定されます。アプリを開発したりアクセスしたりしても、ユーザーは既存のHubSpot権限以上のHubSpotデータにアクセスすることはできません。
• HubSpotをLovableに接続する際には、任意の権限を全て選択することをお勧めします。選択した任意の権限によって、コネクターを使用して構築するアプリで使用できるHubSpotの権限の最大値が設定されます。一部のオプションの権限のみを選択すると、Lovableで構築できるアプリや機能を制限できます。

ユーザーのアクセス権を設定する(管理者が必要)

ユーザーがLovable用のHubSpotコネクタの使用を開始する前に、次の手順を実行します。

1. Lovableでアプリを構築する権限をユーザーに付与する

最初にスーパー管理者が 、アプリを構築するユーザーに 「HubSpot Connector for Lovable」 権限を付与する必要があります。

1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンをクリックします。
2. 左のサイドバーメニューから［ユーザーとチーム］を選択します。
3. ユーザーテーブルで、 ユーザーレコードをクリックし、[ アクセス ]タブをクリックします。
4. [権限]の下にある[ 権限の編集]をクリックします。
5. [ 権限を選択 ]セクションをクリックして展開します。
6. [AI機能]をクリックします。
7. [HubSpot connector for Lovable(愛らしいHubSpotコネクタ )]のスイッチをオンに切り替えます。
8. 右上の［保存］をクリックします。

権限を付与したら、コネクタをインストールできるユーザーを承認します。

2. ユーザーを承認してLovable用のHubSpotコネクターをインストールする

ユーザーがHubSpot Connector for Lovableをインストールするには、 スーパー管理者が アクセスを承認する必要があります。

1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンをクリックします。
2. 左のサイドバーメニューで、［連携］>［接続されたアプリ］に移動します。
3. [ 承認済みアプリ ]タブをクリックします。
4. [アプリを承認]をクリックします。

5. LovableのHubSpotコネクターを検索して選択します。
6. [アクセス権を管理]バナーで、[ 承認]をクリックします。 

7. ダイアログ ボックスで、アプリをインストールできるユーザーを選択し、コネクタがアクセスできるアクセス許可、データ、API を確認します。
8. [ アプリを承認]をクリックします。

チームのアプリへのアクセスを承認する方法について詳細をご確認ください。

3. LovableのHubSpotコネクターの任意の権限を有効にする

スーパー管理者は 、HubSpot Connector for Lovableで使用可能な任意の権限を制御し、全てのアプリ開発者の権限の上限を設定します。オプションの権限が有効になっている場合でも、アプリ開発者にアクセスできるのは、自分のHubSpot権限で許可されている場合のみです。

1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンをクリックします。
2. 左のサイドバーメニューで、［連携］>［接続されたアプリ］に移動します。
3. [ 承認済みアプリ ]タブをクリックします。
4. LovableのHubSpotコネクターの場合は、右側の[ アクセス権を管理 ]をクリックします。
5. 右側のパネルで、[ データアクセス権限] タブをクリックします。
6. [任意 ]セクションで、 オプションの権限 の一部または全てをオンに切り替えます。
7. ［Save changes（変更を保存）］をクリックします。

4. 快適なワークスペースでHubSpotコネクターを有効にする

承認されたユーザーがHubSpotをLovableに接続するには、 Lovable 管理者がLovableのHubSpotコネクターを有効にする必要があります。

1. Lovableの左側のサイドバーメニューで、[ コネクター]に移動します。
2. HubSpotを検索して選択します。
3. [機能 ] セクションで、 チャット コネクタとアプリ ユーザー コネクタの両方に対して [有効] をクリックします。

コネクターを有効にすると、必要なHubSpot権限とインストールアクセス権を持つユーザーはHubSpotをLovableに接続できます。

LovableのHubSpotコネクターをセットアップ

スーパー管理者 によってHubSpotに必要な権限とコネクターアクセス権が付与され、Lovable管理者がコネクターを有効にしたら、ユーザーはHubSpotをLovableに接続し、アプリの構築を開始できます。

1. https://lovable.dev/ に移動し、Lovableアカウントにログインします。
2. 左のサイドバーメニューで、[ コネクター]をクリックします。
3. [HubSpot]を選択します。
4. [+接続を追加 ]ドロップダウンメニューをクリックし、[ チャットコネクター]を選択します。

5. ［接続］をクリックします。

6. スーパー管理者がコネクターへのアクセスを承認した HubSpotアカウント を選択します。
7. コネクターがアクセスできるデータとツールを確認オプションのアクセス許可は、Lovable でコネクタを使用して構築するアプリで使用できる最大アクセス許可を定義しますが、すべてが自動的に使用されるわけではありません。任意の権限は、開発しているアプリが特に必要な場合にのみ使用されます。後でアクセス許可を再構成しないようにするには、使用可能なすべての任意のアクセス許可を選択することをお勧めします。一部のオプションの権限のみを選択すると、Lovableで構築できるアプリや機能を制限できます。 

8. 利用規約とプライバシーポリシーを確認してください。次に、 チェックボックス をオンにして連携の条件に同意します。
9. ［Connect app（アプリを接続）］をクリックします。

HubSpotをLovableに接続した後、コネクターを使用してHubSpotデータを使用するアプリをLovableで構築できます。

インストールプロセス中に「 Lovable用のHubSpotコネクターをインストールする適切な権限がありません 」というエラーが発生した場合は、 スーパー管理者 に HubSpotで Lovable用HubSpotコネクター の権限を付与するように依頼してください。

「このアプリのインストールアクセス権がありません」というエラーが発生した場合は、 スーパー管理者 に コネクタをインストールするためのアクセス権の承認を依頼してください。

コネクタをインストールした後、Lovable がツール呼び出しの承認を要求する方法を選択します。すべてのツール呼び出しに対して承認を要求することも、特定のツール呼び出しに対してのみ承認を要求することも、ツール呼び出しを常に許可することもできます。[常に許可 ]オプションを使用すると、チャットを合理化し、より迅速に結果に到達できますが、Lovableは追加の承認なしにツールコールを行うことができるため、コネクタのアクティビティの可視性と制御が低下します。

LovableにはHubSpotコネクタを使用

HubSpotをLovableに接続した後、自然言語を使用して、Lovableに構築してもらいたいアプリまたはユーザーインターフェイスを説明してください。

1. [Lovable]に、作成するアプリまたはユーザーインターフェイスを説明する プロンプト を入力し、プロンプトに HubSpot @mentionします。次に 、Enterキーを押します。

2. 公開後に誰がアクセスできるかを選択します。

• • 私のワークスペースの内部では、Lovable ワークスペースのサインイン済みユーザーのみが公開されたアプリにアクセスできます。
  • 外部ユーザー向けに公開:アプリのURLを知っている誰でも公開済みアプリにアクセスできます。

3. [次へ]をクリックします。選択したオーディエンスは、アプリの公開時に適用されます。

4. [ HubSpotアプリをプロビジョニング ]セクションで、HubSpotで アプリに必要な権限 を確認します。次に、「許可」をクリックします。

5. Lovableがアプリのプレビューの生成を開始します。プレビューが表示されるまでには通常数分かかります。
6. アプリのプレビューで、[ HubSpotを接続]をクリックします。

7. ダイアログボックスで、 HubSpotアカウントを選択します。
8. Lovableが開発したアプリがアクセスできるHubSpotデータを確認してください。
9. チェックボックスをオンにしてから、[ アプリを接続]をクリックします。
10. HubSpotのデータがアプリのプレビューに表示されます。

アプリに表示されるのは、HubSpotユーザー権限に基づいてアクセス権を付与されたHubSpotデータのみです。例えば、自分の取引しか表示できない取引がある場合、HubSpotの取引を表示するLovableアプリには、自分が担当している取引のみが表示されます。

愛すべきアプリを他のユーザーと共有する

Lovableでアプリを構築したら、ワークスペースの他のユーザーと共有します。

1. 右上の［公開］をクリックします。

2. アプリを表示できるユーザー(ワークスペース全体または特定のユーザー)を選択します。

3. アプリのドメインプレフィックスを編集するには、ドメインの横にある 鉛筆アイコンをクリックします 。または、[ +ドメインを追加 ]をクリックしてカスタムドメインを使用します。 

4. ［公開］をクリックします。
5. アプリを公開したら、[ リンクをコピー] をクリックしてアプリの URL をコピーし、アプリを使用するワークスペース内の同僚と共有します。

1. Lovableアプリの URL を開きます。
2. [ HubSpotに接続]をクリックします。
3. 承認を求められたら、[ インストールをリクエスト]をクリックします。HubSpotの スーパー管理者 にリクエストが送信されます。

4. 管理者がリクエストを承認したら、アプリの接続手順を完了します。

リミックス 愛すべきテンプレート

あらかじめ用意されているテンプレートを出発点として使用し、チームのニーズに合わせて再利用プロジェクトをカスタマイズします。

テンプレートを再利用する前に、Lovable用のHubSpotコネクターを設定し、ワークスペースの アプリユーザーコネクター オプションを有効にします。

1. 次のHubSpotの既成のLovableテンプレートのいずれかに移動します。
   • パイプラインパルス:取引額、フォローアップの提案、成約の可能性を表示して、収益機会の特定と優先順位付けに役立ちます。
   • キャンペーンの羅針盤:スケジュールされたミーティングやクローズした収益への影響を含め、キャンペーンとEメールのパフォーマンスを経時的に追跡します。
   • Optimal Ops:進行中および解決済みのチケット数、解決時間、バックログの期間、注意が必要な問題など、HubSpotのチケットデータを表示します。
2. Lovableワークスペースにログインします。
3. テンプレートが読み込まれたら、右上の [リミックス ]をクリックします。
4. プロジェクトの名前を入力します。複数のワークスペースにアクセスできる場合は、プロジェクトを作成するワークスペースを選択します。次に、テンプレートをリミックスすることに同意。

5. リミックスされたプロジェクトの指示に従ってください。

• • ユーザー認証プロンプトをコピーします。
  • ヘルプを依頼したエージェントのチャットウィンドウに貼り付けます。
  • 個々のユーザーのHubSpotログインを有効にするオプションを選択します。

6. [ HubSpotを接続]をクリックします。
7. 認証プロンプトに従ってHubSpotを接続し、HubSpotのデータをアプリに読み込みます。
8. 必要に応じてアプリをカスタマイズします。