モケラ

Tech Sheets

mokelab

CordovaプラグインにJavaScriptモジュールを追加する / 使う

最終更新日:2015-08-12

CordovaプラグインにJavaScriptモジュールを含めることができます。ここでは、追加方法と使い方を紹介します。

JavaScriptモジュールを書く

plugin.xmlを配置したフォルダにwwwフォルダを作成し、その中に.jsファイルを追加します。ここでは、wwwフォルダにmyModule.jsを追加したとします。

var MyModule = function(){ }

MyModule.prototype.myAlert = function(msg) {
    window.alert(msg);
}

module.exports = new MyModule();

myAlert()を持つオブジェクトをmodule.exportsにセットしました。

plugin.xmlを編集する

次に、plugin.xmlで作成したJavaScriptモジュールをどのように公開するかを記述します。

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id="my-plugin"
        version="0.0.1">
  <!-- 中略 -->
  <js-module src="www/myModule.js" name="myModule">
    <clobbers target="my"/>
  </js-module>
</plugin>

plugin要素の子にjs-module要素を追加します。src属性はjsファイルを指定します。nameはモジュール名を指定します。使い方は後に紹介します。

js-moduleの子要素にclobbers要素を追加します。target属性で名前を指定すると、window.名前で参照できるようになります。

JavaScriptモジュールを使う

cordova plugin addして早速使ってみましょう。www/js/index.jsのonDeviceReadyあたりで使ってみることにします。

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    // JavaScriptモジュールの関数呼び出し
    window.my.myAlert('deviceReady');
}

clobbers要素のtargetにmyを指定したので、window.my.メソッド名でJavaScriptプラグインのメソッドが呼べます。

cordova.require()を使ってモジュールを読み込むこともできます。引数には"プラグインのID.js-moduleのname属性で指定した値"を渡します。今回のサンプルプラグインでは、プラグインのIDが"my-plugin"で、js-moduleのname属性には"myModule"を指定したので、"my-plugin.myModule"を指定してモジュールを読み込みます。

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    // JavaScriptモジュールの読み込み
    var m = cordova.require('my-plugin.myModule');
    m.myAlert('deviceReady');
}

一覧に戻る