この記事を作った動機

　React で作った Web アプリを Android に移植しようとしたら超絶めんどくさかったので、記録するだけ。

自分の試した構成

  • Vite
  • React
  • TypeScript
  • Android Studio (with SDK)
npm create vite@latest

使った汎用コマンド集

すべての環境変数をリスト (Windows,PowerShell)

gci env:* | sort-object name

環境変数を新規作成 (Windows,PowerShell)

# 具体例 ANDROID_HOME にパスを設定する
$env:ANDROID_HOME = "C:\Users\[userName]\AppData\Local\Android\Sdk"

特定の環境変数に対してパスを追加 (Windows,PowerShell)

# 具体例 ANDROID_HOME にパスを追加設定する
$env:ANDROID_HOME += ";C:\Users\[userName]\AppData\Local\Android\Sdk"

準備

Capacitor を使えるようにする

必要なパッケージのインストール

npm i @capacitor/core
npm i @capacitor/android

初期化する

npx cap init

android 向けに初期化する

npx cap add android

ANDROID_HOMEを設定する

エラー例

　Android SDK のパスが、ANDROID_HOMEとして環境変数に設定されていない場合は、以下のようなエラーが出てくる。

npx cap build android
# × Running Gradle build - failed!
# [error]
#         > Configure project :app
#         WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats.

#         > Configure project :capacitor-cordova-android-plugins
#         WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats.

#         FAILURE: Build failed with an exception.

#         * What went wrong:
#         Could not determine the dependencies of task ':app:bundleReleaseResources'.
#         > SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting
#         the sdk.dir path in your project's local properties file at 'C:\Users\userName\work\TODOListApp\TODO
#         List\android\local.properties'.

#         * Try:
#         > Run with --stacktrace option to get the stack trace.
#         > Run with --info or --debug option to get more log output.
#         > Run with --scan to get full insights.
#         > Get more help at https://help.gradle.org.

#         BUILD FAILED in 1s

　ANDROID_HOMEとは、Android SDK のパスのことで、設定が必要である。私の環境では、Android SDK は以下の場所にあった。Android Studio 内では、Tools -> SDK Manager からパスを確認できた。

C:\Users\[userName]\AppData\Local\Android\Sdk

SDKManagerを開く
AndroidSDKのパスが表示される

　設定方法としては、いくつかあるが、今回は PowerShell 内で直接パスを一時的に設定する例を以下に示す。

$env:ANDROID_HOME = "C:\Users\[userName]\AppData\Local\Android\Sdk"

JAVA_HOMEを設定する

エラー例

　JAVA_HOMEに設定されている Java のバージョンが一致しない場合、以下のエラーが出てくる。invalid source release: 21と言われる。

npx cap build android
# × Running Gradle build - failed!
# [error] Starting a Gradle Daemon, 1 incompatible and 2 stopped Daemons could not be reused, use --status for details

#         > Configure project :app
#         WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats.

#         > Configure project :capacitor-cordova-android-plugins
#         WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats.

#         > Task :app:preBuild UP-TO-DATE
#         ...
#         > Task :capacitor-android:compileReleaseJavaWithJavac
#         FAILED
#         [Incubating] Problems report is available at:
#         file:///C:/Users/userName/work/TODOListApp/TODO%20List/android/build/reports/problems/problems-report.html
#         FAILURE: Build failed with an exception.

#         * What went wrong:
#         Execution failed for task ':capacitor-android:compileReleaseJavaWithJavac'.
#         > error: invalid source release: 21

#         * Try:
#         > Run with --stacktrace option to get the stack trace.
#         > Run with --info or --debug option to get more log output.
#         > Run with --scan to get full insights.
#         > Get more help at https://help.gradle.org.

#         BUILD FAILED in 19s
#         36 actionable tasks: 1 executed, 35 up-to-date

　JAVA_HOMEとは、Java に関するパスのことで、Android SDK に対して、正しいバージョンのJAVA がインストールされたパスを指定する必要がある。

　私の場合は、Android Studio がインストールされた場所に抱き合わせて存在する Java を指定することで、正しく Capacitor が動作するようになった。

　個別に分けてインストールした Java も使うことができると思われるが、基本的にバージョンを合わせるのがめんどくさすぎたので今回はそちらの方ではやらなかった。

　私の場合は、まず Android Studio が以下のパスにインストールされていた。

C:\Program Files\Android\Android Studio

　それで、Android Studio に抱き合わせでインストールされる Java は以下のパスにインストールされていた。(javaw.exeがあるかどうかがヒント)

C:\Program Files\Android\Android Studio\jbr

　よって、以下のようにしてJAVA_HOMEを設定した。必ずしも今回示したパスに Java があるとは限らないので、各自確認する必要はある。

$env:JAVA_HOME = "C:\Program Files\Android\Android Studio\jbr"

ビルド

Android Studio でビルドして署名させる (私的用途で使う場合)

　Android アプリは動くようにするために何かしらの形で、ストアアプリとして公開していなくても自己証明書による署名が必要なことが分かった。そこで今回は、Android Studio から直接自己証明書で署名されたアプリをビルドすることにした。

自己証明書の生成から APK生成までの流れ

  1. Android Studio で Capacitor が生成したプロジェクトを開く。
# Web アプリの最新の開発内容を反映する
npm run build
npx cap sync

# Android Studio で開く
npx cap open android
  1. 署名付き APK を生成しようとする
    署名付きAPK生成画面を開く
    APK生成選択
    キーストアを新規作成する
    いろいろ設定する
    キーストア新規作成後の様子
    releaseを選択してAPKを生成する

APK ファイルが生成される

Loading personal and system profiles took 5096ms.
(base) PS C:\Users\userName\work\TODOListApp\TODO List\android\app\release> ls


    Directory: C:\Users\userName\work\TODOListApp\TODO List\android\app\release


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        11/21/2025  10:05 PM                baselineProfiles
-a----        11/21/2025  10:05 PM        3370918 app-release.apk
-a----        11/21/2025  10:05 PM            703 output-metadata.json

npx cap 経由のビルド (私的用途で使う場合、うまく行かなかった)

エラー例

　署名を指定していない場合、npx cap 経由ではビルド時に以下のエラーが出る。ビルド自体は通っているが、署名に関する指定がされていないと怒られる。

npx cap build android
# √ Running Gradle build in 3.28s
# [error] Missing options. Please supply all options for android signing. (Keystore Path, Keystore Password, Keystore Key
#         Alias, Keystore Key Password)

　Capacitor 経由でのビルドによる署名に関しては、npx cap build androidをする時点で、引数として以下の項目を指定する必要がある。

  • –keystorepath
  • –keystorepass
  • –keystorealias
  • –keystorealiaspass
# Web アプリの最新の開発内容を反映する
npm run build
npx cap sync

# Android 向けにビルドする
npx cap build android --keystorepath ["C:\\Path\\to\\key\\selfSign.jks"] --keystorepass [password ]--keystorealias [keyAliasName] --keystorealiaspass [password] --androidreleasetype APK

　ただ私の環境では結局、うまくビルドすることが以下のようになりできなかった。調べてみると、手動で署名している例がいくつかあり、npx cap build androidによる APK 生成はちゃんと動かない気がしている。

npx cap build android --keystorepath ["C:\\Path\\to\\key\\selfSign.jks"] --keystorepass [password ]--keystorealias [keyAliasName] --keystorealiaspass [password] --androidreleasetype APK

# √ Running Gradle build in 2.56s
# × Signing Release - failed!
# [error] jarsigner: unable to open jar file: C:\Users\userName\work\TODOListApp\TODO
#         List\android\app\build\outputs\apk\release\app-release-unsigned.apk

自己証明書の生成

　もし、Android Studio に署名させる (私的用途で使う場合) において自己証明書をまだ生成していない場合は、以下のようにして生成できるようである。

　以下は、[Build your app from the command line  |  Android Studio  |  Android Developers] https://developer.android.com/build/building-cmdlineの引用

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias

やれること

APK 生成

　ビルド を参考にすること。

テストラン

# Web アプリの最新の開発内容を反映する
npm run build
npx cap sync

# Android エミュレータでアプリとしてデバッグする
npx cap run android

Android Studio で開く

# Web アプリの最新の開発内容を反映する
npm run build
npx cap sync

# Android Studio で開く
npx cap open android

参考にしたサイトとか