読者です 読者をやめる 読者になる 読者になる

Macでアプリ開発ブログ

MacによるiPhone&Androidアプリの開発・作成に関するブログ。Macの設定からアプリ開発環境構築、おすすめのツールなど

Ionicの使い方(入門編)インストールからエミュレータ起動まで

アプリ開発 Ionic
スポンサード リンク

Ionicとは

Ionicとは、ハイブリッドアプリを開発するためのフレームワークになります。

AngularJS+Cordovaがベースになっており、この記事の執筆時点での最新バージョンは1.3.1です。

(AngularJS2.x をベースにした Ionic2.x もβ版として開発が進んでいますが、今回は Ionic1.x の使い方を説明していきます)

Ionicをインストールする前に(準備編)

※前提条件として、nodeとnpmがインストールされているとします。

Cordovaをグローバルへインストールする

sudo npm install -g cordova

ios-simをグローバルへインストールする

sudo npm install -g ios-sim

ios-simがインストールされていないと、iOSアプリへのデプロイでエラーになります。

Ionicをインストールし、プロジェクトを作成する

Ionicをグローバルへインストールする

sudo npm install -g ionic

プロジェクトを作成したいディレクトリに移動

cd hoge

プロジェクト作成

プロジェクト名とテンプレートを指定します。今回はtestAppという名前のプロジェクト名で、テンプレートをtabsにしました。(テンプレートはblanktabssidemenuから選択)

// ionic start <project_name> <template>
ionic start testApp tabs

プラットフォームを追加

プロジェクトディレクトリへ移動

cd testApp

プラットフォームを確認

ionic platform ls

上記コマンドでは、現在作成されているプラットフォーム(iOS, Andoridなど)が表示されます。追加したいプラットフォームがあれば下記コマンドで作成します。

プラットフォームを追加

// iOSを追加する場合
ionic platform add ios

// Androidを追加する場合
ionic platform add android

※Androidのプラットフォームを追加する前に、Android SDKがインストールされてる必要があります。

各プラットフォーム用にビルド

ビルド

// 全プラットフォーム用にビルドする場合
ionic build

// iOS用だけビルドする場合
ionic build ios

// Android用だけビルドする場合
ionic build ios

表示確認(エミュレータ or ブラウザ)

エミュレータで表示確認

// iOSの場合
ionic emulate ios

// Androidの場合
ionic emulate android

f:id:nk225_op:20160517200737p:plain

ブラウザで表示確認

ionic serve

毎回「ビルド→エミュレータで表示確認」するのは面倒なので、簡易的な表示確認はブラウザで十分です。