お茶漬けびより

"あなたに教わったことを、噛んでいるのですよ" 五等分の花嫁 7巻 「最後の試験が五月の場合」より

WSL で Ionic プロジェクトを Android 実機にインストールする手順

Ionic Android

Ionic を触っていて、Android プロジェクトを作ったはいいけど wsl からどうやって実機にアプリをインストールしたらいいんだろうと四苦八苦しました。その手順です。

Android Studio 使えるならその環境を使ってビルド、インストールしたほうが楽だと思います。

環境

以下のような環境で行いました。

アプリ バージョン
WSL2 Ubuntu 18.04
Node.js v14.4.0
NPM 6.14.8
Ionic 6.11.8

概要

大まかな流れは以下のような感じです。Ionic のプロジェクトはすでに作られている前提とします。

  1. JVM をインストールする
  2. Android ツールを入れる
  3. Android ツールのパスを通す
  4. Android ツールを使って必要なツールを入れる
  5. Windows の方で adb.exe のパスを通す
  6. adb.exe のエイリアスを wsl 側に登録する
  7. 実機を開発者モードにする。USB接続を有効にする
  8. 実機を接続し、Windows 側で adb devices を実行し接続する
  9. Ionic プロジェクトから Android プロジェクトを生成する
  10. Android プロジェクトに移動して、gradlew assembleDebug を実行する
  11. apk ファイルがあることを確認し、adb -d install app/build/outputs/apk/debug/app-debug.apk を実行する

詳細

では、各項目を順番にしていきます。

JVM をインストールする

JVM のインストールはいろんな記事があるので、そちらにお任せします。例えば、次のような記事の手順でインストールできます。

https://qiita.com/mitsu48/items/0f18c62a9e368752b243

JAVA_HOME の設定も必要です。

Android ツールを入れる

Android SDK ツールを入れます。

ツールを置いておく場所はどこでもいいです。あとでパスを通します。Android SDK ツールは、以下から落としてきます。

https://developer.android.com/studio/#downloads

Linux(64-bit) を落とします。これを展開したら android-sdk というディレクトリを作成し、そこに入れます。

参考

https://gist.github.com/fedme/fd42caec2e5a7e93e12943376373b7d0#downloading-the-android-sdk-tools

Android ツールのパスを通す

Linux に慣れていないので、パスの通し方が正しいか分かりませんが、以下のコマンドで通します。

export ANDROID_SDK_ROOT=$HOME/android-sdk
PATH="$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/tools/bin:$ANDROID_SDK_ROOT/platform-tools:$PATH"
export PATH

また、ANDROID_SDK_ROOT なのか、ANDOROID_HOME なのか正直分かっていないですが、ここでは、ANDROID_SDK_ROOT で行います。

ANDROID_SDK_ROOT のパスは、先に入れた Android SDK ツールの場所になります。

Android ツールを使って必要なツールを入れる

Android SDK Managerを使って、ビルドするために必要なツールをインストールします。

以下は、WSL 上で行うために必要な作業ですが、Android Studio が使える環境であれば、それを使ってインストールしたらいいと思います（検証してないので、間違っているかもしれません）。

Android SDK Manager は、 sdkmanager というコマンドで使えます。先の Android ツールのパスを通す作業で使えるようにしています。

sdkmanager --update --sdk_root=$ANDROID_SDK_ROOT
sdkmanager --list
sdkmanager --sdk_root=$ANDROID_SDK_ROOT "build-tools;29.0.3" "platforms;android-29" "tools"

上記では、29 という番号を指定してインストールしています。これは Android API のバージョンを表しますので、ターゲットにしたいバージョンをインストールしたらいいです。どんなバージョンがあるかは、sdkmanager --list --sdk_root=$ANDROID_SDK_ROOT | grep build-tools のように grep で絞れば探しやすいと思います。

最後にライセンスの同意をするために sdkmanager --licenses --sdk_root=$ANDROID_SDK_ROOT を実行します。

Windows の方で adb.exe のパスを通す

Android Debug Bridge（adb）を使うためにパスを通します。WSL 側から実機を認識するためにWindows 側（ホスト側）の adb コマンドのパスを通します。自分の環境では、Android Studio をインストールしていたので、%HOMEPATH%\AppData\Local\Android\Sdk\platform-tools に置いてありました。

これを Windows の環境変数設定で Path に追加します。

参考

https://sp7pc.com/google/android/34263

https://developer.android.com/studio/command-line/adb?hl=ja

adb.exe のエイリアスを wsl 側に登録する

Windows 側の adb.exe を使うためにエイリアスを設定します。

alias adb='adb.exe'

実機を開発者モードにする。USB接続を有効にする

Android 実機側を開発機にするために、開発者モードにします。

参考

https://qiita.com/knakamigawa/items/5b8bd2793920b517bf25

https://developer.android.com/studio/debug/dev-options?hl=ja

実機を接続し、Windows 側で adb devices を実行し接続する

実機と PC を接続します。

WSL の場合、Windows 側で adb devices を実行し、実機と接続します。そのあとで、WSL 側から adb devices を実行します。

もし、先に WSL 側から実行していて、接続が上手くいかない場合、adb kill-server を WSL 側で行ったあと、Windows 側でも行ってください。adb kill-server 接続を切断するコマンドです。

自分の環境では、Windows 側でadb devices を実行しなくても上手くいったような気がするので、WSL側だけでいいかもしれません。

成功すると以下のような結果が出ます。

* daemon not running; starting now at tcp:5037
* daemon started successfully
List of devices attached
8AJX0TULG       device

Ionic プロジェクトから Android プロジェクトを作成する

今回のプロジェクトは、capacitor を使っているので、次のコマンドで Android のプロジェクトを作成します。

ionic capacitor add android

すると、プロジェクト直下に android というディレクトリができます。

また、今後プロジェクトでプレットフォームに依存するようなモジュールを追加した場合、次のコマンドを実行して Andoird プロジェクトに反映させる必要があります。

ionic capacitor copy android

参考

https://ionicframework.com/jp/docs/developing/android#project-setup

Android プロジェクトに移動して、gradlew assembleDebug を実行する

android ディレクトリに移動したあと、apk ファイルを作成するために ./gradlew assembleDebug を実行します。

./gradlew installDebug でインストールできるらしいのですが、WSL 上で行っているせいか上手くいきませんでした。ですので、インストールは別の方法（adb コマンドを使った方法）でインストールします。

参考

https://developer.android.com/studio/build/building-cmdline?hl=ja#build_apk

apk ファイルがあることを確認し、adb -d install app/build/outputs/apk/debug/app-debug.apk を実行する

先の ./gradlew assembleDebug によって、app/build/outputs/apk/debug/ に app-debug.apk というファイルを作成したので、次のコマンドで実機にインストールします。

もし android ディレクトリに移動してなければ、移動してから実行してください。

adb -d install app/build/outputs/apk/debug/app-debug.apk

成功すると以下のような結果が出ます

Performing Streamed Install
Success

実機にインストールされているか確認し、動かしてみましょう！

参考

https://developer.android.com/studio/build/building-cmdline?hl=ja#RunningOnEmulator

おわりに

CUI（コマンドライン） で行うことに理由がなくて、 Android Studio 使えるならそれを使ったほうがいいです。