ionic3でハイブリッドアプリを作ってみよう。 - 導入編

## 公式ドキュメント
https://ionicframework.com/docs/

## 開発環境
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
```
ブラウザが立ち上がり、以下が表示されれば成功です。

![Kobito.SDLL3N.png](https://qiita-image-store.s3.amazonaws.com/0/53709/ea758e58-dad9-3732-4eda-1cf61a8efd18.png "Kobito.SDLL3N.png")

### 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で起動する
※事前に<a href="https://developer.apple.com/jp/xcode/">xcode</a>のインストールは済ませておきましょう。
エミュレーターが立ち上がりブラウザで表示されたものと同じものが表示されていたら成功です。

```
$ ionic cordova run ios
```

![Kobito.8SGxu2.png](https://qiita-image-store.s3.amazonaws.com/0/53709/b6a455c5-ee03-b11e-f0b9-c3d6f53a366f.png "Kobito.8SGxu2.png")

ちなみに`$ ionic cordova platform add ios`を実行せず、このコマンドだけでもplatformの追加と実行までしてくれます。

実機で確認したい場合は、実機をPCにつないで

```
$ ionic cordova run ios --device
```
とすれば実機にアプリがインストールされ、確認することができます。


## おまけ
xcodeやandroid studioが入ってなかったり、エミュレーター起動したくないとか、
スマホの確認したいけどブラウザで起動してからスマホ表示に切り替えるの面倒くさいなーって人はこのコマンドでスマホ表示が確認できます。

```
$ ionic serve --lab
```