最終更新日: 2025年8月28日
Run in Postman
2025年6月16日以降、この記事に記載されている従来のCRMカードの機能はサポートされなくなり、2026年10月31日に正式に廃止されます。この変更の詳細についてはHubSpot開発者変更ログをご確認ください。従来のCRMカードは、プロジェクトでUI拡張機能として作成できるアプリカードとは異なります。新しいアプリカードでは、最新のReactベースのツールセットが使用され、柔軟性、カスタマイズ性、インタラクティブ性が向上しています。現在ご自身のアプリに旧型CRMカードが含まれている場合は、プロジェクトフレームワークに移行して新しいアプリカードを使用する方法をご確認ください。


スコープの要件
カスタムCRMカードを作成するアプリは、カードを表示するCRMレコードの変更に必要なOAuthスコープをリクエストする必要があります。例えば、CRMカードをコンタクトレコードに表示するには、アプリにcrm.objects.contacts.read
スコープとcrm.objects.contacts.write
スコープが設定されている必要があります。後でアプリからCRMオブジェクトのスコープを削除する必要が生じたら、まず、それらのオブジェクトタイプを対象とした既存のカードを全て削除する必要があります。
スコープの詳細およびアプリの認証URLの設定については、OAuthのドキュメントをご参照ください。
CRMカードを作成する
アプリのCRMカードは、APIを介して作成することも、開発者アカウントでのアプリの編集によって作成することもできます。APIを介してカードを設定する方法について詳しくは、リファレンスドキュメントをご確認ください。 HubSpotのUIを使用してCRMカードを作成するには、次の手順に従います。- HubSpot開発者アカウントで、メインナビゲーションにある[アプリ]に移動します**。 **
- カードを追加する対象のアプリを選択します。
- 左のサイドバーメニューで[CRMカード]を選択します**。 **
- 右上の[CRMカードを作成]をクリックします**。 **

開発者プロジェクトを使用して構築されたUI拡張機能では、外部コンテンツをフレーム内に表示するなど、より柔軟な方法でデータを表示してユーザーとやり取りできます。連携で非公開アプリを使用することが可能な場合は、UI拡張機能のクイックスタートガイドでUI拡張機能の導入方法をご確認ください。また、HubSpotのサンプルプロジェクトを参照して、UI拡張機能で実現可能なことの例をご確認いただくこともできます。
データリクエスト
HubSpotユーザーが、CRMカードが設定されているCRMレコードを表示すると、HubSpotが連携にデータ取得リクエストを送信します。HubSpotが指定されたターゲットURLに送信するこのリクエストには、一連の既定のクエリーパラメーターの他に、カードの設定として指定されたプロパティーデータを含むパラメーターが追加されます。
- [データ取得]フィールドに、データの取得元となるURLを入力します。_ _APIでは、このURLが
targetUrl
フィールドに追加されます。 - [ターゲット レコード タイプ]セクションで、スイッチをクリックしてオンに切り替え、カードを表示するCRMレコードを選択します。_ _次に、[HubSpotから送信されたプロパティー]ドロップダウンメニューを使用して、リクエストURLにクエリーパラメーターとして含めるHubSpotプロパティーを選択します**。 **APIでは、各レコードタイプとそれに対応するプロパティーが
objectTypes
配列内のオブジェクトとして追加されます。
リクエストの例
上記のように設定すると、HubSpotは次のようにGET
リクエストを送信します。
パラメーター | 型 | 説明 |
---|---|---|
userId | デフォルト | CRMレコードを読み込んだHubSpotユーザーのID。 |
userEmail | デフォルト | CRMレコードを読み込んだユーザーのEメールアドレス。 |
associatedObjectId | デフォルト | 読み込まれたCRMレコードのID。 |
associatedObjectType | デフォルト | 読み込まれたCRMレコードのタイプ(コンタクト、会社、取引など)。 |
portalId | デフォルト | CRMレコードが読み込まれたHubSpotアカウントのID。 |
firstname | カスタム | [HubSpotから送信されたプロパティー]ドロップダウンメニュー(アプリ内)およびpropertiesToSend 配列(API)で指定された、コンタクトの名。_ _ |
email | カスタム | [HubSpotから送信されたプロパティー]ドロップメニュー(アプリ内)およびpropertiesToSend 配列(API)で指定された、コンタクトのEメールアドレス。_ _ |
lastname | カスタム | [HubSpotから送信されたプロパティー]ドロップダウンメニュー(アプリ内)およびpropertiesToSend 配列(API)で指定された、コンタクトの姓。_ _ |
注:
接続は3秒以内に確立される必要があり、5秒が経過するとリクエストはタイムアウトします。レスポンスの例
以下に、インテグレーターが上記のリクエストに対して返すレスポンスの例を示します。プロパティー | タイプ | 説明 |
---|---|---|
results | 配列 | 最大5つの有効なカードプロパティーから成る配列。特定のCRMオブジェクトにこれよりも多くのプロパティーが含まれる場合は、アプリからリンクを設定できます。 |
objectId | 数値 | このオブジェクトの固有ID。 |
title | 文字列 | このオブジェクトのタイトル。 |
link | 文字列 | ユーザーがオブジェクトに関する詳細を取得するために使用できるURL。このプロパティーは任意指定ですが、リンクを持つオブジェクトがない場合は、null を指定してください。 |
created | 文字列 | オブジェクトの作成日を示す、カードの設定で定義されたカスタムプロパティー。 |
priority | 文字列 | 外部チケットの優先度レベルを示す、カードの設定で定義されたカスタムプロパティー。 |
actions | 配列 | ユーザーが実行できるアクションのリスト。 |
properties | プロパティー | カード設定で定義されていないカスタムプロパティーのリスト。このリストを使用して、特定のオブジェクトに固有のプロパティーを表示することができます。これらのプロパティーは、カード設定で定義されたプロパティーの後に指定した順に示されます。 |
settingsAction | オブジェクト | ユーザーがアプリの設定を更新できるようになるiframeアクション。 |
primaryAction | オブジェクト | レコードタイプのプライマリーアクション(通常は作成アクション)。 |
secondaryActions | 配列 | カードに表示される他のアクションのリスト。 |
リクエスト署名
リクエストが実際にHubSpotから送信されていることを確認するために、リクエストには次のリクエストヘッダーが組み込まれます。このヘッダーには、アプリケーションのアプリシークレットのハッシュとリクエストの詳細が設定されます。X-HubSpot-Signature: <some base64 string>
この署名を検証するには、次の手順に従います。
<app secret>
+<HTTP method>
+<URL>
+<request body> (if present)
の形式で連結した文字列を作成します。- 連結した文字列のSHA-256ハッシュを生成します。
- ハッシュ値を署名と比較します。一致する場合、リクエストは検証に合格したことになります。一致しない場合は、転送中のリクエストの改ざん、またはエンドポイントに対するリクエストのなりすましが発生した恐れがあります。
カードプロパティー
[カードプロパティー]タブで、HubSpotのCRMカード上に表示させるカスタムプロパティーを定義します。_ _定義が完了すると、連携によってこれらのプロパティーがレスポンスに組み込まれ、値が取り込まれます。- [プロパティーを追加]をクリックし、カードに表示する新しいプロパティーを追加します**。 **データ取得呼び出しに対して返すペイロードには、これら全てのプロパティーに値が設定されている必要があります。
- 右側のパネルで、プロパティーの一意の名前、表示ラベル、データタイプを設定します。データタイプとして[通貨]、[日付]、[日時]、[Eメール]、[リンク]、[数値]、[ステータス]、[文字列]のいずれかを選択できます。____ ____拡張プロパティータイプの使用について詳細をご確認ください。
- [追加]をクリックしてプロパティーを保存します**。 **

results
に含まれる各オブジェクトの他の値に加えてこれらのプロパティーの値も取り込まれます。このタブで設定されたプロパティーの他に、連携によって独自のカスタムプロパティーが追加される場合もあり、これらのプロパティーをカードの設定で定義する必要はありません。
例えば、以下のレスポンスに含まれるcreated
およびpriority
は、どちらも[カードプロパティー]タブで定義されたものですが、properties
配列では独自のプロパティー定義と値が送信されます。_ _これらのオブジェクト固有のプロパティーは、オブジェクトごとに定義する必要があります。
dataType
フィールドをCURRENCY
、DATE
、DATETIME
、EMAIL
、LINK``NUMERIC
、STATUS``STRING
のいずれかに設定できます。プロパティーのタイプによっては、連携で追加のフィールドが必要になる場合があります。以降のセクションで、プロパティーの各タイプについて詳しく説明します。
通貨プロパティー
CURRENCY
プロパティーにはcurrencyCode
を含める必要があり、このコードは有効なISO 4217でなければなりません。これにより、ユーザーには正しい通貨記号と数字の書式が表示されます。
日付プロパティー
DATE
プロパティーはyyyy-mm-dd
の形式でなければなりません。これらのプロパティーは、ユーザーのロケールに適した形式で表示されます。タイムスタンプを含める必要がある場合は、代わりにDATETIME
プロパティーを使用します。
日時プロパティー
DATETIME
プロパティーは特定の時間を示します。エポック以降のミリ秒数で指定する必要があります。これらのプロパティーは、ユーザーのロケールに適した形式で表示されます。
Eメールプロパティー
EMAIL
プロパティーは、Eメールアドレスを含む値に使用されます。これらのプロパティーはmailtoリンクとして表示されます。
リンクプロパティー
LINK
プロパティーはハイパーリンクを表示し、新しいウィンドウで開きます。linkLabel
を指定しない場合は、URL自体が表示されます。
数値プロパティー
NUMERIC
プロパティーは数値を表示します。
ステータスプロパティー
STATUS
プロパティーは色付きのインジケーターとして表示されます。ステータスプロパティーを定義するには、考えられるステータスを記述するoptionType
を連携で指定する必要があります。ステータスは以下の通りです:
DEFAULT
:灰色SUCCESS
:緑色WARNING
:黄色DANGER
:赤色INFO
:青色
文字列プロパティー
STRING
プロパティーはテキストを表示します。
カスタムアクション
[カスタムアクション]タブでは、ユーザーがアクションボタンをクリックしたときにリクエストするベースURLを定義できます。_ _CRMカードには、さまざまなアクションに対応する複数のアクションURLを含めることができます。
X-HubSpot-Signature
ヘッダーが含まれます。Iframeアクションリクエストには、リクエスト署名は含まれません。詳細については、リクエスト署名をご確認ください。
アクションのuri
フィールドでアクションURLにアクセスします。データ取得リクエストと同様に、アクションフックには一連のデフォルトのクエリーパラメーターが組み込まれます。アクションにassociatedObjectProperties
フィールドを含めると、他のクエリーパラメーターを含めることができます。
レスポンスは、アクションのタイプによって異なります。以下で、アクションのタイプについて詳しく説明します。
アクションタイプ
Iframeアクション
IFRAME
アクションは、指定されたURLを指すiframeを含むモーダルを開きます。CRM UIからiframeが開かれるとき、リクエスト署名は送信されません。その理由は、元のデータ取得リクエストでiframe URLが返され、追加のプロキシーリクエストが不要であるためです。
window.postMessage
を使用して、ユーザーの操作が完了したことをCRMに通知します。次のメッセージを使用できます。
{"action": "DONE"}
:ユーザーが正常にアクションを完了しました。{"action": "CANCEL"}
:ユーザーがアクションをキャンセルしました。
アクションフックのアクション
ACTION_HOOK
アクションは、サーバーサイドのリクエストをインテグレーターに送信します。このアクションでユーザーに表示されるUIは、成功メッセージまたはエラーメッセージのみです。このタイプのアクションは、さらなるユーザー入力を必要としない単純な操作に役立ちます。検証用に、リクエストにX-HubSpot-Signature
ヘッダーが含まれます。リクエスト署名の詳細については、こちらをご覧ください。
httpMethod
をGET
、POST
、PUT
、DELETE
、またはPATCH
に設定することができます。GET
またはDELETE
を使用する場合、associatedObjectProperties
値がリクエストURLの末尾にクエリーパラメーターとして追加されます。それ以外の場合、プロパティーはリクエスト本文で送信されます。
確認アクション
CONFIRMATION_ACTION_HOOK
アクションは、ACTION_HOOK
アクションと同じように動作しますが、サーバーサイドのリクエストを実行する前にユーザーに確認ダイアログを表示するという点が異なります。検証用に、リクエストにX-HubSpot-Signature
ヘッダーが含まれます。リクエスト署名の詳細については、こちらをご覧ください。
httpMethod
をGET
、POST
、PUT
、DELETE
、またはPATCH
に設定することができます。GET
またはDELETE
を使用する場合、associatedObjectProperties
値がリクエストURLの末尾にクエリーパラメーターとして追加されます。それ以外の場合、プロパティーはリクエスト本文で送信されます。
CRMカードを削除する
作成後は、アプリの設定からCRMカードを削除できます。- HubSpot開発者アカウントで、メインナビゲーションにある[アプリ]に移動します**。 **
- カードを削除するアプリの名前をクリックします。
- 左のサイドバーメニューで[CRMカード]を選択します**。 **
- カードにカーソルを合わせ[削除]をクリックします**。 **

- ダイアログボックスで[このカードを削除]をクリックして削除を確定します**。 **