「勉強会に行ってみた!」 第19回「Monaca × mBaaSで簡単ゲームアプリ開発ハンズオン」
event

「勉強会に行ってみた!」
第19回「Monaca × mBaaSで簡単ゲームアプリ開発ハンズオン」

2015.12.03

ent131_img01.jpg

最近はアプリやゲームなど、色々と無料のものが増えてきました。
今回はmBaaSです。たとえば、ゲームとかのアプリを作りたいけど会員登録とかスコア登録とかのサーバーに関わる部分を作り込むのは大変、というときにそのサーバーに関わるバックエンド部分をフロントからAPIで簡単に呼び出せるようにしたもの。実際の使い心地はどんなだろうと思って行ってきました。

三土たつお

今回の勉強会で扱うmBaaSは、ニフティの提供する「ニフティクラウド mobile backend」です。なので会場は西新宿のニフティ本社。

ent131_img02.jpg

余談ですが、ぼくはニフティの「デイリーポータルZ」という読み物サイトでもライターをしているので、ここにはよくお邪魔します。ですが、ニフティの提供する商品についてはいまいちよく分かっていなかったりするので、今日はちゃんと勉強したいと思います。

講師は、オープンソース紹介サイト「MOONGIFT」の中津川さん。

ent131_img03.jpg

「ドットインストール」っていう動画でのプログラミング学習サイトがあるのはご存知でしょうか。そこに企業の協賛するスポサンードレッスンという枠が新しく出来たのですが、その第一号が「ニフティクラウド mobile backend」なんだそうです。

その学習用の動画を作成したのが、今日の講師である中津川さん。なので今日は基本的にはドットインストールの動画を見ながら各自もくもくと進め、分からないところがあったら中津川さんやその他ニフティのスタッフに聞くというスタイルになります。

■mBaaSとはなにか

まずは、mBaaSってなんだっけというところと、ニフティのmBaaSはどんなのかという話。

ent131_img04.jpg

モバイルアプリを開発していると、どうしてもサーバー側の開発と絡めないといけない部分というのは出てきます。会員登録とか、スコアやアイテム登録とか、プッシュ通知とかです。でもサーバー側のプログラム開発とか運用はそれなりに大変です。そういうバックエンド部分だけをAPIサービスとして利用できるように切り出したのがmBaaS。

「ニフティクラウド mobile backend」だと月間200万APIアクセスまで無料とのことで、それって個人のお試しレベルだとほぼ無限ですよね。これはすごいなと思いました。

ent131_img05.jpg

こういうところもいたれりつくせり感があります。ニフティすごい。

ent131_img06.jpg

今回つくろうとするゲームはこんな感じ。ゲームをスタートすると中心から円が広がっていくので、指示された大きさに近づいたところでタップする。円の大きさが指示に近いほど高得点。スコア登録とランキング表示の機能があり、ゲーム開始時にユーザー登録とログインがあります。

前半はアプリ内で閉じてますが、後半のスコア登録以降はサーバーとの連携が必要で、ここにmBaaSを使います。また、モバイルアプリの開発環境としては Monaca を使います。

ent131_img07.jpg

まずはニフティクラウドmobile backend に登録。そして新しくプロジェクトを作ります。

ent131_img08.jpg

Monaca IDEはこんな画面。ここに、ゲーム画面をHTMLで作って行きます。まずはログイン画面です。

ent131_img09.jpg

こんなふうにゴリゴリとHTMLのフォームを書くと、

ent131_img10.jpg

あっという間にログイン兼ユーザー登録画面の見た目ができました。で、実際にユーザー登録なりをするためにはバックエンドとの連携が必要です。ここがキモなので詳しく見てみましょう。

ent131_img11.jpg

まず、ログイン処理のコードはこんなふうです。

ncmb.User.login(username, password)
.then( function() {
  // ログイン成功
})
.catch( function() {
  // ログイン失敗
});

ncmb変数は、ニフティクラウドmobile backendに接続するためのハンドラーです。直前にAPIキーなどをもとに接続済みになっています。User.login()でユーザーネームとパスワードを渡してやると、ログインに成功すれば then() の中の処理が、失敗すると catch() の中の処理が走るようになっています。コールバックじゃなくてプロミスっぽいAPIなので読みやすいですよね。

それからユーザー登録はこんなふう。

var user = new ncmb.User({
  userName: username,
  password: password
});
user.signUpByAccount().
then( function() {
 // ユーザー登録成功
});

これも分かりやすい。ユーザー名とパスワードを指定したインスタンスを作って、それをもとに signUpByAccount() を呼び出す。成功すれば then() の中の処理が走る。

mBaaS との連携は基本的にこんな感じです。それぞれのAPIが綺麗でコンパクトにまとまっているので、本質的なコードだけを書けばいいようになっているし、書きやすいです。

こんな感じで各自もくもくと進めていきます。

ent131_img12.jpg

イヤホンをつけてもくもくと。

ent131_img13.jpg

この方はiPadで動画を流しつつ、Macbookで開発。効率的!

ハンズオンの時間は1時間30分なんですが、動画が各3分で約20本あるので、動画を見るだけで1時間かかります。だから純粋にコードを書く時間は30分くらいなんですが、それでも時間内に終わりまでやりきっている方が何人かいて、すごいなと思いました。ぼくだったらつまらないところでハマって1時間くらいすぐ経ちそうです。でも詳しい人にその場ですぐ聞けるってのはいいですね。

その後は懇親会になりました。

ent131_img14.jpg

食べきれないほどのピザとサンドイッチや飲み物がそれぞれのテーブルにあって、ニフティすごいなと今日何回目か思いました。

中津川さんもいたので、動画について聞いてみました。動画はそれぞれ3分ほどになっていて、見ている分には非常にサクサクと進みますし、とても分かりやすいです。なので「すごく分かりやすかったです!」と伝えたところ、「動画を見てる分にはそう思うんですけど、実際に手を動かすともう少し大変ですよ」と言っていました。たしかに、打ち間違えとかでハマったりすることもありますからね。

それから、動画を作るのがそもそも大変なんだそうです。一発撮りなので最後の最後で失敗して撮り直し、とか、そういう苦労がいっぱいあるんだそうです。

ぜひ、ドットインストールの「簡単ゲーム開発!ニフティクラウド mobile backend でワンタップゲームを作ろう」
http://dotinstall.com/lessons/onetap_game_ncmb
を見てみて下さい。とても分かりやすいんですが、裏にはそういう苦労が隠れていたんですね。

■まとめ

mBaaSって今いちピンときてなかったんですが、これは確かに便利だなと思いました。Javascriptから叩くためのライブラリーがすでにあるのですぐ使えるし、APIもよくできてます。しかも月間200万アクセスまで無料ならほんと気軽に試せます。今回は会員登録とかスコア登録なんで、自分でもまあ作れるかなっていう感じはありますが、プッシュ通知とかになると自分でサーバー側を組むのはめんどくさいですよね。とにかく一度試してみたいなと思いました。

今回行った勉強会:
「Monaca × mBaaSで簡単ゲームアプリ開発ハンズオン」

http://ncmb.connpass.com/event/21078/

三土たつお。1976年生まれ。プログラマー、ライター。プログラマーとしてはふだんPHPを書いてます。
ライターとしてはニフティのデイリーポータルZとかで書いてます。
http://mitsuchi.net/

この記事はどうでしたか?

おすすめの記事

キャリアを考える

BACK TO TOP ∧

FOLLOW