アプリカードを作成する（ベータ版）

​

前提条件

• HubSpot CLIの最新のベータ版がインストール済みであることを確認します。
• まだアプリを作成していない場合は、作成します。
• 隔離された環境でビルドしてテストできるように、構成可能なテストアカウントを作成することをお勧めします。

​

アプリカードを作成する

1

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

新しいアプリ カード コンポーネントをプロジェクトに追加するには、ターミナルを使用してローカル プロジェクト ディレクトリーに移動し、次のコマンドを実行します。

Report incorrect code

Copy

Ask AI

hs project add

追加するコンポーネントを選択するように求められたら、［カード****］を選択します。プロジェクトにまだ1つもアプリカードが含まれていない場合は、app/ディレクトリー内にcards/ディレクトリーが作成されます。cards/ディレクトリーには次のファイルが格納されます。

• JSONカード設定ファイル（*-hsmeta.json）
• Reactコンポーネントファイル（.jsx）
• package.jsonファイル

プロジェクトにアプリカードがすでに含まれている場合、上記のファイルは既存のcards/ディレクトリーに追加されます（ただし、既存のpackage.jsonは追加されません）。

Report incorrect code

Copy

Ask AI

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でカードを確認する

• 左側のプロジェクト概要、または［プロジェクトコンポーネント__］セクションにあるアプリの名前をクリックします。

• ［配信］****タブをクリックします。
• ［今すぐインストール］****をクリックします。

• HubSpotアカウントで、［CRM］＞［コンタクト］****に移動します。
• コンタクトの名前をクリックします。
• コンタクトレコードの中央列の上部にある［カスタマイズ］****をクリックします。

• ［デフォルトのビュー］****をクリックします。
• カードの追加先とするタブを選択します。選択したタブで、カードを配置する場所にカーソルを合わせてプラスボタンをクリックすることで、その場所にカードを配置できます。この配置は初期設定後にいつでも調整できます。

• 右側のパネルで、［カードライブラリー］****タブをクリックします。次に、［カードタイプ］****ドロップダウンメニューをクリックし、［アプリ］****を選択して、表示されるカードをアプリカードに絞り込みます。

• 作成したアプリカードの下にある［カードを追加］****をクリックし、サイドバーの右上にある閉じるボタンをクリックします。
• 右上の［保存し、終了］****をクリックします。

​

ローカル開発を開始する

• ターミナルで、hs project devを実行します。
• ターミナルプロンプトに従って、ローカル開発で使用するアカウントを選択します。
• ターミナルでローカル開発サーバーが起動され、稼働中になると確認メッセージが表示されます。
• サーバーが稼働している状態で、コンタクトレコードが表示されているブラウザータブに戻り、ページを再読み込みします。

​

次のステップ

• カードにさらにUIコンポーネントを追加するには、UI拡張機能コンポーネントに関するリファレンスドキュメントを参照してください。
• アプリカードのリファレンスドキュメントで、アプリカードの全ての設定オプションやその他の詳細を確認できます。
• UI拡張機能SDKリファレンスで、UI拡張機能に使用できる全てのユーティリティーとメソッドを確認できます。

​

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

"permittedUrls": {
    "fetch": ["https://api.example.com"],
    "img": [],
    "iframe": []
}

​

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

• 既存の公開アプリを移行する
• 既存の非公開アプリを移行する