Cordova 12について

keiji_asial

Cordova

Monaca

Pocket

Monacaチームの小田川です。

Cordova 12がリリースされて1ヶ月以上が経ちました。Cordova 12については、以下を参照してください。

Cordova CLI 12.0.0 & Internal Packages Released!

今後、MonacaでもCordova 12に対応していく予定です。Cordova 12では、Cordova 11同様、既存のMonacaプロジェクトに対する影響範囲は、あまり大きくありません。また、同時にAndroidプラットフォームの最新版もリリースされました。最新版のAndroidプラットフォームについては、下記を参照してください。

Cordova Android 12.0.0 Released!

今回は、最新版のCordova 12、Androidプラットフォームの変更点や注意点についてみていきたいと思います。

Cordova 12（Cordova CLI 12.0.0）

Nodejsサポートについて

Cordova CLI 12.0.0からは、Nodejs 14のサポートが終了し、Nodejs 16.13.0以降が必要になります。そのため、Cordova CLI 12.0.0未満のバージョンをNodejs 14以下で使用している場合、Cordova CLI 12.0.0へアップデートすると動作に問題が発生する可能性があるので、注意が必要になります。

非推奨プラットフォームについて

Cordova CLI 12.0.0からは、非推奨になっていたOSXプラットフォームとWindowsプラットフォームが、リストから削除されました。引き続き利用することは可能なようですが、積極的なメンテナンスは行われないため、動作保証はないようです。利用する場合は、

cordova-osx
cordova-windows

のパッケージ名を使用する必要があります。

プラットフォームの追加について

Cordova CLI 12.0.0からは、Cordova platform add <PLATFORM>コマンドを実行すると、npmから利用可能な最新のプラットフォームが取得されるようになりました。特定のバージョン利用する場合は、cordova platform add <PLATFORM>@<VERSION>の形式でバージョンを含める必要があります。

Androidプラットフォーム 12.0.0(Cordova Android 12.0.0)

Androidプラットフォーム 12.0.0では、下記のバージョンが更新されています。

minSdkVersion: 24
targetSdkVersion: 33
Kotlin: 1.7.21
Gradle: 7.6
Android Gradle Plugin (AGP): 7.4.2
Google Services Gradle Plugin: 4.3.15
AndroidX App Compat Library: 1.6.1
AndroidX WebKit Library: 1.6.0
AndroidX SplashScreen Core Library: 1.0.0

config.xmlやCordovaプラグインで、下記の設定を変更している場合、Androidプラットフォーム 12.0.0に更新した場合は、ビルドエラーが発生する場合があります。ビルドエラーが発生する場合は、Androidプラットフォーム 12.0.0の設定内容に合わせて変更する必要があります。

android-minSdkVersion
android-maxSdkVersion
android-targetSdkVersion
android-compileSdkVersion
android-buildToolsVersion
GradleVersion
AndroidGradlePluginVersion
GradlePluginKotlinVersion
AndroidXAppCompatVersion
AndroidXWebKitVersion
GradlePluginGoogleServicesVersion

Nodejsサポートについて

Androidプラットフォーム 12.0.0でも、Nodejs 14のサポートが終了し、Nodejs 16.13.0以降が必要になります。そのため、Androidプラットフォーム 12.0.0未満のバージョンをNodejs 14以下で使用している場合、Androidプラットフォーム 12.0.0へアップデートすると動作に問題が発生する可能性があるので、注意が必要になります。

Monochrome対応

Android 13では、テーマ別アプリアイコンを使用することができます。Androidプラットフォーム 12.0.0からは、テーマ別アプリアイコンのMonochromeに対応しています。テーマ別アプリアイコンについては、下記を参照してください。

テーマ別アプリアイコン

テーマ別アプリアイコンは、Adaptive Icon設定の一部として設定します。CordovaでAdaptive Iconに対応する場合は、config.xmlのiconディレクティブに下記のように設定します。Monochromeに対応する場合は、iconディレクティブにmonochrome属性を追加することで対応することができます。

<icon
    density="xxxhdpi" 
    background="adaptive_bg.png"
    foreground="adaptive_fg.png"
    monochrome="monochrome.png"
    src="xxxhdpi.png"
/>

monochrome属性の詳しい設定方法については、下記を参照してください。

Customize Icons

現在、MonacaクラウドIDEのAndroidアプリ設定画面にあるアイコン項目では、Adaptive Icon用のアイコンを設定することができないため、background属性とforeground属性、monochrome属性に設定する画像ファイルは、手動でMonacaプロジェクトにアップロードする必要があります。

このbackground属性とforeground属性、monochrome属性に設定する画像ファイルは、Monacaプロジェクトのresフォルダー配下に配置します。また、Adaptive Iconでは、pngファイルの他にxmlファイルの指定もできます。下記の例は、Monacaプロジェクトの/res/android/icon/配下に対象の画像をアップロードした例になります。

<platform name="android">
  <icon density="ldpi" background="/res/android/icon/ldpi-background.png" foreground="/res/android/icon/ldpi-foreground.png" monochrome="/res/android/icon/ldpi-monochrome.xml" src="/res/android/icon/ldpi.png" />
  <icon density="mdpi" background="/res/android/icon/mdpi-background.png" foreground="/res/android/icon/mdpi-foreground.png" monochrome="/res/android/icon/mdpi-monochrome.xml" src="/res/android/icon/mdpi.png"/>
  <icon density="hdpi" background="/res/android/icon/hdpi-background.png" foreground="/res/android/icon/hdpi-foreground.png" monochrome="/res/android/icon/hdpi-monochrome.xml" src="/res/android/icon/hdpi.png"/>
  <icon density="xhdpi" background="/res/android/icon/xhdpi-background.png" foreground="/res/android/icon/xhdpi-foreground.png" monochrome="/res/android/icon/xhdpi-monochrome.xml" src="/res/android/icon/xhdpi.png"/>
  <icon density="xxhdpi" background="/res/android/icon/xxhdpi-background.png" foreground="/res/android/icon/xxhdpi-foreground.png" monochrome="/res/android/icon/xxhdpi-monochrome.xml" src="/res/android/icon/xxhdpi.png"/>
  <icon density="xxxhdpi" background="/res/android/icon/xxxhdpi-background.png" foreground="/res/android/icon/xxxhdpi-foreground.png" monochrome="/res/android/icon/xxxhdpi-monochrome.xml" src="/res/android/icon/xxxhdpi.png"/>
</platform>

注意点として、Androidプラットフォーム 11系とAndroidプラットフォーム 12系では、Adaptive Iconの設定に違いがあります。Androidプラットフォーム 12系でAdaptive Icon設定を行う場合は、monochrome属性が必須になっています。monochrome属性が設定されていない場合は、Adaptive Iconではなく、通常のアイコン画像として設定されます。

追記：上記のAdaptiv Iconの設定については、Androidプラットフォーム 12.0.1で修正されました。詳しくは、Cordova Android 12.0.1 Released!を参照してください。

iconディレクティブにsrc属性が設定されている場合は、src属性に設定されている画像ファイルがアイコン画像として設定されます。src属性が設定されていない場合は、foreground属性に設定されている画像ファイルがアイコン画像として設定されます。このAndroidプラットフォーム 12系でのアイコン画像の処理については、不具合の可能性があるため、今後、Androidプラットフォーム 11系と同様の動作になる可能性があります。

おわりに

現在、Monacaでは、Cordova 12でのMonacaプロジェクトの動作確認やCordovaコミュニティーが提供している基本Cordovaプラグインの動作確認を行なっています。これらの動作確認が取れた後に提供する予定になっています。Cordovaの最新情報については、CordovaのブログやGitHubで公開されているCordova関連のサイトで確認することができますので、一度、チェックしてみてください。