KB)ngCoreでのクライアント側の開発がある程度進んできたら、次にMobageのSandbox環境に接続してソーシャル機能を組み込んでいきます。ngCoreにはMobageのソーシャルグラフに直接接続するソーシャルAPIが提供されているため、実装がとても簡単です。APIを使う方法をそれぞれ紹介していきます。APIの2つに大きく分かれています。APIと呼んでいます。APIは、それぞれの国のソーシャルプラットフォームに特化した機能が提供され、プラットフォーム間で互換性が維持されないAPIです。APIを中心に開発しておいたほうがよいことになります。注1DeNAの掲げる戦略の一つで、同一の仕様のプラットフォームを世界に展開し、国を越えてMobage上でデベロッパーが開発したゲームを利用できるようにすることを目指したもの。以下に、提供されているAPIのモジュールと機能概要を列挙します。APISocial.JP.Avatarアバターの詳細画像を取得するAPISocial.JP.Service日記投稿、ミニメール送信、特商法(注2)の表記などをUIに表示するAPI注2「特定商取引に関する法律」の略称。APIとして続々と追加されていく予定です。Server)からも利用することが可能です。Sandbox環境への接続設定Mobageプラットフォームでは、ソーシャル機能のテストのためのSandbox環境を用意しています。Sandboxに接続してソーシャルAPIを動作させるためには、ターゲットとするプラットフォームのデベロッパーサイトからアプリケーションを登録し、その情報をクライアントアプリケーションに設定する必要があります。GlobalのSandboxに接続する方法を紹介したいと思います。Portalへログインします。Account」を行うと「Apps」タブが表示されるので、その「Apps」タブをクリックしてアプリケーションの登録を行います(図1)。Keyで新規にアプリケーションを登録してみました。Applications」で確認してください(図2)。Portal上でアプリケーションの登録が完了したら、ngCoreで開発しているアプリケーションのconfiguration.jsonに登録したアプリケーション情報を設定します。手始めにSDKに付属しているサンプルのSamples/HelloWorld/configuration.jsonをLIST1のように編集します。true}「requireMobageLogin」はMobageへのログインを有効化する設定項目です。ソーシャル機能を動かす時には必ずtrueを設定しておきましょう。configuration.jsonの配置場所configuration.jsonはbootconfig.xmlでアクセスする最初のアプリケーションに設定されているものが有効になります。Samples/HelloWorld/configuration.jsonにアプリケーションの設定をしても、Samples/Launcher経由でHelloWorldを実行した場合は、Samples/Launcher/configuration.jsonの設定が有効になるので注意してください。Regionの切り替えconfiguration.jsonの設定が終わったら、次にngCoreのライブラリのRegionの切り替えを行います。Globalのソーシャル機能へアクセスする実装に切り替えます。Global実装に切り替えています。toggle-jp」を使用します。中国であれば、「maketoggle-cn」です。コマンド1行でターゲットとするプラットフォーム用のライブラリに切り替えることができるので便利です。テストアカウントの作成とログインクライアントのゲーム部分の開発の時と同じように、makeserverでNode.jsを立ち上げ、bootconfig.xmlをSamples/HelloWorldに向けてアプリケーションを立ち上げてみましょう。ランタイムは、「US_LIVE_SAND_SDK」という名前を含むapkファイル、またはappファイルを使用します。Simulatorで実行する場合は、webgame_US_LIVE_SAND_SDK-iPhone-Simulator.app内のbootconfig.xmlを編集して起動します。図3のようなログイン画面が出てくれば成功です。GlobalのSandboxログイン画面テストユーザーのアカウントがないため、この画面からテストユーザーを作成してみましょう。Upボタンをタップすると、ウィザード形式でテストユーザーを作成できます。作成したテストユーザーでログインするとHelloWorldのアプリケーションが今までと同じように起動します。見た目はクライアントの開発時と何も変わりませんが、Sandbox環境にアクセスするソーシャルAPIが有効になっています。ClientAPIを使ってユーザー情報を表示してみようSandbox環境への接続に必要な設定が整ったので、早速クライアントアプリケーションからソーシャルAPIを呼び出してみましょう。Mobageコミュニティボタンを表示するMobageのコミュニティボタンを表示するには、LIST3のようにshowCommunityButton関数をコールします。"default");第1引数に配置位置の定数であるUIモジュールの定数「TopLeft」を指定し、第2引数のThemeには「default」を指定します。GlobalのコミュニティのUIが立ち上がり、他のテストユーザーに友達リクエストを送信したり、ゲームにテストユーザーを招待したりするなど、本番と同等のコミュニティ機能を利用できます。図4:表示されたコミュニティボタンユーザー情報を取得して表示する次に、ログインしているユーザーのプロフィール情報をデータとして取得してみましょう。LIST4のように、getCurrentUser関数をコールしてログインしたユーザーのプロフィール情報を取得し、UIモジュールを使って表示してみます。});}getCurrentUserの第1引数には取得したいプロフィールのフィールドを指定しています。nicknameやthumbnailUrlの他にも、ユーザーIDや誕生日などの情報が取得可能です。APIですが、取得できるフィールドはプラットフォームによって異なる場合があります。Globalでは取得できません。第2引数には、実行結果を取得して画面に表示する処理を行うcallback関数を指定しています。AjaxのXMLHttpRequestを使ったWebアプリケーションを開発したことがある開発者の方にはおなじみのコーディングスタイルかと思います。実行すると図5のような結果が得られます。図5:実行結果サムネイル画像について日本のプラットフォームは、Mobageでフィーチャーフォンの頃から使用されているアバター画像が使用されます。Globalでは、写真や画像などを選択してアップロードするスタイルでアバター画像はありません。海外のユーザーは、バーチャルなゲーム向けソーシャルグラフでも自分の顔写真を載せる人が多いようです。APIを呼び出す形で実装する方法を紹介します。Serverのロジックを実装してみようと思います。OAuth(注3)に準拠した認証フローを実装する必要があります。注3RFC5849に準拠。Server、Mobageプラットフォームの3者間でデータをやり取りしながらの認証を行うアーキテクチャを採用しています。ここでは、簡単に今回実装する認証フローを説明します(図6)。KeyとConsumerSecretのペアをもう一つ作成する必要があります。KeyとSecretを作成しましょう(図7)。Secretの作成画面この時に、「Server」チェックボックスにチェックを入れて作成してください。1.0の署名を生成・付与する必要があるので、今回はnode-oauthというライブラリを使用することにします。Node.js用のWebアプリケーションフレームワークとして人気のあるexpressも使用したいと思います。Node.jsのモジュールのインストールにはnpmコマンドが便利なので、まずはLIST5のコマンドでnpmをインストールしてください。sh次に適当な作業ディレクトリーに移動し、npmコマンドを使用して「oauth」と「express」をインストールします(LIST6)。Serverの実装をするGameServer.jsも作成しておきましょう。Serverを実装するここまで来たら実装の準備は完了です。表1のようにURLを設計してみました。ConsumerSecretを使って、LIST7のような実装に落とし込んでいきます。http://localhost:3000");今回は簡易的にサーバー側のセッションにOAuthのTokenを保存して認証フローを実現していますが、実運用でスケールされたサーバー環境の場合は、RDBやmemcachedなどの永続化メカニズムを使用することが一般的です。Serverを起動して動作確認をしてみましょう(LIST8)。http://localhost:3000ブラウザからhttp://localhost:3000/getOAuthRequestTokenを開き、問題なくRequestTokenが取得できるかテストしてみましょう(図8)。図8:getOAuthRequestTokenの実行結果クライアントアプリケーションを実装する最後に、一連の認証フローを行い、ログインユーザーのプロフィールの表示を行うクライアント側の処理を実装します(LIST9)。ServerのURL設計に合わせると以下のような処理概要になります。/getOAuthRequestTokenにアクセスしてRequestTokenを取得Social.Common.Auth.authorizeTokenにRequestTokenを渡して検証コードを取得/getOAuthAccessTokenにアクセスして検証コードを送信、AccessTokenを取得/getCurrentUserにアクセスしてユーザー情報を表示するクライアントアプリケーションからのHTTP通信には、ngCoreのAPIで提供されているNetwork.XHRを利用します。こちらも、ブラウザに組み込まれているXMLHttpRequestとほぼ同じように扱うことができるので、Web系の開発者の方にはおなじみのコーディングになります。serverでアプリケーションを配布するためのNode.jsを立ち上げて、クライアントアプリケーションをBakeして実行してみてください。success!!」と表示された後、クライアントAPIと同じようにニックネームとサムネイル画像が表示されれば完璧です。Serverを使った場合の実装は、OAuthの手続きがやや面倒に感じるかもしれません。Serverを立ててサーバーサイドにアプリケーションのロジックを寄せるメリットはあります。APIをうまく使い分けることが重要です。GlobalのSandbox環境にアクセスしてスマートフォンアプリケーションにソーシャル機能を組み込む方法を紹介しました。ngCoreによるクライアントアプリケーションだけでなくサーバーサイドのロジックもJavaScriptで十分コーディングができることがご理解いただけたと思います。今、最も注目を集めているWeb系プログラミング言語で、AndroidとiOS向けのクライアント開発も、サーバーサイド開発も、そして、日本以外のグローバルプラットフォームもワンソースでコーディングできる環境が整っているということは非常に魅力的なことだと思います。今までWebアプリケーションを中心にソーシャルゲームを開発されてきた開発者の方々も、ngCoreとNode.jsを使ってスマートフォンアプリケーションの開発にチャレンジしてみてはいかがでしょうか。HTML5ベースのアプリ書き出しngCoreで開発されたゲームをAndroid/iOSアプリとしてだけでなく、スマートフォンのブラウザ上で動作させるためにHTML5実装のRuntimeを提供予定です。HTML5に対応することにより、ライブアップデート機能の強化、WindowsPhoneなどの他デバイスへの対応、決済手段の拡充などが期待されます。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。