クイックスタート: JavaScript 向け PlayFab クライアントライブラリ

JavaScript 向け PlayFab クライアントライブラリを使用してプレイヤーを認証する方法を学びます。パッケージをインストールし、基本的なタスクのサンプルコードを試すための手順に従ってください。

前提条件

PlayFab 開発者アカウント。タイトルの作成と TitleId の確認方法については、Game Manager クイックスタートを参照してください。

このクイックスタートガイドは、Web ブラウザーを実行できる任意のオペレーティングシステムで動作します。

JavaScript プロジェクトのセットアップ

PlayFab API を呼び出す前に、PlayFab 開発者アカウントが必要です。タイトルの作成と TitleId の確認方法については、Game Manager クイックスタートを参照してください。 OS: このガイドは Web ブラウザーを実行できる任意の OS で動作します。新しいプロジェクトをセットアップするには、次の 2 つの空のテキストファイルを含む新しいフォルダーを作成します。

PlayFabGettingStarted.html
PlayFabGettingStarted.js

以上で PlayFab のインストールは完了です。

コード例

このガイドでは、最初の PlayFab API 呼び出しを行うための最小限の手順を説明します。確認は Web ページ上で行えます。パラメーターと戻り値の詳細については、最初に Postman テンプレートを使用することをお勧めします。

クライアントを認証する

お好みのテキストエディターで、PlayFabGettingStarted.html の内容を次のように更新します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayFab JavaScript Unit Tests</title>
    <script type="text/javascript" src="https://download.playfab.com/PlayFabClientApi.js"></script>
    <script type="text/javascript" src="PlayFabGettingStarted.js"></script>
</head>
<body>
    PlayFab Getting Started Guide<br />
    TitleID: <input type="text" id="titleId" value="144"><br />
    CustomID: <input type="text" id="customId" value="GettingStartedGuide"><br />
    <input type="button" value="Call LoginWithCustomID" onclick="DoExampleLoginWithCustomID()"><br />
    Result:<br />
    <textarea id="resultOutput" cols="60" rows="5"></textarea><br />
</body>
</html>

お好みのテキストエディターで、PlayFabGettingStarted.js の内容を次のように更新します。

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 の API リファレンスを参照してください。

コードを実行する

お好みのブラウザーで PlayFabGettingStarted.html を開きます。
Call LoginWithCustomID ボタンを選択します。
結果セクションに次のテキストが表示されます: “Congratulations, you made your first successful API call!”

この時点で、他の API 呼び出しを開始し、ゲームを構築できます。利用可能なすべてのクライアント API 呼び出しの一覧については、PlayFab API リファレンスのドキュメントを参照してください。

コードの詳細解説

このセクションでは、コードの各部分を詳細に説明します。 HTML ファイルには、いくつかの重要な行があります。

<script type="text/javascript" src="https://download.playfab.com/PlayFabClientApi.js"></script>

この行は、PlayFab CDN から Client-SDK を直接読み込みます。当社の CDN では、常に最新バージョンの PlayFabSDK がホストされています。ファイルをダウンロードして、固定バージョンを使用する方が安全な場合があります: PlayFab JavaScript SDK

<script type="text/javascript" src="PlayFabGettingStarted.js"></script>
...
<input type="button" value="Call LoginWithCustomID" onclick="DoExampleLoginWithCustomID()"><br />

上記のように、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 クイックスタートを参照してください。
- この場合、TitleId、customId、CreateAccount は LoginWithCustomID のリクエスト本文からのものです。リクエスト本文のフィールドは、リクエストオブジェクトのキーと値として含まれます。リクエストヘッダーのセッションチケットはログインから保存されるため、SessionTicket はリクエストオブジェクトに含まれません。
- PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);
  - これは LoginWithCustomID への非同期リクエストを開始し、API 呼び出しが完了すると LoginCallback を呼び出します。
  - ログインについては、ほとんどの開発者はより適切なログインメソッドを使用することを望むでしょう。
    - すべてのログインメソッドと入力パラメーターの一覧については、PlayFab ログインドキュメントを参照してください。一般的な選択肢は次のとおりです。
- JavaScript が初めての場合は、コールバック関数について読んでおくことをお勧めします。
- LoginCallback には、result、error の 2 つのパラメーターが含まれます。
  - 成功した場合、error は null になり、result オブジェクトには呼び出された API に応じた要求された情報が含まれます。
  - この結果にはプレイヤーに関する基本情報が含まれますが、ほとんどのユーザーにとって、ログインは他の API を呼び出す前の必須ステップにすぎません。
- error が null でない場合、API 呼び出しは失敗しています。

トラブルシューティング

API 呼び出しはさまざまな理由で失敗する可能性があるため、常に失敗を処理するようにしてください。
error オブジェクトには、エラー名、エラーコード、エラーメッセージが含まれます。これらの情報を組み合わせることで、エラーの診断に十分な情報が得られるはずです。
グローバル API メソッドエラーコードは、PlayFab のグローバル API メソッドエラーコードを参照してください。
API 呼び出しが失敗する理由 (可能性の高い順)
- PlayFabSettings.TitleId が設定されていない。TitleId が設定されていない場合、何も動作しません。
- リクエストパラメーター。特定の API 呼び出しに対して正しい情報や必要な情報を提供していない場合、失敗します。詳細については、error.errorMessage, error.errorDetails、または error.GenerateErrorReport() を参照してください。
- デバイスの接続の問題。携帯電話は接続を頻繁に失ったり回復したりします。そのため、いつでも API 呼び出しがランダムに失敗し、その後すぐに動作することがあります。トンネルに入ると、完全に切断される可能性があります。
PlayFab サーバーの問題。すべてのソフトウェアと同様に、問題が発生する可能性があります。更新についてはリリースノートを参照してください。
- インターネットは 100% 信頼できるわけではありません。メッセージが破損したり、PlayFab サーバーに到達しなかったりすることがあります。
問題のデバッグに苦労しており、エラー情報内の情報だけでは不十分な場合は、フォーラムにアクセスしてください。

次のステップ

このクイックスタートでは、ユーザーを認証するための簡略化された手順を示します。ユーザー認証の詳細については、ログインの基本とベストプラクティスを参照してください。 Happy coding!

XBOX Services

PlayFab

Native と Phaser 向け JavaScript クイックスタート

クイックスタート: JavaScript 向け PlayFab クライアントライブラリ

前提条件

JavaScript プロジェクトのセットアップ

コード例

クライアントを認証する

コードを実行する

コードの詳細解説

トラブルシューティング

次のステップ

​クイックスタート: JavaScript 向け PlayFab クライアント ライブラリ

​前提条件

​JavaScript プロジェクトのセットアップ

​コード例

​クライアントを認証する

​コードを実行する

​コードの詳細解説

​トラブルシューティング

​次のステップ

クイックスタート: JavaScript 向け PlayFab クライアントライブラリ

前提条件

JavaScript プロジェクトのセットアップ

コード例

クライアントを認証する

コードを実行する

コードの詳細解説

トラブルシューティング

次のステップ