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

More than 1 year has passed since last update.

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へ位置付けてゆくと宣言しています。

環境のセットアップ

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