これまでは、Cordovaプラグインを理解するために、開発方面に焦点を当てて説明してきました。Cordovaプラグインは、開発する事が目的ではなく、アプリ内で使用するためのツールになります。

Cordovaプラグインをアプリ内で使用するためには、ビルドを行いアプリにインストールする必要があります。今回からは、Cordovaプラグインを理解するために、Cordovaプラグインのインストールに焦点を当てて説明していきたいと思います。

Cordovaプラグインをプロジェクトに追加する

Cordovaプラグインをビルドの際にアプリにインストールするためには、Cordova用プロジェクトに対象のCordovaプラグインを追加する必要があります。Cordovaの場合は、以下のようにcordova plugin addコマンドを使用する事で、Cordova用プロジェクトにCordovaプラグインを追加する事ができます。

cordova plugin add <plugin-spec>
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-camera@8.0.0

コマンドの詳しい説明につきましては、以下を参照してください。

cordova plugin command

Cordovaプラグインのインストール情報

cordova plugin addコマンドを使用してCordovaプラグインを追加した場合、以下にインストール情報が設定されます。

package.json
config.xml（廃止）
pluginsフォルダー

ビルドの際のCordovaプラグインのインストール処理では、上記のインストール情報が使用されてCordovaプラグインのインストールが行われます。

package.json

cordova plugin addコマンドを使用して、cordova plugin add cordova-plugin-camera@8.0.0を実行した場合、package.jsonのdevDependenciesとcordova/pluginsに、以下のようなCordovaプラグインのインストール情報が追加されます。

"cordova": {
  "plugins": {
    "cordova-plugin-camera": {}
  }
},
"devDependencies": {
  "cordova-plugin-camera": "^8.0.0"
}

devDependenciesの内容については、cordova plugin addコマンドの--saveオプションを指定した場合は、dependenciesに追加されます。

config.xml（廃止）

以下のドキュメントの説明では、Cordova 9.0以降からは、config.xmlのpluginディレクティブは、廃止されている説明がありますが、Cordova 12がリリースされている現在も、pluginディレクティブは動作しているため、情報として記載します。今後、完全に廃止される可能性がありますので、基本的には、使用しない事をおすすめします。

Config.xml API - plugin

上記のドキュメントの説明では、cordova plugin addコマンドの--saveオプションを指定する事で、config.xmlにインストール情報が追加される記載がありますが、現在は、--saveオプションを指定してもconfig.xmlにインストール情報は、追加されません。

以下のように、config.xmlに手動でpluginディレクティブを追加することで、使用する事ができます。

<plugin name="cordova-plugin-camera" spec="^8.0.0" />

pluginディレクティブのインストール情報は、cordova platform addコマンド実行時に処理され、packahge.jsonに統合されます。すでに、pluginディレクティブに設定されているCordovaプラグインのインストール情報がpackahge.jsonに設定されている場合は、packahge.jsonの設定が優先され、pluginディレクティブのインストール情報は、無視されます。

pluginsフォルダー

cordova plugin add cordova-plugin-camera@8.0.0を実行した場合、
Cordovaプロジェクトのルート配下にpluginsフォルダーが作成され、pluginsフォルダー配下に、対象のCordovaプラグインフォルダー（cordova-plugin-camera）がコピーされます。Cordovaプラグインのインストール処理の際には、pluginsフォルダー配下にコピーされたCordovaプラグインが使用されます。

package.jsonに設定されているCordovaプラグインのバージョンを手動で変更した場合、すでに対象のCordovaプラグインがpluginsフォルダーにコピーされている場合は、pluginsフォルダーにコピーされているCordovaプラグインのバージョンがインストールされます。

優先度は、pluginsフォルダーにコピーされているCordovaプラグインの方が、package.jsonの設定よりも高くなります。

Cordovaプラグインをインストールする

Cordovaプラグインのインストールは、cordova platform addコマンドの処理の一環として行われます。

cordova platform addコマンドが実行されるとconfig.xmlのpluginディレクティブがチェックされます。pluginディレクティブが設定されている場合は、以下のようなメッセージが表示され、packahge.jsonに統合された後、インストールが実行されます。

cordova platform add android@14.0.1
Plugin 'cordova-plugin-camera' found in config.xml... Migrating it to package.json
Discovered plugin "cordova-plugin-camera". Adding it to the project
Installing "cordova-plugin-camera" for android

Cordovaプラグインのインストール処理の際に、pluginsフォルダー配下に対象のCordovaプラグインフォルダーがコピーされている場合は、コピーされているCordovaプラグインが使用され、インストールが行われます。

pluginsフォルダー配下に対象のCordovaプラグインフォルダーがコピーされていない場合は、pluginsフォルダー配下に対象のCordovaプラグインフォルダーがコピーされた後、コピーされたCordovaプラグインを使用してインストールが行われます。

おわりに

今回は、Cordovaプラグインを理解するために、Cordovaが行なっているCordovaプラグインのインストールに焦点を当てて説明を行いました。Cordova用プロジェクトとMonacaプロジェクトでは、Cordovaプラグインの扱いに違いがあるため、注意点が存在します。

次回は、Cordova用プロジェクトとMonacaプロジェクトでのCordovaプラグインの扱いの違いや注意点を含めて説明したいと思います。

Cordovaプラグインのインストールを理解しよう（Cordova編）