# ビューポートリファレンス

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)