# ビューポートリファレンス Stripe アプリで使用できるビューポートと、どのようにエンドユーザーに表示される化を示すリストです。 ビューポートは、ビューの表示が可能なダッシュボード内のページを指定します。ビューポートが提供する `environment.objectContext` オブジェクトにより、現在のページの Stripe オブジェクトのコンテキストを受信できるようになります。詳細については、[ダッシュボードで Stripe オブジェクトにアクセスする](https://docs.stripe.com/stripe-apps/build-ui.md#access-stripe-objects)をご覧ください。 UI 拡張機能で使用できるビューポート: | Viewport (ビューポート) ID | ページ | URL | オブジェクトタイプ | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | ------------------------- | | **`stripe.dashboard.payment.list`** | 支払いページ | `dashboard.stripe.com/payments` | `null` | | **`stripe.dashboard.payment.detail`** | 支払いの詳細ページ | `dashboard.stripe.com/payments/:id` | `charge`、`payment_intent` | | **`stripe.dashboard.customer.list`** | 顧客ページ | `dashboard.stripe.com/customers` | `null` | | **`stripe.dashboard.customer.detail`** | 顧客の詳細ページ | `dashboard.stripe.com/customers/:id` | `customer` | | **`stripe.dashboard.invoice.list`** | 請求書ページ | `dashboard.stripe.com/invoices` | `null` | | **`stripe.dashboard.invoice.detail`** | 請求書の詳細ページ | `dashboard.stripe.com/invoices/:id` | `invoice` | | **`stripe.dashboard.product.list`** | 商品ページ | `dashboard.stripe.com/products/` | `null` | | **`stripe.dashboard.product.detail`** | 商品の詳細ページ | `dashboard.stripe.com/products/:id` | `product` | | **`stripe.dashboard.subscription.list`** | サブスクリプションページ | `dashboard.stripe.com/subscriptions` | `null` | | **`stripe.dashboard.subscription.detail`** | サブスクリプションの詳細ページ | `dashboard.stripe.com/subscriptions/:id` | `subscription` | | **`stripe.dashboard.payment-link.list`** | Payment Links ページ | `dashboard.stripe.com/payment-links` | `null` | | **`stripe.dashboard.payment-link.detail`** | Payment Links の詳細ページ | `dashboard.stripe.com/payment-links/:id` | `payment_link` | | **`stripe.dashboard.home.overview`** | ダッシュボードのホームページ | `dashboard.stripe.com/dashboard` | `null` | | **`stripe.dashboard.balance.overview`** | 残高ページ | `dashboard.stripe.com/balance/overview` | `null` | | **`stripe.dashboard.billing.overview`** | Billing ページ | `dashboard.stripe.com/billing` | `null` | | **`stripe.dashboard.report.overview`** | レポート > 概要ページ | `dashboard.stripe.com/reports/hub` | `null` | | **`stripe.dashboard.revenue-recognition.overview`** | Revenue Recognition ページ | `dashboard.stripe.com/revenue-recognition` | `null` | | **`stripe.dashboard.shipping-rates.list`** | 配送料金ページ | `dashboard.stripe.com/shipping-rates` | `null` | | **`stripe.dashboard.shipping-rates.detail`** | 配送料金の詳細ページ | `dashboard.stripe.com/shipping-rates/:id` | `shipping_rate` | | **`stripe.dashboard.tax-report.overview`** | レポート > 税金ページ | `dashboard.stripe.com/tax/reporting` | `null` | | **`stripe.dashboard.drawer.default`** | すべてのページで使用可能 (詳細については、[ダッシュボード全体での可用性](https://docs.stripe.com/stripe-apps/reference/viewports.md#dashboard-wide-availability)をご覧ください) | `null` | | | **`onboarding`** | インストール後のユーザー設定プロセスを指定します。`OnboardingView`コンポーネントをルート要素として使用すると、モーダルウィンドウ内に表示されます。詳細については、[OnboardingView ガイド](https://docs.stripe.com/stripe-apps/components/onboardingview.md) を参照してください。 | `null` | | | **`settings`** | アプリの設定ページ (詳細については、[Add an app settings page](https://docs.stripe.com/stripe-apps/app-settings.md)を参照してください)。 | `null` | | ## アプリケーションの可用性 アプリケーションをダッシュボードのすべてのページで使用できるようにするか、 1 つのページに固有のものにすることができます。 ### ダッシュボード全体での可用性 アプリが `stripe.dashboard.drawer.default` ビューポートのビューを指定する場合、このビューは、ページ固有のビューが定義されているページを除く、ダッシュボードのすべてのページに表示されます。 たとえば、アプリの `stripe-app.json` マニフェストの `ui_extension.views` フィールドが以下のようであるとします。 ```json { "id": "com.example.app", "version": "1.2.3", "name": "Example App", "icon": "./example_icon_32.png", "permissions": [ { "permission": "customer_read", "purpose": "Receive access to the customer information" } ],"ui_extension": { "views": [ { "viewport": "stripe.dashboard.customer.detail", "component": "CustomerView" }, { "viewport": "stripe.dashboard.drawer.default", "component": "EverywhereElseView" } ] } } ``` アプリケーションが顧客の詳細ページで開かれる場合は “CustomerView” が表示され、ダッシュボードのその他すべてのページでは “EverywhereElseView” が表示されます。 `stripe.dashboard.drawer.default` ビューは、ページ固有のビューと同じ方法では `objectContext` データを受信しません。アプリが「請求書の詳細」ページに表示される請求書の `id` などの情報にアクセスする必要がある場合は、`stripe.dashboard.invoice.detail` ビューポートを使用するビューを作成する必要があります。詳細については、[ページ固有の可用性](https://docs.stripe.com/stripe-apps/reference/viewports.md#page-specific-availability)をご覧ください。 ### ページ固有の可用性 ページ固有のビューは、ユーザーが表示している現在のページに関連しています。また、アプリが `environment` プロパティーを使用してページに関する追加のコンテキストを受信できるようにします。詳細については、[ダッシュボードで Stripe オブジェクトにアクセスする](https://docs.stripe.com/stripe-apps/build-ui.md#access-stripe-objects)をご覧ください。 たとえば、アプリに `stripe.dashboard.product.detail` ビューポートのビューがある場合、ユーザーが商品の詳細ページでアプリを開くと、そのビューがアプリに表示されます。 アプリに現在のページのページ固有のビューもアプリ固有のデフォルトのビューもない場合は、ドロワーには、ユーザーにアプリへのアクセス方法を示す一般的なデフォルトのビューが表示されます。 たとえば、アプリで、以下のアプリのマニフェストに表示される、ページ固有のビューポートに 2 つのビューがあるとします。 ```json { "id": "com.example.app", "version": "1.2.3", "name": "Example App", "icon": "./example_icon_32.png", "permissions": [ { "permission": "customer_read", "purpose": "Receive access to the customer information" } ],"ui_extension": { "views": [ { "viewport": "stripe.dashboard.customer.detail", "component": "CustomerView" }, { "viewport": "stripe.dashboard.product.detail", "component": "ProductView" } ] } } ``` エンドユーザーがダッシュボードのホームページでアプリを開くと、アプリケーションには、顧客ページと商品ページへのリンクが表示されます。ユーザーが顧客ページに移動すると、アプリには、関連情報を表示する顧客の選択をユーザーに求めるメッセージが表示されます。 ## See also - [アプリの設計](https://docs.stripe.com/stripe-apps/design.md) - [UI Extensions の仕組み](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md) - [権限リファレンス](https://docs.stripe.com/stripe-apps/reference/permissions.md) - [UI 拡張機能 SDK リファレンス](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md)