> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Native と Phaser 向け JavaScript クイックスタート
> PlayFab JavaScript クライアント ライブラリをインストールし、ブラウザーまたは Phaser ゲームで最初の PlayFab API 呼び出しを行ってプレイヤーを認証します。
# クイックスタート: JavaScript 向け PlayFab クライアント ライブラリ
JavaScript 向け PlayFab クライアント ライブラリを使用してプレイヤーを認証する方法を学びます。パッケージをインストールし、基本的なタスクのサンプル コードを試すための手順に従ってください。
## 前提条件
* [PlayFab 開発者アカウント](https://developer.playfab.com)。タイトルの作成と TitleId の確認方法については、[Game Manager クイックスタート](/services/playfab/live-service-management/gamemanager/quickstart) を参照してください。
このクイックスタート ガイドは、Web ブラウザーを実行できる任意のオペレーティング システムで動作します。
## JavaScript プロジェクトのセットアップ
PlayFab API を呼び出す前に、[PlayFab 開発者アカウント](https://developer.playfab.com) が必要です。タイトルの作成と TitleId の確認方法については、[Game Manager クイックスタート](/services/playfab/live-service-management/gamemanager/quickstart) を参照してください。
OS: このガイドは Web ブラウザーを実行できる任意の OS で動作します。
新しいプロジェクトをセットアップするには、次の 2 つの空のテキスト ファイルを含む新しいフォルダーを作成します。
* `PlayFabGettingStarted.html`
* `PlayFabGettingStarted.js`
以上で PlayFab のインストールは完了です。
## コード例
このガイドでは、最初の PlayFab API 呼び出しを行うための最小限の手順を説明します。確認は Web ページ上で行えます。パラメーターと戻り値の詳細については、最初に [Postman テンプレート](/services/playfab/sdks/postman/postman-quickstart) を使用することをお勧めします。
### クライアントを認証する
お好みのテキスト エディターで、`PlayFabGettingStarted.html` の内容を次のように更新します。
```html theme={null}
PlayFab JavaScript Unit Tests
PlayFab Getting Started Guide
TitleID:
CustomID:
Result:
```
お好みのテキスト エディターで、`PlayFabGettingStarted.js` の内容を次のように更新します。
```javascript theme={null}
function DoExampleLoginWithCustomID(){
PlayFab.settings.titleId = document.getElementById("titleId").value;
var loginRequest = {
// Currently, you need to look up the required and optional keys for this object in the API reference for LoginWithCustomID. See the Request Headers and Request Body.
TitleId: PlayFab.settings.titleId,
CustomId: document.getElementById("customId").value,
CreateAccount: true
};
PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);
}
// callback functions take two parameters: result and error
// see callback functions in JavaScript if unclear
var LoginCallback = function (result, error) {
if (result !== null) {
document.getElementById("resultOutput").innerHTML = "Congratulations, you made your first successful API call!";
} else if (error !== null) {
document.getElementById("resultOutput").innerHTML =
"Something went wrong with your first API call.\n" +
"Here's some debug information:\n" +
PlayFab.GenerateErrorReport(error);
}
}
```
この例の loginRequest オブジェクトの正しい形式を確認するには、[LoginWithCustomID](xref:titleid.playfabapi.com.client.authentication.loginwithcustomid) の API リファレンスを参照してください。
## コードを実行する
1. お好みのブラウザーで `PlayFabGettingStarted.html` を開きます。
2. **Call LoginWithCustomID** ボタンを選択します。
3. 結果セクションに次のテキストが表示されます:
"Congratulations, you made your first successful API call!"
この時点で、他の API 呼び出しを開始し、ゲームを構築できます。
利用可能なすべてのクライアント API 呼び出しの一覧については、[PlayFab API リファレンス](/services/playfab/api-references) のドキュメントを参照してください。
## コードの詳細解説
このセクションでは、コードの各部分を詳細に説明します。
HTML ファイルには、いくつかの重要な行があります。
```html theme={null}
```
この行は、PlayFab CDN から Client-SDK を直接読み込みます。当社の CDN では、常に最新バージョンの PlayFabSDK がホストされています。ファイルをダウンロードして、固定バージョンを使用する方が安全な場合があります: [PlayFab JavaScript SDK](https://aka.ms/playfabjavascriptsdkdownload)
```html theme={null}
...
```
上記のように、`PlayFabGettingStarted.js` には `DoExampleLoginWithCustomID` 関数が含まれています。これらの行は、当社の js ファイルを Web ページにバインドし、そのスクリプト内の `DoExampleLoginWithCustomID` 関数を呼び出します。それ以外は GUI にすぎません。
`PlayFabClientSDK` 内の関数は、対応する HTTP リクエストにちなんで名付けられています。たとえば、`LoginWithCustomID` 関数に対応する HTTP リクエストも「LoginWithCustomID」という名前です。リクエスト本文は、キーと値として JavaScript のリクエスト オブジェクトにパックされます。セッション チケットはログインから保存されるため、クライアント呼び出しでリクエスト ヘッダーからセッション チケットを組み込む必要はありません。
* `PlayFabGettingStarted.js` の行ごとの解説
* `PlayFab.settings.titleId = "xxxx";`
* すべての PlayFab 開発者は、Game Manager でタイトルを作成します。ゲームを公開する際、その titleId をゲームにコーディングする必要があります。これにより、クライアントは PlayFab 内の正しいデータへのアクセス方法を知ることができます。ほとんどのユーザーにとって、これは PlayFab を動作させるために必要な手順と考えてください。
* `var loginRequest = { TitleId: PlayFab.settings.titleId, CustomId: "GettingStartedGuide", CreateAccount: true };`
* ほとんどの PlayFab API メソッドは入力パラメーターを必要とし、それらの入力パラメーターはリクエスト オブジェクトにまとめられます。
* すべての API メソッドには、オプションと必須のパラメーターが混在した一意のリクエスト オブジェクトが必要です。
* `LoginWithCustomID` には、プレイヤーを一意に識別する必須パラメーター `CustomId` と、この呼び出しで新しいアカウントの作成を許可する `CreateAccount` があります。`TitleId` は JavaScript のもう 1 つの必須パラメーターで、`PlayFab.settings.titleId` と一致する必要があります。
* `TitleId` の場所については、[Game Manager クイックスタート](/services/playfab/live-service-management/gamemanager/quickstart) を参照してください。
* この場合、`TitleId`、`customId`、`CreateAccount` は `LoginWithCustomID` のリクエスト本文からのものです。リクエスト本文のフィールドは、リクエスト オブジェクトのキーと値として含まれます。リクエスト ヘッダーのセッション チケットはログインから保存されるため、SessionTicket はリクエスト オブジェクトに含まれません。
* `PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);`
* これは `LoginWithCustomID` への非同期リクエストを開始し、API 呼び出しが完了すると `LoginCallback` を呼び出します。
* ログインについては、ほとんどの開発者はより適切なログイン メソッドを使用することを望むでしょう。
* すべてのログイン メソッドと入力パラメーターの一覧については、[PlayFab ログイン ドキュメント](xref:titleid.playfabapi.com.client.authentication) を参照してください。一般的な選択肢は次のとおりです。
* [LoginWithAndroidDeviceID](xref:titleid.playfabapi.com.client.authentication.loginwithandroiddeviceid)
* [LoginWithIOSDeviceID](xref:titleid.playfabapi.com.client.authentication.loginwithiosdeviceid)
* [LoginWithEmailAddress](xref:titleid.playfabapi.com.client.authentication.loginwithemailaddress)
* JavaScript が初めての場合は、コールバック関数について読んでおくことをお勧めします。
* `LoginCallback` には、result、error の 2 つのパラメーターが含まれます。
* 成功した場合、error は null になり、result オブジェクトには呼び出された API に応じた要求された情報が含まれます。
* この結果にはプレイヤーに関する基本情報が含まれますが、ほとんどのユーザーにとって、ログインは他の API を呼び出す前の必須ステップにすぎません。
* error が `null` でない場合、API 呼び出しは失敗しています。
## トラブルシューティング
* API 呼び出しはさまざまな理由で失敗する可能性があるため、常に失敗を処理するようにしてください。
* error オブジェクトには、エラー名、エラー コード、エラー メッセージが含まれます。これらの情報を組み合わせることで、エラーの診断に十分な情報が得られるはずです。
* グローバル API メソッド エラー コードは、PlayFab の [グローバル API メソッド エラー コード](/services/playfab/api-references/global-api-method-error-codes) を参照してください。
* API 呼び出しが失敗する理由 (可能性の高い順)
* PlayFabSettings.TitleId が設定されていない。TitleId が設定されていない場合、何も動作しません。
* リクエスト パラメーター。特定の API 呼び出しに対して正しい情報や必要な情報を提供していない場合、失敗します。詳細については、`error.errorMessage, error.errorDetails`、または `error.GenerateErrorReport()` を参照してください。
* デバイスの接続の問題。携帯電話は接続を頻繁に失ったり回復したりします。そのため、いつでも API 呼び出しがランダムに失敗し、その後すぐに動作することがあります。トンネルに入ると、完全に切断される可能性があります。
* PlayFab サーバーの問題。すべてのソフトウェアと同様に、問題が発生する可能性があります。更新については [リリース ノート](/services/playfab/release-notes) を参照してください。
* インターネットは 100% 信頼できるわけではありません。メッセージが破損したり、PlayFab サーバーに到達しなかったりすることがあります。
* 問題のデバッグに苦労しており、エラー情報内の情報だけでは不十分な場合は、[フォーラム](https://community.playfab.com/index.html) にアクセスしてください。
## 次のステップ
このクイックスタートでは、ユーザーを認証するための簡略化された手順を示します。ユーザー認証の詳細については、[ログインの基本とベスト プラクティス](/services/playfab/identity/player-identity/login/login-basics-best-practices) を参照してください。
Happy coding!
## Related topics
- [Native と Android Studio 向け Java クイックスタート](/ja-jp/services/playfab/sdks/java/quickstart.md)
- [CloudScript クイックスタート](/ja-jp/services/playfab/live-service-management/service-gateway/automation/cloudscript/quickstart.md)
- [Linux 向け C++ クイックスタート](/ja-jp/services/playfab/sdks/playfab-cpp/quickstart-linux.md)
- [NodeJS クイックスタート](/ja-jp/services/playfab/sdks/nodejs/quickstart.md)
- [Windows 向け C++ クイックスタート](/ja-jp/services/playfab/sdks/playfab-cpp/quickstart-windows.md)