公式ドキュメント
開発環境
macOS High Sierra
$ node -v
v8.9.1
$ npm -v
5.5.1
上記のインストールなどは割愛。
Ionic CLI のインストール
プロジェクトに合ったcordovaとionicをインストールする。
$ npm install -g ionic@3.18.0 cordova@7.1.0
インストールが完了したら確認する。
$ cordova -v
7.1.0
$ ionic -v
3.18.0
指定したものが入っていればOK。
今回はバージョンの指定をしているが、@以降を省けば最新版がインストールされます。
新しいプロジェクトを作成
新しいionicプロジェクトを始めるには以下のコマンドで一発です。
今回は「myapp」というプロジェクトを作りましょう。
$ ionic start myapp
すぐに何か聞かれます。
$ ionic start myapp
? What starter would you like to use:
tabs ............... ionic-angular A starting project with a simple tabbed interface
❯ blank .............. ionic-angular A blank starter project
sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.
conference ......... ionic-angular A project that demonstrates a realworld application
tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
aws ................ ionic-angular AWS Mobile Hub Starter
ionicではいろんなテンプレートが用意されていて選べるようですね。
ここはシンプルなblankを選びます。
途中に以下を聞かれますがとりあえず一旦noにしておきましょう。
? Install the free Ionic Pro SDK and connect your app? (Y/n)
セットアップが終わったらプロジェクトのディレクトリに移動
$ cd myapp
起動してみる
ブラウザで起動
blank というテンプレでプロジェクトが作成されたので、まずはブラウザで起動してみましょう。
$ ionic serve
ブラウザが立ち上がり、以下が表示されれば成功です。
platformの追加
iosで起動するにはまずplatformの追加をします。
$ ionic cordova platform add ios
android版の場合は
$ ionic cordova platform add android
とすればオーケー。
プラットフォームの追加が終わるとルートディレクトリにいろいろファイルやディレクトリが生成されます。
platform追加前
total 376
-rw-r--r-- 1 ryo staff 87 12 1 11:25 ionic.config.json
drwxr-xr-x 470 ryo staff 15040 12 1 11:25 node_modules
-rw-r--r-- 1 ryo staff 174444 12 1 11:25 package-lock.json
-rw-r--r-- 1 ryo staff 1083 12 1 11:25 package.json
drwxr-xr-x 9 ryo staff 288 12 1 11:25 src
-rw-r--r-- 1 ryo staff 576 11 30 14:08 tsconfig.json
-rw-r--r-- 1 ryo staff 178 11 30 14:08 tslint.json
drwxr-xr-x 7 ryo staff 224 12 1 11:36 www
platform追加後
total 408
-rw-r--r-- 1 ryo staff 6208 12 1 11:48 config.xml
-rw-r--r-- 1 ryo staff 108 12 1 11:47 ionic.config.json
drwxr-xr-x 476 ryo staff 15232 12 1 11:48 node_modules
-rw-r--r-- 1 ryo staff 183173 12 1 11:48 package-lock.json
-rw-r--r-- 1 ryo staff 1593 12 1 11:48 package.json
drwxr-xr-x 4 ryo staff 128 12 1 11:48 platforms
drwxr-xr-x 9 ryo staff 288 12 1 11:48 plugins
drwxr-xr-x 7 ryo staff 224 12 1 11:47 resources
drwxr-xr-x 9 ryo staff 288 12 1 11:25 src
-rw-r--r-- 1 ryo staff 576 11 30 14:08 tsconfig.json
-rw-r--r-- 1 ryo staff 178 11 30 14:08 tslint.json
drwxr-xr-x 7 ryo staff 224 12 1 11:36 www
iosで起動する
※事前にxcodeのインストールは済ませておきましょう。
エミュレーターが立ち上がりブラウザで表示されたものと同じものが表示されていたら成功です。
$ ionic cordova run ios
ちなみに$ ionic cordova platform add iosを実行せず、このコマンドだけでもplatformの追加と実行までしてくれます。
実機で確認したい場合は、実機をPCにつないで
$ ionic cordova run ios --device
とすれば実機にアプリがインストールされ、確認することができます。
おまけ
xcodeやandroid studioが入ってなかったり、エミュレーター起動したくないとか、
スマホの確認したいけどブラウザで起動してからスマホ表示に切り替えるの面倒くさいなーって人はこのコマンドでスマホ表示が確認できます。
$ ionic serve --lab