Macでionicのハイブリッドアプリ開発環境を構築する

Macでハイブリッドアプリの開発環境を構築する手順です。 フレームワークとしてionicを利用します。

Xcodeのインストール

App StoreからXcodeをインストールします。

nodeのインストール

ionicはnpmのコマンドでインストールします。 npmのコマンドはnodeに含まれているので、最初にnodeをインストールします。

$ brew search node
$ brew install node

ionicのインストール

管理者権限でCordovaとionicをインストールします。

$ sudo npm install -g cordova ionic
Password:
$ sudo npm install -g ios-sim

ionicのプロジェクト作成

コマンドの引数で指定した「smartphoneApp」というディレクトリに、 tabsテンプレートで、ionicのプロジェクトが作成されます。 テンプレートは「blank」「tabs」「sidemenu」を指定できます。

$ ionic start smartphoneApp tabs

ionicに対象プラットフォームを追加

ionicで開発する対象プラットフォームを追加します。 iOS以外にandroidも指定できます。

$ cd smartphoneApp/
$ ionic platform add ios

対象プラットフォームでビルド

$ ionic build ios

対象プラットフォームでエミュレータを起動

$ ionic emulate ios

ブラウザ上でプレビューを表示

$ ionic serve