---
title: "ビューポートリファレンス | Tajo"
description: "Stripe App の UI を描画できる Stripe ダッシュボードのビューポート完全リファレンス"
url: https://tajo.io/jp/docs/stripe-apps/viewports/
markdown: https://tajo.io/jp/docs/stripe-apps/viewports.md
lang: ja-JP
author: "Set Noa"
author_url: https://tajo.io/jp/set-noa/
robots: noindex
---

先行利用を申し込む

お名前と会社のメールアドレスを入力してください。Tajoへのアクセス申請を確認するためのリンクをメールでお送りします。

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

[Set Noa](https://tajo.io/jp/set-noa/)

ビューポートは、Stripe App の UI コンポーネントが Stripe ダッシュボードのどこに表示されるかを定めます。各ビューポートは、アプリがビューを描画できるダッシュボードの特定のページや場所に対応します。

Caution

**ステータス: 予定、未構築です。** Tajo には Stripe App がないため、このセクションの内容は現時点で何もインストールできません。このページに登場するアプリ識別子、URL、認証情報はすべて説明用のプレースホルダーであり、実際に動作するエンドポイントではありません。

## ビューポートの仕組み

アプリのマニフェストでビューを宣言するときに、React コンポーネントをビューポートに対応付けます。

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      }
    ]
  }
}
```

ユーザーが対応するダッシュボードのページに移動してアプリを開くと、コンポーネントがアプリのドロワー（サイドパネル）に描画されます。

## ダッシュボード全体のビューポートとページ固有のビューポート

### ダッシュボード全体のビューポート

これらのビューポートは、Stripe ダッシュボードのすべてのページで利用できます。

| ビューポート ID | 説明 |
| --- | --- |
| `stripe.dashboard.drawer.default` | 既定のドロワービュー。ダッシュボードのどのページからでもアプリアイコンで開けます |
| `stripe.dashboard.home.overview` | ホーム画面の概要。ダッシュボードのトップページに表示されます |
| `stripe.dashboard.settings` | アプリの設定ページ。アプリの設定メニューから開けます |
| `stripe.dashboard.onboarding` | オンボーディングのフロー。アプリのインストール後に表示されます |

Tip

`drawer.default` ビューポートはフォールバックとして機能します。特定のビューポートを宣言していないページでユーザーがアプリを開いた場合は、代わりに `drawer.default` のビューが描画されます。

### ページ固有のビューポート

これらのビューポートは、ユーザーが対応するダッシュボードのページにいるときにだけ描画されます。

## 決済

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | 決済一覧 | `/payments` |  |
| `stripe.dashboard.payment.detail` | 決済の詳細 | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | チャージの詳細 | `/payments/:id`（旧仕様） | Charge |

## 顧客

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | 顧客一覧 | `/customers` |  |
| `stripe.dashboard.customer.detail` | 顧客の詳細 | `/customers/:id` | Customer |

## 商品と価格

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | 商品一覧 | `/products` |  |
| `stripe.dashboard.product.detail` | 商品の詳細 | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | 価格の詳細 | `/prices/:id` | Price |

## 請求書

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | 請求書一覧 | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | 請求書の詳細 | `/invoices/:id` | Invoice |

## サブスクリプション

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | サブスクリプション一覧 | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | サブスクリプションの詳細 | `/subscriptions/:id` | Subscription |

## Checkout

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Checkout セッション一覧 | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Checkout セッションの詳細 | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | 支払いリンク一覧 | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | 支払いリンクの詳細 | `/payment-links/:id` | PaymentLink |

## Connect

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | 連結アカウント一覧 | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | 連結アカウントの詳細 | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | 送金一覧 | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | 送金の詳細 | `/connect/transfers/:id` | Transfer |

## Billing

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | クーポン一覧 | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | クーポンの詳細 | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | 見積もり一覧 | `/quotes` |  |
| `stripe.dashboard.quote.detail` | 見積もりの詳細 | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | クレジットノートの詳細 | `/credit-notes/:id` | CreditNote |

## 入金

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | 入金一覧 | `/payouts` |  |
| `stripe.dashboard.payout.detail` | 入金の詳細 | `/payouts/:id` | Payout |

## 不審請求の申し立て

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | 不審請求の申し立て一覧 | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | 不審請求の申し立ての詳細 | `/disputes/:id` | Dispute |

## Terminal

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | リーダー一覧 | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | リーダーの詳細 | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | ロケーション一覧 | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | ロケーションの詳細 | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ビューポート ID | ページ | URL パターン | オブジェクトの型 |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | カード一覧 | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | カードの詳細 | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | カード保有者一覧 | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | カード保有者の詳細 | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | 取引一覧 | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | オーソリ一覧 | `/issuing/authorizations` |  |

## オブジェクトコンテキストの取得

詳細ビューポートでアプリを描画すると、対応する Stripe オブジェクトがコンテキストとして渡されます。

```typescript
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment }: ExtensionContextValue) => {
  const { objectContext } = environment;

  // objectContext contains the current Stripe object
  const customerId = objectContext?.id; // "cus_xxxxx"
  const customerEmail = objectContext?.email;

  return (
    <Box>
      <Inline>Customer: {customerEmail}</Inline>
      <Inline>Brevo Sync Status: checking...</Inline>
    </Box>
  );
};
```

### 一覧と詳細のコンテキストの違い

| ビューポートの種類 | オブジェクトコンテキスト | ユースケース |
| --- | --- | --- |
| **一覧**（例: `customer.list`） | 利用できません。特定のオブジェクトが選択されていないためです | 集計データ、サマリービュー、一括操作を表示します |
| **詳細**（例: `customer.detail`） | 現在のページに対応する Stripe オブジェクト全体 | オブジェクト固有のデータ、アクション、連携を表示します |

## Tajo の Brevo 連携におすすめのビューポート

Tajo の Brevo 連携アプリでは、次のビューポートがもっとも価値を発揮します。

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      },
      {
        "viewport": "stripe.dashboard.customer.list",
        "component": "CustomerListView"
      },
      {
        "viewport": "stripe.dashboard.payment.detail",
        "component": "PaymentDetailView"
      },
      {
        "viewport": "stripe.dashboard.subscription.detail",
        "component": "SubscriptionDetailView"
      },
      {
        "viewport": "stripe.dashboard.home.overview",
        "component": "OverviewView"
      },
      {
        "viewport": "stripe.dashboard.drawer.default",
        "component": "DrawerView"
      },
      {
        "viewport": "stripe.dashboard.settings",
        "component": "SettingsView"
      },
      {
        "viewport": "stripe.dashboard.onboarding",
        "component": "OnboardingView"
      }
    ]
  }
}
```

| コンポーネント | 目的 |
| --- | --- |
| **CustomerDetailView** | 特定の顧客の Brevo コンタクト情報、同期ステータス、エンゲージメントデータを表示します |
| **CustomerListView** | 一括同期の操作と、Brevo 同期の集計統計を表示します |
| **PaymentDetailView** | この決済によってトリガーされた Brevo イベントを表示します |
| **SubscriptionDetailView** | このサブスクリプションに対する Brevo の自動化の状況を表示します |
| **OverviewView** | 同期の健全性と Brevo の主要指標を示す、ダッシュボードのホームウィジェット |
| **DrawerView** | クイックアクションとステータス概要をまとめた汎用のアプリドロワー |
| **SettingsView** | Brevo の API キー、同期の設定、フィールドマッピングを設定します |
| **OnboardingView** | 新規ユーザーの Brevo アカウント接続をガイドします |

## ビューポートの利用可否

すべてのビューポートが、Stripe ダッシュボードのすべてのモードで使えるわけではありません。

| モード | 利用できるビューポート |
| --- | --- |
| **本番モード** | すべてのビューポート |
| **テストモード** | すべてのビューポート（テストデータを使用） |
| **サンドボックス** | すべてのビューポート（`sandbox_install_compatible: true` の場合） |

Caution

存在しないビューポートをマニフェストで宣言すると、アプリのアップロードは検証に失敗します。ビューポート ID は必ずこのリファレンスと照合してください。