> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> ネイティブからWebへのSSOとセッション転送トークンを使用して、iOS または Android アプリから Web アプリ内の安全で認証済みのサブスクリプションフローへ、ユーザーをシームレスに移行できます。

# ユースケース: ネイティブからWebへのSSOを使用してモバイルからWebへの支払いフローを設定する

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

<Card title="始める前に">
  1. ネイティブアプリケーションと Web アプリケーションを登録・設定するための Auth0 テナントを作成します。

  2. Auth0 テナント向けに [Auth0 CLI](https://github.com/auth0/auth0-cli) をインストールして設定します。

  3. お使いのプラットフォームに対応する Quickstart を使って、ネイティブアプリケーションに Auth0 認証を追加します。

  * [iOS Swift Quickstart](/docs/ja-jp/quickstart/native/ios-swift/interactive)
  * [Android Quickstart](/docs/ja-jp/quickstart/native/android/interactive)

  4. ネイティブアプリケーションに [refresh\_token](/docs/ja-jp/secure/tokens/refresh-tokens/get-refresh-tokens) のサポートを追加します。

  5. [React Single Page App Quickstart](/docs/ja-jp/quickstart/spa/react/interactive) を使って、Web アプリケーションに Auth0 認証を追加します。
</Card>

[Native to Web シングルサインオン (SSO)](/docs/ja-jp/authenticate/single-sign-on/native-to-web) を使用すると、ネイティブアプリケーションと Web ベースの有料メンバーシップフローの間で、シームレスかつ安全なユーザー体験を実現できます。Native to Web <Tooltip tip="シングルサインオン (SSO): ユーザーが 1 つのアプリケーションにログインすると、他のアプリケーションにも自動的にログインできる仕組みです。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=SSO">SSO</Tooltip> により、ネイティブアプリケーションは、有効期限の短い安全な `session_transfer_token` を使って、ユーザーの認証コンテキストを Web アプリケーションに送信できます。

以下のセクションでは、次の機能を追加する方法を説明します。

* ネイティブアプリケーションには、認証済みユーザーが安全な Web チェックアウト画面を通じて有料メンバーシッププランに登録できる「今すぐ登録」ボタン。
* Web アプリケーションには、ユーザーが再度ログインすることなくメンバーシップのサブスクリプションを選択できる「サブスクリプション」ページ。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  このユースケースでは、Auth0 React SDK を使用する React ベースの Web アプリケーションに焦点を当てています。

  Node や Express など別のフレームワークを使用している場合でも、URL パラメーターまたは Cookie を介して `session_transfer_token` を管理するロジックに応じて適宜対応できます。
</Callout>

<div id="configure-auth0-cli">
  ## Auth0 CLI を設定する
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  [Auth0 CLI](https://github.com/auth0/auth0-cli) を使用して、Auth0 テナントを設定します。[Auth0 Management API](https://auth0.com/docs/api/management/v2) を使用することもできます。詳しくは、[ネイティブからWebへのSSOを設定する](/docs/ja-jp/authenticate/single-sign-on/native-to-web/configure-implement-native-to-web#configure-native-applications) を参照してください。
</Callout>

次の手順に従って、[Auth0 CLI](https://github.com/auth0/auth0-cli) を使用して Auth0 テナントに認証します。

1. Auth0 CLI を初期化する

```bash lines theme={null}
auth0 login
```

2. **As a user** を選択し、ログインフローに従います。

```bash lines theme={null}
How would you like to authenticate?
> As a user
  As a machine
```

3. ネイティブからWebへのSSOを有効にするAuth0 テナントを選択します。

<div id="configure-auth0">
  ## Auth0 を設定する
</div>

<div id="enable-native-to-web-sso-in-your-native-application">
  ### ネイティブアプリケーションでネイティブからWebへのSSOを有効にする
</div>

ネイティブからWebへのSSOでは、ネイティブアプリケーションからWebアプリケーションへのSSOを確立するために `session_transfer_token` を使用します。`session_transfer_token` を使用すると、Auth0 はユーザー、元のネイティブアプリケーション、および追加のコンテキストを安全に識別できます。詳しくは、[Native to Web SSO](/docs/ja-jp/authenticate/single-sign-on/native-to-web/configure-implement-native-to-web) をご覧ください。

Auth0 CLI を使用してネイティブからWebへのSSOを有効にします:

export const codeExample1 = `auth0 apps session-transfer update {yourClientId} --can-create-token=true --enforce-device-binding=asn`;

<AuthCodeBlock children={codeExample1} language="bash" />

<div id="enable-native-to-web-sso-in-your-web-application">
  ### WebアプリケーションでネイティブからWebへのSSOを有効にする
</div>

Auth0 CLIを使用して、CookieまたはURLパラメーター経由の認証で `session_transfer_token` を受け入れられるよう、Webアプリケーションを有効にします。

export const codeExample2 = `auth0 apps session-transfer update {yourClientId}  --allowed-auth-methods=cookie,query`;

<AuthCodeBlock children={codeExample2} language="bash" />

`session_transfer_token` が Cookie としてブラウザーに設定される場合、ウェブアプリケーション側で追加の変更を行う必要はありません。必要なのは、ユーザーを Auth0 テナントの `/authorize` エンドポイントにリダイレクトするために、ブラウザーが[アプリケーションの Login URI](https://sus.auth0.com/docs/get-started/applications/application-settings#application-uris) に遷移することだけです。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Application Login URI は、Auth0 Dashboard のアプリケーション設定で構成できます。これは、外部ソースからログインが開始されたときに Auth0 がユーザーをリダイレクトする先のルートです。
</Callout>

<div id="create-a-subscription-page-in-the-web-application">
  ## Webアプリケーションにサブスクリプションページを作成する
</div>

サブスクリプションページを作成するため、`/src/views/` に新しいファイルを追加します:

<div id="step-1-add-a-new-view-file">
  ### ステップ 1: 新しいビューファイルを追加する
</div>

`src/views/JoinMembership.js` にファイルを作成します。このファイルでは、ユーザーに有料サブスクリプションの手続きを完了するよう求めます。

```js lines expandable theme={null}
import React, { useEffect } from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { useLocation } from "react-router-dom";
import { Container, Button } from "reactstrap";
import Loading from "../components/Loading";

const JoinMembership = () => {
  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
  const location = useLocation();

  useEffect(() => {
    if (isLoading || isAuthenticated) return;

    const params = new URLSearchParams(location.search);
    const token = params.get("session_transfer_token");

    const redirectOptions = {
      appState: { returnTo: "/join-membership" },
      authorizationParams: {},
    };

    if (token) {
      redirectOptions.authorizationParams.session_transfer_token = token;
    }

    loginWithRedirect(redirectOptions);
  }, [isAuthenticated, isLoading, loginWithRedirect, location.search]);

  if (isLoading) {
    return <Loading />;
  }

  if (!isAuthenticated) {
    return <p>Redirecting to login...</p>;
  }

  return (
    <Container className="mt-5">
      <h1>Choose a Subscription Plan</h1>
      <Button color="primary" className="mb-3" onClick={() => alert("Subscribed to Basic!")}>
        Basic – $5/month
      </Button>
      <Button color="secondary" className="mb-3" onClick={() => alert("Subscribed to Pro!")}>
        Pro – $10/month
      </Button>
      <Button color="success" className="mb-3" onClick={() => alert("Subscribed to Premium!")}>
        Premium – $20/month
      </Button>
    </Container>
  );
};

export default JoinMembership;
```

<div id="step-2-add-a-new-route">
  ### 手順 2: 新しいルートを追加する
</div>

`src/App.js` ファイルを編集し、新しいサブスクリプションページに `/join-membership` ルートを追加します。

```js lines theme={null}
import JoinMembership from "./views/JoinMembership";

 {/* メンバーシップ参加ページにリダイレクト */}
<Route path="/join-membership" component={JoinMembership} />
```

新しい `/join-membership` ルートでは、次の処理を行います。

* ユーザーが認証済みかどうかを判定します。認証されていない場合は、ユーザーを <Tooltip tip="Universal Login: アプリケーションは、ユーザーの本人確認を行うために、Auth0 の認可サーバーでホストされている Universal Login にリダイレクトされます。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Universal+Login">Universal Login</Tooltip> ページにリダイレクトします。
* `session_transfer_token` が URL パラメーターとして追加されている場合、その token は認証リクエストに渡されます。
* 認証が完了すると、ユーザーにはさまざまなメンバーシッププランに登録するためのボタンが表示されます。

<Warning>
  React アプリを実行し、`http://localhost:3000/join-membership` にアクセスしてください。

  * ユーザーが認証済みの場合は、サブスクリプションのオプションが表示されます。
  * ユーザーが認証されていない場合は、自動的に Auth0 Universal Login ページにリダイレクトされます。

    * URL に `session_transfer_token` が含まれている場合は、Auth0 へのログインリクエストにその token が含まれます。
    * 含まれていない場合は、標準の Web 認証を使用してログインが続行されます。

  ユーザーがログインすると、サブスクリプションのオプションを選択するために `/join-membership` ページに戻ります。
</Warning>

<div id="configure-the-native-application">
  ## ネイティブアプリケーションを設定する
</div>

ネイティブアプリケーションでは、ウェブアプリケーションを起動する直前に、`refresh_token` を `session_transfer_token` に交換する必要があります。そのため、セッション転送のための交換処理とウェブアプリケーションを起動するロジックは、同じイベントハンドラー内 (たとえばボタンの `onClick` メソッド) に追加します。

<div id="ios">
  ### iOS
</div>

以下の手順では、iOSネイティブアプリケーションにモバイルからWebへの決済を追加する方法を説明します。

<div id="step-1-add-a-subscribe-to-membership-button">
  #### ステップ 1: `Subscribe to Membership` ボタンを追加する
</div>

iOS ネイティブアプリから Web ベースのサブスクリプション フローを開始するには、`ProfileView.swift` ファイルに `Subscribe to Membership` ボタンを追加します。

`ProfileView.swift` ファイルの body を編集し、ユーザー情報の下にボタンを追加します:

```swift lines theme={null}
import SwiftUI

struct ProfileView: View {
    let user: User
    var onSubscribe: () -> Void = {}

    var body: some View {
        List {
            Section(header: ProfileHeader(picture: user.picture)) {
                ProfileCell(key: "ID", value: user.id)
                ProfileCell(key: "Name", value: user.name)
                ProfileCell(key: "Email", value: user.email)
                ProfileCell(key: "Email verified?", value: user.emailVerified)
                ProfileCell(key: "Updated at", value: user.updatedAt)
            }

            Section {
                Button("Subscribe to Membership", action: onSubscribe)
            }
        }
    }
}
```

`ProfileView.swift` ファイルでは、`Subscribe to Membership` ボタンを追加し、選択時の動作を `onSubscribe` クロージャで決定します。

<div id="step-2-implement-the-subscription-flow-using-native-to-web-sso">
  #### ステップ 2: ネイティブからWebへのSSOを使ってサブスクリプション フローを実装する
</div>

`Subscribe to Membership` ボタンの動作を定義するには、`MainView.swift` ファイルを編集します。

export const codeExample3 = `import SwiftUI
import Auth0
import WebKit

struct MainView: View {
    @State var user: User?

    var body: some View {
        if let user = self.user {
            VStack {
                ProfileView(user: user, onSubscribe: launchSubscription)
                Button("ログアウト", action: self.logout)
            }
        } else {
            VStack {
                HeroView()
                Button("ログイン", action: self.login)
            }
        }
    }

    func login() {
            Auth0
                .webAuth()
                .audience("https://sample.api.com")
                .scope("profile email offline_access openid")
                //.useHTTPS() // iOS 17.4+ / macOS 14.4+ では Universal Link の callback URL を使用します
                .start { result in
                    switch result {
                    case .success(let credentials):
                        self.user = User(from: credentials.idToken)
                        let manager = CredentialsManager(authentication: Auth0.authentication())
                        let success = manager.store(credentials: credentials)
                        print("資格情報を保存できましたか: \(credentials.refreshToken)")
                    case .failure(let error):
                        print("エラー: \(error)")
                    }
                }
        }

    func logout() {
        Auth0
            .webAuth()
            .useHTTPS()
            .clearSession { result in
                switch result {
                case .success:
                    self.user = nil
                case .failure(let error):
                    print("エラー: \(error)")
                }
            }
    }

    func launchSubscription() {
        let credentialsManager = CredentialsManager(authentication: Auth0.authentication())

        credentialsManager.credentials { result in
            switch result {
            case .success(let credentials):
                let refreshToken = credentials.refreshToken ?? ""

                Auth0
                    .authentication()
                    .ssoExchange(withRefreshToken: refreshToken)
                    .start { result in
                        switch result {
                        case .success(let ssoCredentials):
                            DispatchQueue.main.async {
                                let cookie = HTTPCookie(properties: [
                                    .domain: "{yourDomain}", // 実際の Auth0 テナントドメインに置き換えてください
                                    .path: "/",
                                    .name: "auth0_session_transfer_token",
                                    .value: ssoCredentials.sessionTransferToken,
                                    .expires: ssoCredentials.expiresIn,
                                    .secure: true
                                ])!

                                let webView = WKWebView()
                                let store = webView.configuration.websiteDataStore.httpCookieStore
                                store.setCookie(cookie) {
                                    let url = URL(string: "http://localhost:3000/join-membership")!
                                    let request = URLRequest(url: url)
                                    webView.load(request)

                                    let vc = UIViewController()
                                    vc.view = webView
                                    UIApplication.shared.windows.first?.rootViewController?.present(vc, animated: true)
                                }
                            }

                        case .failure(let error):
                            print("SSO トークンの取得に失敗しました: \(error)")
                        }
                    }

            case .failure(let error):
                print("資格情報の読み込み中にエラーが発生しました: \(error)")
            }
        }
    }
}`;

<AuthCodeBlock children={codeExample3} language="swift" />

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  このサンプルでは、説明のために audience `https://sample.api.com` を使用しています。この識別子を持つ API を Auth0 テナントに作成することも、ご自身の API の識別子に置き換えることもできます。

  詳しくは、[Set Up APIs](/docs/ja-jp/get-started/auth0-overview/set-up-apis)をご覧ください。
</Callout>

これにより、ユーザーはネイティブアプリで `Subscribe to Membership` を選択し、再度ログインすることなく、すぐに Web アプリケーションでのサブスクリプション手続きを開始できます。

<div id="android">
  ### Android
</div>

以下の手順では、Androidネイティブアプリケーションにモバイルからウェブへの決済を追加する方法を説明します。

<div id="step-1-add-a-subscribe-button-to-the-main-page">
  #### ステップ 1: メインページにSubscribeボタンを追加する
</div>

AndroidネイティブアプリケーションからWebベースのサブスクリプション フローを起動するには、UIに`Subscribe to Membership`ボタンを追加します。

`MainActivity.kt`ファイルを編集し、`onCreate()`メソッドに次のコードを追加します。

```kotlin wrap lines theme={null}
binding.buttonSubscribe.setOnClickListener { launchSubscriptionFlow() }
```

`activity_main.xml` ファイルを編集し、`@+id/button_patch_metadata` ボタンの後に以下のコードを追加します:

```xml lines theme={null}
<Button
    android:id="@+id/buttonSubscribe"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Subscribe to Membership" />
```

<div id="step-2-implement-subscription-flow-using-native-to-web-sso">
  #### ステップ 2: ネイティブからWebへのSSOを使用してサブスクリプションフローを実装する
</div>

`Subscribe to Membership` ボタンの動作を定義するため、`MainActivity.kt` ファイルを編集します。

1. ログインフローを拡張し、サブスクリプション操作を処理します。

```kotlin lines theme={null}
// 必要なインポート
import com.auth0.android.authentication.storage.SecureCredentialsManager
import com.auth0.android.authentication.storage.SharedPreferencesStorage
import com.auth0.android.result.SSOCredentials
```

2. `onCreate()`メソッドに`credentialsManager:`を追加するよう更新します

```kotlin lines theme={null}
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Auth0 アプリケーションの詳細を使用してアカウントオブジェクトをセットアップする
        account =  Auth0.getInstance(
            getString(R.string.com_auth0_client_id),
            getString(R.string.com_auth0_domain)
        )

        // ボタンのクリックイベントをログインアクションに紐付ける
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.buttonLogin.setOnClickListener { loginWithBrowser() }
        binding.buttonLogout.setOnClickListener { logout() }
        binding.buttonGetMetadata.setOnClickListener { getUserMetadata() }
        binding.buttonPatchMetadata.setOnClickListener { patchUserMetadata() }
        binding.buttonSubscribe.setOnClickListener { launchSubscriptionFlow() }

        secureCredentialsManager = SecureCredentialsManager(
            this,
            AuthenticationAPIClient(account),
            SharedPreferencesStorage(this)
        )

    }
```

3. `loginwithBrowser()` メソッドを更新し、`credentialsManager:` を使用して資格情報を保存するようにします

```kotlin lines theme={null}
private fun loginWithBrowser() {
    WebAuthProvider.login(account)
        .withScheme(getString(R.string.com_auth0_scheme))
        .withScope("openid profile email offline_access")
        .withAudience("https://example.api.com")
        .start(this, object : Callback<Credentials, AuthenticationException> {
            override fun onSuccess(credentials: Credentials) {
                secureCredentialsManager.saveCredentials(credentials)
                cachedCredentials = credentials
                showSnackBar("Success: ${credentials.accessToken}")
                updateUI()
                showUserProfile()
            }

            override fun onFailure(exception: AuthenticationException) {
                showSnackBar("Failure: ${exception.getCode()}")
            }
        })
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  このサンプルでは、説明のために audience `https://sample.api.com` を使用しています。Auth0 テナントでこの識別子を持つ API を作成することも、ご自身の API 識別子に置き換えることもできます。

  詳しくは、[Set Up APIs](/docs/ja-jp/get-started/auth0-overview/set-up-apis) を参照してください。
</Callout>

4. Web アプリケーションを開くには、`launchSubscriptionFlow()` メソッドを追加します:

```kotlin lines expandable theme={null}
private fun launchSubscriptionFlow() {
    secureCredentialsManager.getSsoCredentials(
        mapOf(),  // オプションのパラメーター
        object : Callback<SSOCredentials, CredentialsManagerException> {
            override fun onSuccess(result: SSOCredentials) {
                val sessionToken = result.sessionTransferToken

                val cookieValue =
                    "auth0_session_transfer_token=$sessionToken; Path=/; Secure; HttpOnly; SameSite=None"
                val cookieManager = android.webkit.CookieManager.getInstance()
                cookieManager.setAcceptCookie(true)
                cookieManager.setCookie("https://${getString(R.string.com_auth0_domain)}", cookieValue)

                val webView = android.webkit.WebView(this@MainActivity)
                webView.settings.javaScriptEnabled = true
                webView.webViewClient = object : android.webkit.WebViewClient() {
                    override fun shouldOverrideUrlLoading(view: android.webkit.WebView?, url: String?) = false
                }

                webView.loadUrl("http://localhost:3000/join-membership")
                setContentView(webView)
            }

            override fun onFailure(error: CredentialsManagerException) {
                showSnackBar("Failed to get session transfer token: ${error.message}")
            }
        }
    )
}
```

これにより、ユーザーはネイティブアプリで `Subscribe to Membership` を選択するだけで、再度ログインすることなく、すぐに Web アプリでの登録手続きを開始できます。

<div id="test-your-native-to-web-sso-implementation">
  ## ネイティブからWebへのSSOの実装をテストする
</div>

すべての設定が完了したら、iOS または Android のネイティブアプリケーションを起動してログインし、プロファイルまたはメイン画面に移動して、**Subscribe to Membership**ボタンを選択します。

次のことが行われます。

* 保存されている `refresh_token` を使用して、安全な `session_transfer_token` を取得します
* `session_transfer_token` が Auth0ドメインの Cookie に設定されます
* `WKWebView` を使用して、Webアプリケーションの `/join-membership` ルートを読み込みます
* Webアプリケーションが `session_transfer_token` を受け取り、ネイティブからWebへのSSO を使用してログインを完了します
* ユーザーには、Webアプリケーションですぐに登録オプションが表示されます

これにより、モバイルのネイティブアプリケーションのユーザーは、再度ログインを求められることなく、Webアプリケーションで安全な認証済みフローを開始できるシームレスな体験を実現できます。

<div id="next-steps">
  ## 次のステップ
</div>

* ネイティブからWebへのSSOの設定オプションをさらに確認する:セッションの有効期間、<Tooltip tip="リフレッシュトークン: ユーザーに再度ログインさせることなく、新しいアクセストークンを取得するために使用されるトークン。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=refresh+token">リフレッシュトークン</Tooltip>のローテーション、デバイスバインディング、カスケード失効について、[ネイティブからWebへのSSOのドキュメント](/docs/ja-jp/authenticate/single-sign-on/native-to-web)で詳しく確認してください。
* Progressive Profilingでpost-loginエクスペリエンスをカスタマイズする:Auth0の[Progressive Profile Form](/docs/ja-jp/customize/forms/configure-progressive-profile-form)を使用して、ログイン後に追加のユーザーデータ (プランの希望、住所、支払いの意向など) を収集し、サブスクリプションオプションを表示する前に活用できます。