2. Ionic Framework準備、iOSエミュレータまで - 新年だし、Mac OSXでハイブリッドアプリ開発環境を準備する

Mac OSX環境で、スマートフォンアプリ開発初心者が、Cordova(PhoneGap)と、AngularJSベースのIonic Frameworkを使い、JavaScriptでiPhone/ Android両対応のネイティブ+HTML5 ハイブリッドモバイルアプリを開発し、iTunes App StoreおよびGoogle Playで公開するまでを何稿かに分けてカバーします。

1. Cordova(PhoneGap)準備、iOSエミュレータ起動まで
2. Ionic Framework準備、iOSエミュレータ起動まで
3. Ionic Creator Beta入門
4. Ionicでアイコン、スプラッシュスクリーン
5. IonicでAndroid開発準備
6. -随時追加予定-

事前準備

下記を事前にインストールしておきます。

• 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