😽

Ionic＋CapacitorでのAndridネイティブアプリ作成手順

2023/08/15に公開

Node.js

はじめに

IONIC＋Capacitor でAndridネイティブアプリを作成する手順。
基本的には公式チュートリアルの通りだが、毎回バージョンの違いなどで苦戦するので、成功パターンを備忘録として残しておく。

IONIC
https://ionicframework.com/docs/ja
Capacitor
https://capacitorjs.com/docs/android

その他参考サイト

テスト環境

OS：Windows11
NodeJS：18.16.0
npm：9.6.7
Capacitor：v5

テストプロジェクトの作成

まずは、ionicをグローバルインストール。

npm install -g @ionic/cli

適当なプロジェクト名を指定して、プロジェクト作成

C:\Work\git>ionic start ionic-test --capacitor

※ Framework: Angular、Starter template: sidemenu、NgModules を選択。
※ ? Create free Ionic account? は適当に選択。

試しにnpm startして http://localhost:4200/ にアクセスすると、「sidemenu」のテンプレート画面が表示される。

C:\Work\git>cd ionic-test
C:\Work\git\ionic-test>npm start

capacitorのモジュールを追加

C:\Work\git\ionic-test>npm i --save @capacitor/core @capacitor/cli

IONICビルド

C:\Work\git\ionic-test>ionic build

コピー

C:\Work\git\ionic-test>npx cap copy

Androidのプラットフォーム追加

C:\Work\git\ionic-test>npx cap add android
[error] Could not find the android platform.
        You must install it in your project first, e.g. w/ npm install @capacitor/android

モジュールが足りないと言われるので、言われた通りインストール。

C:\Work\git\ionic-test>npm install @capacitor/android

再度実行すると、今度は成功。

C:\Work\git\ionic-test>npx cap add android
√ Adding native android project in android in 88.39ms
√ add in 89.28ms
√ Copying web assets from www to android\app\src\main\assets\public in 1.64s
√ Creating capacitor.config.json in android\app\src\main\assets in 1.04ms
√ copy android in 1.69s
√ Updating Android plugins in 5.47ms
[info] Found 4 Capacitor plugins for android:
       @capacitor/app@5.0.6
       @capacitor/haptics@5.0.6
       @capacitor/keyboard@5.0.6
       @capacitor/status-bar@5.0.6
√ update android in 72.76ms
√ Syncing Gradle in 263.90μs
[success] android platform added!
Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/basics/workflow

JavaJDKのインストール

capacitorはJava11以降が対象とのことなので、今回はJAVA11をインストールする。

※ 今回使用ファイル「jdk-11.0.19_windows-x64_bin.exe」

Android Studio のインストール

以下からダウンロードし、インストール。
https://developer.android.com/studio

※ 今回使用ファイル「android-studio-2022.3.1.18-windows.exe」

テスト実行

Android Studioを起動し、↑で作成したプロジェクトのandroidフォルダを開く。
（今回の例で言うと、「C:\Work\git\ionic-test\android」を開く。）

「run」の三角マークを押して実行。
「sidemenu」のテンプレート画面が表示され、操作もできる。

APKビルド

「Build」⇒「Build Bundle(s)/ APK(s)」⇒「Build APK(s)」でビルド。
「C:\Work\git\ionic-test\android\app\build\outputs\apk\debug\app-debug.apk」にAPKファイルが作成される。

実機インストール

APKファイルを実機（スマホ）に適当に転送し、インストール。

※ 警告が出るので、「詳細⇒インストール」を選択。

無事にAndroid端末で実行できた。

修正ソースの反映

ソースを修正した後は、ionic buildとnpx cap copyを行った後、Android Studioを操作（デバッグ再実行やビルド）すると反映される。
※ npx cap copyの代わりにnpx cap sync androidでも可。
　npx cap sync androidのほうは、プラグインの更新などもしてくれる。
　なのでプラグインを追加したときなどはnpx cap sync androidを使用する。

補足

※ ionic initやnpx cap initのコマンド実行は不要だった。
　ionic startのときに初期化もしれくれているみたい。