クライアントアプリケーションを実装する
最後に、一連の認証フローを行い、ログインユーザーのプロフィールの表示を行うクライアント側の処理を実装します（LIST9）。
var Core = require('../NGCore/Client/Core').Core;
var UI = require('../NGCore/Client/UI').UI;
var XHR = require('../NGCore/Client/Network/XHR').XHR;
var Social = require('../NGCore/Client/Social').Social;
var GAME_SERVER_URL = "http://localhost:3000";
function main(){
// Mobageコミュニティボタンを表示
Social.Common.Service.showCommunityButton(
UI.ViewGeometry.Gravity.TopLeft, "default");
// RequestTokenの取得を要求する
getRequestToken();
}
function getRequestToken(){
var req = new XHR();
req.onreadystatechange = function(){
if (req.readyState != 4) {
return;
}
if (req.status != 200) {
console.log(JSON.stringify(req));
return;
}
// クライアント側で認可処理を行い、得られた検証コードをGame Serverに送信する
Social.Common.Auth.authorizeToken(req.responseText, function(error, verifier){
if (error) {
console.log(JSON.stringify(error));
return;
}
// AccessTokenの取得を要求する
getAccessToken(verifier);
});
};
req.open("GET", GAME_SERVER_URL + "/getOAuthRequestToken", true);
req.send(null);
}
function getAccessToken(verifier){
var req = new XHR();
req.onreadystatechange = function(){
if (req.readyState != 4) {
return;
}
if (req.status != 200) {
console.log(JSON.stringify(error));
return;
}
// 認証成功のメッセージを表示する
new UI.Toast({
"text" : req.responseText
}).show();
// ユーザー情報を取得して表示する
getCurrentUser();
};
req.open("GET", GAME_SERVER_URL + "/getOAuthAccessToken?oauth_verifier="
+ verifier, true);
req.send(null);
}
function getCurrentUser(){
var req = new XHR();
req.onreadystatechange = function(){
if (req.readyState != 4) {
return;
}
if (req.status != 200) {
console.log(JSON.stringify(error));
return;
}
// ユーザー情報を解析
var user = JSON.parse(req.responseText);
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);
};
req.open("GET", GAME_SERVER_URL + "/getCurrentUser", true);
req.send(null);
}
Game ServerのURL設計に合わせると以下のような処理概要になります。
- /getOAuthRequestTokenにアクセスしてRequestTokenを取得
- Social.Common.Auth.authorizeTokenにRequestTokenを渡して検証コードを取得
- /getOAuthAccessTokenにアクセスして検証コードを送信、AccessTokenを取得
- /getCurrentUserにアクセスしてユーザー情報を表示する
クライアントアプリケーションからのHTTP通信には、ngCoreのAPIで提供されているNetwork.XHRを利用します。こちらも、ブラウザに組み込まれているXMLHttpRequestとほぼ同じように扱うことができるので、Web系の開発者の方にはおなじみのコーディングになります。コーディングが終わったら、make serverでアプリケーションを配布するためのNode.jsを立ち上げて、クライアントアプリケーションをBakeして実行してみてください。
ToastのUIに、「3-legged OAuth success!!」と表示された後、クライアントAPIと同じようにニックネームとサムネイル画像が表示されれば完璧です。Game Serverを使った場合の実装は、OAuthの手続きがやや面倒に感じるかもしれません。しかし、バグの修正や機能拡張がオンデマンドに対応できる点、ユーザーが機種変更時にアプリケーションのデータが移行可能である点やチートされにくいといった観点で、Game Serverを立ててサーバーサイドにアプリケーションのロジックを寄せるメリットはあります。開発するゲームの要件や特性に合わせてクライアントAPIとRESTful APIをうまく使い分けることが重要です。
まとめ
今回はMobage GlobalのSandbox環境にアクセスしてスマートフォンアプリケーションにソーシャル機能を組み込む方法を紹介しました。ngCoreによるクライアントアプリケーションだけでなくサーバーサイドのロジックもJavaScriptで十分コーディングができることがご理解いただけたと思います。
今、最も注目を集めているWeb系プログラミング言語で、AndroidとiOS向けのクライアント開発も、サーバーサイド開発も、そして、日本以外のグローバルプラットフォームもワンソースでコーディングできる環境が整っているということは非常に魅力的なことだと思います。今までWebアプリケーションを中心にソーシャルゲームを開発されてきた開発者の方々も、ngCoreとNode.jsを使ってスマートフォンアプリケーションの開発にチャレンジしてみてはいかがでしょうか。
ngCoreで開発されたゲームをAndroid／iOSアプリとしてだけでなく、スマートフォンのブラウザ上で動作させるためにHTML5実装のRuntimeを提供予定です。HTML5に対応することにより、ライブアップデート機能の強化、WindowsPhoneなどの他デバイスへの対応、決済手段の拡充などが期待されます。
