[Ionic3] 開発環境の構築からAndroid実機デバッグまでの手順まとめ

ionic3を利用することによって、実機でライブリロード機能を使った快適な開発が可能。
Webブラウザでデバッグするよりも実機でデバッグしたほうがプラグインの動作確認もできる。

<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :one: 環境

表の上から順にインストールする。

| No. | 項目 | バージョン |
|:-:|:-:|:-:|
| 1 | OS | Windows 10 64bit (1709) |
| 2 | Java | jdk1.8.0_161 |
| 3 | Android Studio | android-studio-ide-173.4670197-windows |
| 4 | Node.js | 8.9.3 |
| 5 | cordova | 7.1.0 |
| 6 | ionic | 3.20.0 |

* Java 、Android Studio、Node.js、はそれぞれ公式ホームページから最新のインストーラを使用した
* `cordova`と`ionic`は以下のコマンドでグローバルにインストール

```bash
> npm install -g cordova@7.1.0
> npm install -g ionic@3.20.0
```



<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :two: Android SDKの関連パッケージの追加

### **2.1 パッケージ追加**

`Android Studio`の`SDK Manager`から以下の内容を追加した。

* SDK Platform
 * Android 8.0 (Oreo) / API Level 26
* SDK Tools
 * Google USB Driver

### **2.2 ユーザー環境変数のPathに「AndroidSDKのplatform-tools」を追加**

```:設定例
C:\Users\kamiyama\AppData\Local\Android\Sdk\platform-tools
```


<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :three: ionic3でプロジェクトを作成

以下のコマンドを実行してアプリのプロジェクトを作成。

```bash
> ionic start my-ionic1 sidemenu --cordova --no-link
```

* `ionic start`コマンド：アプリのプロジェクトを作成する
* `my-ionic1`：プロジェクトの名前
* `sidemenu`：プロジェクトのテンプレートに「サイドメニュー」を指定
* `--cordova`オプション：cordovaアプリであることを指定
* `--no-link`オプション：Ionic Dashboardへの接続をしないことを指定

<details><summary>**参考：`ionic start` コマンドのヘルプ**</summary><div>

```bash:ionic-startコマンドのヘルプ
> ionic start -h

 Usage:

 $ ionic start [<name>] [<template>] [options]

 Inputs:

 name ..................... The name of your project directory
 template ................. The starter template to use (e.g. blank, tabs; use --list to see all)

 Options:

 --list, -l ............... List starter templates available
 --type ................... Type of project to start (e.g. ionic-angular, ionic1) (default: ionic-angular)
 --display-name, -n ....... Human-readable name (use quotes around the name)
 --cordova ................ Include Cordova integration
 --pro-id ................. Specify an app ID from the Ionic Dashboard to link

 Advanced Options:

 --no-deps ................ Do not install npm/yarn dependencies
 --no-git ................. Do not initialize a git repo
 --no-link ................ Do not ask to connect the app with the Ionic Dashboard
 --bundle-id .............. Specify the bundle ID/application ID for your app (reverse-DNS notation)

 Examples:

 $ ionic start
 $ ionic start --list
 $ ionic start myApp blank
 $ ionic start myApp tabs --cordova
 $ ionic start myApp blank --type=ionic1
 $ ionic start myConferenceApp https://github.com/ionic-team/ionic-conference-app
```
</div></details>

<details><summary>**参考：ionic3アプリのテンプレートリスト**</summary><div>

```bash:ionic3アプリのテンプレートリスト
> ionic start --list
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
tabs ............... ionic1 A starting project for Ionic using a simple tabbed interface
blank .............. ionic1 A blank starter project for Ionic
sidemenu ........... ionic1 A starting project for Ionic using a side menu with navigation in the content area
maps ............... ionic1 An Ionic starter project using Google Maps and a side menu
```
</div></details>



<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :four: Androidアプリ設定を追加

### **4.1 アプリ情報を追加**

以下のコマンドを実行してAndroidアプリであることを指定。
ついでにiOSも指定しておく。

```bash
> ionic cordova platform add android --save
> ionic cordova platform add ios --save
```

* `--save`オプション：package.jsonとconfig.xmlに設定情報を残す

### **4.2 署名関連のビルド設定**

* デバッグ用の署名`keys/android/debug.keystore`と、リリース用の署名`keys/android/release.keystore`を用意する (用意する方法はとりあえず省略)
* 以下の`build.json`を作成する

```build.json
{
 "android": {
 "debug": {
 "keystore": "keys/android/debug.keystore",
 "storePassword": "android",
 "alias": "androiddebugkey",
 "password": "android",
 "keystoreType": "JKS"
 },
 "release": {
 "keystore": "keys/android/release.keystore",
 "storePassword": "<ストアパスワード>",
 "alias": "<エイリアス>",
 "password": "<パスワード>",
 "keystoreType": "JKS"
 }
 },
 "ios": {
 "debug": {
 "codeSignIdentity": "iPhone Developer",
 "developmentTeam": "F2******FY",
 "packageType": "development",
 "provisioningProfile": "5568****-****-****-****-********6d55",
 "buildFlag": [
 "CODE_SIGN_STYLE=Manual"
 ]
 },
 "release": {
 "codeSignIdentity": "iPhone Distribution",
 "developmentTeam": "F2******FY",
 "packageType": "app-store",
 "provisioningProfile": "1475****-****-****-****-********1a19",
 "buildFlag": [
 "CODE_SIGN_STYLE=Manual"
 ]
 }
 }
}
```

* Windows環境だとiOSアプリのビルドができないが、macOS上でiOSアプリをビルドできるようにios向けの設定も記載した

<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :five: 実機で起動

接続する端末を**デバッグモード**にする。
Android端末とPCをUSBケーブルで接続してから以下のコマンドを実行することでPCとAndroid端末が接続されていることを確認できる。

```bash
> adb devices
List of devices attached
0123456789ABCDEF device
```

以下のコマンドで実機端末でアプリを実行してくれる。

```bash
> ionic cordova run android --livereload
```

* `--livereload`オプション：ソースコードを編集すると自動的にアプリをリロードしてくれる機能
 * リロード時間は5秒くらいでかなり高速
 * `--livereload`オプションを使う場合は、PC側のポート8100番の**ファイアウォールを開ける**必要がある
 * cordovaプラグインの動作確認も可能
 * PCなどのブラウザで「localhost:8100」にアクセスすることでブラウザでも動作確認可能(Cordovaプラグインは不可)



<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :six: 実機デバッグ

Chromeのアドレスバーに以下のURLを入力

```
chrome://inspect/
```

![1.png](https://qiita-image-store.s3.amazonaws.com/0/67192/481baca3-7b5c-44e1-8ce6-c8129c3759aa.png)

* 左側のペインは実機と連動して操作できる。
* 右側のペインは`console.log()`などで出力したトレース内容やDOMの確認と直接編集ができる。



<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :seven: リリースビルド

### **7.1 Androidリリースビルド**

```bash:Androidリリースビルド
> ionic cordova build android --prod --release
```
* `ionic cordova build`コマンド：ビルドすることを指示する
* `android`：Androidアプリをビルドすることを指定する
* `--prod --release`オプション：製品版でビルドする

### **7.2 Android実機にインストール**

PCとAndroid端末が接続されていること。

```:Android実機にインストール
> adb install -r .\platforms\android\build\outputs\apk\release\android-release.apk
```
* `adb install`コマンド：指定したapkファイルを端末にインストールする
* `-r`：上書きすることを指定する
* `*.apk`：ビルドしたapkファイルを指定する

### **7.3 参考情報：iOSリリースビルド**

以下のコマンドでiOS向けにビルドできるが、macOS環境以外ではビルド不可。

```bash:iOSリリースビルド
$ ionic cordova build ios --prod --release
```

<!-------------------------------------------------------------------
-
--------------------------------------------------------------------->

# :eight: : Ionic3 よく使うコマンド集

<details><summary>**8.1 部品の生成：** `$ ionic g <type> <name>`</summary><div>

#### **type**
* 生成するタイプを指定する
* `component`, `directive`, `page`, `pipe`, `provider`, `tabs`

#### **name**
* 生成する任意の名前を指定する

```bash:コマンド例
$ ionic g provider backend
```
</div></details>

<!----------------------------------------->

<details><summary>**8.2 プラグインの追加：** `$ ionic cordova plugin <plugin_name>`</summary><div>
Ionicでプラグインを追加する場合は、https://ionicframework.com/docs/native/ を参照して探すと良い。

```bash:コマンド例
$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=<my_reversed_client_id>
$ npm install --save @ionic-native/google-plus
```

* `--save` オプションを付けなくても`package.json`と`config.xml`にパッケージ情報が追加される
</div></details>

<!----------------------------------------->