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');
}