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

H.KAMIYAMA
@alclimb

1. 環境

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

No. 項目 バージョン
1 OS Windows 10 64bit (1803)
2 Java jdk1.8.0_161
3 Android Studio android-studio-ide-191.5791312-windows
4 Node.js 10.16.3
5 cordova 7.1.0
6 ionic 3.20.1
  • Java 、Android Studio、Node.js、はそれぞれ公式ホームページから最新のインストーラを使用した
  • cordovaionic は以下のコマンドでグローバルにインストール
bash
> npm install -g cordova@7.1.0 > npm install -g ionic@3.20.1

2. Android SDKの関連パッケージの追加

2.1 パッケージ追加

Android StudioSDK 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

3. ionic3 でプロジェクトを作成

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

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

参考:ionic start コマンドのヘルプ

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</template></name>

参考:ionic3 アプリのテンプレートリスト

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

4. 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 向けの設定も記載した

5. 実機で起動

接続する端末をデバッグモードにする。
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プラグインは不可)

6. 実機デバッグ

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

chrome://inspect/

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

7. リリースビルド

7.1 Android リリースビルド

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 環境以外ではビルド不可。

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

8. Ionic3 よく使うコマンド集

8.1 部品の生成:$ ionic g <type> <name>

type

  • 生成するタイプを指定する
  • component, directive, page, pipe, provider, tabs

name

  • 生成する任意の名前を指定する
コマンド例
$ ionic g provider backend

8.2 プラグインの追加:$ ionic cordova plugin <plugin_name>

Ionicでプラグインを追加する場合は、https://ionicframework.com/docs/native/ を参照して探すと良い。

コマンド例
$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=<my_reversed_client_id> $ npm install --save @ionic-native/google-plus</my_reversed_client_id>
  • --save オプションを付けなくてもpackage.jsonconfig.xmlにパッケージ情報が追加される
WRITER
H.KAMIYAMA
@alclimb
SERIES
この記事に連載はありません。
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。