Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

サーバーサイドのロジックもJavaScriptで!
~ngCoreを使ってMobageのソーシャル機能を実装

ゲームエンジン「ngCore」最速チュートリアル 第4回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

ClientAPIを使ってユーザー情報を表示してみよう

 Sandbox環境への接続に必要な設定が整ったので、早速クライアントアプリケーションからソーシャルAPIを呼び出してみましょう。

Mobageコミュニティボタンを表示する

 Mobageのコミュニティボタンを表示するには、LIST3のようにshowCommunityButton関数をコールします。

LIST3:showCommunityButton関数のコール
// Socialモジュールをrequireする
var Social = require('../NGCore/Client/Social').Social;

// Mobageコミュニティボタンを左上に表示
Social.Common.Service.showCommunityButton(
  UI.ViewGeometry.Gravity.TopLeft, "default");

 第1引数に配置位置の定数であるUIモジュールの定数「TopLeft」を指定し、第2引数のThemeには「default」を指定します。表示されたコミュニティボタン(図4)をタップするとMobage GlobalのコミュニティのUIが立ち上がり、他のテストユーザーに友達リクエストを送信したり、ゲームにテストユーザーを招待したりするなど、本番と同等のコミュニティ機能を利用できます。

図4:表示されたコミュニティボタン
図4:表示されたコミュニティボタン

ユーザー情報を取得して表示する

 次に、ログインしているユーザーのプロフィール情報をデータとして取得してみましょう。

 LIST4のように、getCurrentUser関数をコールしてログインしたユーザーのプロフィール情報を取得し、UIモジュールを使って表示してみます。

LIST4:getCurrentUser関数のコール
var Core = require('../NGCore/Client/Core').Core;
var UI = require('../NGCore/Client/UI').UI;
var Social = require('../NGCore/Client/Social').Social;

function main(){
  // Mobageコミュニティボタンを表示
  Social.Common.Service.showCommunityButton(
    UI.ViewGeometry.Gravity.TopLeft, "default");
  // ユーザー情報を取得して表示
  Social.Common.People.getCurrentUser(
    ["nickname", "thumbnailUrl"], function(error, user){
    if(error){
      // エラーの場合はログに出力して終了
      console.log(JSON.stringify(error));
      return;
    }

    var w = UI.Window.getWidth();
    var h = UI.Window.getHeight();

    // ニックネームをラベルで表示
    var nickname = user.nickname;
    var label = new UI.Label();
    label.setFrame(0, 0, w, 50);
    label.setText(nickname);
    UI.Window.document.addChild(label);

    // サムネイル画像を表示
    var thumbnailUrl = user.thumbnailUrl;
    var image = new UI.Image();
    image.setFrame([(w - 128)/2, 50, 128, 128]);
    image.setImage(thumbnailUrl);
    UI.Window.document.addChild(image);
    
  });
}

 getCurrentUserの第1引数には取得したいプロフィールのフィールドを指定しています。nicknameやthumbnailUrlの他にも、ユーザーIDや誕生日などの情報が取得可能です。APIとしてはCommon APIですが、取得できるフィールドはプラットフォームによって異なる場合があります。

 例えば、血液型などは日本でのみ提供されているフィールドになり、Mobage Globalでは取得できません。第2引数には、実行結果を取得して画面に表示する処理を行うcallback関数を指定しています。AjaxのXMLHttpRequestを使ったWebアプリケーションを開発したことがある開発者の方にはおなじみのコーディングスタイルかと思います。実行すると図5のような結果が得られます。

図5:実行結果
図5:実行結果
サムネイル画像について

 日本のプラットフォームは、Mobageでフィーチャーフォンの頃から使用されているアバター画像が使用されます。一方のMobage Globalでは、写真や画像などを選択してアップロードするスタイルでアバター画像はありません。海外のユーザーは、バーチャルなゲーム向けソーシャルグラフでも自分の顔写真を載せる人が多いようです。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:ゲームエンジン「ngCore」最速チュートリアル
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5