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を使った単体テスト


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




以上

2013年12月18日

ASP.NET MVCでリフレクションを使って任意のオブジェクトの一覧をCSV形式で返す

ASP.NET MVCで任意のオブジェクトのIEnumerableを受け取ってCSVファイルを出力するクラスを作ったので、久しぶりにGitHubに上げておこうと思う。

https://github.com/mikehibm/CSVResult


何も大した事はしていないけれど、リフレクションを使った例として今度の勉強会で使おうかと思っている。
上の様なデータが


この様にCSV形式でダウンロードされる。上はExcel 2010で開いた所。

CSV形式と言うと、データの中に引用符(ダブルクォート)やカンマが含まれていた場合の処理が面倒だ。

今回は
  • ダブルクォートは二重化する。("→"")
  • カンマは全角に変換する。
  • 改行コードは「|」に変換する。
というとりあえずのルールで実装してみた。

検索して調べた限りではカンマが含まれる場合は項目全体をダブルクォートで囲めば良いと書いてあるケースが多かったけれども、それだとExcel 2010でどうしても列がずれてしまうので、苦肉の策として全角にしてしまった。^^;

改行コードについても同じく、ダブルクォートで囲むだけではExcel 2010では上手く行かないみたいなので適当に「|」に変換する事にした。まあ実際に使う際には適宜仕様に合わせて変更すればいいかなと思う。



















 

2013年11月6日

子供向けにぜひおすすめしたい算数アプリ4選

cocos2d-x を使って子供向けの算数ドリルのアプリを作ろうとしていて、そのための参考に既存のアプリを調べていたら「これはすごい!」と思えるものがいくつか見つかったのでメモしておこうと思う。

Google Playで「算数」や「Math」で検索して大体200位ぐらいまでの結果の中から良さそうなものを選んで、かれこれ40個ほどをインストールして実際に動かしてみた上で厳選した結果なので、子供向けの算数アプリを探している方にはぜひ参考にして頂ければと思う。



第4位


Math Is Fun:陽気な数学


グラフィックがいい味を出している。ドリルというよりはパズル的。結構考えないと行けないのでどちらかと言うと高学年向けかも。大人でも遊べる。

Android app on Google Play  




第3位


Mathemagica Free - Kids Math


独特のグラフィックで最初はとっつきにくい感じがしたけれど、やってみるとなかなか面白い。問題のパターンが多くて、よく考えられている。
算数を始めたばかり、というレベルから高学年まで幅広いレベルに対応した問題が用意されているので、ぜひ有料版を買って長く遊びたい。

Android app on Google Play 




第2位


おサルさんの算数 ― 空飛ぶアドベンチャー


最初にこれをやってみた時は感動した。きれいなグラフィックと軽快な横スクロールでシューティングゲーム風のプレイは斬新だ。
子供はきっとのめり込むと思う。

Android app on Google Play  




そして一番「すごい!」と思ったのはこれ!


第1位


Hudriks Math For Kids


『美しいグラフィック、3Dアニメーション、特殊効果が、小学校に通うあなたのお子様にとって、算数の学習を忘れられないほど楽しいものにしてくれます。』

確かに美しく描かれたキャラクターと背景のグラフィックが素晴らしい! キャラクターが飛び跳ねるアニメーションの時にはちゃんと影の大きさも変わる。このクオリティの高さにはただただ脱帽。(見た感じ多分開発環境はUnityだろうな。) 
ワクワクさせられる音楽も良い。
ストーリーモードでは面倒な設定やレベル選択の必要も無く簡単な問題から自然に難しい問題に変わっていく辺りも良く考えられていると思う。

Android app on Google Play  








 

2013年10月25日

MacTypeでWindowsの文字がキレイになった!

MacとWindowsを並べて作業している時に、Windowsの文字の読み辛さがどうも気になって我慢出来なくなったので、MacType というソフトを入れてみた。


萌えないごみの日: Windowsのフォント環境に怒りを禁じ得ない人びとへ

gdi++Heliumを越えた(?)と噂のMacTypeをインストールしてみた | 情報科学屋さんを目指す人のメモ 

↑ MacTypeを入れる前 
(引用元: http://kirmav.blogspot.com/2010/05/windows-os-ipodiphone-macoslinux.html)



↑ MacTypeを入れた後
(引用元: http://kirmav.blogspot.com/2010/05/windows-os-ipodiphone-macoslinux.html)







結果、かなり読み易くなって大満足。

64bitのWindows 8.1で使っているけど特に問題も無さそうだ。

どうしてこれが標準機能になっていないのか、理解に苦しむな~。^^









 

2013年10月10日

初めてcocos2d for iPhoneでアプリを作った時に役に立ったリンクまとめ

目次





最初に目を通したチュートリアルなど


Cocos2D 2.XでシンプルなiPhoneゲーム開発チュートリアル | Ray Wenderlich 
iPhoneゲーム:スペース・シューターの作成チュートリアル | Ray Wenderlich 
cocos2d for iPhone: Class Hierarchy 



ARCを使うための設定


基本的には、cocos2dのソースコードを除外して自分で作成するファイルだけをARC対応にすれば良い。

cocos2dのテンプレートから作ったプロジェクトに対してXCodeのメニューから「Convert to Objective-C ARC」を選べば、かなりの部分を自動でやってくれる。

Cocos2D 2.X プロジェクトをARCに対応させる方法 | Ray Wenderlich 

下はcocos2dの部分をスタティックライブラリにしてリンクする方法。

【cocos2d, Objective-C】Cocos2でARCを使う。ハマりましたー! - 夏までにiPhone アプリつくってみっか! 



色々なコーディングTips


最初は基本的な画面遷移やボタンの作成方法でとまどったけれど、調べながらなんとかやるうちに慣れてきた。

cocos2d入門編 ボタンの作り方(CCMenuItem, CCMenu) | Learn iPhone, iOS, Objective-c, cocos2d and ....?  
ハマケン100%開発: cocos2d: <初級>スコア表示をローカライズしてみよう  
cocos2d でボタンを押して画面遷移をする | EUI - iPhoneやandroidスマートフォンアプリの開発を教えるスクール  
cocos2d - Changing the image of a CCSprite - Stack Overflow  
cocos2dでスケジューラを使う - 一定時間ごとや毎フレームごとに実行する処理を書く方法 | thaty 



ユニバーサル対応


iPhoneだけでRetina、非Retinaの違いと縦長サイズへの対応があるので3種類の画面がある。iPadにも対応しようとするとさらにRetina、非Retinaの2種類があるので合計5種類の画面サイズを考慮して開発しないと行けない。

この辺はAndroidだともう無限に近いぐらいのバリエーションがあるので、むしろあきらめて単に一つの画像を拡大/縮小してやり過ごしてしまうのだけれど、iOSだと「5種類しかないなら頑張って対応しないと行けないかも」という気持ちになってしまう。

その結果、背景画像の様に画面枠にきっちり合わせたい画像については同じ画像でも5つのバージョンを作って対応するような事になってしまう。(ものすごく面倒...)

各種ボタンやダイアログの背景の様なものについては、試行錯誤した結果、
  • iPhone 非Retina用
  • iPhone Retina / iPad非Retina用
  • iPad Retina用
の3種類のバージョンで済ませることにした。iPhoneのRetinaとiPadの非Retinaは画素数がそれほど変わらないので同じ画像を使ってもほぼ違和感がないのだ。(3種類作るのも結構面倒だけど。)

実際の画像ファイル名はそれぞれ
  • aaa.png
  • aaa-hd.png
  • aaa-ipadhd.png
の様にしておけばプログラムからは意識しなくてもcocos2dが上手く使い分けてくれる。

あとは、オブジェクトを画面に配置する時の座標指定を画面サイズに対する相対指定で行う様にしておけば iPhone 5の縦長画面にも対応出来る。

ただ、CocosBuilderの様なツールを使えばもっと楽になる事に気付いたのは開発がほぼ終わってからだった。最初から使っておけば良かった。


その他解像度関係で参考になったリンクはこの辺り。

cocos2dアプリをiPhone5の解像度に対応させる | mooapp  
【Objective-C】iPhoneとiPadを判別判定し処理分けする方法 | 和洋風KAI 



モーダルダイアログを表示する


アプリの設定画面がそれなりにかっこいいモーダルダイアログになる様にしたかったので色々試した。結局ゲーム本体よりもこの辺にかなり時間を費やしてしまった。

モーダルダイアログを表示するのは、下のページに載っている ModalAlertクラスを参考にして出来た。

Modal Alerts for Cocos2D | The Rombos-Blog 

ただ、これだとアニメーション中などに内容がダイアログの範囲外にはみ出した時にそのまま表示されてしまって非常に具合が悪い。ダイアログの枠から出たら表示されない様にクリッピングして欲しい。

そこで下のページで見つけたClippingNodeクラスを組み合わせて使う事にした。

Simple Masked Sprite | Obj-C based 2D engine for iOS, OSX and Android  
ClippingNode/ClippingNode.m at master · njt1982/ClippingNode · GitHub 

これでなんとか無事にイメージ通りのモーダルダイアログを表示する事が出来た。

正直言ってこれぐらいのコンポーネントはcocos2d自体かcocos2d-extensionsに入っているものだろうと思っていたけれど甘かった。


UIWebViewを使ってHTMLを表示する


設定画面の次は、アプリの「使い方」的な情報を表示する画面でUIWebViewを使ってHTMLを表示する必要が出てきた。ただcocos2dの画面にUIWebViewをどうやったら組み込めるのかが全く分からなかった。

ここでかなりつまづいてしまった。

UIWebView を使ってリソースバンドル内の HTML ファイルで、外部 JavaScript や CSS を読み込む - 24/7 twenty-four seven  
Cocos2dとStoryboardを組み合わせる - なんかの Log  
cocos2dのレイヤーへUIKitを追加、削除する方法。 « なんかもう実験場  
Cocos2dでWebViewを利用する - 自堕落なぺぇじ  
CCUIViewWrapper – wrapper for manipulating UIViews using Cocos2D  

結局、上の最後のリンクに載っているCCUIViewWrapperクラスを使う事にして上手く行った。




AdMobの広告を表示する


AdMob広告を表示する方法については、下の2つのやり方を見つけた。

cocos2dでAdMobを実装する « なんかもう実験場  
ios - Admob banner integration in Cocos2d 2.0 / Admob banner in iphone games - Stack Overflow 

比べてみるとどうも見た感じ後者の方がスマートな気がしたので、こちらの方法で実装した。ここは特に問題もなくさらっと実装出来た。



買って良かった本


実は最初に挙げたチュートリアルよりも前にまずこの本を読んだ。ひとつのゲーム(15パズル)を最初から作りこんでいく過程が丁寧に説明されているので、全体の流れをつかむのに最適だと思う。

cocos2dでつくるiPhoneゲーム―自由で速い、ゲーム用フレームワークを使う! (I・O BOOKS)







 

2013年9月28日

Android 4.3でSurfaceViewを使うアプリがランダムにクラッシュする件

Google Playで公開しているあるアプリを更新しようと思ってテストしていると、なぜか数回に一度の割合でクラッシュする事に気付いた。

エラーの内容はこんな感じ。
java.lang.IllegalArgumentException
: at android.view.Surface.nativeUnlockCanvasAndPost(Native Method)
: at android.view.Surface.unlockCanvasAndPost(Surface.java:255)


そういえば最近Google Playの管理画面で報告されるエラーが増えてきていた。自分のテスト端末(初代Nexus7)で出ているエラーと同じものだ。


エラーが起きている端末は全てNexus7。おそらく Android 4.3 を搭載している端末で問題が発生している様な気がする。


エラーが起きるのは、SurfaceViewを使ったActivityから一旦別のActivityを起動して、また元のActivityに戻ってきた瞬間だ。毎回というわけではなく大体5回に1回ぐらいの頻度なのでやっかいだ。

Backキーでホーム画面に戻ってからまたアプリを起動した時やタスク一覧から戻ってきた時は全く問題は起きない。


調べてみると下のスレッドが見つかった。

Issue 58385 - android - android 4.3 - IllegalArgumentException at SurfaceHolder.unlockCanvasAndPost(canvas) - Android Open Source Project - Issue Tracker - Google Project Hosting 

やっぱりAndroid 4.3 のSurfaceView にはバグがあるようだ。

しかも現状では回避策は無さそう。。。

SurfaceView を使っているアプリ全てが影響を受けるとすると、結構大きな問題になるのではないだろうか。

SurfaceViewを使うのを止めて View の Canvas に描画する様に書き直して対策した、という書き込みはあった。しかも皮肉な事にハードウェアアクセラレーションのおかげでかえってFPSが改善されたとの事。

とりあえず View.isHardwareAccelerated() の戻り値を見て、trueならView+Canvasを使って、false (かつOSが4.3より前) なら SurfaceView を使う様にすればなんとかなるかも知れない。

でも、同じ事をするのに2種類の方法で実装しないと行けないとなると、これは面倒だなー。

4.3を搭載した端末が一般的になる前になんとか早く解決してくれないかな〜。




2013/09/29  追記:

そういえば、4.0以降なら TextureView があった。これを使おう!

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES. ICE_CREAM_SANDWICH){
    //TextureViewを生成
} else {
    //SurfaceViewを生成
}

テストしてみた所上手く行っているみたい。
これで今回は一応解決!








  

2013年9月18日

iOSアプリとAndroidアプリを同時に開発する方法

最近はいろんな開発環境やツールがあるけれど、とりあえず以下のような選択肢で検討している。
  • Cocos2d-x
  • Xamarin + Cocos2d-XNA
  • Corona
  • Unity
  • Herlock
  • Titanium Mobile
  • Apache Cordova (PhoneGap)
  • Monaca



ガシガシ動くゲームを作るなら


Cocos2d-x


ようやくcocos2d for iPhoneで簡単なゲームアプリを作れる様になった自分としては、次はこれでAndroid版とiOS版の同時開発かなと思っている。

cocos2d for iPhoneで得た知識も使えるし、CocosBuilderなどの周辺ツール類も豊富なのが魅力。

最初は「AndroidではNDKが必要」というのを聞いただけで尻込みしていたけれど、採用事例は結構多そうで、ネットでの情報も増えてきつつあるみたいだ。

今この本を読みながら次のアプリ開発に向けて準備しているところ。
cocos2d-xによるiPhone/Androidアプリプログラミングガイド


Xamarin + Cocos2d-XNA


意外なところでは、C#で開発するという手法もある。XamarinとCocos2d-XNAというライブラリを組み合わせれば2Dゲームアプリも作れるみたいだ。

普段仕事で使っている言語はC#なので、本当に使い物になるのならぜひ使いたい。Windowsストアアプリの開発も出来るし、有料版ならVisual Studioとの統合も可能なのでかなり興味を惹かれる。

Xamarin StudioというIDEの無料版をとりあえずインストールしてぼちぼち試しているところ。


Corona


2Dゲームに特化した「エレガントなAPIで従来より10倍速く開発出来る」というのが売り文句の開発環境。Luaというスクリプト言語を使う。デモなどを見るかぎりでは確かに簡単に2Dゲームが作れそうだ。

ただ、プロプライエタリなソフトウェアなのであまり依存したくはないかな、と思ってしまう。



Unity


とりあえずインストール しては見た。面白そうな解説本も買って積んであるのだけれど、まだじっくり触る事が出来ていない。

次のバージョン(4.3)ではなんと2Dゲームに特化した機能も追加されてますますパワーアップするらしい。
Unity - Unity PRESS RELEASE – Unity、2D向けゲーム開発機能とクラウドサービスを新たに提供 
もしかするとこれからのゲームアプリ開発の大本命になるのではないかとも思ってしまうほど高機能。

ちょっと高機能過ぎて初心者は慣れるまでが大変。それにしてもUnityのアセットストアは強力。


Herlock


今日、こんなのも見つけた。国産の新しいクロスプラットフォーム統合開発環境。JavaScriptで開発出来る。だからBackbone.jsやTweenJSなどと言った既存のJSライブラリも使える。 しかもOpenGLで高速なグラフィック処理も可能。

iOS/AndroidアプリをJavaScriptで開発、OpenGL対応で高速描画の「Herlock」、クローズドβリリース - Publickey 
FlashライクなコードでOpenGLの処理を記述できるため、高速なグラフィック処理を実現する点も大きな特徴です。ゲームなど高速な画面書き換えなどを要求するアプリケーションに対応します。』 
Herlockの紹介動画 

これは期待大。早速クローズドベータ版の利用申請をしておいた。



ゲーム以外なら


Titanium Mobile


クロスプラットフォーム開発の老舗。


Xamarin


Xamarin Studio または Visual Studioを使ってC#で開発が可能。個人的にはかなり興味あり。


Apache Cordova (PhoneGap)


HTML5 + JavaScriptのアプリをラップしてネイティブアプリを作成するツール。

Apache CordovaとPhoneGapの関係が分かりにくい事になっているけれど、今の所は結局同じモノみたいだ。
Cordova(PhoneGap) とりあえずどんなものか | MUSHIKAGO APPS MEMO 
AdobeがApache Cordovaの私家版PhoneGapの3.0をリリース, APIをプラグイン化してより身軽に | TechCrunch Japan 


Monaca


内部的にはPhoneGapを利用しているらしい。ブラウザ上で利用出来るIDEが秀逸。Monacaデバッガというのもちょっと試してみたけれど、とても便利で感動した。

なんとなくApache Cordova(PhoneGap)を使うのであればこっちの方が生産性が高そうな気がしている。HTML5での実装に適したアプリを作る機会があったらぜひ使いたい。


今日の結論


この他にも色々な開発環境やツールがあると思うけれど、次は

Cocos2d-x
Unity

の順でやって行こうかなと思っている

余裕が出来たら、

Monaca
Xamarin

あたりにも手を伸ばしたい。

あとHerlockにはぜひとも頑張って完成度を高めて行ってもらいたい。応援してます!




 



2013年8月22日

Google Chromecast を買ってみた

なぜかオーダーしてから届くまでに3週間もかかったけれど、Chromecast がようやく届いた。




セットアップは実に簡単だった。

テレビのHDMI端子に本体を差し込んで、USBケーブルで電源につなぐ。(もちろん電源アダプタが付属している。)

テレビと壁の間に本体を差し込むスペースが無い時の為に、HDMIの延長ケーブルも付属しているのでちょっと感心した。

その後PCのブラウザで所定のURLを開く。するとアプリケーションをダウンロードする様に言われるので、ダウンロードしてインストールする。そのアプリを実行すると、Chromecast用のWifi設定やデバイス名称の設定を行う画面が表示される。何も変更せずにデフォルトのままで問題無しだった。


YouTubeがまるでテレビみたいに見える。(笑)


Netflixのストリーミングで映画のタイタニックも観てみた。
画質は普通にDVDで観ているのと変わらない様に感じた。


実は既にだいぶ前からリビングのテレビにはWindowsのPCをつないでYouTubeや動画を観ていたのだけれど、それよりも明らかに画質が良い様な気がする。

それに何より使いやすい。

手元のスマートフォンのChromecast対応アプリで出力先に自分のデバイスを選ぶだけ。

今の所対応アプリはYouTube, Netflix, Google Play Music/Movie(?) ぐらいしか無いみたいだけれど、これから増えてくるに違いない。対応アプリが増えればひょっとするとヒット商品になれるかも。(?)

現時点でも、YouTubeとNetflixのヘビーユーザーにはかなりオススメだと思う。





.

2013年7月25日

Google Appsアカウントを使ってGoogle Playストアで購入しようとするとエラーになる件

何やらGoogleから手頃な価格で面白そうなものが発売されたらしい。

Google、「Chromecast」発表。わずか35ドルで、テレビをオンラインビデオ対応にする新デバイス - Publickey http://www.publickey1.jp/blog/13/googlechromecast35.html



35ドルならこれはとりあえず試さなければ、と早速Google Playストアから購入手続きを開始した。



ところが、いざ支払いをしようとすると途中でエラーメッセージが表示されて先へ進めない。


何なんだこれは...と思いながら「こちらからお問い合わせください」のリンクをクリックしてメールアドレスを入力して送信する。


これでなんとか復旧するかと思ったけれど、しばらくしてGoogleから自動返信のメールが来る。

Your Google Apps account has been disabled by your administrator. Please contact your Google Apps administrator for more information. Your Google Apps administrator is usually someone outside of Google who set up your Google Apps account.

これを読むとどうもGoogle Appsのアカウントを使っている事に原因がありそうな感じだ。でもGoogle Appsの管理画面を隅からすみまで探しても問題になっていそうな所を見つける事が出来ない。

小一時間検索してやっと次のリンクを見つけた。

https://support.google.com/wallet/contact/ga_reset



どうもGoogle Appsで管理しているアカウントをGoogle Playで使っている場合、アカウントのパスワードをリセットするとセキュリティ保護のために自動的にGoogle Checkout (Wallet)へのアクセスが停止される仕様になっているらしい。

https://support.google.com/wallet/answer/2909022?hl=ja
お客様のメール アドレスのパスワードがお客様の組織の管理者によって再設定されたことが検出されたため、またはお客様がご自身のパスワードを変更したことが検出されたため、お客様のお支払い情報を保護するための予防措置としてアカウントが停止されました。ただし、この停止の影響を受けるのは Google ウォレットへのアクセスのみであり、Google Apps のその他のサービス(Gmail、カレンダー、Google サイトなど)には引き続きアクセスできます。


よく分からない仕様だけれど、とにかくGoogleとしてはお金を扱うWalletへのアクセスは厳重にしたいという事の様だ。検索すると同様にGoogle Playで買い物が出来ないよ〜、という声がいくつか見られた。

とりあえず上のフォームにメールアドレスや「最後の注文の詳細情報」などを入力して送信。

これで無事回復することを祈りながら今結果を待っているところ。

しかしなんとも不便な仕様なので、これはぜひとも改善してもらいたいところだ。



追記:
その後24時間かかるかかからないかぐらいでGoogleの日本の担当者の方から日本語でメールが来て、さらにその数時間後に無事Walletのアカウントが回復して買い物が出来るようになった。Googleの対応は意外に早くて嬉しかったのだが、連絡用のフォーム(https://support.google.com/wallet/contact/ga_reset)にたどり着くまでにさんざん検索結果を漁らなければならなかったのが少々残念だった。