クライアント上のウェブのための Playゲームサービスをセットアップする

もしあなたがクライアント上でのみ Goole Playゲームサービス APIと通信する必要があるゲームを構築しているならば、次の手順を実行します:

Step 1. Google Play Consoleにてあなたのゲームをセットアップする

あなたのゲームのための Google Playゲームサービスを有効化するために Google Play Consoleを使用することを忘れないでください、Google API Consoleではありません。

1. ゲームサービスをセットアップするに記述されたすべての手順に従って、あなたのウェブゲームのための Google Playゲームサービスを有効化します。
2. 後のために以下の資格情報を記録します。
   • あなたのゲームのアプリケーション ID
   • あなたのゲームの OAuth 2.0 クライアント ID。
3. (オプション) 実績およびリーダーボードを構成するに記述された手順に従って、あなたのゲームに実績とリーダーボードを追加します。
4. あなたのゲームの変更を公開するに記述された手順に従って、あなたのゲームのためのテストアカウントを追加します。

Step 2. あなたのページにページレベルの構成を追加する

ページレベルの構成オプションは、あなたに、あなたのページにて <meta>タグからサインインボタンあるいは Javascript呼び出しのパラメータを定義できるようにします。 これらのパラメータは、あなたのサインインとインタラクティブな投稿メソッドによって共有されることができ、それは、あなたのコードを簡素化することができます。

Playゲームサービスを使用しているゲームのためのメタタグの典型的なセットは、次のようになります:

<meta name="google-signin-client_id" content="xxxxxxxxxxxxxx.apps.googleusercontent.com" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-callback" content="signinCallback" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/games" />

"google-signin-client_id" にあなたが指定する値は、前のステップにて記載されたあなたのゲームの OAuth 2.0 クライアントIDである必要があります。

ページレベルの構成オプションのより完全な説明については、Google Sign-In client referenceを参照してください。

Step 3. client.jsライブラリをロードする

Google APIs Client Libarary for JavaScriptをロードします。 このライブラリは、あなたがゲームサービスと通信し、ゲームサービスからレスポンスを受け取ることを容易にします。

クライアントライブラリをロードするには、次のスクリプトタグをあなたのページに追加します:

<script src="https://apis.google.com/js/client.js"></script>

これは、幾つかの便利な機能を作成するスクリプトを読み込み、後で使用することができるグローバルな gapi(Google APIの略)の中にそれらを置きます。

別の方法として、あなたはパフォーマンスをより向上させるために このスクリプトを非同期に読み込むことができます。

Step 4. Googleサインインボタンを使用することを検討する

あなたのページにサインインボタンを追加する最もシンプルな方法は、HTMLベースのサインインボタンを実装することです。 実装の詳細については、GoogleサインインドキュメントのIntegrating Google Sign-In into your web appを参照してください。

多くのゲームの場合、しかしながら、あなたのゲームエンジンの上のそれ自身の <div>の内部にボタンをレンダリングすることは問題となるかもしれません。 Flashゲームでは、例えば、あなたは恐らく Flash内部でサインインボタンをレンダリングし、それから、あなたのページとともに読み込まれた JavaScriptへの externalInterface呼び出しをしたいでしょうから、あなたは Googleの JavaScriptライブラリを使用してユーザをサインインさせることができます。

このページの残りの手順では、Googleのサインインボタンに頼ることなく、あなたのユーザをサインインし、Google Playゲームサービスへ呼び出す方法を示します。

Step 5. ユーザをサインインさせる

gapiクライアントは、ユーザに代わって APIを呼び出すためのライブラリを承認するために OAuth 2.0を使用します。

ひとたび gapiライブラリがロードされたならば、それはまず "silently" にユーザをサインインしようと試みます。 この呼び出しは、もしユーザが過去に既にあなたのゲームを承認したことがあり、あなたが追加のスコープを追加していなければ成功します。

もしこの呼び出しが成功したならば、あなたの google-signin-callbackにて定義されたコールバックメソッドが呼び出され、認証オブジェクトがパラメータとして渡されます。 この時点で、あなたは Googleの RESTな APIに対して呼び出すためのライブラリを使用する準備が整いました。

もしこの呼び出しが失敗したならば、コールバックメソッドが呼び出され、immediate_failedの error値を含む認証オブジェクトが渡されます。 この時点で、あなたのコールバックメソッドは、ユーザにサインインを促すボタンあるいはリンク(あるいはあなたの Flashあるいは Unityのアプリケーション内のオブジェクト)を表示する必要があります。

そのボタンあるいはリンクをクリックすると、その後、gapi.auth.signin()を呼び出す必要があります、それは、ユーザにあなたのゲームにサインインするかどうかを別ウインドウで尋ねます。 このダイアログの結果は、それからあなたの google-signin-callbackメタタグにて定義されたコールバックメソッドに渡されます。

あなたは、なぜ gapi.auth.signin()を直接呼び出す代わりにサインインのリンクを表示する手間を経る必要があるか、尋ねるかもしれません。 それは、表示されるダイアログがポップアップウインドウにて現れるからであり、もしそれがユーザのクリックに反応して発生したのでなければ、ブラウザのポップアップブロッカーによってブロックされるだろうからです。

典型的な google-signin-callbackメソッドは次のようになります:

handleAuthResult = function(auth) {
  if (auth && auth.error == null) {
    // Hooray! The user is logged int!
    // If we got here from a sign-in button, we should probably hide it
    hideMyGamesSignInButton();
    loadLeaderboardsAndAchievements();
  } else {
    // Common reasons are immediate_failed and user_signed_out
    if (auth && auth.hasOwnProperty('error')) {
      console.log('Sign in failed because: ', auth.error);
    }
    showMyGamesSignInButton();
  }
};

このコールバックメソッドは、ユーザがサイレントにサインインしたのであろうとポップアップダイアログを通したのであろうとライブラリによって呼び出されるので、このコールバックは、ユーザがサインインした方法に関係なく、Google Playゲームサービスを使用し始めるエントリの単一のポイントであることに注意してください。

Step 6. RESTなサービスに呼び出しをする

ひとたびユーザがサインインしたならば、gapiライブラリを使用して RESTな呼び出しをすることができる 2つの方法があります:

Option 1: Discovery Serviceを使用する

あなたは、Google APIs Discovery Serviceを使用することによって、クライアントライブラリが Google Playゲームサービスを呼び出す方法を簡素化することができます。 Javascriptにて Google Playゲームサービスのための Discovery Serviceを使用するには、まず、gapi.client.load呼び出しをすることによって Discoveryドキュメントをロードします:

      gapi.client.load('games','v1',function(response) {
        // Ready to make calls!
      });

これは Google Playゲームサービスの Discoveryドキュメントを読み込み、gapi.client.games内にゲームサービス固有のオブジェクトを挿入します、それから、あなたはゲームサービスへのリクエストを生成するために使用することができます。 gapi.client.gamesオブジェクト内の適切なメソッドを呼び出すことによってこれらのリクエストを作成し、それから executeを呼び出すことによってそれらを実行します。

    var request = gapi.client.games.leaderboards.list(
      {maxResults: 5}
    );
    request.execute(function(response) {
      // Do something interesting with the response
    });

POST呼び出しは似ています。

    var request = gapi.client.games.scores.submit(
        {leaderboardId: "abcdegfghijkl",
        score: playerScore}
    );
    request.execute(function(response) {
      // Check to see if this is a new high score
    })

Discovery Serviceを使用する素晴らしい機能は、あなたが Javascriptコンソールにて gapi.client.gamesオブジェクトを調べることによって、さまざまなゲーム APIの呼び出しを探索することができるということです:

Option 2: エンドポイントを直接リクエストする

もし Discovery Serviceを使用したくなく、エンドポイントを直接呼び出したいならば、あなたは gapi.client.requestメソッドを使用したリクエストを作成することができます。 もし引数に callbackを指定したならば、リクエストはすぐに送信されます。

GET呼び出しは次のようになります:

    gapi.client.request({
      path: '/games/v1/leaderboards',
      params: {maxResults: 5},
      callback: function(response) {
        // Do something interesting with the response
      }
    });

POST呼び出しは次のようになります:

    gapi.client.request({
      path: '/games/v1/leaderboards/abcdefghijkl/scores',
      params: {leaderboardId: 'abcdefghijkl', score: 101},
      method: 'post',
      // You would add a body: {} argument if the method required a request body
      callback: function(response) {
        // Do something interesting with the response
      }
    });

両方のオプションが実際に頻繁に見られますが、第一の方法がわずかにより便利になる傾向があり、一般的に推奨されています。

gapiライブラリを使用する呼び出しをすることについての詳細は、JavaScript client library reference docs を参照してください。