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

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

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

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









　.

いよいよ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アプリの開発に取り掛かるかな。。。

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

　

@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は多分一生使わない。






　

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

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

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

GitLab.com | GitLab Cloud 

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

GitHubの代替ツールとして、完全無料のGitLab Cloudを試す - プチ技術メモ 

xcodeのprojectをgithubではなくgitlab cloudにpushする方法 - diary of a withdrawal 

.

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

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

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

中盤は独自の評価関数を使う。

• 　　自分が打てる場所を多く、相手の打てる場所を少なく。
• 　　確定石のプラス評価。
• 　　Wingのマイナス評価。
• 　　X打ち、C打ちのマイナス評価

終盤は完全読み切り。
ゆらぎ(Randomness)の実装。(毎回同じ手を打たない様に。)

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

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

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

オブジェクトの生成を極力避ける。

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

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

広告の表示方法への工夫

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

UIの改善

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

JUnitを使った単体テスト

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




以上