ionic

Ionic Frameworkの導入

More than 3 years have passed since last update.

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で作られているようで、上記のテンプレートと照らし合わせると混乱します。現状にアップデートしてもらえると、導入が持った簡単になるなと思いました。