このガイドでは、Capacitor または Cordovaを使用して、Android エミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。Android アプリは Windows、macOS、Linux 上で開発できます。
Android Studio はネイティブな Android アプリを作るための IDE です。Android SDKが含まれており、コマンドラインで使用できるように設定する必要があります。
Android エミュレータに必要な Android 仮想デバイス の作成にも Android Studio が使用されます。Ionic アプリは デバイスに起動することもできます。
Android Studio を使って Ionic アプリを開発することはお勧めしません。実際には、ネイティブの Android プラットフォーム向けにアプリをビルドして実行したり、Android SDK や仮想デバイスを管理するためだけに使うべきです。
からAndroid Studioをダウンロードします。より詳しいインストール手順は
User Guide をご覧ください。
Android Studio をインストールしたら起動します。IDE は、Android SDK のインストールが必要であることを検出するはずです。SDK Components Setupの画面で、SDK のインストールを完了して、Android SDK のパスのをメモしておいてください。
デフォルトでは、最新の安定版 SDK プラットフォームがインストールされ、そのバージョンの Android をターゲットにするために必要なパッケージもコレクションされています。
システムイメージやその他のマイナー SDK プラットフォームパッケージをインストールするには、SDK Manager の下部にある Show Package Details がオンになっていることを確認する必要があります。
今後の参考情報ですが、Android SDK は Android Studio の起動画面の Configure » SDK Manager メニュー、または Android プロジェクト内の Tools » SDK Manager で管理することができます。
Android SDK には便利なコマンドラインツールが付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOS と Linux のものです。WIndows の場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。
~/.bashrcもしくは~/.bash_profile、または同様のシェル起動スクリプトを、次のように変更します。s:
Set the ANDROID_SDK_ROOT environment variable. This path should be the Android SDK Location used in the previous section. To find the SDK Location in Android Studio, click File > Project Structure. Select SDK Location in the left pane. The path is shown under Android SDK location.
$ export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
Add the Android SDK command-line directories to PATH. Each directory corresponds to the category of command-line tool.
$ # avdmanager, sdkmanager
$ export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
$ # adb, logcat
$ export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
$ # emulator
$ export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
For apksigner and zipalign, $ANDROID_SDK_ROOT/build-tools<version> must also be added to PATH.
Android 仮想デバイス（AVD）は、Android エミュレータが Android OS を実行するために利用する設計図です。以下のドキュメントは Android エミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、Android のドキュメントを参照ください。
AVDs are managed with the Virtual Device Manager. In the Android Studio welcome screen, the context menu at the top right, then Virtual Device Manager. The Virtual Device Manager can also be opened inside Android projects in the Tools » Device Manager menu.
Create Virtual Device をクリックし、適切なデバイス定義を選択します。不明な場合は、 Pixel 2 を選択し、適切なシステムイメージを選択します。よく分からない場合は、Pie (API 28) with Google Play services を選択してください。Android のバージョンについては、Android のバージョン履歴を参照してください。
AVD が作成されたら、Android エミュレータで AVD を起動します。エミュレータを実行し続けることは、Android 用の Ionic アプリケーションを開発しながら検出を確実にするための最良の方法です。
Android ハードウェアの実物は、Ionic アプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用に Android デバイスを設定する簡単な方法です。詳細な手順と情報については、the Android documentationを参照してください。
- デバイスの USB デバッグを有効にします。Settingsを開き、Developer optionsに移動し、USB debuggingを有効にします。Developer optionsのメニューを最初に有効にする必要があるかもしれません。手順についてはthe Android documentationをご確認ください。
- デバイスにコンピュータへの接続許可があることを確認してください。macOS の場合、追加の設定は不要です。Windows の場合はOEM USB driversをインストールしてください。
USB ケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
デバイスがリストされます。トラブルシューティングと詳細情報については、 adb documentation を参照してください。
Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。
Native Android apps are compiled with the Java programming language. Download the Java Development Kit (JDK) 11 if you are using cordova-android 10.0.0 or greater.
Gradle はAndroidアプリで使用されるビルドツールで、別途インストールする必要があります。詳細については、
install page を参照してください。
アプリを Android シミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
Perform an Ionic build, if you haven't already.
Generate the native project, if it does not already exist.
Capacitor では以下の実行をサポートしています:
$ ionic capacitor add android
Cordova では以下のように実行します。
$ ionic cordova prepare android
Set the Package ID.
Capacitor の場合は、capacitor.config.json ファイルを開き、appId プロパティを修正します。
Cordova の場合は、config.xmlファイルを開き、ルート要素である <widget> の id 属性を変更します。詳しくは、Cordova のドキュメントを参照してください。
Capacitor は Android Studio を使って、シミュレータやデバイスへのアプリの構築と実行を行います。
- Ionic アプリを開発してネイティブプロジェクトに同期します
重要な変更が行われるたびに、変更が Android シミュレータやデバイスに表示されるようにするには、Web アセットに Ionic アプリを組み込む必要があります。次に、Web アセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスは Ionic CLI コマンド 1 つで簡単になります。
$ ionic capacitor copy android
Run the app on a simulator or device.
You can open the Android Studio Project using:
$ ionic capacitor open android
In Android Studio, click the Run button and then select the target simulator or device.
リロードサーバを起動するには、次のコマンドを実行します。
ionic capacitor run android -l --external
デバイス上で実行する場合は、デバイスと開発マシンが同じネットワークに接続されていることを確認してください。
Ionic CLI は、コマンドひとつで Ionic アプリをビルド、コピー、Android シミュレーターやデバイスにデプロイすることができます。また、ionic serveで使用されているような開発サーバーをスピンアップして、live-reload 機能を提供することが可能です。
次のコマンドを実行すると、live-reload サーバを起動する CLI プロセスが長時間実行されます。
ionic cordova run android -l
これで、アプリのソースファイルに変更があった場合、Web アセットが再構築され、再度デプロイしなくてもシミュレータやデバイスに変更が反映されるようになりました。
アプリが Android デバイスやエミュレータ上で動作するようになったら、 Chrome DevTools を使ってデバッグすることができます。
Chrome は、Android シミュレータとデバイスのための Web 開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間に Chrome で chrome://inspect に移動し、デバッグが必要なアプリケーションを Inspect します。
アプリケーションがデバイスまたはシミュレータで実行されていることを確認してください。実行されていない場合は、リストに表示されません。
Android Studio で実行している場合、ネイティブログは Logcat に表示されます。
Logcat ウインドウが非表示の場合は、 View » Tool Windows » Logcat から有効にします。
Logcat には ADB を利用してアクセスすることもできます。