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

# xbox.com/play の Web Content Test Application (CTA)

> xbox.com/play で Web Content Test Application の開発者ツールを使用する方法について説明します。

Web Content Test Application (CTA) の開発者ツールは、現在の XBOX Cloud Gaming Web エクスペリエンスである [xbox.com/play](https://www.xbox.com/play) で利用できます。これらのツールは、Windows 上の Edge および Chrome、Mac、iOS、iPadOS 上の Safari 向けに設計されています。

この記事では xbox.com/play について説明します。新しいエクスペリエンスが [play.xbox.com](https://play.xbox.com/) でプレビュー中です。その開発者ツールを使用するには、[Web Content Test Application (CTA) の概要](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-web-content-test-application.md) を参照してください。

* [エクスペリエンスを選択する](#choose-an-experience)
* [開発者ツールを開く](#open-developer-tools)
* [オファリングを選択する](#select-an-offering)
* [IP 接続](#ip-connect)
* [リモート接続](#remote-connect)
* [開発者設定](#developer-settings)
* [TAK のサイドロード](#tak-sideload)
* [ストリーム中に TAK レイアウトを切り替える](#switch-tak-layouts-during-a-stream)
* [マウスとキーボード](#mouse-and-keyboard)
* [新しいエクスペリエンスを試す](#try-the-new-experience)

## エクスペリエンスを選択する

Web CTA は、2 つの XBOX Cloud Gaming Web エクスペリエンスで動作します。xbox.com/play と、プレビュー段階の play.xbox.com です。次の表を使用して、シナリオに合ったものを選択してください。

| シナリオ | xbox.com/play | play.xbox.com |
| :- | :- | :- |
| XBOX 開発キットへの IP 接続 | サンドボックステストアカウントでのみサポート | サポート |
| 同じ PC からの TAK サイドロード | サポート | サポート |
| PC からスマートフォンまたはタブレットへの TAK サイドロード | HTTPS 経由でサポート | 未サポート |
| ストリーム中のレイアウトの切り替え | サポート | サポート |
| リモート接続 | サポート | サポート |

どちらのエクスペリエンスも、プライベートオファリング、サンドボックステストアカウント、地域の選択、およびマウスとキーボードをサポートしています。

## 開発者ツールを開く

開発者ツールの使用を開始するには、[xbox.com/play/dev-tools](https://www.xbox.com/play/dev-tools) にアクセスします。サインインしていない場合は、サインインを求めるページが表示され、そこにサンドボックスのフィールドが含まれています。

* リテールアカウントの場合は、サンドボックスを空白のままにし、XBOX 開発キットにサインインしているアカウント、またはプライベートオファリングにアクセスするように構成されているアカウントと同じアカウントでサインインします。
* サンドボックステストアカウントの場合は、サインインする前にサンドボックス ID を入力します。

サンドボックスはタイトル用の分離された開発環境であり、各サンドボックステストアカウントはいずれか 1 つのサンドボックスに属します。サンドボックス ID はオファリング ID ではありません。テストアカウントを作成した担当者から取得してください。詳細については、[XBOX サービスのサンドボックスの概要](https://docs.xbox.com/ja-jp/services/xbox-services/fundamentals/sandboxes/live-setup-sandbox.md) を参照してください。

> [!NOTE]
>
> サンドボックス ID を指定せずにサンドボックステストアカウントでサインインすると、これらのアカウントはリテール機能にアクセスできないため、一部の機能が動作しない可能性があります。

サンドボックス ID を指定せずにサインインした場合は、[outlook.com](https://www.outlook.com) などの別の Microsoft Web サイトにアクセスしてサインアウトします。その後、正しいサンドボックス ID で再度サインインします。

xbox.com/play のカタログから開発者設定を開くこともできます。プロフィール画像を選択し、**Settings** > **Developer** を選択します。**Developer** が表示されない場合は、**Account** を 10 回続けてすばやく選択すると表示されます。開発者設定の **Developer Tools Home** を選択すると、開発者ツールのページに戻ります。

> [!NOTE]
>
> iOS または iPadOS では、ページをプログレッシブ Web アプリ (PWA) として保存できます。共有ボタンを選択し、**Add to Home Screen** を選択します。
>
> PWA はアカウントと構成を記憶するため、後でテストに戻ることができます。

## オファリングを選択する

オファリングは、データセンターのハードウェア上で実行されるゲームを検証するために使用されるプライベートテスト環境です。オファリングの詳細については、[ゲームストリーミングの概要](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-overview.md#what-are-private-offerings) を参照してください。

特定のオファリングを使用するには:

1. [xbox.com/play/dev-tools/select-offering](https://www.xbox.com/play/dev-tools/select-offering) に移動します。
2. ドロップダウンリストからオファリングを選択するか、**Custom offering ID** を選択して **Enter offering ID for cloud connection** にオファリング ID を入力します。
3. **Connect** を選択します。

オファリングのカタログが開き、ページに **Using custom offering** とオファリング ID が表示されます。オファリングにアクセスできない場合は、その特定のオファリングの使用を承認されたアカウントでサインインしていることを確認してください。

### オファリングの地域

オファリングでは、最も近いデータセンターに自動的にルーティングされません。別の地域でテストするには、**Settings** > **Developer** を開き、**Streaming Region** で地域を選択します。地域はストリームを開始する前に選択してください。**Current region** に選択内容が表示されます。利用可能な地域は事前に構成されている必要があります。オファリングで利用可能な地域を調整するには、Microsoft のアカウント担当者にお問い合わせください。

## IP 接続

IP 接続を使用すると、IP アドレスを指定して XBOX 開発キットから直接ストリーミングできます。xbox.com/play では、IP 接続にはサンドボックステストアカウントが必要であり、開発者ツールのページには IP 接続へのリンクがありません。

IP 接続を使用する前に、次の前提条件を満たしてください。

1. ストリーミング用に XBOX 開発キットをセットアップします。詳細については、[XBOX 開発キットのセットアップ](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-setup-xbox-developer-kit.md) を参照してください。
2. **Dev Home** > **Streaming** で、**Direct Connect** がリッスンしていることを確認します。キットが再起動するたびにリッスンは停止します。
3. クライアントデバイスが XBOX 開発キットと同じネットワーク上にあるか、VPN 経由で接続されていることを確認します。
4. ネットワークで、XBOX 開発キットのポート 9002 への TCP および UDP トラフィックが許可されていることを確認します。ブラウザーは、シグナリングに WebSocket 接続を使用し、ストリームに UDP を使用します。

IP アドレスで接続するには:

1. [xbox.com/play/dev-tools](https://www.xbox.com/play/dev-tools) に移動します。サンドボックス ID を入力し、そのサンドボックスのテストアカウントでサインインします。
2. [xbox.com/play/dev-tools/ip-connect](https://www.xbox.com/play/dev-tools/ip-connect) に移動します。
3. XBOX 開発キットの IP アドレスとポートを入力します (例: `192.168.1.10:9002`)。
4. **Connect** を選択します。
5. ローカルネットワーク上のデバイスへのアクセス許可をブラウザーが求めた場合は、**Allow** を選択します。

接続に成功すると、XBOX 開発キットで実行されているアプリがブラウザーに表示されます。リテールアカウントでサインインしている場合、IP 接続のアドレスにアクセスすると開発者ツールのページに戻ります。

## リモート接続

リモート接続は、XBOX リモートプレイサービスを介してインターネット経由で XBOX 開発キットからストリーミングします。サインインしているアカウントを通じてキットを検出するため、IP アドレスを入力する必要はありません。

まず、XBOX 開発キットをセットアップします。

1. xbox.com/play で使用するアカウントで XBOX 開発キットにサインインします。このアカウントは、キットのサンドボックスで許可されている必要があります。
2. **Dev Home** > **Streaming** に移動します。**Remote Connect** で、アカウントを選択します。
3. **Dev Home** > **Streaming** で、**Direct Connect** がリッスンしていないことを確認します。Direct Connect は IP 接続用の別の接続モードであり、リッスン中はリモート接続がブロックされます。

次に、xbox.com/play から接続します。

1. [xbox.com/play/dev-tools](https://www.xbox.com/play/dev-tools) に移動し、同じアカウントでサインインします。サンドボックステストアカウントの場合は、サインインする前にサンドボックス ID を入力します。
2. **Remote Connect** を選択します。これは、サインインしているアカウントにリモート接続用にセットアップされた開発キットがある場合、またはサンドボックステストアカウントでサインインしている場合に利用できます。
3. 一覧から XBOX 開発キットを見つけて、**Connect** を選択します。

> [!NOTE]
>
> XBOX 開発キットと接続元のデバイスの両方にインターネット接続が必要です。
>
> IP 接続とは異なり、リモート接続では 2 つのデバイスが同じネットワーク上にある必要はありません。

## 開発者設定

開発者設定を開くには、プロフィール画像を選択し、**Settings** > **Developer** を選択します。

開発者設定には、現在のオファリングとストリーム構成の設定が含まれます。オーバーライドできる具体的なストリーム構成の設定の詳細については、[ストリーム構成の概要](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-content-test-application-stream-config.md) を参照してください。

**Stream Configuration** > **Touch adaptation** では、次の設定を行うことができます。

* **Enable sideload**: タイトル用に公開されたレイアウトではなく、[TAK CLI](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line.md) の `serve` コマンドからタッチレイアウトを読み込みます。
* **Sideload server address**: サイドロードサーバーのアドレス。
* **Enable automatic refresh**: サイドロードサーバー上でレイアウトを変更すると、デバイス上のレイアウトが更新されます。
* **Emulate touch with mouse**: マウスのクリックをタッチとして扱います。

## TAK のサイドロード

これらの手順は、カスタムオファリングまたは XBOX 開発キットからのストリーミングを対象としています。オファリングを使用するには、[オファリングを選択する](#select-an-offering) を参照してください。

開始する前に、レイアウトを提供する PC で [`tak serve`](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-serve-command) を実行します。

ブラウザーと同じ PC からサイドロードするには:

1. **Settings** > **Developer** を開き、**Touch adaptation** を見つけます。
2. **Enable sideload** をオンにします。
3. **Sideload server address** に、サイドロードサーバーのアドレスを入力します (例: `http://localhost:9269`)。[別のデバイスからサイドロードする](#sideload-from-another-device) で説明されているように、`localhost` 以外のアドレスでは `https` を使用する必要があります。
4. **Network Status** で、**Network Permission** を確認します。**Required** と表示されている場合は、**Request Permission** を選択します。ブラウザーがサイトに **Access other apps and services on this device** を許可するかどうかを確認したら、**Allow** を選択します。
5. タッチスクリーンのない PC では、**Emulate touch with mouse** をオンにします。オンにしないと、ストリームにタッチコントロールが表示されず、**TAK** メニューも利用できません。
6. **Server Connection** に **Connected** と表示されたら、ストリームを開始します。**Not Reachable** と表示された場合は、`tak serve` が実行されていることを確認してから、**Recheck** を選択します。

ストリーム中に **Enable sideload** または **Emulate touch with mouse** を変更すると、ゲームを切り替えるよう求められます。

ストリームでレイアウトが使用されていることを確認するには、[ストリーム中に TAK レイアウトを切り替える](#switch-tak-layouts-during-a-stream) で説明されているように、**Bundle layouts** にレイアウトが表示されているかを確認します。

### 別のデバイスからサイドロードする

スマートフォンまたはタブレットでテストするには、ローカルネットワーク上でデバイスから到達できる PC で `tak serve` を実行します。サーバーでは `https` を使用する必要があります。

1. 証明書を作成します。詳細については、[証明書の生成手順](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-serve-command.md#certificate-generation-instructions) を参照してください。
2. PC で、`--certificate-file` オプションと `--certificate-password` オプションを指定して `tak serve` を実行します。
3. スマートフォンまたはタブレットに証明書をインストールし、信頼します。手順については、[さまざまなクライアントでの証明書の信頼](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-serve-command.md#trusting-the-certificate-on-different-clients) を参照してください。
4. スマートフォンまたはタブレットで **Settings** > **Developer** を開き、**Enable sideload** をオンにして、**Sideload server address** に `https://<your PC's IP address>:9269` を入力します。
5. [TAK のサイドロード](#tak-sideload) の手順 4 と 6 で説明されているように、**Network Permission** と **Server Connection** を確認します。

パスワードを必須にするには、`--password` オプションを使用し、デバイスの開発者設定に同じパスワードを入力します。詳細については、[Serve コマンド](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-serve-command.md) を参照してください。

## ストリーム中に TAK レイアウトを切り替える

開発者モードでは、ストリーミング中にアクティブなレイアウトを切り替えることができます。

1. ストリームで、左下隅にある **Developer Tools Menu** を開き、**TAK** を選択します。
2. **Select touch controls layout** で、**Bundle layouts** または **System layouts** からレイアウトを選択します。**Bundle layouts** には、このストリーム用に読み込まれたレイアウトが表示されます。サイドロードが機能している場合、それらはあなたのレイアウトです。
3. **Close** を選択します。

**System layouts** は **Standard** と **Native Touch Only (Blank)** です。**Standard** は標準のコントローラーオーバーレイを表示します。**Native Touch Only (Blank)** はタッチコントロールを削除します。

## マウスとキーボード

開始する前に、[開発者ツールを開く](#open-developer-tools) の説明に従って開発者ツールを開きます。

1. **Settings** > **Developer** の **Stream Configuration** > **Enabled input types** で、**Mouse and keyboard** をオンにします。この設定は、ストリームを開始する前に変更してください。
2. **Touch adaptation** で、**Emulate touch with mouse** をオフにします。両方がオンの場合、マウスのクリックはタッチとして扱われます。
3. ストリームを開始します。
4. **Enter fullscreen mode to play with mouse and keyboard** というバナーが表示された場合は、**Enter fullscreen** を選択します。

マウスを解放するには、**Press *key* to release your mouse** 通知に表示されているキーを押します。

## 新しいエクスペリエンスを試す

play.xbox.com の新しいエクスペリエンスに切り替えるには、プロフィール画像を選択し、**Try the new experience** > **Try now** を選択します。xbox.com/play に戻るには、プロフィールから **Account settings** を開き、**Exit preview** を選択します。


## Related topics

- [Web Content Test Application (CTA) の概要](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-web-content-test-application.md)
- [追加のスタンドアロン ツール](https://docs.xbox.com/ja-jp/tools/additional-tools.md)
- [Content Test Application (CTA) ストリーム構成](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-content-test-application-stream-config.md)
- [TAK CLI を使用したタッチ コントロール レイアウトのデプロイ](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-deploying-touch-layout.md)
- [Android Content Test Application (CTA) の概要 (非推奨)](https://docs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-android-content-test-application.md)