サーバーとの連携
ソーシャルゲームを作る上で、重要な要素の1つにサーバーとの連携があります。ngCoreではHTTPプロトコルを使って通信を行うことができます。ここからngCoreの通信機能について説明していきます。
Twitterのタイムラインを取得
ここではngCoreの通信機能を説明するために、TwitterのAPIをお借りして、任意のアカウントのタイムラインをHTTPで取得してみます。LIST6のコードはDeNAPRアカウントのタイムラインから最新の1件を表示します。
1: var XHR = require('../NGCore/Client/Network/XHR').XHR;
2:
3: function main() {
4: var url = 'http://twitter.com/statuses/user_timeline/DeNAPR.json';
5: request('GET', url, {
6: success: function(request){
7: var data = JSON.parse(request.responseText);
8: (new UI.Toast({text: data[0].text})).show();
9: }
10: });
11: }
12:
13: function request(method, url, opts) {
14: opts = opts || {};
15: var default_opts = {
16: success : function(){},
17: error : function(){},
18: };
19: for (var key in default_opts) {
20: opts[key] = opts[key] || default_opts[key];
21: }
22: var _request = new XHR();
23: _request.onreadystatechange = function () {
24: if (_request.readyState === 4) {
25: if (_request.status === 200) {
26: opts.success(_request);
27: } else {
28: NgLogD("Error:" + _request.error);
29: //NgLogD(JSON.stringify(_request));
30: opts.error(_request);
31: }
32: }
33: //NgLogD("onReadystatechange:" + _request.readyState);
34: };
35: _request.open(method, url);
36: _request.send();
37: }
コードを実行する際の注意点
このコードを実行する際に2つの注意点があります。まずWebブラウザ環境では正しく動きません。クロスサイトドメインへの通信がうまく処理できないためです。次にTwitter APIの制限として、1クライアントからのアクセスは1日150回までとなっているので、150回を超えてTwitter APIへリクエストを送るとエラーが返されます。
request関数
13ステップ目から定義されているrequest関数ですが、ブラウザ環境でXMLHttpRequestを扱うケースとほぼ同じような処理で、ngCore特有の話題ではないので、ここでは特に解説しません。
また、このrequest関数をより高機能化したモジュールなど、ゲーム開発に便利なライブラリをDeveloperサイトで公開しています。このセクションの文末に記載したURLをご覧ください。
コード解説
ではコードを順に説明していきます。
- （LIST6の1行目）HTTPプロトコルで通信するためにはXHRクラスを使います。
- （LIST6の4行目）今回はDeNAPRアカウントのタイムラインを取得していますが、他のアカウントのタイムラインを取得したければ「DeNAPR」の部分を任意のTwitterアカウント名に書き換えます。
- （LIST6の5行目）request関数を用いてGETメソッドでHTTPリクエストをしています。
- （LIST6の6行目）リクエストが成功した場合のコールバック関数を指定しています。HTTPリクエストが適切なレスポンスを返した場合、この関数が呼ばれます。
- （LIST6の7行目）このTwitter APIからのレスポンスはrequest.responseTextに入ります。このレスポンスはJSON形式のテキストですので、JSON.parse関数でJavaScriptのオブジェクト化をしています。
- （LIST6の8行目）いかにもJavaScript的な書き方になっていますが、分解するとこのようになります。
var toast = new UI.Toast(
{text: data[0].text});
toast.show();
UI.Toastクラスを使ってレスポンス内容を画面に表示しています。
UI.Toastクラスを使うと画面上部に数秒間テキストを表示させることができます。数秒後に自動的に消えますので、開発時にはプリントデバッグの手段として使うこともできます。
実行結果
このサンプルをiPhone Simulatorで実行すると図9のように表示されます。DeNAPRアカウントのタイムラインから最新の1件が表示されているのが分かります。
ゲームAPIとの連携
今回はTwitter APIをお借りしてngCoreの通信機能を説明しました。実際にソーシャルゲームを作る場合は、自分たちが管理するAPIサーバーと通信を行うことになります。その際はケースに応じて、ユーザー認証やセッション管理などを行う必要があります。
