Zum Hauptinhalt springen
最終更新日: 2025年10月8日
最新バージョン（2025.2）の開発者プラットフォームでのプロジェクトを対象に、Reactベースのアプリカードを作成できます。アプリカードは従来のアプリを対象に作成した既存のカードと同じように機能しますが、設定ファイルには若干の変更があります。 このガイドでは、既存のアプリでボイラープレート アプリ カードを作成する方法と、作成したカードをHubSpotにアップロードしてプレビューする方法を説明します。関連する全てのファイルをプロジェクトにアップロードすると、アプリをインストールした開発者テストアカウントでカードをプレビューできるようになります。

​
前提条件

​
アプリカードを作成する

1

プロジェクトにカードコンポーネントを追加する

新しいアプリ カード コンポーネントをプロジェクトに追加するには、ターミナルを使用してローカル プロジェクト ディレクトリーに移動し、次のコマンドを実行します。
hs project add
追加するコンポーネントを選択するように求められたら、［カード****］を選択します。追加するコンポーネントのタイプを選択するよう求めるターミナルプロンプトのスクリーンショットプロジェクトにまだ1つもアプリカードが含まれていない場合は、app/ディレクトリー内にcards/ディレクトリーが作成されます。cards/ディレクトリーには次のファイルが格納されます。
  • JSONカード設定ファイル（*-hsmeta.json）
  • Reactコンポーネントファイル（.jsx）
  • package.jsonファイル
プロジェクトにアプリカードがすでに含まれている場合、上記のファイルは既存のcards/ディレクトリーに追加されます（ただし、既存のpackage.jsonは追加されません）。
myProject
└── src/
    └── app/
        └── cards/
            ├── NewCard-hsmeta.json
            ├── NewCard.jsx
            └── package.json
これらのファイルの詳細については、アプリカードのリファレンスドキュメントをご確認ください。
2

HubSpotにアップロードする

新しいカードをHubSpotアカウントにアップロードするには、次の手順に従います。
  • アプリカードに必要な依存関係をインストールするために、hs project install-depsを実行します。これにより、cards/ディレクトリーが更新されて必要なNodeモジュールとpackage-lock.jsonファイルが格納されるため、アップロードされたアプリカード拡張機能のビルドが高速化されるとともに、ローカル開発環境と本番環境の間で依存関係が一致するようになります。
  • 次に、hs project uploadを実行して、プロジェクトを既定のアカウントにアップロードします。
  • 別のアカウント（個別のテストアカウントなど）を指定するには、--accountフラグを含めてアカウントのHub IDを指定します。例：hs project upload --account 123456
  • プロジェクトが以前にアップロードされたことがない場合、アカウント内にこのプロジェクトを作成することを確認するよう求められます。アップロードされたことがある場合は、ターミナルにビルドとデプロイのステータスが表示され、プロジェクトが正常にアップロードされた時点で確認メッセージが表示されます。

​
HubSpotでカードを確認する

プロジェクトをアップロードしたら、hs project openを実行することで、HubSpotでプロジェクトを確認できます。新しいブラウザータブが開いてプロジェクト詳細ページが表示されます。このページで、プロジェクト、アプリ、およびそのアプリの新しいカードコンポーネントを確認できます。
アプリとカードコンポーネントが表示された、HubSpotのプロジェクト詳細ページのスクリーンショット
アカウントにまだアプリをインストールしていない場合は、アプリをインストールしてからでないとカードは表示されません。アプリをインストールするには、次の手順に従います。
  • 左側のプロジェクト概要、または［プロジェクトコンポーネント__］セクションにあるアプリの名前をクリックします。
HubSpotのプロジェクト詳細ページに表示されたアプリのスクリーンショット
  • ［配信］****タブをクリックします。
  • ［今すぐインストール］****をクリックします。
アプリの［配信］タブに表示された［今すぐインストール］ボタンのスクリーンショット
hs project addによって作成されるボイラープレート アプリ カードは、コンタクトレコードの中央列に表示されるように設定されています。カードを表示するには、まず、カードをコンタクト レコード ビューに追加する必要があります。
  • HubSpotアカウントで、［CRM］＞［コンタクト］****に移動します。
  • コンタクトの名前をクリックします。
  • コンタクトレコードの中央列の上部にある［カスタマイズ］****をクリックします。
コンタクトタイムラインに表示された［カスタマイズ］ボタンのスクリーンショット
  • ［デフォルトのビュー］****をクリックします。
  • カードの追加先とするタブを選択します。選択したタブで、カードを配置する場所にカーソルを合わせてプラスボタンをクリックすることで、その場所にカードを配置できます。この配置は初期設定後にいつでも調整できます。
コンタクト レコード ビューにカードを追加するためのプラスボタンを示すスクリーンショット
  • 右側のパネルで、［カードライブラリー］****タブをクリックします。次に、［カードタイプ］****ドロップダウンメニューをクリックし、［アプリ］****を選択して、表示されるカードをアプリカードに絞り込みます。
カードライブラリーのアプリフィルターを示すスクリーンショット
  • 作成したアプリカードの下にある［カードを追加］****をクリックし、サイドバーの右上にある閉じるボタンをクリックします。
  • 右上の［保存し、終了］****をクリックします。
コンタクトレコードにリダイレクトされます。コンタクトレコードに、カードが表示されるようになっているはずです。次のステップでローカル開発サーバーを起動するときのために、コンタクトレコードのページはブラウザーで開いたままにしておいてください。

​
ローカル開発を開始する

アプリカードが全てのコンタクトレコードに追加されたので、アプリカードをビルドする作業に移ります。すばやく反復処理するのに最も簡単な方法として、hs project devコマンドでローカル開発サーバーを起動します。
  • ターミナルで、hs project devを実行します。
  • ターミナルプロンプトに従って、ローカル開発で使用するアカウントを選択します。
  • ターミナルでローカル開発サーバーが起動され、稼働中になると確認メッセージが表示されます。
  • サーバーが稼働している状態で、コンタクトレコードが表示されているブラウザータブに戻り、ページを再読み込みします。
アプリカードがDeveloping locallyタグ付きで表示されます。このタグは、ローカル開発サーバーが使用可能な状態であることを示します。
コンタクトタイムラインに表示された、Developing Locallyタグ付きのアプリカードを示すスクリーンショット
ローカル開発サーバーは、アプリカードのフロントエンドReactファイル（.jsxファイルまたは.tsxファイル）に保存された変更を自動的に検出します。.jsonなどの他のタイプのファイルに変更を加える必要がある場合は、更新した後にプロジェクトを再アップロードして、ローカル開発サーバーを再起動する必要があります。

​
次のステップ

カードの外観の設定や機能の強化を行うには、次のリソースを参照してください。

​
hubspot.fetch()サポートを追加する

バックエンドまたはサードパーティーサービスを呼び出すには、アプリの*-hsmeta.json設定ファイルを更新してpermittedUrlsフィールドを追加します。 
"permittedUrls": {
    "fetch": ["https://api.example.com"],
    "img": [],
    "iframe": []
}
permittedUrlsフィールドで、アプリにアクセスを許可する一連のURIを定義します。このフィールドを使用して、アプリが実行時にやり取りできる外部リソースを明示的に制御することによって、アプリとHubSpotの両方のセキュリティーがさらに強化されます。 permittedUrlsフィールドは、特定のプロパティーセットのみがサポートされるオブジェクトです。つまり、ここに任意のキーを渡すことはできません。指定する必要がある最も重要なキーは、fetchです。このキーで、hubspot.fetchを使用してアクセスできるURLを指定します。これは、従来の公開アプリを構築する際の以前のallowedUrlsフィールドに相当します。 hubspot.fetchの使用方法について詳しくは、こちらの既存のドキュメントをご確認ください。

​
以前に作成したアプリカードを移行する

アプリカードが含まれる既存のプロジェクトを開発者プラットフォームに移行する必要がある場合は、以下のガイドをご確認ください。
既存のプロジェクトに、カスタムオブジェクトが接続されたカードが含まれている場合は、移行する前に、アプリにcrm.objects.custom.readスコープが設定されていることを確認してください。最新バージョン2025.2より前に構築されたプロジェクトの場合、カスタム オブジェクト カードをビルドするために必要なスコープはcrm.schemas.custom.readだけでした。最新バージョン（2025.2）の開発者プラットフォームでは、crm.objects.custom.readが必須となります。このスコープを含めなければ、移行中のビルドは次のエラーで失敗します。[ERROR] Build failed or timed out.Inspect the failure to update your build and retry the migration.（ビルドが失敗またはタイムアウトしました。ビルドの更新失敗を調べて、移行を再試行してください）。プロジェクト詳細ページでのステータスにかかわらず、顧客向けのアプリに影響が及ぶことはありません。この問題を修正するには、従来のアプリのスコープにcrm.objects.custom.readスコープを追加し、バージョン2023.2でアプリを再構築してから、もう一度移行を試します。