旧バージョンの開発者フレームワークで非公開アプリを構築したことがある場合は、アプリの設定を新しいフレームワーク(2025.2)に手動で移行できます。
このガイドでは、次の項目について概説します。
- まず、既存のプロジェクトを複製することで、元のファイルをバックアップとして利用可能にします。その後、関連するそれぞれの設定ファイルをレビューして、新しいプロジェクトスキーマに確実に準拠させます。その際、コンポーネント設定ファイルの名前と構造、および該当するプロパティーを少し更新する必要があります。
- 次に、既存の最上位レベルの設定ファイル
hsproject.jsonおよびapp.jsonを更新します。
- その後、以降の各セクションに従い、開発者プラットフォームのバージョン
2025.2に適合するようにアプリコンポーネントの設定を更新できます。その際、設定済みの既存の機能(例えばUI拡張機能を使っ構築されたアプリカード)に基づいて更新を行います。
- なお、
hsproject.jsonファイルを除く他の全ての設定ファイルは、予測可能な命名スキーム(*-hsmeta.json、ただし*は特定のディレクトリーまたはコンポーネントに基づく)に従うこと、また全て同じ最上位レベルのプロパティーを共有することに注意してください。
{
"uid": "example-unique-identifier",
"type": "example-component",
"config": {
...
}
}
- 複製した既存プロジェクトの全てのコンポーネントの更新が終わったら、本ガイドの最後のステップで、新しいプロジェクトをHubSpot開発者アカウントにアップロードします。
非公開アプリを移行する前に、以下の制限事項に留意してください。
- 自動移行は現在サポートされていないため、既存の非公開アプリ用にはHubSpot CLI移行コマンドがサポートされていません。
- GitHubから自動アップロードとビルドをトリガーするGitHub連携は、まだサポートされていません。既存のプロジェクトが現在GitHubにリンクされている場合は、移行を始める前に、必ず連携を無効にしてください。GitHub連携を無効にして、CI/CD自動化のためのGitHubアクションをセットアップするには、こちらの記事の手順をご覧ください。
既存のプロジェクト設定ファイルを複製する
何らかの更新を行う前に、既存のプロジェクトを複製します。これはバックアップとなり、問題が発生した場合にこれを参照またはフォールバックできます。プロジェクトを複製した後、複製されたプロジェクトファイルをVSCodeなどの任意のIDEで開きます。
新しい2025.2スキーマに準拠した最小規模のプロジェクトを参照したい場合は、ボイラープレートテンプレートを次のようにダウンロードできます。
- コマンド
npm i -g @hubspot/cli@nextを実行して、HubSpot CLIの最新のベータ版バージョンがインストールされたことを確認し、hs authおよびhs accounts useコマンドを使用してそれをアカウントに接続します。
- ターミナルで以下のコマンドを実行することにより、
private配布およびstatic認証を使用するアプリ用のボイラープレートテンプレートに基づくプロジェクトを作成します。
hs project create --templateSource robrown-hubspot/hubspot-project-components-ua-app-objects-beta
- プロンブトに従って、名前と、ボイラープレートテンプレートのダウンロード先のローカルディレクトリーを指定します。
- テンプレートを選択するよう求められたら、[Getting started project with private app using an access token(アクセストークンを使用した非公開アプリのプロジェクトを開始)]****を選択します。
- 新しく作成したプロジェクトを任意のエディターで開きます。次に、プロジェクトディレクトリー構造および関連する
*-hsmeta.jsonスキーマファイルを既存のプロジェクトと比較して、該当する仕様が一致していることを確認できます。テンプレートはあくまで参考用ですから、直接編集しないでください。そうする代わりに、上記で説明したプロジェクトの複製バージョンを編集することをお勧めします。
開発者プラットフォームのバージョン2025.2の新しいプロジェクト構造に関する詳細なリファレンスは、アプリ設定ガイドで詳しく説明されています。
hsproject.json設定を更新する
最上位レベルのhsproject.jsonを変更する際には、以下のコードブロックに示すとおり、nameプロパティーとplatformVersionプロパティーを少し変更します。
従来
{
"name": "My old private app",
"srcDir": "src",
"platformVersion": "2025.1"
}
変更後:
{
"name": "My new migrated app (Developer platform v2025.2)",
"srcDir": "src",
"platformVersion": "2025.2"
}
プロジェクトの最上位レベルのhsproject.jsonファイルは新しい開発者プラットフォームでも同じ場所にありますが、platformVersionを"2025.2"に更新する必要があります。また、アップロード時に既存のプロジェクトがオーバーライドされないように、nameフィールドを一意の名前に更新することもできます。例えば、既存の非公開アプリの名前がMy private appである場合、古いアプリと区別するために(Developer Platform v2025.2)などを付加できます。
アプリの最上位レベルのスキーマをレビューする
以下のコードブロックは、必要な変更を行う前と後の設定例を示しています。
変更前(src/app/app.json):
{
"name": "My old private app",
"description": "This is an example of private app on the old developer platform.",
"scopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"uid": "my-old-private-app",
"public": false,
"extensions": {
"crm": {
"cards": [
{
"file": "extensions/example-card.json"
}
]
}
},
"webhooks": {
"files": "./webhooks/webhooks.json"
}
}
変更後(src/app/app-hsmeta.json):
{
"uid": "new_developer_platform_app",
"type": "app",
"config": {
"description": "Example of migrated app on the new developer platform.",
"name": "My new migrated app (Developer platform v2025.2)",
"distribution": "private",
"auth": {
"type": "static",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"permittedUrls": {
"fetch": ["https://api.example.com"],
"iframe": [],
"img": []
},
"support": {
"supportEmail": "[email protected]",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
}
}
}
開発者プラットフォームの旧バージョンでは、非公開アプリの設定はapp.jsonファイルで指定されていました。現在、アプリのこれらの詳細設定は、/src/app/app-hsmeta.jsonファイル内のアプリ スキーマ ファイルで指定されるようになっています。以前のapp.json設定と新しいapp-hsmeta.json設定の主な変更点は次のとおりです。
- 最上位レベルの
publicプロパティーはdistributionに置換され、これをprivateに設定する必要があります。なお、authフィールドのtypeサブプロパティーをstaticに設定する必要があります。これにより、アプリのインストールが1つのアカウントに制限されます。アプリの配布と認証の詳細については、アプリ設定ガイドを参照してください。
- 現在ではアプリのスコープが
authフィールドのサブプロパティーとして指定され、requiredScopes、conditionallyRequiredScopes、optionalScopesに分割されるようになりました。これらの各スコープタイプの指定については、アプリ設定ガイドをご確認ください。
- 以前のプロジェクトの最上位レベル
extensionsプロパティーを定義する必要はありません。これは、新しいapp-hsmeta.jsonファイルにこのプロパティーが存在しないからです。以前に設定されたUI拡張機能(例えばCRMレコードページ上のカード)は、プロジェクトのcards/ディレクトリーを使って管理されます。そのディレクトリー内では、カード設定の詳細が*-hsmeta.jsonファイルで指定され、*-hsmeta.jsonファイルのentrypointプロパティーを使って参照される.jsxファイルではカードのコンポーネントコードが提供されます。
- また、Webhookの設定と管理はプロジェクトの
webhooks/ディレクトリーを使って行われるので、新しいapp-hsmeta.jsonファイルで以前のプロジェクトの最上位レベルwebhooksプロパティーを定義する必要もありません。詳細については後述のWebhook配信登録(サブスクリプション)を移行するセクションをご覧ください。
個々のコンポーネント設定を更新する
以下のセクションでは、UI拡張機能やWebhookを新しいアプリに移植する方法について概説します。以前のアプリにこれらのコンポーネントが含まれていなかった場合は、プロジェクトをアップロードするセクションに進んでください。
UI拡張機能を使用して作成されたCRMカードを移行する
以下のコードブロックは、必要な変更を行う前と後の設定例を示しています。
変更前(src/app/extensions/card.json):
{
"type": "crm-card",
"data": {
"title": "example app card",
"uid": "example_app_card_private_static",
"location": "crm.record.tab",
"module": {
"file": "example-app-card.jsx"
},
"objectTypes": [
{
"name": "contacts"
}
]
}
}
変更後(src/app/cards/example-app-card-hsmeta.json):
{
"uid": "example_app_card_private_static",
"type": "card",
"config": {
"name": "example app card",
"description": "Provides detailed information about a contact or company.",
"previewImage": {
"file": "./full-preview.png",
"altText": "This describes the image"
},
"entrypoint": "/app/cards/example-app-card.jsx",
"location": "crm.record.tab",
"objectTypes": ["CONTACT"]
}
}
現在、CRMカードはプロジェクトのcards/ディレクトリー内で設定されるようになり、古いプロジェクトの古いextensions/ディレクトリーから置き換わります。新しいcards/ディレクトリー内では、カード設定の詳細が*-hsmeta.jsonファイルで指定され、*-hsmeta.jsonファイルのentrypointプロパティーを使って参照される.jsxファイルではカードのコンポーネントコードが提供されます。
旧バージョンのアプリのUI拡張コードを移植するには、以前のapp.jsonから該当する全ての値をcards/ディレクトリーの*-hsmeta.jsonファイル内の関連するプロパティーにコピーします。その際、次の変更点に留意してください。
typeプロパティーの値が"crm-card"から"card"に変更されました。
uidプロパティーがdataフィールドのサブプロパティーから上に移動され、設定の最上位レベルで指定されるようになりました。
dataプロパティーがconfigに変更され、次のサブプロパティーが含まれるようになりました。
titleプロパティーの名前がnameに変更されました。
- 新しい
descriptionプロパティーでは、カードの機能についてより多くのコンテキストを説明できます。この説明はアプリのプロジェクト設定に表示されます。
moduleプロパティーの名前がentrypointに変更され、その値はJSXコンポーネントへのパスを表す文字列(プロジェクトのルートを基準とした相対パス)になりました(例:"/app/cards/example-app-card.jsx")。
objectTypesプロパティーが簡略化され、カードの表示場所となるオブジェクトタイプを表す文字列の配列になりました(例:["CONTACT", "COMPANY"])。
locationプロパティーは変更されず、これをcrm.record.tab、crm.record.sidebar、helpdesk.sidebarのいずれかに設定できます。
ボイラープレート プロジェクト テンプレートをダウンロードした場合、サンプルのexample-app-card-hsmeta.json設定ファイルおよびexample-app-card.jsx JSXコンポーネントがsrc/app/cardsディレクトリーに提供されています。
新しい開発者プラットフォームでアプリカードを作成する方法について詳しくは、こちらの記事をご覧ください。
Webhook配信登録(サブスクリプション)を移行する
以下のコードブロックは、必要な変更を行う前と後の設定例を示しています。
変更前(src/app/webhooks/webhooks.json):
{
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
変更後(src/app/webhooks/webhooks-hsmeta.json):
{
"uid": "webhooks",
"type": "webhooks",
"config": {
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
}
}
Webhook配信登録は、引き続きプロジェクトのwebhooks/ディレクトリー内で管理されます。ディレクトリー内では、配信登録の詳細は*-hsmeta.jsonファイルで指定されます。ファイルの構造は非公開アプリの以前のwebhooks.jsonスキーマとほぼ同じですが、次の主な変更点に留意してください。
- 必須の
uidプロパティーを*-hsmeta.jsonファイルの最上位レベルで定義する必要があり、他のアプリ機能と区別される名前をこれに提供する必要があります(例:"migrated_private_app_webhooks")。
- また、必須の
typeプロパティーを*-hsmeta.json設定の最上位レベルで定義し、これを"webhooks"に設定する必要があります。
subscriptionsプロパティーとsettingsプロパティーはwebhooks.jsonから変更されていませんが、*-hsmeta.jsonファイルの最上位レベルで定義されるconfigプロパティーの中にこれらを移動する必要があります。
新しい開発者プラットフォームでのWebhook配信登録の定義に関する詳細なリファレンスについては、こちらの記事をご覧ください。
プロジェクトをアップロードする
既存の非公開アプリの設定をプロジェクトの各サブディレクトリーの中に移行した後は、新しいアプリをHubSpotアカウントにアップロードできます。その場所から、APIリクエストの認証に使用できるアプリのアクセストークンを見つけたり、新しい開発者プラットフォームで機能を構築し続けたりできます。
既存の非公開アプリでサーバーレス関数が定義されていた場合:- 旧プロジェクトの
src/app/app.functionsのバックアップを作成します。それとともに、
プロジェクト内の他の場所にあるサーバーレス関数を指す関連する参照も
バックアップします。 - サーバーレス関数を、新しいアプリの一部としてアップロードされるプロジェクトディレクトリーに含めないで
ください。プロジェクトをアップロードした後は、
下記のセクション
の手順に従って、
新しい開発者プラットフォームで同じ動作を再作成できます。
新しいプロジェクトをアップロードするには、次のCLIコマンドを実行します。
サーバーレス関数の処理を移行する
非公開アプリにサーバーレス関数が含まれていた場合は、独自のRESTベースのバックエンドサービスを作成し、hubspot.fetch()APIを使ってデータを取得する必要があります。その際、HubSpotでホスティングされるサーバーレス関数で以前に定義されていた既存のサービスロジックと、非公開アプリのアクセストークンを、サードパーティーのホスティングプラットフォーム(Vercel、DigitalOcean、AWSなど)に移行する必要があります。
サーバーレス関数ロジックをサードパーティーのホスティングプラットフォームに移行するには、次のようにします。
- 既存の非公開アプリプロジェクトの
src/app/app.functionsディレクトリー内でサーバーレス関数を見つけます。
- 関数にある該当するロジックを全てコピーします。以下のサーバーレス関数の例では、4行目のみをコピーする必要があります。
exports.main = async (context = {}) => {
const { text } = context.parameters;
const response = `This is coming from a serverless function! You entered: ${text}`;
return response;
};
-
サードパーティーのホスティングプラットフォームで、以前のサーバーレス関数定義のロジックを貼り付け、パラメーター名が全て合致していることを確認します。ご使用のプラットフォームでのサーバーレス関数の定義に関するドキュメントを参照してください。
-
アプリのプロジェクト詳細ページからアクセストークンをコピーし、サードパーティーのホスティングプラットフォームの環境変数としてそれを追加して、コードから参照できるようにします。
-
次に、最上位レベルの
app-hsmeta.jsonスキーマファイルのpermittedUrlsプロパティーを更新して、fetchフィールドを含める必要があります。このフィールドの値は、サードパーティーのホスティングプラットフォームでホスティングされるエンドポイントのURLを含む配列に設定してください。
-
次に、アプリカードのReactコード内の全ての参照を更新して、セットアップした新しいサーバーレス関数URLを呼び出すようにします。
hubspot.fetch()の使用について詳しくは、こちらのガイドをご覧ください。
例えば、非公開アプリのReactコードでは、以前に次のようなサーバーレス関数が呼び出されていたとします。
const { response } = await runServerless({
name: "myFunc",
parameters: { text: text },
});
その場合、新しいプロジェクトのコードを例えば次のように更新します。
const response = await hubspot.fetch("https://my-new-serverless-function.example.app/api/example-function.js", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: "hello" }),
});
片付ける
こうして新しいプロジェクトを正常にアップロードし、サーバーレス関数の処理(該当する場合)を全てに移行し、アプリの動作に一貫性があることを十分にテストした後は、HubSpot開発者アカウント内の古いプロジェクトを削除できます。このガイドの最初のステップで概説したように、参照用に必要になった場合に備えて、プロジェクトの元のバックアップがローカルに残っていることに留意してください。
開発者アカウントから古いプロジェクトを削除するには、次のようにします。
- HubSpotアカウントで、[開発]に移動します**。**
- [****プロジェクト]ページで、古いプロジェクトの名前をクリックします。
- 「設定」 タブをクリックする。
- [このプロジェクトを削除]__で、****[[プロジェクト名]を削除]をクリックします。
- ダイアログボックスの情報を確認して、続行してもよいことを確定します。次に、プロジェクトの名前を入力して[プロジェクトを削除]をクリックします****。
次のステップ
ここまで、以前の非公開アプリからコンポーネントと設定を手動で移行しました。引き続き新しい開発者プラットフォームで機能を開発するには、以下のフォローアップガイドをご覧ください。
Last modified on December 10, 2025