おめでとうをいっぱい新郎新婦に届ける『全員参加！メッセージ送信ゲーム』
みんなが各自のスマホから新郎新婦に向けたお祝いメッセージを送ると、画面にお祝いを贈った人の顔写真とメッセージが表示され、少しずつ背景画像がめくられ現れていきます。すべてめくり終えるとミッションクリア！余興ムービーの上映がスタートされます。ゲームとムービーが一体になった新感覚？ゲームです。
そのゲームの裏でmbaasをどう活用したかを解説させていただきます。
- mBaaS使って何かできないかな…がはじまり
- ゲームのコントローラーに『スマホ』を活用
- Webアプリに活きた mBaaS 良いところを３つご紹介 ｶﾓﾝщ(ﾟдﾟщ)ｶﾓｰﾝ
- 出来たWebアプリを使ってゲームを遊ぼうb
- さいごに
mBaaS使って何かできないかな…がはじまり
今秋、私たちmBaaSチームのメンバーが結婚しました！とてもおめでたい:ஐ(●˘͈ ᵕ˘͈)人(˘͈ᵕ ˘͈●)ஐ:！披露宴に招待してもらえたので、『ぜひ余興をやりたい！やるからには私たちのサービス「mBaaS」を使って何かしたい！』そう思いたったのがこのゲームが出来たきっかけでした。mBaaSチームメンバーを召集して４人でプロジェクト(?)を立ち上げ、
- 参加者全員を楽しませる
- 両家ご両親にmBaaSというサービスの良さを知ってもらい感涙させる
ことを目標に余興ゲームの企画が始まりました。 mb.cloud.nifty.com
ゲームのコントローラーに『スマホ』を活用
○ゲーム本体（Unity）のお話はこちら mbaas.hatenablog.com
披露宴会場といえば、大きなスクリーンがおなじみ。スクリーンを使ってドーンと派手なことをしたいな～。mBaaS 使うんだし、やっぱりゲームじゃない？そしたら Unity で作ろうか！どうやってゲームに参加する？スマホで Webアプリ 作れないかな？…てな感じでとんとん拍子にゲームが決定しました。（チームワーク素晴らしい☆）４人それぞれの特性を活かして役割は以下のように分担しました。
- ゲームのWebアプリを作成
- ゲーム本体を作成
- ゲームクリア後上映するムービー作成
- 披露宴会場との調整＋当日の司会進行
Webアプリに活きた mBaaS 良いところを３つご紹介 ｶﾓﾝщ(ﾟдﾟщ)ｶﾓｰﾝ
自分は「ゲームのWebアプリを作成」を担当しました。Webページは HTML と JavaScript（あとjQuery Mobile）を使って構築することにしました。ここではゲームコントローラーとしてのWebアプリについてmBaaS活用のポイントを紹介します。
mBaaSの活用ポイント①：CMS的な使い方ができる
作ったファイルのホスト先はどうしよう？という問題が出てきます。簡単なやり方として mBaaS を CMS 的使う方法があります。まず、HTML や JavaScript などのソースファイルをすべて mBaaS 上に置きます。次に公開ファイル設定を有効にすると各ファイルの URL が発行されるので、後は HTML ファイルの URL にアクセスするだけ。簡単でしょ(๑˃̵ᴗ˂̵)و？
でも１つだけ問題があって…今回はJavaScript ファイル上でも mBaaS を使っています。そのとき JavaScript SDK を利用するために APIキー を記述していますが、これが丸見えになってしまっています、、ただし、今回はあくまで「披露宴の余興」としてのゲームなので、気にせず使っています◎（外部に公開するWebアプリの場合は APIキー がもれたら悪用される危険性があります！適切に APIキー を隠す処理を入れてくださいね～＞＜）
mBaaSの活用ポイント②：Webアプリから画像の保存が簡単にできる
Webアプリは、
- 名前と顔写真の登録画面
- メッセージ送信画面
の２画面構成です。誰がお祝いメッセージを投稿したか、名前だけでなく自撮り写真で一目わかるようにするため、最初に顔写真の登録ができるようにしました。顔写真は mBaaS にアップロードして、ゲーム本体でそれを取得し利用しています。スマホで撮影した画像を保存できる形式に変換する作業が少し必要ですが、保存は
ncmb.File.upload(photoName, photoData)
この１行だけ！簡単！(┐「ε:)❤
mBaaSの活用ポイント③：同時アクセス制御ができる
メッセージ送信のところにも一工夫あります。基本は mBaaS にメッセージを保存すれば、ゲーム本体でデータを取得して活用できるので、それほど難しくはないです。（補足：メッセージと一緒に名前と自撮り画像データも紐付けて保存ます。）ただ、披露宴の参加者数はなんと100人超え！！！！うそっ。。٩(๑꒦ິȏ꒦ິ๑)۶ 同時接続時にエラーにならず、尚且つメッセージを送った順番を確実に保つようにしなければゲームを楽しんでもらえないじゃないか…。。ピンチ。。( ͡° ͜ʖ ͡°) あ、でもスクリプト機能使えばいいのか٩(•౪• ٩)
スクリプトは JavaScript で書いたファイルをサーバーサイドで実行できる機能です。呼び出された順番に、確実に処理実行をしてくれるので、スクリプトを介して保存を実行すれば同時接続制御が可能です。
出来たWebアプリを使ってゲームを遊ぼうb
Webアプリ動かしてみたい方へ、サンプルコードを用意しましたので活用ください。 github.com
ゲーム本体（Unity）と組み合わせることでゲームが完成し、遊べるようになります(ง ´͈౪`͈)ว ｳｷｳｷ◎ ゲーム本体（Unity）のお話はこちら
さいごに
いかがでしたでしょうか。みなさんもサンプルコードをもとに、mbaasを余興アプリの企画に使ってみてください。きっと楽しいですよ！
