Mac OSX環境で、スマートフォンアプリ開発初心者が、Cordova(PhoneGap)と、AngularJSベースのIonic Frameworkを使い、JavaScriptでiPhone/ Android両対応のネイティブ+HTML5 ハイブリッドモバイルアプリを開発し、iTunes App StoreおよびGoogle Playで公開するまでを何稿かに分けてカバーします。
- Cordova(PhoneGap)準備、iOSエミュレータ起動まで
- Ionic Framework準備、iOSエミュレータ起動まで
- Ionic Creator Beta入門
- Ionicでアイコン、スプラッシュスクリーン
- IonicでAndroid開発準備
- -随時追加予定-
##事前準備
下記を事前にインストールしておきます。
- XCode6
- node.js
- Cordova
前ポストをご参照下さい。
Mac OSX環境でCordova(PhoneGap)開発環境を準備する - Qiita : http://qiita.com/tomo_makes/items/b51c2cb30f0eaac7af38
##Ionic概要
Cordovaだけでもアプリ開発をはじめることができますが、ここではもうワンステップ環境構築を進めます。ここではJavaScriptのMVC FrameworkであるAngularJSをベースに、スマートフォンアプリ開発用のCSS/ JavaScriptライブラリを提供する、Ionic開発環境を準備します。
Ionic Framework概要としては、英語ですがこの動画(Building Mobile Applications with Ionic - YouTube)がよくまとまっています。または下記記事を参照下さい。余談ながら、先ごろ(14年11月のThe Ionic Show@YouTube)設立者はIonicをFrameworkからSDKへ位置付けてゆくと宣言しています。
- Oiita: Ionic Frameworkの導入(http://qiita.com/daikon_buu/items/a3bfe4c9334fac0e745a)
- Qiita: Ionic frameworkでiOSとAndroidアプリを両方エミュレーターで立ち上げるまで(http://qiita.com/imaimiami/items/94fee7397bb026968a8e)
- Qiita: The Ionic Bookで覚えるIonicの使い方(http://qiita.com/tyoshikawa1106/items/cec9e893cb7449ba9ce7)
- キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！(http://html5experts.jp/canidoweb/7359/)
- Yoemanを使う事例 http://qiita.com/pugiemonn/items/744032601c728dbbe7b4
環境のセットアップ
ionicをnode.jsのパッケージとして追加します。（install -g cordova ionicとしてCordovaと一括インストールすることもできます。）
$ npm install -g ionic
実行ディレクトリ直下にmyFirstIonicフォルダが作成され、その下にtabsテンプレートでアプリを作成します。
$ ionic start myFirstIonic tabs
すぐにブラウザで簡易的に動作を確認できます。index.html等を書き換えると、内容がリアルタイムで反映され便利です。
$ ionic serve
開発プラットフォームとして、iosを指定します。このあたりのコマンドはCordovaと同様です。androidも指定できます。
$ ionic platform add ios
アプリをios用にビルドし、実行します。
$ ionic build ios
$ ionic emulate ios
Cordovaの前回と同じく、iOSエミュレータが立ち上がり、サンプルアプリ画面が立ち上がれば成功です。
これでIonicを使った開発環境が整いました。
##余談
開発者自らがIonicの現状やこれからについて語るThe Ionic Showは、これからの方向性を知る上で面白いです。Episode 4では彼らはWeb上でUI構築ができるIonic Creatorおよびハイブリッドアプリ用MBaaSであるIonic.ioを次の開発のプライオリティに据えています。(14年12月現在) 表情の硬い初回エピソードと比べると、4回目で喋りもこなれてきています。(笑)
The Ionic Show // Episode 1 // July 2014 - YouTube : https://www.youtube.com/watch?v=uJAWaE11Jf4
The Ionic Show // Episode 4 // Oct-Nov 2014 - YouTube : https://www.youtube.com/watch?v=wyVM1evRxNw