Cordova + Angularを組み合わせたフレームワークionicを触ってみました。
私が無学だからかもしれませんが、 yeomanを使ってAngular用のテンプレートを作った後、Cordovaの環境を組み合わせて実行するのは、そこそこ面倒な作業でしたが、 ionicがあれば、一瞬で環境が構築できてしまいます。
ヘルプの通りですが導入方法です。
- npmが必要なのでnodeを入れます。まだなら nodebrewなどがいいのかな。最近だと。
- npm install します。
$ npm install -g cordova ionic
- テンプレートを作ります。blank, tabs, sidemenuが選べますが、経験的には、tabsかsidemenuがいいと思います。blankだとionicのプログラミング作法がわかりにくいです。ここではtabsにしてみます。
以下のコマンドでmyAppの下にソースコードが展開されます。
$ ionic start myApp tabs
-
www/index.htmlをブラウザで実行するとアプリが動きます。
-
androidやiosで動かしたい場合はビルドが必要です。cordovaと同じですが、コマンドがionicに変わっています。内部的にはscss等の
ionic独自のリソースなどを一緒にビルドしてくれるのだと思います。
Android
$ ionic platform add android
$ ionic build android
-
公式サイトでは、androidの場合この後、
ionic emulate android
することになっていますが、止めることを強くお勧めします。
是非、Genymotion等のVMを使いましょう。インストールと環境準備は簡単ですので、ググってください。AndroidSDKとtoolsのインストールが必要です。 -
Android VMを起動すると、deviceとして認識されますので、
Android
$ ionic run android
で終了です。
準備はとても簡単です。個人的には、ionicコマンドとcordobaコマンドの使い分けをする局面が出てくると、ちょっと気持ち悪かったですが、なれると平気になりました。
また、公式サイトのexampleからリンクが貼られているsampleは、どれも古いバージョンのionicで作られているようで、上記のテンプレートと照らし合わせると混乱します。現状にアップデートしてもらえると、導入が持った簡単になるなと思いました。