読者です 読者をやめる 読者になる 読者になる

がりらぼ

WindowsRuntimeの応援ブログ

45分でできる!!WindowsAzureでオンラインランキングの実装方法 〜大人気ゲームアルパカ牧場の実装のすべて〜

はい、完全にSurfaceRT狙いです。

上のリンクを見ていただいたらわかると思うのですが、絶賛SurfaceRTのプレゼント企画が実施中らしくて、

どうやらjazugのページからのいいね数で当選者がきまるらしいです。

いいねはこの記事ではありませんここにお願いします

 

がりっちならSurfaceRT当選してほしい!とかこの記事いい!!と少しでもおもったら、jazugのページからいいねボタンをおしていただくか、めんどかったらシェアだけでもすごくうれしいです。お願いします。

では今回のお話。コミケサーバーも動いてると噂のWindowsAzureのAzureMobileServiceというものを使ってゲームのオンラインランキングの実装方法です。

実際にやってみたら45分で完成したのでその過程と実装方法を説明します。※1

※1この記事はすでにWindowsAzureに登録してある人を対象としていますが登録してない人もコレをみてMobileServiceの簡単さを知り、登録を検討してみても良いとおもいます。

 

00:00 作業開始

1

Azure管理ポータルにアクセスし、左下の「新規」を押します。

2

下からメニューが出てくるので「モバイルサービス」→「作成」を押します。

3

URL、新しいSQLデータベースインスタンスを作成、地域はどこでもいいです。

4

続いてデータベースを作成します。

データベースの名前とサーバー、ログイン名とパスワード。コチラの地域もどこでもいいです。

5

以上でモバイルサービスの作成が完了しました。

 

04:30 クライアントアプリと接続

今回はモバイルサービスを利用するクライアントアプリとして、WindowsStoreアプリをつくっていきます。

8

VisualStudioを開いて、新しいWindowsストアアプリを作成しましょう。

ここで一旦管理ポータルに戻り、作成したモバイルサービスをクリックします。

6

するとこのようなスタートページが表示されますので、「プラットフォームの選択」を「Windowsストア」に。

その下の「既存のWindowsストアアプリに接続する」をクリックします。

7

するとこのようなコードが表示されます。(黒い部分は接続文字列です)

実はこのコードをコピペするだけで、Azureモバイルサービスのデータベースに接続出来てしまいます。

では、作成したクライアントアプリのApp.xaml.csにコピペしてみましょう。

9_1

このようにエラーを吐いて名前解決ができません。アセンブリが足らないからです。

10_1

というわけで「プロジェクト」→「Nugetパッケージ管理」から

11

左の「オンライン」をクリック、右の検索窓に「WindowsAzure.MobileServices」と入力します。

そして「インストール」

12

その後Using Microsoft.WindowsAzure.MobileServicesを名前空間に追加

13

これで名前解決ができました。

14

モバイルサービスのデータベースにデータを入力するためにこんな感じにUIをつくります。

09:32 クライアントアプリの完成

さて、クライアントアプリ作成のラストスパートです。

データベースはテーブル名、各種列に対応したクラスを作成してやる必要があります。

テーブル名→クラス名

列→プロパティ

このように対応させてやればよいです。

15

今回はOnlineDataというテーブルを作成するのでOnlineData.csというクラスを作成。

16

プロパティはId,Name,Levelの3つです。

IdはSQLデーターベースにデータを挿入する時に必ず必要な列で、手動で割り当てなくても、自動で割り当ててくれます。

ですので、コンストラクタには、nameとlevelを初期化できるようにします。

17

続いて先ほど生成したUIのボタンがクリックされたときの処理。

OnliceDataクラスのインスタンスを作成して

[csharp]</p><p>await App.MobileService.GetTable().InsertAsync(data);</p><p>[/csharp]

これでクライアントアプリの完成です。

 

26:02 データベースへデータの挿入

しかし、まだデータベースにテーブルを作成していないのでAzure管理ポータルへアクセスし、

19

「データ」→「テーブルの作成」をクリックします。

20

テーブル名は先ほど作成したクラス名の「OnlineData」です。このテーブル名は先ほどのクラスと必ず一致させてください。

そして、読み取りアクセス許可を「すべてのユーザー」にしてください。(ごめんなさい画像ではアプリケーションキーを持つユーザーになってます)

21

これでテーブルが作成されました。

テーブルをクリックしてみると、

22

当然ですがまだデータを挿入していないのでレコードが作成されていません。

18クライアントアプリに戻り、適当に入力して送信ボタンを押してみましょう。

Azureを更新すると

23

見事にデータの挿入が確認できました。

 

30:02 同一Nameの競合の解決

もう一度先ほどのクライアントアプリから送信ボタンを押すと

24

このように同一Nameなのに異なるID扱いになってますね。

これではデータの上書きが出来ません。

25

さきほどの送信ボタンをクリックしたときのコードをこのようにします。

[csharp]</p><p>OnlineData data = new OnlineData(name, level);</p><p>                    var i = await App.MobileService.GetTable&lt;OnlineData&gt;().Where(p =&gt; p.Name == name).ToListAsync();</p><p>                    if (i.Count == 0)</p><p>                    {</p><p>                        await App.MobileService.GetTable&lt;OnlineData&gt;().InsertAsync(data);</p><p>                    }</p><p>                    else</p><p>                    {</p><p>                        data.Id = i.Single().Id;</p><p>                        await App.MobileService.GetTable&lt;OnlineData&gt;().UpdateAsync(data);</p><p>                    }</p><p>[/csharp]

これで、先ほどと同じようなことをしてみます。

27

28

29

見事に同一Nameのデータが上書きされました。

 

33:56 ランキング取得機能

30

先ほどのアプリに、ランキング取得機能を実装するためにListBoxをつけます。

31

そして、OnNavigatedToに画像のコードを入力します。

32

するとSQL上のデータを取得することができました。

Azureモバイルサービスは、

[csharp]</p><p>await App.MobileService.GetTable&lt;OnlineData&gt;().OrderByDescending(p =&gt; p.Level).ToListAsync();</p><p>[/csharp]

このコードでデータを取得することができます。

しかし、これではランキングも味気ないのですこしListBoxの表示内容をかえます。

33

34

これで、ランキング送信、取得アプリの完成です。

 

42:57 完成

写真

はい。タイマーで測りながらAzureモバイルサービスを作成していましたが、なんとか45分以内に作成させることができました。

こんなに簡単にモバイルバックエンドを作成することができるとは、さすがAzureですね。

みなさんも今作っているモバイルアプリにサーバーを介したオンライン機能がほしいなと思ったらぜひAzureMobileServiceを使ってみてはどうでしょうか。

今回のプロジェクトファイルはGitHubにあげておくのでDLして改良してみてください。

[SampleServiceClient GitHub]

おまけ カスタムAPI

AzureMobileServiceはカスタムAPIという機能があります。

単純に言うとTwitterRestAPIのようなWebAPIが簡単に作成することができます。

名称未設定

モバイルサービスの管理ポータルにAPIというところがあるのでここから

スクリーンショット 2013-09-13 22.51.26

カスタムAPIを作成します。

スクリーンショット 2013-09-13 22.53.14

するとgetとpostのJavaScriptで書かれた関数が出てきます。

詳しくはコチラを見ていただいたら詳しく書いていますので、今回はSQLサーバー上のランキングデータをJSONで返すJavaScriptを書いてみたいとおもいます。

[js]

var table=request.service.tables.getTable("OnlineData");

table.read({success:function(results){

var str="[";

results.forEach(function(item){

str+='{"name"'+":"+'"'+item.Name+'"'+","+'"value":'+item.Level+"},";

} );

str=str.slice(0, -1);

str+="]";

response.send(str);

}});

[/js]

これでAPIをかけました。

しかし

スクリーンショット 2013-09-14 13.48.14

なんとアルパカ牧場のアプリからjavaScriptのコードをSQLサーバーにいれると、alertダイアログをだされてしまいました。これではAPIとして非常に脆弱性がおおきいです。

[js]

var table = request.service.tables.getTable("OnlineData");

table.read({ success : function(results){

var apiResults = [];

results.forEach(function(item){

var r = { name: item.Name, value: item.Level };

apiResults.push(r);

});

response.send(statusCodes.OK, apiResults);

}});

[/js]

そこで、このようにJavaScriptを記述すると、JavaScriptを入れられてもSQLインジェクションを起こすことなく少しセキュアなAPIを構築することができました。

APIを提供すると、2人の方がサードパーティアプリを作ってくれました!!

のむらー氏 アルパカついったー

スクリーンショット 2013-09-14 18.53.42

あじょぶじん氏 アルパカみるやつ

2013-09-13 12.49.07

すばらしいです。

以上でAzureモバイルサービスについての記事は終わりますが

この記事が良いとおもっても思わなくても、Facebookでいいね!やシェアをしていただけると、非常にうれしいです。