Monacaでは、Cordovaを利用したハイブリッドアプリの開発を行う事ができます。Cordovaでは、HTMLアセットを使用してアプリ開発を行いますが、HTMLやJavaScriptからは、AndroidやiOSが提供しているネイティブ機能を直接利用する事ができません。そこで登場するのが、Cordovaプラグインになります。

Cordovaプラグインは、アプリ内のJavaScriptからネイティブ機能を利用できるようにするための橋渡し的なツールになります。

Cordovaプラグインを利用することで、アプリ内のJavaScriptからカメラやGPSといったネイティブ側が提供する機能を利用できるため、Android StudioやXcodeで開発する通常のネイティブアプリ開発で作成するアプリと同じ機能を利用する事ができます。

Cordovaでは、Cordovaプラグインを管理するためのPlugmanというツールを提供しています。Plugmanについては、以下を参照してください。

Using Plugman to Manage Plugins

今回は、Plugmanで作成できるCordovaプラグインの雛形を使用して、AndroidとiOS用Cordovaプラグインの構成を説明していきたいと思います。

Plugmanをインストールする

Plugmanをインストールするためには、npmコマンドが必要になります。npmコマンドが利用できない場合は、Node.jsからインストーラーをダウンロードして、インストールしてください。

Plugmanをインストールするためのコマンドは、以下になります。環境によっては、管理者権限が必要になる場合があります。

npm install -g plugman

// 管理者権限が必要な場合のコマンド例：
sudo npm install -g plugman

Cordovaプラグインの雛形を作成する

Cordovaプラグインの雛形を作成するコマンドは、以下になります。

plugman create --name SamplePlugin --plugin_id cordova-plugin-sample --plugin_version 1.0.0

plugman createコマンドを実行すると、以下のCordovaプラグインを構成する最小限のファイルとフォルダーが作成されます。

/SamplePlugin: ルートフォルダー
/SamplePlugin/plugin.xml: Cordovaプラグインの設定ファイル
/SamplePlugin/src（空）: ネイティブ機能を処理するソースコードを保存するフォルダー
/SamplePlugin/www/SamplePlugin.js: アプリ内のJavaScriptからCordovaプラグインに設定されている機能を利用できるようにするためのファイル

/SamplePlugin/plugin.xml

plugin.xmlは、Cordovaプラグインの設定を行うファイルになります。雛形では、以下が設定されています。

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-sample" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>SamplePlugin</name>
    <js-module name="SamplePlugin" src="www/SamplePlugin.js">
        <clobbers target="cordova.plugins.SamplePlugin" />
    </js-module>
</plugin>

今回は、Cordovaプラグインの構成についての説明になるので、詳しい設定内容については、割愛します。

/SamplePlugin/src

plugman createコマンドで作成されるsrcフォルダーは、空の状態です。雛形で用意されているAndroidとiOSのソースコードを作成してみます。コマンドは、以下になります。

// Android用コマンド
plugman platform add --platform_name android

上記のAndroid用コマンドを実行すると、srcフォルダー内に、以下のJavaファイルが保存されます。

/src/android/SamplePlugin.java

// iOS用コマンド
plugman platform add --platform_name ios

上記のiOS用コマンドを実行すると、srcフォルダー内に、以下のObjective-Cファイルが保存されます。

/src/ios/SamplePlugin.m

保存されたファイルでは、Cordovaプラグインが提供するメソッドを使用して、アプリ内のJavaScriptから渡された文字列をCordovaプラグイン内で処理し、アプリ側に文字列として値を返す処理を行なっています。

上記のplugman platform addコマンドを実行すると、plugin.xmlに、以下の設定が追加されます。

<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>
   <config-file parent="/*" target="AndroidManifest.xml" />
   <source-file src="src/android/SamplePlugin.java" target-dir="src/cordova-plugin-sample/SamplePlugin" />
</platform>
<platform name="ios">
   <config-file parent="/*" target="config.xml">
      <feature name="SamplePlugin">
            <param name="ios-package" value="SamplePlugin" />
      </feature>
   </config-file>
   <source-file src="src/ios/SamplePlugin.m" />
</platform>

今回は、Cordovaプラグインの構成についての説明になるので、詳しい設定内容については、割愛します。

/SamplePlugin/www/SamplePlugin.js

SamplePlugin.jsは、アプリ内のJavaScriptからCordovaプラグインに設定されている機能を利用できるようにするための橋渡し的なファイルになります。

SamplePlugin.jsに設定されている関数をアプリ内のJavaScriptから実行することで、Cordovaプラグインに設定されているネイティブ側の処理を実行する事ができます。雛形では、以下が設定されています。

var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'SamplePlugin', 'coolMethod', [arg0]);
};

今回は、Cordovaプラグインの構成についての説明になるので、詳しい設定内容については、割愛します。

package.json

plugman createコマンドで作成されるルートフォルダー内には、package.jsonが含まれていません。package.jsonは、Cordovaプラグインの必須ファイルではありませんが、Cordovaでビルドを実行した際に、Cordovaプラグイン内のpackage.jsonがチェックされるため、Cordovaプラグインにpackage.jsonが含まれていない場合、以下のようなエラーが発生します。

Discovered plugin "cordova-plugin-sample". Adding it to the project
Failed to fetch plugin file:res/custom_plugins/cordova-plugin-sample via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
CordovaError: Error: ENOENT: no such file or directory, open '/private/tmp/download/res/custom_plugins/cordova-plugin-sample/package.json'

エラーを回避する場合は、Cordovaプラグインのルートフォルダー内に、package.jsonを作成します。Cordovaプラグインを公開する予定がない場合は、以下のようにnameとversionのみを設定した内容で問題ありません。

{
  "name": "cordova-plugin-sample",
  "version": "1.0.0"
}

おわりに

今回から4回に渡り、Cordovaプラグインの仕組みを理解できるようになる事を目的とした内容の記事を投稿していきたいと思っています。今回使用した、

plugman create
plugman platform add

コマンドで作成したCordovaプラグインの雛形は、残念ながらAndroidでビルドエラーが発生します。iOSでは、正常にビルドが完了し、Cordovaプラグインも動作します。最終的には、Androidでのビルドエラーを解消し、AndroidでもCordovaプラグインが動作するように改修していきます。

次回は、雛形のCordovaプラグインで作成された、

/SamplePlugin/plugin.xml

の設定について説明していきたいと思います。

Cordovaプラグインを理解しよう（構成編）

Plugmanをインストールする

Cordovaプラグインの雛形を作成する

/SamplePlugin/plugin.xml

/SamplePlugin/src

/SamplePlugin/www/SamplePlugin.js

package.json

おわりに

関連