No.25
【ハイブリッドアプリ開発】デバッグ環境
ハイブリッドアプリのデバッグを楽にしよう
HTML5＋Javascript＋CSS3を用いたハイブリッドアプリ開発が盛んだけど、その開発環境は恐ろしいほどに設定が複雑で面倒臭い。ネット上ではそこそこ事例が見つかるけれど、IDEの利用可否から始まり、開発システムのOSの種類、IDEの種類、各ツールのバージョン、開発対象のプラットフォーム、など千差万別でまとまった情報が無いことがあげられる。
特に、デバッグについては情報が異常に少ない。流行に乗って開発環境を整える人は多いらしくそこまでの情報はまだ見つかる。ところがデバッグについての話となると数が激減してしまう。
Monacaとかの有料開発ツールを使えればいろいろ問題は解決するけど、予算的にそうも行かないことがしばしばだ。
というわけで、自分がハイブリッドアプリ開発時のデバッグに使う便利なツールを書いておこうと思う。 ひとまず前提はWindowsでAndroidアプリの開発を行う場合とする。MacOSでのiOSアプリ開発時にはsafariを使えば問題ないし。
ADB（Chromeインスペクタ拡張）
HTML5＋Javascript＋CSS3で開発を行うときに何かとお世話になるインスペクタ。現在ではFireFoxやChromeには標準装備になっているので利用も簡単だ。
だが、このインスペクタ、当然ながらエミュレーターやUSB接続した実機では動かすことが出来ない。それを可能にしてくれるのがChromeのプラグイン、ADBだ。
ADBをインストールして監視対象をエミュレータ・USB接続機器にするだけでOK。もうこれでインスペクタの全機能が利用できる。
インスペクタが有ると無しでは開発効率が桁違いになる。せっかくのGoogleの提供機能、ばっちり活用してサクサクと開発を行おう。
Genymotion Androidエミュレーター
デバッグを行うときは、実機を使うかエミュレータを使うかの二択になる。
実機はUSBで接続しておかねばならないという制約があって使いづらいうえに、画面から目を離していちいち手元の端末を操作するのでなにかと効率が悪い。
ではエミュレータはというと、これはとんでもなく遅いので使い物にならない。使った人はわかるだろうけど、モニタに缶コーヒーを投げつけたくなるくらいの遅さ。未経験者には、エミュレータを起動するたびに2分かかると言えばわかってもらえるだろうか。
そのAndroidエミュレート環境に新星のごとく現れたのがGenymotionだ。
エミュレータを動かすためのベースをVirtualboxに丸投げしたことで、非常に軽く、安定したエミュレーター環境を提供してくれている。
欠点といえば、エミュレートできる環境はGenymotionが提供している仮想デバイスだけになる、ということか。でも、Nexusシリーズの各OSバージョンを用意するなど、基本的な所は押さえているのでほぼ問題にはならないと思う。