Zum Hauptinhalt springen
最終更新日: 2025年10月10日
最新バージョン（2025.2）の開発者プラットフォームでのアプリを対象に、Reactベースの設定ページを作成できます。これにより、アプリをインストールしたユーザーがこの設定ページに移動して、各自のアカウント用にアプリをカスタマイズできるようになります。 このガイドでは、Reactを使用して、以前の設定エクスペリエンスを置き換える設定コンポーネントを構築する方法について説明します。新しい設定コンポーネントをデプロイしたその瞬間から、以降アプリをインストールしたユーザーに、以前に作成された設定ページではなく、新しい設定拡張機能が表示されるようになります。 開始する前に、クイックスタートガイドに従って、最新バージョンの開発者プラットフォームで最初のアプリを作成してください。
注:アプリに以前に作成した設定ページがある場合は、このガイドで説明する新しい設定オプションを使用して、設定エクスペリエンスをリファクタリングする必要があります。最新バージョンの開発者プラットフォームで新しい設定コンポーネントの構成を開始する前に、アプリの現行の本番環境バージョンにある全てのインターフェース要素をメモしておくことをお勧めします。アプリの新しい設定コンポーネントに移行すると、これまで使用していた以前のWYSIWYG設定UIにアクセスできなくなります。

​
設定コンポーネントファイルを作成して設定する

まず、/appディレクトリー内に/settings/ディレクトリーを作成し、その中に以下の3つのファイルを追加します。 
├──src
│   ├── app/
│   │   └── settings/
│   │     └── Settings.tsx
│   │     └── settings-hsmeta.json
│   │     └── package.json
└──
これら3つのファイルを編集して、以下のスニペットに示されているボイラープレートコードを含めます。

​
Settings.tsx

import React from 'react';
import { EmptyState, Text } from '@hubspot/ui-extensions';
import { hubspot } from '@hubspot/ui-extensions';

hubspot.extend <
  'settings' >
  (({ context }) => {
    return <Settings context={context} />;
  });

const Settings = ({ context }) => {
  // TODO: Update this JSX code to include the components that fit your settings page.
  return (
    <EmptyState title="Nothing here yet!" layout="vertical">
      <Text>
        Contact '{context.extension.appName}' for upcoming development plans.
      </Text>
    </EmptyState>
  );
};

​
settings-hsmeta.json

{
  "uid": "settings_extension",
  "type": "settings",
  "config": {
    "entrypoint": "/app/settings/Settings.tsx"
  }
}

​
package.json

{
  "name": "hubspot-settings-extension",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "@hubspot/ui-extensions": "latest",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}

​
設定コンポーネントをアップロードしてインストールする

設定コンポーネントをプロジェクトにアップロードするには、次の手順に従います。
  • app/ディレクトリー内で、hs project install-depsを実行してpackage-lock.jsonファイルを作成します。これにより、アップロードされた設定拡張機能のビルドが高速化されるとともに、ローカル開発環境と本番環境の間で依存関係が一致するようになります。
  • 次に、hs project uploadを実行します。開発者プロジェクトの詳細ページに移動します。それには、［開発］****＞［プロジェクト］****に移動し、プロジェクトの名前をクリックします。
  • 詳細ページに、設定コンポーネントがリストされていることを確認します。
プロジェクト詳細ページにアップロードされた設定コンポーネント

​
開発者テストアカウントで設定ページを確認する

  • 設定コンポーネントが正常に動作していることを確認するには、アプリをインストールした開発者テストアカウントに移動して、［マーケットプレイス］****アイコンをクリックし、［接続されたアプリ］****をクリックします。
開発者テストアカウントで［接続されたアプリ］に移動
  • アプリの名前をクリックします。これにより、アプリの設定ページに移動するはずです。
テストアカウントでの空の状態の基本設定コンポーネント
ここからは、アプリカードを作成する場合と同様の方法で、設定コンポーネントの作成を続行できます。UI拡張機能の作成に関する既存の制限事項の全てが、設定ページの作成にも適用されます。
  • バックエンドを使用して設定を保存、取得するために、hubspot.fetchを使用します。このアプローチを使用する方法について詳しくは、従来のドキュメントをご確認ください。
  • 拡張機能を作成する際にReactコンポーネントを使用する方法や、Figmaデザインキットのコンポーネントを使用する方法については、標準コンポーネントに関するリファレンスドキュメントをご確認ください。
  • hs project devコマンドを使用して、ローカルで設定ページを作成する作業を繰り返し、その都度変更内容をプレビューします。

​
コンポーネントのベストプラクティス

以降のセクションで、アプリの設定エクスペリエンスを作成する際に留意すべきいくつかのベストプラクティスについて説明します。

​
コンテンツを整理する

設定拡張機能に、ユーザーの全ての設定データを分類して整理する理由となるだけの十分なコンテンツがある場合は、必要に応じてパネル、モーダル、アコーディオン、タブコンポーネントを使用することを検討してください。設定コンポーネントと各コンポーネントで取得する必要がある対応するデータをどのように表示して配置するかを検討します。

​
タブ

複数のタブを使用する場合は、defaultタブのバリアントを使用します。設定拡張機能がネストされたバリアントタブにすでに表示されるようになっている場合、2つ目のタブをネストすると、デザインとの視覚的調和が取れなくなります。
設定ページ上のネストされたタブの例
次のスニペットは、複数のタブを構造化する方法を示しています。 
<Tabs>

<Tab title="First Tab">
<Text>Here is the content of the first tab.</Text>
</Tab>
<Tab title="Second Tab">
<Text>This is where the content of the second tab goes.</Text>
</Tab>

</Tabs>
⌘I