最初のCordovaプロジェクト

前回の講義でCordovaのインストールが完了しました。今回はCLIコマンドを使ってプロジェクトを作成します。

一、Cordovaプロジェクトの作成

ターミナルを開き、プロジェクトを保存したいフォルダへ移動し、作成コマンドを実行します。

cordova create hello com.foxdevelop.hello HelloWorldCode language: CSS (css)

パラメータ解説：

1. hello：プロジェクトフォルダ名
2. com.example.hello：アプリケーションパッケージ名（Android固有の識別子。公開時に必ず変更する必要があります）
3. HelloWorld：アプリに表示される名称

下記は実際の実行例です。Dドライブにフォルダを作成し、その配下でプロジェクトを生成します。

C:\Users>d:

D:\>mkdir cordovademo

D:\>cd cordovademo

D:\cordovademo>cordova create hello com.foxdevelop.hello HelloWorld
Creating a new cordova project.Code language: CSS (css)

Dドライブ内にcordovademoフォルダが作成され、配下にhelloサブフォルダが確認できます。

ソースコードの主要ディレクトリ：hello/www/

エントリーページ：www/index.html

platformsフォルダ内のファイルを編集しないでください。ビルド時に上書きされます！

二、プロジェクトへ移動し、プラットフォームを追加

cd hello

プラットフォーム追加

# Androidプラットフォーム（Windowsで利用可能）
cordova platform add android

# iOSプラットフォーム【Windowsではビルド不可！Macのみ対応】
# cordova platform add iosCode language: PHP (php)

実行ログ例

D:\cordovademo>cd hello

D:\cordovademo\hello>cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.foxdevelop.hello
        Name: HelloWorld
        Activity: MainActivity
        Android Target SDK: android-36
        Android Compile SDK: 36
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@15.1.0

D:\cordovademo\hello>cordova platform ls
Installed platforms:
  android 15.1.0
Available platforms:
  browser
  electronCode language: CSS (css)

三、事前環境チェック（重要）

cordova requirements

JDKなど、システムの環境設定が整っているか確認します。

D:\cordovademo\hello>cordova requirements
Android SDK is missing cmdline-tools directory.

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
'avdmanager' は内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。

Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Some of requirements check failedCode language: PHP (php)

正常時の出力は下記の通り

Java JDK: installed
Android SDK: installed
Gradle: installed

今回の環境ではGradle: not installedと表示されています。

もしJDKが未インストールの場合は導入してください。JDKのインストール手順は別講座を参照してください。

筆者の環境ではJDK11を使用しています。

筆者のPCでは下記のエラーが発生しました。

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=undefined (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Android SDK is missing cmdline-tools directory.
Using Android SDK: D:\Sortware\ADB
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android StudioCode language: JavaScript (javascript)

Android Studioをインストールしてください。Android StudioにはSDKが同梱されています。

Android Studioの導入方法は別講座を参照してください。

Android Studioを起動し、上部メニュー Tools → SDK Manager を開き、SDKのパスを確認します。

次に環境変数を設定します。

変数名：ANDROID_HOME
変数値：C:\Users\xxxxx\AppData\Local\Android\Sdk

変数作成後、Pathへ追加する必要があります。

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools\latest\bin

Android Studio コマンドラインツールのインストール

Android Studio → Tools → SDK Manager を開く

SDK Toolsタブへ切り替え

Gradleバイナリパッケージのダウンロード

公式サイトからダウンロード：https://gradle.org/releases/

解凍先パス：C:\gradle\gradle-8.5

Gradle by Develocity | Releases

システム環境変数の設定

変数名：GRADLE_HOME
変数値：C:\gradle-8.7

【システム変数】を新規作成

Pathへ登録

インストール確認方法

cmdを起動

gradle -v

再度実行し、下記のように表示されれば設定完了です。

D:\cordovademo\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: installed C:\gradle-8.7\bin\gradle.BAT
Some of requirements check failedCode language: CSS (css)

問題2 JDKバージョン

筆者がcordova run androidを実行すると、下記のエラーが出力されました。

D:\cordovademo\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)

BUILD SUCCESSFUL in 1sCUTING [91ms]
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\cordovademo\hello\platforms\android\app\build.gradle' line: 20

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 17 to run. You are currently using Java 11.
      Your current JDK is located in C:\Program Files\Zulu\zulu-11
      You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.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.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.14.2/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

BUILD FAILED in 2s
Command failed with exit code 1: D:\cordovademo\hello\platforms\android\tools\gradlew.bat cdvBuildDebugCode language: JavaScript (javascript)

筆者の環境はJDK11ですが、今回使用するCordova AndroidプラットフォームのAGP（Android Gradle Plugin）はJDK17必須のため、ビルドが失敗します。

現在利用しているのはZulu JDK 11なので、Zulu JDK 17へアップグレードします。

こちらからダウンロード：Java 8, 11, 17, 21, 25 Download for Linux, Windows and macOS

ダウンロードするファイルはmsiインストーラーです。インストール時に下記項目にチェックを入れると、JAVA_HOMEやPATHが自動設定されます。

CMDを起動しJavaのバージョンを確認します。

java -version

openjdk version "17.0.20" 2026-07-21 LTS
OpenJDK Runtime Environment Zulu17.68+17-CA (build 17.0.20+8-LTS)
OpenJDK 64-Bit Server VM Zulu17.68+17-CA (build 17.0.20+8-LTS, mixed mode, sharing)Code language: CSS (css)

上記のように表示されれば成功です。

四、アプリのビルド

# 全プラットフォームをビルド（今回はAndroidのみ）
cordova build

# Androidのみビルド
cordova build android
Code language: PHP (php)

コンパイル成功後、APK出力先：

hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

実行ログ例

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: C:\Users\maiwu\AppData\Local\Android\Sdk

BUILD SUCCESSFUL in 9s
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

> Task :CordovaLib:compileDebugJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

BUILD SUCCESSFUL in 11s
50 actionable tasks: 50 executed
Built the following apk(s):
        D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apkCode language: JavaScript (javascript)

下記ディレクトリ内にAPKファイルが生成されます：D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\

五、動作テスト

方法1：Androidエミュレーターで起動

cordova emulate android

方法2：USB接続実機でテスト（USBデバッグを有効化）

cordova run android

実機でのテストを推奨します。AndroidスマホをUSBケーブルで接続し、スマホ側でUSBデバッグを有効にしてください。

helloフォルダ内でCMDを起動し、cordova run androidを実行します。

実機にアプリがインストールされます。

Cordovaの画面が表示されます。

六、プラグインのインストール

端末のネイティブ機能を利用

CordovaのWebページ単体ではカメラ、Bluetooth、ファイル、通知などのハードウェア機能を呼び出せません。プラグインの導入が必須です。

例：カメラプラグイン

cordova plugin add cordova-plugin-camera

インストール済みプラグイン確認

cordova plugin ls

JSからネイティブAPIを呼び出すにはdevicereadyイベント発生を待つ必要があります。ページ読み込み完了直後にプラグインを実行してはいけません！

基礎テンプレート例（www/js/index.js）

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // デバイス準備完了。すべてのCordovaプラグインを呼び出せます
    console.log("Cordova初期化完了");
}
Code language: JavaScript (javascript)

実行ログ例

D:\cordovademo\hello>cordova plugin add cordova-plugin-camera
Installing "cordova-plugin-camera" for android
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-plugin-camera to package.json

D:\cordovademo\hello>cordova plugin ls
cordova-plugin-camera 8.0.0 "Camera"Code language: CSS (css)

index.htmlを下記コードに書き換え、カメラ機能をテストします。

プロジェクト作成後のフォルダ構成は下記の通りです。

D:\cordovademo\hello

今後のコード編集はwwwフォルダ内で行います。

index.htmlを下記に変更

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Test</title>
    <script src="cordova.js"></script>
</head>
<body>
    <button id="btnTake">撮影</button>
    <br>
    <img id="imgPreview" style="width:220px;">

    <script>
        let cameraReady = false;

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            console.log("deviceready 発生、Cordova起動完了");
            cameraReady = true;
        }

        // addEventListenerによるイベント登録推奨（onclickはタイミング競合が起きやすい）
        document.getElementById("btnTake").addEventListener("click", function(){
            if(!cameraReady){
                alert("Cordova初期化完了までお待ちください！");
                return;
            }

            navigator.camera.getPicture(
                function(imageUri) {
                    console.log("撮影成功：", imageUri);
                    document.getElementById("imgPreview").src = imageUri;
                },
                function(error) {
                    alert("撮影失敗：" + error);
                },
                {
                    destinationType: 0, // Camera.DestinationType.FILE_URI = 0、定義未定義回避のため数値直接指定
                    sourceType: 1,      // Camera.PictureSourceType.CAMERA = 1
                    quality: 80
                }
            );
        });
    </script>
</body>
</html>Code language: C# (cs)

再度 cordova run android を実行

アプリが起動し画面にボタンが表示されます。ボタンをクリックするとカメラが起動し、撮影可能です。

＊七、mergesディレクトリ：プラットフォーム別差分ファイル

既定では全プラットフォームがwwwのリソースを共有します。

AndroidとiOSで画面リソースを分けたい場合はmergesフォルダを利用します。

merges/
├─android/
│  └─css/overrides.css  # Androidのみ適用
└─ios/
Code language: PHP (php)

ビルド時、merges内のファイルは同名のwww配下ファイルを上書きします。

＊八、Cordovaのアップグレード

# Cordova CLIをグローバル更新
npm update -g cordova

# 指定バージョンをインストール
npm install -g cordova@12.0.0

# プロジェクト内Androidプラットフォーム更新
cordova platform update android --save
Code language: PHP (php)

よく使うコマンドまとめ

#1 プロジェクト作成
cordova create testapp com.mytest.app TestApp
cd testapp

#2 Androidプラットフォーム追加
cordova platform add android

#3 環境チェック
cordova requirements

#4 デバッグビルド
cordova build android

#5 実機起動
cordova run android
Code language: CSS (css)

最初のCordovaプロジェクト