で、Ionicって？
- Cordovaを拡張して作られている、モバイルUIフレームワーク
- AngularJSを採用している
- HTML5でクロスコンパイルなネイティブアプリが作れる！
※ 1系と2系があるけど、今回は1系の1.3を使ってみた。
つまりクール！ 
どうやって作るの？
色々な方法の始め方があるけど、今回は
Ionic Creator
を使ってスタートしてみた。
Ionic Creator
ProttみたいなプロトタイピングツールちっくなWebサービス
https://creator.ionic.io/
- 登録して、UIパーツをドラッグしたりしてUIを作っていく
- 途中、プレビューでページ遷移の確認も出来る！
- UIの色などもCSSで結構好き勝手に変えられる！
- UIが出来たら、プロジェクトとしてダウンロード出来る！
→ ダウンロードして実際に実装に使いました。
ダウンロードしたプロジェクトはこんな感じの構成
コレをこのままWebにあげるとWebアプリにもなる！
ローカルのIonic開発環境はコマンドでつくります。
http://ionicframework.com/getting-started/ に乗ってる手順通り。
してIonicをインストールして
ローカルで一旦適当にプロジェクト作って
今回はAndroid、iOSだったので
xxxdir/$cd myApp
xxxdir/myApp$ionic platform add ios android
して、iOS・Androidプロジェクトを作って
ダウンロードしたプロジェクトで上書き
こんな感じになる
あとはゴリゴリ書くだけ！
いっつクール！
"controllers.js"にゴリゴリ書いていく
こんな感じ
出来たー！
ってなったら、ビルドする。
xxxdir/myApp$ionic build ios
xxxdir/myApp$ionic build android
XCodeプロジェクトとapkが出来るので
iOSはこのあと更にXCode開いてXCodeから普通にビルドすればOK！
いっつイージー！！
実際にストアに今は出てます。
iOS
https://itunes.apple.com/us/app/k-3-tong-ren-ji-mai-hui-ying/id1133023112?l=ja&ls=1&mt=8
Android
https://play.google.com/store/apps/details?id=jp.digiq.k3app&hl=ja
使って感じたメリット
-
やはりクロスプラットフォームなので開発が速い！
- 3bkアプリはiOS、Android合わせて1ヶ月くらい
html・CSSでUIを書くの手慣れているので(ネイティブに比べて)速い！
使って感じたデメリット
UIあんまり凝れなさそう アニメーションとか凝れなそう
端末機能を使うのにCordovaを使うのだけど、コイツで提供されてないと結構大変
ハマりポイント
-
runコマンドで実行した場合Codeova-Authが動かない！
- でもrunしないとログが見れないからどこでコケてるのは今度はわからなくなる！
- → ひたすらalertすると言う原始的な方法でデバッグした・・・
端末ハードウェア機能を使う為のCordovaが古かったりして探すのが大変！
個人的な総評
とは言えとにかく開発スピードが速いので活用して行きたい。
ライバルのOnsenUIも気になるけど・・・
それは弊社エースエンジニアがこの後記事にしてくれてます！