はじめに
ionicはHTML5でネイティブアプリが作成できるUIフレームワークです。PhoneGap、Monacaなどのフレームワーク同様、Cordvaがベースにあります。
最も大きな特徴は、はじめからAngularJSを使用することを念頭に作成されている点です。AngularJSから一通りの機能を操作できるような設計になっています。
また、スタイルもCSSではなくSassでできるようになっています。
環境設定(Mac)
npm
ionicのインストールのためにnpmコマンドが使用できるようにします。
以下のコマンドを実行し、npmコマンドをインストールします。
~ brew install node
~ npm -v
1.5.0-alpha-3
cordva, ionic
はじめに書いた通り、ionicはcordvaをベースに作られていますのでcordvaとionicをどちらもインストールします。
~ npm install -g cordova ionic
プロジェクトの作成〜起動
ここまででionicを使用する準備はできました。プロジェクトを生成していきます。
# 以下のいずれかを実行
# まっさらな状態
~ ionic start helloWorld blank
# ナビゲーション＋タブ
~ ionic start helloWorld tabs
# サイドメニュー付き
~ ionic start helloWorld sidemenu
これでhelloWorldというフォルダが生成されたかと思います。そのフォルダに移動し、iOSプラットフォームで動くような設定をします。
~ cd helloWorld
~ ionic platform add ios
iOSで動かす場合、仮想のsimが必要なため、以下のコマンドでインストールします。
~ npm install -g ios-sim
最後にアプリをビルドしてエミュレータで実行します。
~ ionic build ios
~ ionic emulate ios
これでエミュレータが起動し、タブ付きのアプリが起動したかと思います。
以上でアプリの導入は完了です。