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









　

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

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

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

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

● PhoneGap (Apache Cordova) 

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

ライブラリには CreateJS, enchant.js, tmlib.js, Arctic.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)の挿入方法
• アプリ内課金の実装方法

　.

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

う〜ん、これはハマる。

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

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

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

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

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

• 対策１ WinSCPを使ってTLS1.0で接続する。(非推奨)  
• 対策２ サーバー側にHotFixを適用する。

http://support.microsoft.com/kb/2888853

以上、長かった！







.

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

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

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


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



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


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

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

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

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

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





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

すごく参考になります。

分散型合意形成システム、Ethereum - Satoshi Nakamoto Fan Club
http://bitcoinspace.hatenablog.com/entry/2014/11/12/215026

　.

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を採用するか、と言われると...

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

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

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









　.