Ionic開発メモ

Ionicについて

ionicはJavaScript(AngularJS)とHTML/CSSを使ってサクッとアプリが作れるフレームワーク。今回はこのionicを使って初めてYelpHackathon2016でAndroidアプリを作ったので知見をシェアしておきます。「他にもこういうやりかたがあるよ〜」みたいなコメントをくれるとサイコウにうれしいです。

ちなみにEatMashというアプリを作ってました。

ブラウザで動かす

ブラウザでアプリのビューが確認できる

bash

$ ionic serve

ラボオプションをつけるとiOSとAndroidのビューを同時に表示してくれる

bash

$ ionic serve —-lab

ちなみに、なぜか$ ionic serveで動かしてもionic.Platform.isWebView()は常にfalseを返してきて、Android端末から見ている認識をされてしまうので実機・エミュレータかどうかの判別はwindow.cordovaがundefinedでないかどうかでしたほうがよい。
(参照: http://stackoverflow.com/questions/30109230/check-if-ionic-app-is-in-dev-serve-modebrowser)

エミュレータで動かす

予めgenymotionでエミュレータを起動しておいて以下のコマンドを実行

bash

$ ionic run android

• 上のコマンドであればAndroidのイメージを入れなくてもgenymotionがあればエミュレータで動かせる（$ ionic emulate androidではgenymotionは起動できないっぽい）
• コンソール出力を表示(-c)したりLiveReloadのオプション(-l)があったりするのでドキュメントを要チェック

実機で動かす

端末をUSBデバッグモードにして下のコマンドで終わり。エミュレータ起動して実機もつないでいるときは$ ionic addressで起動先が選べるらしいが、試していないので不明。

bash

$ ionic run android

あるいは実際にapkファイルをビルドして端末にぶち込むのもok

bash

$ ionic build android

あるいは Ionic View を使うと接続すらしなくてよくなる。
(参照: http://matagotch.hatenablog.com/entry/2015/10/16/210121)

デバッグに関する知見

Chromeの Device Inspector を使うとめっちゃ捗る

• 実機でもエミュレータでもエラーログなどを確認したいときにはchrome://inspect/#devicesからインスペクタでネットワークログやコンソールの出力を確認することができる。
• Android4.3以前（たぶん）の端末・エミュレータでインスペクタを使ったデバッグをするためにはGoogleの開発者サービスなどがインストールされている必要があるので、genymotionで開発をするときには予めインストールしておく(参照: http://d.hatena.ne.jp/stealthinu/20150811/p1)

その他

そのほかの便利そうなはなし

アイコン・スプラッシュイメージの自動生成

bash

$ ionic resources

(参照: http://blog.ionic.io/automating-icons-and-splash-screens/)

LiveReloadがdisableになる

$ ionic run android -c -lでconsole出力とLiveReloadを有効にできるはずだけれど、Genymotion上でLiveReloadがdisableになるときがある。そのときはおとなしくAndroidバージョンのできるだけ大きいのを使う（4.4とか）

ちなみにLiveReloadは実機でもうまく動かなかったのでそもそもIonic側になにか問題があるのかもしれない。

proxiesの指定を使ったCORSの回避

ローカルサーバを立ち上げて開発をしているとCORSの問題でAPIを叩けないことがあるが、Ionicのconfigファイルでプロクシを指定することで回避できる
(参照: http://ionicinaction.com/blog/how-to-fix-cors-issues-revisited/)

デバイス識別クラス

ビルドの際にはターゲットに応じてbodyタグにクラス(platform-androidみたいなの)が付加される
(参照: http://ionicframework.com/docs/platform-customization/platform-classes.html)

Ionic Lab

力尽きた。
Ionic Lab という便利なGUIツールがあってコマンドライン苦手勢でも楽に開発ができるよ！

所感

Angularがある程度わかっていればサクッとアプリが作れていい感じだと思う。けれどやっぱりネイティブと比べてパフォーマンス面でディスアドバンテージがあるのはすごく感じたので、どうやってハイブリッドアプリっぽさを消していくか、がIonic開発のポイントになるように思った。遊びには十分使えるので◎