Monacaアプリ、ひいてはCordovaアプリを開発していて避けては通れないのが、「Cordovaプラグイン」の存在です。

スマートフォンの機能(例えば、カメラのエフェクト、アプリ内課金など)を使おうと思った時、Web技術だけでは限界があります。そうした時にWeb技術とネイティブの橋渡しをしてくれるのが、「Cordovaプラグイン」になります。

「Cordovaプラグイン」は、すでに数千種類も作成されているので、大抵の場合はこの中から選べば十分でしょう。しかし、AndroidやiOSのバージョンアップによって動かなくなったり、新しい機能がまだプラグインがない場合もあります。そうした時に備え、自分でプラグインの作り方を学んでおくのは大事です。

この記事では、最も基礎的なプラグイン作成法を紹介します。

このプラグインでは、バッテリーの残量を取得するという処理を行っています。

基本形

まず最初にディレクトリを作成します。

この中に package.jsonplugin.xml というファイルを作成します。
さらに、 srcwww というディレクトを作ります。

そして、 src の中に androidios というディレクトリを作成します。
構造は、次のようになります。

package.jsonplugin.xml は、Cordovaプラグインに必要な情報です。元々は plugin.xmlだけでしたが、最近は npm(Node.jsのパッケージ管理) でインストールできるようになったので、package.json が追加されています。

src は、ソースコードが入るディレクトリです。 androidはAndroid用、iosはiOS用のソースコードが入ります。

package.json について

例えば、package.jsonは次のようになります。プラグインに関する説明が殆どです。

plugin.xmlについて

plugin.xmlでは、各プラットフォーム(Android/iOS)ごとに設定を記述します。対象のファイルであったり、Androidであれば必要な権限を記述します。詳しくは、コメントを参考にしてください。

iOS側のコード

iOSでは、 Swift が使えるようになったので、これまでのように .h/.m ファイルで分ける必要がなくなりました。今回の例のように、バッテリー残量を取る場合、次のようなコードになります。

Android側のコード

Androidでは、従来通り Java を使います。工夫すると Kotlin が使えるようですが、 Java を使う方が簡単でしょう。

Javaの場合、 src/android/io/monaca/plugin/CVBatteryPlugin.java
といった具合にディレクトリを作成してコードを置くのが基本になるでしょう。

JavaScriptについて

アプリから呼び出すJavaScriptは、 www/battery.js として作成します。これは plugin.xml で指定したパスになります。 cordova.exec を使うのは基本ですが、その呼び出し方は自由です。例えば、以下はコールバック形式での例です。

アプリから呼び出す際には、次のようになるでしょう。

使い方について

Cordovaプラグインができあがったら、Cordovaプラグインの管理からアップロードします。

方法としては、2つあります。

  • プラグイン全体をZip圧縮
  • アップロードしたファイルのURLを指定

後は、Monaca上でアプリをビルドすれば使えるようになります。

テストについて

開発時のテストは、ローカルコンピュータにCordovaコマンドをインストールし、ローカルで実行しながら行うのがいいでしょう。その場合、XcodeやAndroid Studioのブレークポイントが利用できます。

まとめ

自分でCordovaプラグインを作るか否かに関わらず、仕組みを知っておけば、動作を掘り下げて調べる時にも役立ちます。ネイティブの言語を知る必要はありますが、小さなプラグインであれば、コードリーディングもそれほど大変ではないはずです。

プラグインを使うことで、皆さんのアプリがより魅力的になるでしょう。ぜひプラグイン開発にもトライしてみてください。

ユーザー Cordova プラグイン | Monaca Docs