SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ゲームエンジン「ngCore」最速チュートリアル(AD)

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

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

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

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では、写真や画像などを選択してアップロードするスタイルでアバター画像はありません。海外のユーザーは、バーチャルなゲーム向けソーシャルグラフでも自分の顔写真を載せる人が多いようです。

次のページ
RESTful APIを使ってユーザー情報を表示してみよう

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ゲームエンジン「ngCore」最速チュートリアル連載記事一覧

もっと読む

この記事の著者

水島 壮太(株式会社ディー・エヌ・エー)(ミズシマ ソウタ(カブシキガイシャディー・エヌ・エー))

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6326 2012/04/11 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング