ハイブリッドアプリの弱点とも言われるのが速度であったり、複雑なUIやネイティ ブの機能を使わないと実現できないような操作性です。最近ではWebひいてはHTML5の機能が充実してきているのでJavaScriptを駆使してできるようになってきていますが、それでも時と場合によってはネイティブと組み合わせる方が効率的であったりします。
Monacaではそのためにプラグイン機能が提供されています。これはCordova/PhoneGap互換の仕組みになっていますので、サードパーティー製のCordova/PhoneGapプラグインを利用することも可能です。そこで今回はMonacaにおけるプラグイン開発の流れを紹介します。
後述しますが、プラグインを呼び出す場合、うまく動かない場合のデバッグが通常の開発に比べると困難です。そこで問題なく動くサンプルを使うことで、後はそこから拡張していくのがお勧めです。サンプルのプラグインはこちらからダウンロードできます。まずこちらのファイルをダウンロードしてください(解凍せずにそのままで大丈夫です)。
Monacaで新規プロジェクトを作成したら、 設定>Cordovaプラグインの管理 を選択します。
開いた画面で、Cordovaプラグインのインポートをクリックします。
そうするとアップロードダイアログが開きますので、先ほどダウンロードしたサンプルのプラグインをアップロードします。
アップロードが問題なく完了すると、次のように HelloWorldPlugin が表示されるはずです。この時点でプラグインは既に有効になっています。
プラグインのインストールが終わったので、HTML側でそれを呼び出すように修正します。scriptタグの内容を次のように修正します。
<script>
// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("PhoneGap is ready");
// 修正ここから
window.HelloWorld.say(
function(result) { alert( "success: " + result ); },
function(error) { alert( "error: " + error ); }
);
// 修正ここまで
}
</script>
window.HelloWorld.say
というメソッドは、2つの関数を引数にとっています。成功した場合1つ目、失敗した場合は2つ目の引数が呼ばれる仕組みです。
後はいつものようにアプリをビルドしてみましょう。なおMonacaデバッガーではプラグインに対応していませんので、iOS/Androidアプリとしてビルドする必要があります。
iOSで実行した場合の画面は以下の通りです。
Androidでも同じように表示されます。