前回は、Cordovaプラグインを理解するために、Cordovaが行なっているCordovaプラグインのインストールについて説明しました。Monacaでアプリ開発を行う場合は、Monacaプロジェクトを使用します。Cordova用プロジェクトとMonacaプロジェクトでは、Cordovaプラグインの扱いに異なる点があります。

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

Cordovaプラグインを追加する（MonacaクラウドIDE）

MonacaクラウドIDEからCordovaプラグインをMonacaプロジェクトに追加する場合は、MonacaクラウドIDEのメニュー、

  • 設定 - Cordovaプラグインの管理

から行います。

Cordovaプラグイン画面からCordovaプラグインを追加する方法は、以下になります。

  • 利用可能なプラグインから有効にする
  • Cordovaプラグインのインポートボタンからインポートする
    • 圧縮されたパッケージ(ZIP/TGZ)をアップロード
    • URLもしくはパッケージ名を指定します

Cordovaプラグインを追加する（Monaca Localkit）

Monaca LocalkitからCordovaプラグインをMonacaプロジェクトに追加する場合は、メニューボタンにある設定をクリックします。

設定ボタンをクリックすると、MonacaクラウドIDEの設定画面が起動され、左のメニューにあるCordovaプラグインをクリックすると、MonacaクラウドIDEのCordovaプラグイン画面が表示されます。

Cordovaプラグイン画面からCordovaプラグインを追加する方法は、MonacaクラウドIDEと同じなります。Cordovaプラグイン画面で設定されたCordovaプラグイン情報は、同期しているローカルPC上のMonacaプロジェクトに反映されます。

Cordovaプラグインを追加する（Monaca CLI）

Monaca CLIを使用している場合、CordovaプラグインをローカルPC上のMonacaプロジェクトに追加する場合は、以下のコマンドを使用します。

  • monaca plugin add <plugin>
  • monaca plugin add cordova-plugin-camera
  • monaca plugin add cordova-plugin-camera@8.0.0

GitHub等からダウンロードしたCordovaプラグインを追加する場合は、以下のように設定します。追加するCordovaプラグインは、圧縮ファイルのパスではなく、圧縮ファイルを解凍したフォルダーパスを指定します。

  • monaca plugin add Cordovaプラグインのフォールダーパス
  • monaca plugin add /Users/xxx/Downloads/cordova-plugin-camera

monaca pluginコマンドについては、以下を参照してください。

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

MonacaクラウドIDEのCordovaプラグイン画面からCordovaプラグインを有効またはインポートした場合やMonaca CLIのmonaca pluginコマンドでCordovaプラグインを追加した場合は、以下にインストール情報が設定されます。

  • package.json
  • res/custom_pluginsフォルダー

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

package.json

MonacaクラウドIDEのCordovaプラグイン画面からcordova-plugin-cameraを有効にした場合やMonaca CLIのmonaca pluginコマンドでCordovaプラグインを追加した場合は、package.jsonのdependenciesとcordova/pluginsに、以下のようなCordovaプラグインのインストール情報が追加されます。

"dependencies": {
    "cordova-plugin-camera": "7.0.0"
},
"cordova": {
    "plugins": {
        "cordova-plugin-camera": {}
    }
},

cordova plugin addコマンドを使用して、cordova plugin add cordova-plugin-camera@8.0.0を実行した場合は、package.jsonのdevDependenciesにインストール情報が追加されましたが、Monacaプロジェクトでは、devDependenciesではなく、dependenciesにインストール情報が追加されます。

custom_pluginsフォルダー

前回説明しましたが、cordova plugin addコマンドを使用してCordovaプラグインを追加した場合、pluginsフォルダー配下に対象のCordovaプラグインフォルダーがコピーされます。

pluginsフォルダーは、Cordovaが使用するフォルダーになるため、ユーザが用意するCordovaプラグインは、pluginsフォルダー以外の別の場所に用意する必要があります。そのため、Monacaプロジェクトでは、圧縮されたパッケージのCordovaプラグインをインポートした場合は、custom_pluginsフォルダー配下に対象のCordovaプラグインフォルダーがコピーされるようになっています。

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

Cordovaプラグインのインストールは、ビルドサーバ側で行われるため、cordova platform addコマンドの処理の一環として行われます。インストールの内容については、前回の説明内容と同じになります。

注意点1

Monacaプロジェクトは、Cordova用プロジェクトがベースになっているため、Cordova用プロジェクトをMonacaクラウドIDEからインポートしたり、Monaca CLIから利用する事ができます。そのため、インポートするCordova用プロジェクトにCordovaプラグインが追加されている場合は、Cordova用のインストール情報が含まれています。

Cordova用プロジェクトとMonacaプロジェクトに設定されるCordovaプラグインのインストール情報は、下記になります。

  • Cordova用プロジェクトの場合：
    • package.json
    • devDependencies
    • cordova/plugins
    • config.xml（廃止）
    • pluginsフォルダー
  • Monacaプロジェクトの場合：
    • package.json
    • dependencies
    • cordova/plugins
    • res/custom_pluginsフォルダー

Monacaプロジェクトでは、Cordova用プロジェクトに設定されるpackage.jsonのdevDependenciesとpluginsフォルダーは、使用しません。そのため、MonacaクラウドIDEのCordovaプラグイン画面やMonaca CLIのmonaca pluginコマンドからCordovaプラグインを無効にした場合は、devDependenciesのインストール情報とpluginsフォルダー配下のCordovaプラグインフォールダーは、削除されません。

注意点2

注意点1で説明したように、package.jsonのdevDependenciesのインストール情報とpluginsフォルダー配下のCordovaプラグインフォールダーが削除されていない状態でビルドを実行した場合、pluginsフォルダー配下のCordovaプラグインフォールダーは存在しているため、無効にしたCordovaプラグインがインストールされてしまいます。

Monacaプロジェクトにpluginsフォルダーが存在している場合、ビルド画面には、以下のような警告メッセージが表示されます。

上記の警告メッセージが表示された場合は、pluginsフォルダー配下にコピーされているCordovaプラグインを確認し、package.json内のCordovaプラグインのインストール情報に、対象のCordovaプラグインが含まれている場合は、対象のCordovaプラグインのインストール情報を削除し、pluginsフォルダーを削除する必要があります。

削除したCordovaプラグインを利用したい場合は、MonacaクラウドIDEのCordovaプラグイン画面や、Monaca CLIを使用している場合は、monaca pluginコマンドから対象のCordovaプラグインを追加してください。

注意点3

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

そのため、

  • Cordovaプラグインのインストール処理等でビルドエラーが発生した場合
  • ビルド後に作成されたアプリに設定されているCordovaプラグインのバージョンが異なっている場合
  • ビルド後に作成されたアプリでCordovaプラグインの動作に問題がある場合

は、Monacaプロジェクトにpluginsフォルダーが存在している可能性があります。

Monacaプロジェクトにpluginsフォルダーが存在している場合は、注意点2の対応を実行してください。

おわりに

今回は、Cordova用プロジェクトとMonacaプロジェクトでのCordovaプラグインの扱いの違いと注意点について説明しました。Cordovaプラグインのインストールについて、これらの違いと注意点を理解しておくことで、ビルドエラーやCordovaプラグインの動作等に問題が発生した際の原因特定に役立つ場合がありますので、参考にしてください。