前回は、Cordovaプラグインの仕組みを理解するために、Plugmanで作成できるCordovaプラグインの雛形を使用して、SamplePlugin.jsの設定について説明しました。雛形で作成されたCordovaプラグインの状態では、Androidでビルドエラーが発生します。

今回は、前回使用したCordovaプラグインを使用して、Androidビルドエラーを解消したいと思います。

/SamplePlugin/www/SamplePlugin.jsの設定について

雛形で作成されたCordovaプラグインの状態では、Androidビルドで下記のようなビルドエラーが発生します。

cordova-plugin-sample/tmp/download/platforms/android/app/src/main/java/cordova-plugin-sample/SamplePlugin/SamplePlugin.java:1: error: ';' expected
cordova-plugin-samplepackage cordova-plugin-sample;
cordova-plugin-sample               ^
cordova-plugin-sample1 error

上記のエラーでは、雛形で作成された以下のファイルの1行目でエラーが発生しています。

/src/android/SamplePlugin.java

エラーでは、パッケージ名に設定されているcordovaとpluginの間にある-に問題があると出力されています。Androidの命名規則では、パッケージ名に-を設定する事ができません。そのために、ビルドエラーが発生しています。

雛形のCordovaプロジェクトに設定されているパッケージ名は、plugman createコマンドの--plugin_idオプションに指定された値が使用されます。そのため、--plugin_idオプションにAndroid命名規則に違反した文字列を設定した場合は、今回のようなビルドエラーが発生します。

ビルドエラーを解消する

それでは、今回のビルドエラーを解消していきたいと思います。今回のビルドエラーに関係しているAndroidのパッケージ名が記載されている箇所は、以下になります。

/SamplePlugin/plugin.xml
/src/android/SamplePlugin.java

/SamplePlugin/plugin.xmlを修正する

plugin.xmlで今回のAndroidビルドエラーに関係している箇所は、以下になります。

<platform name="android">
   <config-file parent="/*" target="res/xml/config.xml">
      <feature name="SamplePlugin">
            <param name="android-package" value="cordova-plugin-sample.SamplePlugin" />
      </feature>
   </config-file>
</platform>

paramディレクティブのvalue属性に設定されているパッケージ名が、問題点1になります。value属性に設定されているパッケージ名の-を.に変更します。

<param name="android-package" value="cordova.plugin.sample.SamplePlugin" />

source-fileディレクティブのtarget-dir属性に設定されているフォルダー名が、問題点2になります。Cordovaが提供しているAndroidプラットフォームは、Andrid Studio用のプロジェクトをベースに構成されています。Andrid Studio用のプロジェクトでは、パッケージ名がフォルダー名として使用されています。そのため、target-dir属性に設定されているフォルダー名の-を.に変更します。

<source-file src="src/android/SamplePlugin.java" target-dir="src/cordova.plugin.sample/SamplePlugin" />

/src/android/SamplePlugin.javaを修正する

今回のビルドエラーでは、

/src/android/SamplePlugin.java

の1行目で発生しています。SamplePlugin.javaの1行目に設定されているパッケージ名が、問題点3になります。1行目には、以下が記載されています。

package cordova-plugin-sample;

パッケージ名に設定されている-を.に変更します。

package cordova.plugin.sample;

Cordovaプラグインのテスト

上記の問題点を修正したら、CordovaプラグインのルートフォルダーをZipファイルで圧縮して、MonacaクラウドIDEからMonacaプロジェクトにインポートしてみましょう。

MonacaクラウドIDEにログインし、

新しいプロジェクトを作る - 最小限のテンプレート

を選択して、新しいプロジェクトを作成します。

新しく作成したプロジェクトを開き、メニューの

設定 - Cordovaプラグインの管理 - Cordovaプラグインのインポート - 圧縮されたパッケージ(ZIP/TGZ)をアップロード

を選択して、Zipファイルに圧縮したCordovaプラグインをインポートします。

インポートが成功すれば、有効なプラグインに表示されます。

Cordovaプラグインは、devicereadyイベント後から利用する事ができます。index.htmlのscriptタグに、以下のコードを入力します。

<script>
    document.addEventListener("deviceready", function() {
        cordova.plugins.SamplePlugin.coolMethod(
            "SamplePlugin", 
            function(result) {
                alert(result);
            }, 
            function(err) {
                alert(err);
            });
    }, false);
</script>

メニュー、

ビルド - Androidアプリのビルド - デバッグビルド

を選択して、ビルドを開始するボタンをクリックします。

正しく修正されている場合は、ビルドが成功します。ビルドが成功したら、Android端末にインストールして動作を確認してみてください。正常に動作した場合は、スクリーンショットのアラート画面が表示されます。

おわりに

4回に渡り、plugmanで作成できる雛形のCordovaプラグインを使用して、Cordovaプラグインの構成や設定、動作確認までの説明を行いました。今回修正したCordovaプラグインが動作しない場合は、これまでの以下の説明をチェックして、問題がないか確認してみてください。

雛形で作成されるCordovaプラグインの設定は、最小構成になります。plugin.xmlでは、今回説明した設定の他にも、よく使用される設定がいくつかあります。次回は、plugin.xmlでよく使用されている設定について説明していきたいと思います。

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