# Stripe Apps の使用を開始する Stripe ダッシュボードでアプリを構築することで、アプリ開発の基礎を学習します。 このガイドでは、Stripe ダッシュボードの顧客の詳細ページで *UI 拡張機能* (A set of APIs that allow you to inject user interface elements into the Stripe Dashboard using TypeScript and React)を使用して、「Hello, world!」サンプルアプリを構築します。 ## はじめに 1. 既存の *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) 拡張機能がある場合は、[Stripe Apps に移行](https://docs.stripe.com/stripe-apps/migrate-extension.md)をご覧ください。 1. [Stripe Dashboard](https://dashboard.stripe.com) に移動してサインインするか、アカウントを作成します。 1. まだインストールしていない場合は、[Stripe CLI](https://docs.stripe.com/stripe-cli.md) をインストールし、同じアカウントを使用してログインします。その他のインストールオプションについては、[Stripe CLI を使ってみる](https://docs.stripe.com/stripe-cli.md)をご覧ください。 1. CLI バージョン 1.12.4 以降を使用していることを確認します。これは以下を実行することで確認できます。 ```bash stripe version ``` Stripe の CLI バージョンが 1.12.4 より前の場合は、[Stripe CLI バージョンを最新バージョンに更新してください](https://docs.stripe.com/stripe-cli/upgrade.md)。 1. 次のコマンドを実行して、[Node.js](https://nodejs.org/) がインストールされていることを確認します: ```bash node -v ``` Stripe Apps には Node.js バージョン `>14 が` 必要です。[アクティブな LTS バージョン](https://nodejs.org/en/about/previous-releases) (18 以降) を使用することをお勧めします。Node.js をインストールしていない場合は、[ダウンロードして](https://nodejs.org/en/download/) インストールします。アプリの依存関係は、NPM または Yarn で管理できます。[アプリを App マーケットプレイスに公開する](https://docs.stripe.com/stripe-apps/publish-app.md) 予定の場合は、さらに次の制限があります: - アカウントは、メールアドレスとビジネスの詳細情報が確認済みで、[有効化](https://docs.stripe.com/get-started/account/set-up.md)されている必要があります。 - 連結したプラットフォームアカウントは、Stripe マーケットプレイスにアプリを公開できません。 ## Stripe Apps CLI プラグインをインストールする Stripe アプリの構築を開始するために、Stripe Apps CLI プラグインをインストールします。 ```bash stripe plugin install apps ``` `apps` プラグインがすでにインストールされている場合は、バージョンが `1.5.12` 以降であることを確認してください。 ```bash stripe apps -v # apps version 1.5.12 ``` `apps` プラグインをアップグレードする必要がある場合は、以下のコマンドを実行します。 ```bash stripe plugin upgrade apps ``` ## アプリを作成する 1. 「Hello, world!」アプリの基本構造を構築します。 ```bash stripe generate app helloworld cd helloworld ``` 1. 指示に従い、以下の情報を入力します。 - **ID**: 自動生成されたアプリ ID を受け入れるか、カスタマイズします。Stripe は、これによってアプリを識別します。[アプリ ID](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#schema) はグローバルに一意である必要があります。 - **表示名**: 表示名を入力します。これは、ダッシュボードに表示されるアプリの名前です。この名前は後でいつでも変更できます。 ### アプリディレクトリのファイル構造 | ファイルパス | 説明 | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `src/views/` | Stripe ダッシュボードで UI 要素を作成する TypeScript ファイルのためのディレクトリ。*ビュー* (A view is a React component that creates UI extensions in the Stripe Dashboard) とも呼ばれます。 | | `src/views/App.tsx` | Customer details ページが Stripe ダッシュボードでレンダリングするサンプル *ビュー* (A view is a React component that creates UI extensions in the Stripe Dashboard)。 | | `src/views/App.test.tsx` | `App.tsx` ビューの機能のテストファイル。 | | `stripe-app.json` | アプリが Stripe プラットフォームとどのように統合されるかを説明する *アプリマニフェスト* (In a Stripe App, the app manifest is a stripe-app.json file in your app's root directory. It defines your app's ID, views, permissions, and other essential properties) ファイル。 | | `package.json` | アプリの依存関係を処理するためのメタデータが含まれるファイル。 | | `yarn.lock` | アプリの依存関係の現在のバージョンをリストする、自動生成されたファイル。 | | `jest.config.ts` | テストファイルを実行するための構成ファイル。 | | `images.d.ts` | Stripe アプリで画像ファイルをサポートするための型宣言。 | | `tsconfig.json` | TypeScript ファイルをコンパイルするための構成ファイル。 | | `.eslintrc.json` | TypeScript ファイルをリンティングするための構成ファイル。 | | `.vscode/extensions.json` | 推奨される VS Code 拡張機能を含むファイル。 | | `.gitignore` | git に特定のファイルまたはフォルダーを無視するように伝えるファイル。 | Stripe Apps は React 17 のみをサポートしています。インストールするすべての依存関係が、このバージョンと互換性があることを確認してください。詳細については、[UI拡張機能の仕組み](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#apps-cant-control-the-react-version)をご覧ください。 ## アプリをプレビューする アプリをローカルで実行し、更新し、変更内容をダッシュボードでプレビューできます。 1. `helloworld` ディレクトリーに移動します。 ```bash cd helloworld ``` 1. アプリをプレビューするには、ローカルの開発サーバーを起動します。 ```bash stripe apps start ``` 1. **Enter** を押してブラウザーを開きます。 > [Stripe ダッシュボードに対応しているブラウザー](https://docs.stripe.com/dashboard/basics.md)をご使用ください。Safari はダッシュボードに対応していません。その他の更新内容については、[GitHub 課題管理ブラウザーのサポート](https://github.com/stripe/stripe-apps/issues/146)でご確認ください。 1. **続行**をクリックして、Stripe アカウントでアプリをプレビューします。 ![プレビューモードを有効にするスクリーンショット](https://b.stripecdn.com/docs-statics-srv/assets/enable_app_preview.7d71712d107d581e0a25a4ebaf71484e.png) アプリのプレビューを有効化 ![Hello World アプリ](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_app.7b1588ce22f93f72ab2ecd07c44dd041.png) ダッシュボードでのアプリ アプリをプレビューする前に[ローカルネットワークアクセスを有効](https://docs.stripe.com/stripe-apps/enable-local-network-access.md)にしてください。 ## アプリを構築する ダッシュボードでアプリをプレビューしている間、ローカルの開発サーバーはアプリのリアルタイムの更新を有効にします。 1. Stripe ダッシュボードページを開き、開発サーバーを実行したまま、`Home.tsx` ファイルのタイトルを変更します。ファイルを保存して、アプリで変更内容を確認します。 1. 同じファイルで `` 終了タグから `>` を削除し、ファイルを保存してエラーを確認します。 ![Hello World エラー](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_error.ee7aeea9d33b54f1e17b108f61741e97.png) Stripe ダッシュボード、ブラウザーの開発者ツール、Stripe CLI のエラーを解決できます。 1. 開発サーバーを停止するには、コマンドラインから **Ctrl+C** を使用します。 これで、サンプルアプリは完成です。次に、Stripe アプリに機能を追加してください。 ## See also - [UI 拡張機能を構築する](https://docs.stripe.com/stripe-apps/build-ui.md) - [サーバー側のロジックを追加する](https://docs.stripe.com/stripe-apps/build-backend.md) - [配布オプション](https://docs.stripe.com/stripe-apps/distribution-options.md)