Azure, Node.jsとsocket.ioで作る早押しクイズ大会アプリ

先日の忘年会のネタに早押しクイズ大会アプリを作りました。




1．主催者がアプリのURLをブラウザで開き、クイズ大会を開始。
2．画面にパスコードが表示されるのでアプリのURLとパスコードを参加者に伝える。
3．各参加者はスマホのブラウザでアプリのURLを開いてパスコードを入力。
4．人数が集まったら主催者が「開始」ボタンを押す。
5．参加者の画面に問題が同時に表示される。
6．最初の正解者が3点、2番目の正解者が2点、3番目が1点獲得。不正解はマイナス1点。
7．5〜6を繰り返す。
8．全ての問題が終わったら結果発表画面を表示。

という流れで動きます。

ソースコードはこちら。
https://github.com/mikehibm/EnkaiQuiz

ホスティングはもちろんAzure Web Sites。

コーディングは全てVS Online上で行いました。Azure Web SitesとVS Onlineを組み合わせるとNode.jsアプリの開発はローカルに環境を一切作らなくても出来るのでとても便利です。

快適にコーディング出来たVS Onlineの画面

一応、同時に複数のクイズ大会をホスト出来る様になっています。

今回初めてsocket.ioを使ってサンプルのチャット以外のアプリを作りましたが、思っていたよりスムーズに作る事が出来ました。

とは言っても、サーバー側からクライアントにメッセージを送るのに io.emit() を多用してしまっているのはまずいかも。本来なら特定のクイズ大会に参加している人のみに送信するべきですね。

リファレンスを見ると、「Custom namespaces」を使う方法と「Rooms」を使う方法の2種類あるのかな(?)

http://socket.io/docs/rooms-and-namespaces/

実は他にも色々と改善が必要な点が。(笑)

- サーバー(Node)のプロセスが落ちたら全部消える。→ サーバー側のデータはDBに永続化しないと。
- クライアント側のデータも出来ればLocalStorageに格納したい。
- エラー処理をもっとちゃんとしないと。
- 単体テストは...  ...


見直せば見直すほどいろいろ出て来ますが、また余裕が出来たら改善しようかと思います。今回の忘年会では参加者10人で問題なく動いてくれたのでとりあえずいいかなと。



残念ながら今年の忘年会シーズンはほぼ終わってしまいましたが、新年会で使えるかも(?)

クイズの問題と解答のデータは public/js/data.js にJSON形式で入っているので変更するのも簡単です。

実行時に動的に外部からデータだけ読み込める様に改造するのも良いですね。

動かしてみたい方はぜひGitHubのソースをForkして試してみて下さい！







　
.

Nexus 6を買って14日目の感想

大きさと重さについては「案ずるより産むが易し」

慣れれば大丈夫。と言うよりこの画面の大きさはクセになる。

重さに関してはもちろん軽いに越したことはないけれど、タブレットみたいに重さで手が疲れるとかそういう事は無いので気にならない。

でもポケットから取り出す時には落とさない様にちょっと気を付ける必要があるかも。

Webサイトの閲覧はますますスマホ中心に

縦持ちでも結構広いし横持ちにすれば大体どんなPC用サイトでもそのまま閲覧出来る。

今までは「スマホではブログやニュース記事のタイトルだけチェックして中身はPCで後から読む」というスタイルだったのが、「スマホでその場で読む」に変わりつつある。

縦向き

横向き

やっぱり画面が広いのは良い事だ。

大きいキーボードで文字入力が速く快適に！

2年以上愛用したGalaxy S3と比べて一番変わったのはこの点かも知れない。
今までは
「スマホで文字を入力する事」=「極力避けたい事」
だったのが、これからはそうでもなくなりそうだ。

充分に高機能なカメラ

カメラについては、前に使っていたGalaxy S3と比べるとかなりスペックが上がっているので特に不満は無し。かと言って正直感動するほどでもなかったかな。

パノラマ撮影

ぼかし効果付きの写真も簡単に撮影可能。

あとGalaxy S3はカメラのシャッター音が大きくて不便だったけれど、Nexus 6の場合は端末のボリュームを下げてバイブにしておけば無音で撮影出来る。これは嬉しい。

キーボードとマウス、外部ディスプレイを繋げばPCになる(?)

Chromecast があれば無線で簡単に画面全体を外部ディスプレイへ出力する事が可能だ。大画面で見ると 2560×1440px というNexus 6の解像度の高さがますます活きてくる。
(訂正: Chromecastを経由すると解像度が落ちるので2560x1440pxの画面がそのまま表示される訳ではない。)

会社のPCにRemote Desktopで接続すればPC無しでデスクトップ環境を再現する事も出来そうだ。(遅延がどれくらいになるかはまだ試していないので分からない。) 　
(*試した結果は下の「後日談」参照)


Nexus 4や5では、MicroUSBポートに「SlimPort」という規格に対応したアダプタを挿せばHDMIのディスプレイに画面をミラーリング出来たらしい。ところがどうも調べた所 Nexus 6ではケーブル接続での外部ディスプレイ出力には対応していないみたいだ。

なので外部ディスプレイとの接続には Chromecast か Miracast* を使うしかなさそうだ。

* Googleのサポートページによると、なんと 『Nexus 6とNexus 9はMiracastをサポートしていません』との事。

https://support.google.com/nexus/answer/2865484?hl=en

** なぜか工場出荷時にMiracastを使用不可にしてあるらしく、Root化してbuild.propというファイルに1行追加すれば使える様になるとの情報が下のページにあった。

http://forum.xda-developers.com/nexus-6/help/nexus-6-miracast-t2952461/page2

我が家には1年以上前に買ったChromecastがあったので、試しにそれで居間のテレビに画面をミラーリングしてみた。

通知エリア内の「Chromecast」ボタンを押すと画面のミラーリングが始まる。

Chromeブラウザの画面。スクロールすると一瞬のタイムラグを感じる。

Youtubeの動画をミラーリングして観るだけなら遅延はほとんど感じない。

画面を出力する事が出来たら、次はキーボードとマウスだ。

1. USBケーブルで有線接続する
2. Bluetoothで無線接続する

の2通りの方法がある。
どちらでも良いのだけれどとりあえずOTGアダプタ(こんなやつ)とUSBハブを買って1つめの方法で試して見ようと思っている。これだといつもPCで使い慣れているキーボードとマウスをそのまま使える。



*後日談
PCにRemote Desktopで接続してChromecast経由でディスプレイ出力するというのを試して見た。MicrosoftのRemote DesktopクライアントとGoogleのChrome Remote Desktopの両方を試した。

結果、やっぱりあまり実用的には使えない事が判った。キーボードはそれなりに使えるのだけど、マウスの動作がどうしても1テンポ遅れてしまう。これでは細かな作業には使いづらい。

Remote Desktop自体はNexus 6の画面上ではストレス無く動いているので、Chromecastを経由する事による遅延が原因だと思う。もちろん無線LANの速度にも影響されるだろう。試した環境は11n(300Mbps)だったので、これが11ac(6.9Gbps)とかになれば改善されるのかも知れない。と思ったらChromecastは11acに対応していないらしいので現状ではこれ以上は無理そうだ。

また、遅延の問題以前に解像度の問題もある。Chromecastを経由する事で解像度が落ちてしまい文字がボヤケて表示されるのだ。

こういう用途はそもそも想定外で、Chromecastはあくまで写真・動画の鑑賞やプレゼンなどに使うものという事だろう。

もしSlimportかMHLでの有線接続が出来ていたらもっと便利に使えただろうと思うとちょっと残念だ。

3日目に遭遇したトラブル

買ってから2日目の夜にバッテリーが残り20%ぐらいの状態でそのまま寝てしまった。朝になってから使っていると何か画面の反応がおかしい。スクロールすると縦半分だけが取り残されて表示が崩れたりする。最後には白黒の砂嵐状態になってしまった。ちょうど電波が無い時の地上波テレビみたいな感じだ。

慌てて電源アダプターをつなぐ。それから完全にシャットダウンして再起動してもしばらくすると同じ現象が起きる。しかも全く電話が繋がらない。「これはキャリア(Sprint)の店舗に行って交換してもらうしか無いかな〜」と焦っているうちにうんともすんとも反応しなくなってしまった。

結局、電源アダプターをつないだまま2時間ほど触らずに置いておく事でこの現象は直った。それ以降は必ず1日1回は充電する様にしている。それから再発はしていないので、多分大丈夫だと思う。

総合的には今のところ「ほぼ満足」

端末代は高いけれど、最先端のAndroidを体験したい人には強くおすすめ出来る。実はiPhone 6 Plusにしようかこっちにしようかかなり迷ったけど、Nexus 6にして良かった。Android 5.0は完成度が高くてとても使い易い。

Remote Desktop接続を多用する超小型PC好きとしては、有線で遅延/劣化の無いディスプレイ出力が出来ないのだけがちょっと残念だ。(笑)








　
　

Azureモバイルサービスを使ってNexus6の在庫をチェックしてみた

Nexus6 買いたいのに買えない。。。

いつ見ても「在庫切れ」という表示ばかりで、いつになったら買えるのやら。

https://play.google.com/store/devices/details/Nexus_6_64GB_Cloud_White?id=nexus_6_white_64gb


さすがに毎回ブラウザを開いて在庫状況をチェックするのが面倒になったので、Azureモバイルサービスを使って自動でチェックして見る事にした。

Azureモバイルサービス いいね！

requestモジュールとSendGridを使えば、「HTTPリクエストを発行して結果に応じてEメールを送信する」事が簡単に出来る。

しかもそれを最小1分単位に繰り返して実行する様にスケジューリングまで出来てしまう。

メール送信サービスの SendGrid はAzureの管理サイト内(Market Place)から申し込めば25000通/月まで送信出来る無料アカウントを作成してモバイルサービスと連携させる事が出来る。

作ったスクリプトは下の通り。

もちろんリクエストするURLと、結果の文字列の比較条件さえ変えればどんなWebサイトの監視にも使える。

サーバーすら立てずに無料でこういう事が出来るとは、便利な世の中になったものだなあー！

しかしN6の在庫は早くなんとかして欲しい。(笑)




※2014/11/19 (水) 追記

Google Playのページには英文で「毎週水曜日に在庫が補充されるよ」と書いてあったので「今日こそは」と思っていたけれどやっぱりダメ。ところが試しにSprintのサイトを見てみたら、なんとブルーの32GBだけが買える様になっていたので、そのままオーダーしてしまった。

$27の24回分割払い

なので、米国内であれば今のところGoogleから買うよりもキャリア経由で買ったほうが良いかも。

JavaScriptでスマホゲームアプリを作る - Cocos2d-JS編

前回のPlatino版に続いて、Cocos2d-JS版が出来た。



ソースコードはこちら。https://github.com/mikehibm/15puzzle-cocos2d

● 困ったところ

う〜ん、特になし。

あえて言えばy座標の指定方法(上下)がこれまでと逆になるのでそれを変更する必要があったぐらい。

あとそういえば、ifで座標が一致するかどうかを比較して分岐している箇所があって、

　if (piece.x !== new_pos.x || piece.y !== new_pos.y){

　　　...処理...

　}

と書くと処理が実行されなくて困った。(浮動小数点数なので)

下の様に差分の絶対値で比較する様に変更した。

　if (Math.abs(piece.x - new_pos.x) > 1 || Math.abs(piece.y - new_pos.y) > 1){

　　　...処理...

　}

● 良かったところ

アニメーションの作り方やシーン遷移の方法など、これまでに得たCocos2dの知識が活かせるので楽が出来た。

実機での実行速度も申し分無し。

デバッグが簡単。Cocos Code IDEからデバッグ実行しておくとJSファイルを修正して保存した瞬間にデバッグアプリ内でコードが再ロードされるのですぐに確認出来る。もちろんブレークポイントを設定する事も可能！

● アニメーション実行中にさらにアニメーションを実行する場合

MoveToを使ってピースを移動するアニメーションを実行中に、場合によってはさらに次のアニメーションを開始する必要がある場合がある。連続でタッチして同時に複数のピースを動かした場合などだ。

その場合、同じSpriteに対して同時に複数のMoveToアニメーションを実行してしまうと最終的な位置が思わぬ所にずれてしまう事になる。

これについては、2つめのMoveToアニメーションを実行する前に

　piece.stopActionByTag(ACTION_TAG);

を実行して前のMoveToを中止する事で解決出来た。

● Mac版デバッグアプリの設定変更

Cocos Code IDEから実行するとデフォルトだとMac版のデバッグ用アプリが立ち上がって来てその中でアプリが実行される。

このデバッグ用アプリの画面サイズ(Zoom設定)が、起動する度に100%になってしまいMBAだとiPhone5の縦画面がディスプレイに収まらないので、そこがちょっと使い辛かった。

これは下のページの通りに設定を変更する事で50%表示にする事が出来た。これでとても快適になった。

Lua - Cocos Code IDEのシミュレーターのデフォルト設定 - Qiita 

● ソースコード

今回のソースコードはこちら。
https://github.com/mikehibm/15puzzle-cocos2d

● 感想

さすがに注目度急上昇中のフレームワークだけあって Cocos2d-JS は使い易い。デバッグも素早く出来るので気分良く開発が出来る。

またXcodeやEclipseからもプロジェクトを開いて実行出来るので、広告表示やアプリ内課金などのネイティブ連携も頑張ればなんとかなりそうだ。

パーティクルエディタやシーンエディタなどのツール群も充実しているので、やっぱり一番安心して実戦で使えるのはこれかなあと思う。

あと次はUnityにチャレンジしてCocos2d-JSを上回るメリットがあるかどうかを試したい。








　.

JavaScriptでスマホゲームアプリを作る - Titanium + Platino編

ようやく15パズルのTitanium+Platino版が出来た。

Platino Game Engine


ソースコードはこちら。 https://github.com/mikehibm/15puzzle-platino

● Platinoプラグインの導入

プラグインの導入は至って簡単。トライアル版をダウンロードして解凍して所定のフォルダにコピーすればTitanium側で認識してくれた。

あとはプログラムの先頭に

var platino = require('co.lanica.platino');

をいれてガンガン使って行くだけだ。

BGMや効果音を鳴らす時は

var ALmixer = platino.require('co.lanica.almixer');

も必要。

さらにapp.jsなどで最初に一回だけ

ALmixer.Init(0,0,0);

を呼んで初期化しておく必要がある。最初この初期化をしてなかったせいで音が出なくて30分ほど悩んだ。

● まずはサンプルのソースを確認

Herlockと同じくPlatinoもドキュメントを見てもいまいち分からないので、最初はまずサンプルプログラムを全てダウンロードしてソースを熟読するのが良いと思う。

http://lanica.co/sample-code/

Flappy Birdや戦車ゲームのサンプルが面白いけれど、多分一番参考になったのは「Codestrong Shooter」というシューティングゲームのサンプルだ。

● マルチ解像度対応

サンプルプログラムのマルチ解像度対応がちょっと気に入らなかったので、自分なりに試行錯誤する必要があった。背景の画像などは全てiPhone5sの640x1136のサイズを基準にして作っておいて、端末の解像度に合わせて横幅を画面一杯にして縦が短い場合は上下が切れる様に調整した。ApplicationWindow.js の updateScreenSize 関数でその辺りをやっている。

スプライトなどを画面に配置する時は、横幅は常に640として固定値で指定して構わないのだけれど、縦の高さは端末によって変わるので、真ん中に寄せたいもの(パズルのピースなど)については中央からの相対指定として、上端または下端に合わせたいものはそれぞれ上端(y=0)または下端(y=画面サイズ)からの相対指定とする様にした。

● タッチイベント

画面に配置したSpriteのタッチイベントを取得するのが少々面倒だった。まず画面(Sceneオブジェクト)のタッチイベントを書いて、その中でスケールを考慮して座標を変換した上で Sceneの forwardTouchToSprites 関数を呼んでやる必要がある。

● 連続でアニメーションを実行

アニメーションは下の様な感じでTransformオブジェクトを生成して実行する形になる。

var transform  = platino.createTransform({
　　duration: 500,
　　alpha: 0,
　　easing: platino.ANIMATION_CURVE_CUBIC_IN,
　　autoreverse: true,
　　repeat: -1
　});
sprite.transform(transform);

ただ、連続で複数のアニメーションを実行するための簡単な方法が標準では用意されていない。「Codestrong Shooter」のサンプルにもある通り、アニメーション終了時のcompleteイベントを拾って次のアニメーションを開始すれば良いのだけれど、非常に面倒だ。

そこで調べたところ下のモジュールを見つけた。

https://github.com/jonbeebe/net.jonbeebe.platino.transition

これを使えば例えば6個のアニメーションを連続で実行する場合でも下の通り簡潔に書くことが出来るのでとても便利だった。

highScoreTranstion = new Transition([
　　{ duration: 1000, x: CENTER_X-highScoreLabel.width/2, easing: 　　platino.ANIMATION_CURVE_QUAD_OUT }
　　,{ duration: 500, alpha: 0, easing: platino.ANIMATION_CURVE_CUBIC_OUT }
　　,{ duration: 1000, alpha: 1, easing: platino.ANIMATION_CURVE_CUBIC_OUT }
　　,{ delay: 500 }
　　,{ duration: 1000, x: game.screen.width*-2, easing: platino.ANIMATION_CURVE_QUAD_IN }
　　,{ duration: 1, x: game.screen.width*2 }
]);
highScoreTranstion.animate(highScoreLabel, -1);

● Androidでのフルスクリーン表示

Androidで実行すると画面の上部にタイトルバーが表示されてしまって困った。
とりあえず tiapp.xmlファイルに

<fullscreen>true</fullscreen>
<statusbar-hidden>true</statusbar-hidden>
<navbar-hidden>true</navbar-hidden>

と書いてみたけれども Android 4.4 では効果なし。調べると新しいAndroidではプログラム内で

   window.activity.actionBar.hide();

を呼ぶ必要があるという事だったのでその通りにしたら無事フルスクリーンで表示された。

● iOSとAndroidで微妙に挙動が違う所

TextSpriteを配置した時にiOSとAndroidで位置がずれてしまって困った。
どうもAndroidだとwidth,heightが自動では計算されていない(0,0になっている)みたいだ。これは platino.createTextSprite 関数を呼ぶ際に明示的に widthとheightをセットする事で解決した。

他に、Androidだと微妙に処理が遅いのか少しカクカクした感じがしてしまう。上にアップした動画でも雲の動きがちょっとカクカクしているのが分かるけれど、iOSだともっとスムーズに動いた。Titanium + Androidでは前にも、「今ひとつどうもな〜」という経験をした事があるので、今回もやっぱりそうかという感じはある。

● ソースコード

今回のソースコードはこちら。
https://github.com/mikehibm/15puzzle-platino

● 一応の結論

Titaniumでのアプリ開発をずっとやっている人で、「ゲーム開発にもTitaniumを使いたい！」と言う場合には良い選択肢かも知れない。

あとドキュメントの中の下のページはすごく参考になった。

http://docs.lanica.co/docs/#!/guide/javascript_best_practices

配列をクリアする時は
myArray = []; 
ではなく
myArray.length = 0;
と書いた方が良い、とか。

　

JavaScriptでスマホゲームアプリを作る - Herlock編

さて今回はHerlockを使って15パズルを作ってみた。

● Herlockとは

http://herlock.do/faqs/1304
株式会社ソニックムーブが提供するスマートフォンネイティブアプリ開発環境となります。

http://herlock.do/faqs/1338
AndroidとiOSに対応したワンソースでネイティブアプリを同時に開発することができます。
また、Web IDEを使用して開発、デバッグからビルドまで行うことができ、開発時のアプリはクラウド上で保存するだけで簡単に動作確認が可能です。
さらに、JavaScriptでOpenGLによる実装ができ、ゲームのようなハイパフォーマンスのアプリケーションを簡単に開発することが可能となります。

● 作ったもの

PhoneGap編、Monaca編と基本的に同じ15パズル。

ただ今回は画像を使ったので見た目が大分違っている。
Herlockのサンプルにあった「ねこ穴」というアプリのソースコードを元にして作ったので、勢いで一部の画像をそのまま使わせて頂いてしまった。


ソースコードはこちら。(とても自慢出来たものではないですが。笑)

tmlib.jsには含まれているシーン管理やアセット管理の部分をHerlockでは自分で作り込まなければならないのが結構大変だった。(結局ねこ穴のソースから大部分をコピペして使った。)　逆に言うと自分で好きなように作りこんだりどこかのライブラリを使ったり、自由度が高いと言えるかも知れない。

アニメーションについてはTweenJSで簡単に出来たので助かった。

● Herlockの素晴らしいところ

WebViewではなくネイティブのOpenGL機能を使っているのでアニメーションのパフォーマンスは申し分ない。JavaScriptだけでこれだけの事が出来るというのは本当に素晴らしい。

サウンドの方もiOS, Androidともに全く問題無しだった。PhoneGapやMonacaではAndroidで音が出ない問題に悩まされただけに、これは嬉しい。

Web IDEが提供されているのでローカルに開発環境を用意する必要が無い。これもさくっとアプリを作りたい時には大変有難い。

● 苦労したところ

1．実行するまでエラーが分からない

これは特にHerlockだからという訳ではないけれども、JavaScriptでの開発は静的型付けのある言語と比べると意外と大変だなあと改めて感じてしまった。ちょっとしたスペルミスや引数の間違いなどでもその箇所が実行されるまでなかなか気付く事が出来ない。この事から感じるストレスは開発が進めば進むほど大きな負担になって来る。
今回Herlockで開発しながら特にこの点が気になったのは、おそらく次に挙げる要因が関係していると思う。

2. Herlock Viewerでアプリのリロードに時間がかかる

Web IDE上でプログラムの変更を保存してから、それを端末上のデバッグ用アプリ(Herlock Viewer)で再読み込みするのに結構時間がかかる。自分の環境(米国からのアクセス)だと最低でも15秒、サーバー側が重くなっている様に感じられる時だと30秒から40秒程度待たされる事もある。

原因は、最初に全ての画像や音声のデータを読み込む様なプログラムになっているからという事もあると思う。ただ、サーバー側が重くなっている時などはプログラムの実行を開始する前にJSファイル(require.jsなど)の読み込みの段階でタイムアウトしてしまう事もよくある。

この辺りは、Herlock Viewerの方でJSファイルや画像・音声などのデータをキャッシュしてくれて、任意のタイミングで開発者がキャッシュの更新を指示出来る様に(もしくは変更されたものだけ自動で読み込む様に)してもらえれば改善される様な気がしないでもない。

また、Android版はまだマシだったが、iOS版のHerlock Viewerではアプリのリロード処理中にタイムアウトしてしまう確率がかなり高かった。(特にサーバー側が重い時)

3. アプリ内でのシーン管理やアセット管理のための標準的な方法が分からない

APIドキュメントには基本的なコードしか載っていないので、最初は戸惑った。
結局サンプルアプリの「ねこ穴」のコードを見よう見まねでいじりながらなんとか形にはなったけれど、シーン管理やアセット管理のためのクラスは標準で存在した方が有難い。その上でtmlib.jsのチュートリアルの様な平易なドキュメントがあればなお嬉しい。

● これからHerlockに期待したいこと

1. TypeScript対応

Web IDEがJavaScriptだけでなくTypeScriptにも対応してくれれば、上に書いた「実行するまでエラーが分からない」という問題はほぼ解決すると思う。


2. Herlock Viewerでの再ロード時間の短縮

キャッシュ対応やサーバー側のスペック向上などでなんとか「数秒程度」でリロードが完了する様にしてもらえないものだろうか。
再実行に15秒以上かかる様だと「すぐに実行して動作確認出来る」というJavaScriptの利点がほぼ相殺されてしまうので、なんとも惜しい気がする。


3. ローカル開発用SDK

コマンドラインのみのSDKで良いので提供してもらえれば、Web IDEを使わずにローカルで好きなエディタを使って開発出来る様になる。もしこれが可能ならぜひ実現してもらいたい。
PhoneGapで言う「phonegap serve」コマンドの様なものを実行するとPCが接続待ち状態になり、そこにHerlock Viewerで同一LAN内から接続出来る様になれば多分リロードに時間がかかるという問題も解消されるだろう。

ローカルにソースコードがあればGitなどでの管理も自由に出来るし、理想的な開発環境になるのではないだろうか。

4. ドキュメントの充実

HerlockのAPIドキュメントは見た目はなかなか良いのだけれど、内容はまだまだ充実させる余地があると思う。

● 今日の結論

- JavaScriptだけでネイティブアプリの開発が出来るHerlockはアプリ開発者ならぜひ試して見る価値あり。

- ただデバッグ実行時のリロード時間の短縮はなんとしても実現して欲しい。

- なんだかんだ言っても結局のところ非常に面白いし将来有望な開発環境だと思うので、これからのより一層の改善に期待！



以上！







　.

JavaScriptでスマホゲームアプリを作る - Monaca + tmlib.js編

● Monaca とは

Monacaの機能と特徴 | HTML5を使ったクロスプラットフォーム型モバイルアプリ開発 

● PhoneGap/Apache Cordovaとの違い

内部的にはPhoneGap/Cordovaを使っているので、ソースコードはPhoneGap/Cordova用に作ったものをほとんど変更せずに使える。

一番大きな違いは、Monacaだとローカルに開発環境を用意する必要が無い事だ。ブラウザさえあればどこからでもすぐにプロジェクトを開いて開発を続けられる。

先にPhoneGap用に作った15パズルのソースコードをMonacaのIDEにアップロードすると何の問題も無く実行出来た。

実機でのデバッグ実行は「Monacaデバッガー」というアプリをインストールして行う。

PhoneGap Developerのアプリと同様こちらもとても便利。さらに端末上でログ出力が確認出来たり、開発者のIDEに画面のハードコピーやメッセージを送ったりも出来るみたいだ。

● 結論

開発環境の違いはあるがソースコード的にはPhoneGap/Cordovaと同じものをほぼそのまま動かせる。

なのでAndroidではWebAudioを使うとかなりの確率で音が出ないという問題も同じだ。この問題があるのでゲームアプリを作るのには残念ながらちょっと適さない。 (追記参照)

● 追記

Monacaデバッガーの「ハイパフォーマンス版(4.0以降のみ対応)」というのがあったのでこちらで試した見た所、Androidでも音が鳴った。BGMも効果音も問題無しだ。やったー！
とは思ったものの、デバッガー経由でなくビルドしたものを端末でダウンロードしてインストールしてから動かすと、やっぱり音が鳴らない。これはビルド時の設定か何かで直るものなのだろうか。それともMonaca側がまだ最新の環境に対応していないのだろうか。良く分からないけれども何となく期待は持てそうだ。


Monacaサイトの説明によると、ハイパフォーマンス版のデバッガーは

• 最新のChromiumベースのブラウザーエンジン（インテルのCrosswalk）を用いており、高速なレンダリングと高度なCSS、JavaScript APIを利用可能です。

との事なので、Chromiumのバージョンに関係がありそうだ。となると、ビルドして配布する場合はユーザーの端末に入っているChromiumブラウザーのバージョンに依存するという事だろうか。

● さらに追記 (2014年9月7日)

下のブログ記事を見つけたのでAndroid用のビルド設定を「ハイパフォーマンス (Crosswalkエンジン)」を使う様に変えて試してみた所、ビルドしたアプリでも問題無く音が鳴る様になった。

Crosswalkエンジンを組み込んでMonacaで作るAndroidアプリを一気に高速化させる。 : アシアルブログ 

APKファイルのサイズが19MBに大きくなったけれども、まあ許容範囲だろう。ともかくこれでAndroidでも音が出る様になったという事で、スッキリした。
Monaca素晴らしい！







　

　

JavaScriptでスマホゲームアプリを作る - PhoneGap + tmlib.js編

● tmlib.jsを使ってみた

tmlib.jsが面白そうなので初めて触ってみた。

このチュートリアルを読めば大体の使い方がつかめる。素晴らしい！

tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step00 ゲームのひな形を作ろう | TM Life 

● スマホでも結構使えそうな感じ

作ったものは平凡だけれどとりあえずこんな感じの15パズル。
動画はNexus7(2012)上で動かしたもの。




ブラウザ上でPlay出来るバージョンはこちら。



開発環境は、最初はVisual Studio 2013に

Multi-Device Hybrid Apps (Preview) for Visual Studio 

という拡張機能を入れて使おうと思ったのだけれど、入れてみるとまだちょっと使いづらい部分があったので今回はパス。

結局  Brackets というエディタとTerminalだけで十分だった。Bracketsには「ライブプレビュー」というボタンがあってそれを使うとすぐにChromeを開いて実行出来るのでこれがとても役に立った。

実機で実行したい時は、Terminalでプロジェクトのフォルダから

phonegap serve

を実行しておく。そして実機(Android, iOS, Windows Phone)上でPhoneGap Developerアプリを実行し、PCのIPアドレスを入力すればOK。実機とPCが同一ネットワーク内にあれば良いのでUSBケーブルをつなぐ必要が無いのが有り難い。
この状態でソースコードを変更して保存すれば1〜2秒で自動的に実機側のアプリを再起動してくれる。これは実際に使って見るとものすごく便利だ。複数の端末を同時に接続出来るので、Android、iPhone, iPad, Windows Phoneを全て接続してそれらが同時に更新されるのを眺めているとそれだけでも面白い。


ちなみにビルドしてパッケージ化されたものを動かしたい時は、実機をUSB接続した上で、

 phonegap run android --device 　または　phonegap run ios --device

を実行すればOK。

ソースコードはこちら。

https://github.com/mikehibm/15puzzle-phonegap

● あれ、Androidで音が出ない。。。

iPhone,iPadでは全く問題無くBGMと効果音が再生されるのだけれど、手元のGalaxy S3とNexus7では全く音が出ない。それどころか、ローディング画面が出たまま止まってしまう。デバッグすると、WebAudioのcontextがnullになっている。これは悲しい。色々試したけどAndroidではどうも音声はダメそうなので、tm.sound.WebAudio.isAvailableが trueでない時は一切音を鳴らさない様に変更した。この問題が無ければ十分使えると思っただけに、残念。

● 結論

- アニメーションはあまり複雑な事をやらなければスマホでも結構使える。
- PhoneGap Developerアプリを使えば開発が捗る。
- でもAndroidでは端末によってWebAudioへの対応がまちまちで、かなりの確率で音が出ないのがなんとも残念。
- iOSまたはPCをターゲットにして作るなら十分選択肢の一つになり得ると思う。
- tmlib.jsは便利！これからも使いたい。