Ionic5+Angularでスマホアプリ開発 【Android Studioでエミュレート編】

Ionicで作成したアプリケーションをCapacitorを使ってAndroid Studioでエミュレートするプログラミング
プログラミング

前回は、Ionicを使ってAndroidアプリをビルドするための環境を構築しました。

今回は、Capacitorを使って、作成したアプリをAndroidエミュレーター上で実行する方法について説明します。

ソースコードは、以下のページで作成した、公式ページにもあるフォトギャラリーを使います。

Androidエミュレーターへのデプロイ

Ionicの操作

プロジェクトのフォルダに移動します。

$ cd photo-gallary

ビルドを実行して、エラーが起きないことを確認します。

$ ionic build

Android向けにビルドします。

$ ionic cap add android

これにより、photo-galleryフォルダ配下に、androidフォルダが作成されます。
androidフォルダは、src配下のソースとは独立したプロジェクトになっているので、今後htmlソースを修正した後は、以下のコマンドで変更をコピーします。

$ ionic cap copy

プラグインを追加するなど、ネイティブに関する部分を更新した場合は、syncコマンドを実行します。

$ ionic cap sync

以上でIonicの操作は完了です。

次は、Android Studioの操作になります。

Android Studioの操作

Android StudioでAndroidプロジェクトを開きます。

$ ionic cap open android
Android Studioが起動したら、android/app/src/main/AndroidManifest.xmlを開き、以下の記述がなければ、追記します。

Android Studioが起動したら、android/app/src/main/AndroidManifest.xmlを開き、以下の記述がなければ、追記します。

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

カメラを使用するための権限を設定しています。

アプリがデプロイ可能になったら、画面上部の実行ボタンが有効化されるので、選択します。

初回実行時は、不足しているSDKパッケージや、Android SDKのライセンス認証が必要な旨がエラーメッセージに表示されるので、リンク「Install missing SDK package(s)」を選択します。

初回実行時は、不足しているSDKパッケージや、Android SDKのライセンス認証が必要な旨がエラーメッセージに表示されるので、リンク「Install missing SDK package(s)」を選択します。

ダイアログに従って進むと、不足パッケージのインストールと、ライセンスの承諾完了します。

ダイアログに従って進むと、不足パッケージのインストールと、ライセンスの承諾完了します。

再び、エミュレーターを起動します。

Android端末が画面に表れ、端末の画面上に、作成したアプリケーションが表示されていれば、正しくエミュレートできています。

Android端末が画面に表れ、端末の画面上に、作成したアプリケーションが表示されていれば、正しくエミュレートできています。

上記は、Ionicの公式ページで作成した写真撮影アプリを起動した様子です。

ネイティブ機能の写真撮影を使ってみると、よくわからない写真が撮れます。

ネイティブ機能の写真撮影を使ってみると、よくわからない写真が撮れます。

撮影後に、写真の一覧ページに表示される部分もちゃんと動いているようです。

撮影した写真の一覧表示もちゃんと動いています。

エミュレーターを再起動しても、撮影した写真は残っています。

カメラやファイルストレージなどのネイティブのAPIが動作していることを確認できました。

エミュレーターを初期化したい場合は、AVDマネージャーから、「Wipe Data」を選択すると、保存したデータなどすべてが初期化されます。

まとめ

今回は、Ionicで作成したアプリケーションをCapacitorを使ってAndroid Studioでエミュレートする方法を説明しました。

次回は、実際のAndroid端末にインストールするためのデバッグ用APKを作成する方法を説明します。

参考

Capacitor公式ページ

Capacitor: Cross-platform native runtime for web apps
Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript

Android Studio起動時のKVMエラーを解決

Ubuntu18.04 にAndroid Studioをインストールする。(アイコン表示とか依存関係エラーの解決) - Qiita
こんにちはひろにぃです。 まぁタイトル通りです。インストールする際のエラー解決、起動アイコンの表示などを含め書いていきます。 インストール方法 URL *

コメント

タイトルとURLをコピーしました