前回は、Ionicを使ってAndroidアプリをビルドするための環境を構築しました。
今回は、Capacitorを使って、作成したアプリをAndroidエミュレーター上で実行する方法について説明します。
ソースコードは、以下のページで作成した、公式ページにもあるフォトギャラリーを使います。
Androidエミュレーターへのデプロイ
Ionicの操作
プロジェクトのフォルダに移動します。
$ cd photo-gallaryビルドを実行して、エラーが起きないことを確認します。
$ ionic buildAndroid向けにビルドします。
$ 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を開き、以下の記述がなければ、追記します。
<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)」を選択します。
ダイアログに従って進むと、不足パッケージのインストールと、ライセンスの承諾完了します。
再び、エミュレーターを起動します。
Android端末が画面に表れ、端末の画面上に、作成したアプリケーションが表示されていれば、正しくエミュレートできています。
上記は、Ionicの公式ページで作成した写真撮影アプリを起動した様子です。
ネイティブ機能の写真撮影を使ってみると、よくわからない写真が撮れます。
撮影後に、写真の一覧ページに表示される部分もちゃんと動いているようです。
エミュレーターを再起動しても、撮影した写真は残っています。
カメラやファイルストレージなどのネイティブのAPIが動作していることを確認できました。
エミュレーターを初期化したい場合は、AVDマネージャーから、「Wipe Data」を選択すると、保存したデータなどすべてが初期化されます。
まとめ
今回は、Ionicで作成したアプリケーションをCapacitorを使ってAndroid Studioでエミュレートする方法を説明しました。
次回は、実際のAndroid端末にインストールするためのデバッグ用APKを作成する方法を説明します。
参考
Capacitor公式ページ
Android Studio起動時のKVMエラーを解決
コメント