2014年12月30日

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して試してみて下さい!







 
.

2014年12月5日

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好きとしては、有線で遅延/劣化の無いディスプレイ出力が出来ないのだけがちょっと残念だ。(笑)








 
 

2014年11月14日

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から買うよりもキャリア経由で買ったほうが良いかも。







2014年10月17日

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を上回るメリットがあるかどうかを試したい。








 .

2014年10月14日

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もドキュメントを見てもいまいち分からないので、最初はまずサンプルプログラムを全てダウンロードしてソースを熟読するのが良いと思う。


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イベントを拾って次のアニメーションを開始すれば良いのだけれど、非常に面倒だ。

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


これを使えば例えば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;
と書いた方が良い、とか。







 

2014年9月5日

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はアプリ開発者ならぜひ試して見る価値あり。

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

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



以上!







 .

2014年8月24日

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素晴らしい!







 

 

2014年8月23日

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は便利!これからも使いたい。









 

2014年8月14日

JavaScriptでスマホゲームアプリを作るための開発環境いろいろ

● とりあえず何か作ってみないと始まらない


最近、次のスマホアプリを何で作ろうかと真剣に悩んでいる。既にCocos2d-xのC++版で2つほどアプリを作って公開したけど、やっぱり出来ればJavaScriptが使いたい。

悩んでばかりいても仕方がないので、とりあえず下の6つの環境でサンプルゲームを作って試してみようと思う。



PhoneGap (Apache Cordova) 


WebViewをラップしてネイティブアプリとして動作させる。
ゲームを作るならCanvasを簡単に扱うためのライブラリを使うと便利。

ライブラリには CreateJSenchant.jstmlib.jsArctic.js ... などがある。

将来的にはWebGLがもっと普及するとCanvasよりも格段に描画が高速になるらしいけれど、現状ではまだ実アプリで使うには早いみたいだ。
WebGLことはじめ
http://www.slideshare.net/hirumakazuya/webgl-35833170?next_slideshow=1

簡単なパズルゲーム程度であればおそらくCanvasでも大丈夫なのではないかと思う。(やってみないと分からないけれど。)

最近、Visual Studio 2013 (Update 2以上)の拡張機能としてPhoneGap(Cordova)対応が追加されたので、今回はこれを使ってみようと思う。
Multi-Device Hybrid Apps for Visual Studio 2013



Monaca 


PhoneGapをベースにしたWeb上の開発環境。PhoneGap/Cordovaのインストールや設定を一切しなくてもブラウザさえあればすぐに使えるのが素晴らしい。実機でのデバッグもUSB接続不要で簡単に出来て便利。

Monacaのサンプルを見ると Pixi.js を使ったブロック崩しゲームがある。これは、と思って実機で試してみた。結果、Nexus7(2012, Android 4.4.2)ではスムーズに動くもののGalaxy S3(Android 4.4.2)だとカクカクしてほぼプレイ出来ない状態だった。おそらくNexus7ではWebGLが有効になっていてGalaxy S3ではなっていないからだと思うけれど、Canvasだとやっぱりゲームアプリは無理なのか、と不安になる。ただ簡単なパズル系のゲームだったらどうなのか、その辺りを試してみたい。




Herlock 


JavaScriptからネイティブのOpenGLを扱える様にするフレームワーク。
Monacaと同様にブラウザさえあれば開発が出来る環境が用意されているので開発環境をローカルにインストールする必要はない。HerlockViewerというアプリを実機にインストールしておけばネットワーク経由でスクリプトの更新やデバッグログの確認が可能。
個人的にはかなり期待大。



Titanium 


Lanica Platino Engine」という拡張機能(有料・79.99ドル/年)を使うとOpenGLを使って高速に動くゲームアプリの開発が可能になるとの事。少し前までは年間800ドルぐらいしたと思ったけど、それと比べると今はかなり安くなったのでちょっとトライして見ようかと思う。



Cocos2d-JS 


スマホ用ゲームアプリ開発の大本命。
C++版では既にいくつかアプリを作ったので、次はJavaScript Bindingでどこまで開発が速くなるのか試してみたい。



Unity 


こちらも言わずと知れた超有名ツール。C#のイメージが強いけれど、JavaScriptでも開発出来るという事なので今回初めてじっくりと触ってみようかと思う。




以上、実際にサンプルアプリを作ってみてどうだったかは、これから少しづつ書いて行こうと思う。
またそれぞれの環境で下記の点についてもざっと調べておきたいと思う。

  • 多国語対応の方法(端末の言語設定によって画像や文字列を切り替える)
  • 広告(主にAdMob)の挿入方法
  • アプリ内課金の実装方法







 .

2014年6月4日

iOSのアプリ内課金の設定で失敗...

う〜ん、これはハマる。

「Ready to Upload」ボタンを押すにアプリ内課金の対象プロダクトを選択しないと行けない。


iPhone - 申請したいアプリ内課金の状態がWaiting For ReviewになってないのでDeveloper Rejectした - Qiita

In App Purchaseを組み込み申請するときの正しい順番 - BAD_ACCESS 



結局バージョン番号だけ上げてまた申請し直す羽目になってしまった。


2014年5月1日

Azure仮想マシンのIIS8.0でFTPSを設定した時のメモ

色々と問題があったので忘れない様にメモ。

ローカルユーザーの設定


  • サーバーにFTP用のローカルユーザーを作成する。
  • FTP用ユーザーにアクセス対象ディレクトリへの権限を付与する。


IISのFTP設定


ルートレベル

  • 「FTP Firewall Support」でPassive接続に使うポート範囲を指定。
  • 「FTP SSL Setting」でSSL証明書を指定。


各サイトレベル

  • 「FTP Firewall Support」でPassive接続に使うグローバルIPアドレスを指定。
  • 「FTP SSL Setting」でSSL証明書を指定。(ルートレベルで設定したのと同じもの)
  • 「Bindings」でホスト名を指定。(複数のホスト名がある場合)
  • 「FTP Authentication」でBasic認証を有効化。
  • 「FTP Authorization」でアクセス許可するユーザーを指定。



ここまでの設定後「Microsoft FTP Service」のリスタートが必要なので注意。



Azure管理サイトでの設定


仮想マシンのEndpointsにFTP用の設定を追加。
Passive接続用のポートを許可するのを忘れない事。



「530 Valid Hostname is expected」エラーへの対処


  • 複数のホスト名で複数のFTPサイトを作成している時に発生する。
  • ログイン時のユーザー名を 「サイト名|ユーザー名」と指定すれば解決する。

http://www.net24.co.nz/kb/article/AA-00201/25/Virtual-Private-Servers/Windows/Error-530-Valid-Hostname-is-expected-using-FTP-to-IIS7.html


FileZillaからアップロード出来ない問題の対処


  • ファイルをアップロードすると、転送完了後にエラーになってファイルがサーバー側から消えてしまう。
  • IIS8.0の不具合らしい。
https://forum.filezilla-project.org/viewtopic.php?f=2&t=27898&start=120


  • 対策1 WinSCPを使ってTLS1.0で接続する。(非推奨)  
  • 対策2 サーバー側にHotFixを適用する。
http://support.microsoft.com/kb/2888853



以上、長かった!







.

2014年4月20日

ビットコインの次に来る「イーサリアム」とは

大石哲之さんによる下の電子書籍を読んで、とても感銘を受けた。

ビットコインの「仕組み」が非常に分かりやすく説明されている。特に「採掘」とは何を意味するのか、今まで「何か複雑な計算をするんだろうな〜」ぐらいのモヤモヤしたイメージしか無かったものが、具体的に理解出来たのでスッキリした。


ビットコインはどのようにして動いているのか? 数式なしでわかる仮想通貨の仕組みと技術~改ざん防止、採掘、未来の応用まで




「採掘」についてスッキリしただけでも本書を購入した価値があったのだけれども、それ以上に興奮させられたのは、ビットコインそのものよりも、その原理を応用してこれから出てくるであろう未来のイノベーションについて述べた最終章だった。


イノベーションの一つの例として、現在進行形で実装が進められている「イーサリアム」というものがある。

イーサリアムの衝撃-ビットコイン技術がもたらす社会基盤へのイノベーション : アゴラ - ライブドアブログ

大きな可能性を秘める「リップル」と「イーサリアム」――ビットコインに続くもの|通貨革命か、それとも虚構か?「ビットコイン」を正しく理解する 野口悠紀雄|ダイヤモンド・オンライン


イーサリアムで扱うことが出来るものは通貨だけにとどまらず、各種動産・不動産・権利・契約など非常に幅広い。電子書籍や音楽ファイルのコピープロテクトの問題も解決する。ドメイン登録の仕組みだってこの上に構築すれば現在の様な管理組織が要らなくなる。

この様な技術が普及すれば確かに世の中が大きく変わるのは間違いない。これからどうなって行くのか、本当に楽しみだ。





2014/12/15 関連リンク追加:

すごく参考になります。
分散型合意形成システム、Ethereum - Satoshi Nakamoto Fan Club
http://bitcoinspace.hatenablog.com/entry/2014/11/12/215026






 .



2014年4月16日

Titanium MobileでiOSアプリを作ってみた感想

- Titanium Mobileで初めて作った。

 「米国ビザ申請用写真撮影」




- 本当はiOS/Android両対応を目指したかったのだけれども断念した。

 今回作ったのはある種のカメラアプリだったのだけれど、Titanium.Media.showCamera で表示されるプレビューウィンドウの挙動がiOSとAndroidで違ったり、UIのスタイル設定がAndroidだけどうも意図したとおりに反映されなかったりと言う事があって、Android対応は途中であきらめた。本当に複数のOSにきちんと対応しようとすると、おそらくフォルダ単位でOS毎に画面デザインを分けたりして「ロジックは共有するけどUIは別々で」というスタンスで作るのが無難だろうと思う。


- JSでのプログラミングは、やはり手軽!

- AlloyフレームワークはWebアプリの開発者なら非常に親しみ易い。

- ターゲットがiOSのみであればXcode+Objective Cで作るより生産性は高いかも。(もちろんアプリの要件にもよるけど。)


- Androidとの互換性については細かい所で改善の余地あり。今後に期待。

- Platform依存な処理については「モジュール」があれば対応出来る。

 なので最終手段としてその部分だけネイティブで自作する覚悟があればそれほど心配する必要はなさそう。

- iOSもAndroidも実機転送に結構時間がかかるのが難点。

 MBA(2011)だとビルド開始から実機(iPhone 4S)でのアプリ起動まで大体40秒弱。でもiOSのシミュレータ上で動かすのは早いので開発時に実機が必要でないアプリであればそれほど問題にはならない。反対に実機でないとテスト出来ない機能を使っているアプリ(カメラ系のアプリとか)を開発する場合はこの実機転送の遅さはかなり辛い。

- Titanium + WebViewでjQuery Mobileなどを使って画面を作るのもアリ。

 Tips:  jQuery Mobileでは「vclick」イベントを使うのが反応を良くするコツ。


- 今後のプロジェクトでTitanium Mobileを採用するか、と言われると...

「要件によっては大いに有り得る!」と思った。

 当然ながらアプリの内容によって向き・不向きがあるので、事前に実現可能性などをよく検討してから決める必要がある。ただその判断にかかる時間を極力少なく出来るように、これからも最新版をちょくちょく触って「いつでも使える」状態にはしておきたい。

 いずれにせよ、無料でここまで使えるのは本当に素晴らしいと思う。









 .

2014年4月3日

いよいよWindows Phoneアプリを作るべき時が来た! かも。

Microsoftのブログより

Windows Store universal Windows app opportunity 

The biggest new opportunity announced today is universal Windows apps, which now enable you to reach users across the spectrum of Windows devices with optimized app experiences built from one shared project.

今まではWindows Store用とWindows Phone用のアプリは別々のプロジェクトで作成しないと行けなかったのが、今後は「Universal App」として開発すれば、Windows Store(デスクトップ&タブレット)でも Windows Phone でも動くものを作れる様になるらしい。

これまでも、共通の処理はPCL(Portable Class Library)としてプロジェクトをまたいで再利用する事が出来た。ただ Universal App の場合はもっと進んだ形で、コードだけでなくXAMLや画像などのリソースも含めて共通化する事が可能になる様だ。


I’m pleased to announce today that China Mobile - the largest carrier in the world with 767 million subscribers - and Microsoft have signed an agreement to bring China Mobile billing services to Windows Phone customers in China Mobile’s network within the next few months.

契約数7.6億を擁する China Mobile と Microsoft の提携により、Windows Phone 上でChine Mobileユーザーへのキャリア課金によるチャージが可能になるとの事。7.6億はすごい! 将来的にこの10%がWindows Phoneユーザーになるとしたら、それだけで7600万ユーザーだ。


we have fully completed the roll-out of a streamlined Windows Phone certification workflow that is reducing app certification and publishing timesfrom an average of 2.5 days to 2-4 hours for both new and updated apps.

Windows Phone アプリの審査にかかる時間を、平均2.5日から2~4時間に減らしたとの事。1~3週間も待たされるAppleに比べると、この早さは開発者にとってはとても有り難い。

さて、そろそろWindows Phone/Windows Storeアプリの開発に取り掛かるかな。。。

まずは実機を調達しないと。^^







 

2014年1月30日

@NというTwitterアカウントを乗っ取られた人の話

英語ですがセキュリティに興味がある人はぜひ一読を。

How I Lost My $50,000 Twitter Username

やっぱり電話によるハッキングから始まっているみたい。

要約すると、

  • @NというTwitterアカウントの乗っ取りを狙った攻撃者がPayPalに電話してクレジットカード番号の下4桁を聞き出す。
  • その後ドメインレジストラであるGoDaddyに電話してその上の2桁を推測。(GoDaddyの担当者は正解に至るまで何回でも推測させてくれたとの事。) 
  • 正解してクレジットカードの下6桁が分かった時点でドメインの管理者としてGoDaddyの管理画面にアクセス出来たので、MXレコードを変更する事によってEmailサーバーを自分の管理下にあるものに変更し、Emailアカウントを乗っ取った。
  • その後このメールアドレスで登録していたFacebookアカウントも乗っ取られる。
  • Twitterアカウントは別のメールアドレスにしていたため乗っ取られはしなかったが、犯人から取引を促すメッセージが来て最終的にはそれに応じるしか選択肢が無かった、と。



教訓1

独自ドメインのEmailアドレスを各種サービスのログイン用のアドレスとして使うのは避けた方が良い。(もしドメインが乗っ取られたら全部やられる。)


教訓2

独自ドメインのDNSレコード(特にMXレコード)のTTL値は長め(1週間程度)にしておいた方が良い。(ドメインが乗っ取られてもTTLがExpireするまではまだ正規のEmailサーバーにメールが届く可能性が高いので。)


う〜ん、なるほど。


しかしPayPalもGoDaddyもそんなに簡単に電話で情報を教えるのか、という点に驚く。犯人のソーシャルエンジニアリングの技術が高かったというのはあるにしても。

PayPalに登録してあるクレジットカード番号はやっぱり消しておこう。GoDaddyは多分一生使わない。






 

2014年1月15日

無料で容量無制限の GitLab Cloud いいね!

Gitリポジトリの個人用ホスティング環境としてはずっと Bitbucket を使っていて、これはこれで全く不満なくとても便利に使わせてもらっている。

ただ今日は他にもこんな選択肢がある事を知った。

GitLab.com | GitLab Cloud 



こっちの方が Bitbucketよりもさらに制限が少なそうなので、今度試してみよう。

GitHubの代替ツールとして、完全無料のGitLab Cloudを試す - プチ技術メモ 
xcodeのprojectをgithubではなくgitlab cloudにpushする方法 - diary of a withdrawal 






.

2014年1月8日

2年前に作ったAndroid用オセロゲームを真面目に改善した時のメモ


コンピュータの思考ルーチンの強化


得点テーブルを使うのは序盤のみ。
自分の全滅は最低の評価、相手の全滅は最高の評価。

中盤は独自の評価関数を使う。
  •   自分が打てる場所を多く、相手の打てる場所を少なく。
  •   確定石のプラス評価。
  •   Wingのマイナス評価。
  •   X打ち、C打ちのマイナス評価
終盤は完全読み切り。
ゆらぎ(Randomness)の実装。(毎回同じ手を打たない様に。)

Javaコードのパフォーマンス改善


盤面のオブジェクトを手番が進むたびにコピーする代わりに、事前に60要素の配列を準備して入れておく様に変更。
これだとUndoして一つ前の状態に戻すには配列のインデックスをマイナス1するだけ。

盤面の状態を表すのにオブジェクトの配列ではなくintの配列を使う。(System.arraycopyが使えるので高速。)

オブジェクトの生成を極力避ける。
  •  Pointオブジェクトは最初にnewしてset()メソッドで使い回す。
  •  ArrayListは最初にfinal修飾子付きでnewしてclear()で初期化して使い回す。

ループの終了判定に.size()や.lengthを参照しない。


広告の表示方法への工夫


ゲーム中は表示せず、終了後にふわっと現れる様に。


UIの改善


コンピュータ思考中のプログレス表示と処理中アイコン表示を追加。


JUnitを使った単体テスト


思考ルーチンのデバッグには単体テストが不可欠だった。




以上