Asial Blog

Recruit! Asialで一緒に働きませんか?

Cordova/PhoneGapプラグインを使おう

カテゴリ :
Monaca
タグ :
JavaScript
Monaca
Cordova

ハイブリッドアプリの弱点とも言われるのが速度であったり、複雑なUIやネイティブの機能を使わないと実現できないような操作性です。最近ではWebひいてはHTML5の機能が充実してきているのでJavaScriptを駆使してできるようになってきていますが、それでも時と場合によってはネイティブと組み合わせる方が効率的であったりします。



Monacaではそのためにプラグイン機能が提供されています。これはCordova/PhoneGap互換の仕組みになっていますので、サードパーティー製のCordova/PhoneGapプラグインを利用することも可能です。そこで今回はMonacaにおけるプラグイン開発の流れを紹介します。



必要なもの





サンプルをダウンロードする



後述しますが、プラグインを呼び出す場合、うまく動かない場合のデバッグが通常の開発に比べると困難です。そこで問題なく動くサンプルを使うことで、後はそこから拡張していくのがお勧めです。サンプルのプラグインはこちらからダウンロードできます。まずこちらのファイルをダウンロードしてください(解凍せずにそのままで大丈夫です)。



プラグインのインストール



Monacaで新規プロジェクトを作成したら、 設定>Cordovaプラグインの管理 を選択します。




プラグインメニュー

プラグインメニュー



開いた画面で、Cordovaプラグインのインポートをクリックします。




プラグイン一覧

プラグイン一覧



そうするとアップロードダイアログが開きますので、先ほどダウンロードしたサンプルのプラグインをアップロードします。




プラグインインストールダイアログ

プラグインインストールダイアログ



アップロードが問題なく完了すると、次のように HelloWorldPlugin が表示されるはずです。この時点でプラグインは既に有効になっています。




アップロード完了

アップロード完了



HTMLを修正



プラグインのインストールが終わったので、HTML側でそれを呼び出すように修正します。scriptタグの内容を次のように修正します。



  1. <script>
  2.   // PhoneGap event handler
  3.   document.addEventListener("deviceready", onDeviceReady, false);
  4.   function onDeviceReady() {
  5.     console.log("PhoneGap is ready");
  6.   // 修正ここから
  7.     window.HelloWorld.say(
  8.       function(result) { alert( "success: " + result ); },
  9.       function(error) { alert( "error: " + error ); }
  10.     );
  11.   // 修正ここまで
  12.   }
  13. </script>

window.HelloWorld.say というメソッドは、2つの関数を引数にとっています。成功した場合1つ目、失敗した場合は2つ目の引数が呼ばれる仕組みです。



ビルドして実行



後はいつものようにアプリをビルドしてみましょう。なおMonacaデバッガーではプラグインに対応していませんので、iOS/Androidアプリとしてビルドする必要があります。




ビルド成功(iOSの場合)

ビルド成功(iOSの場合)



iOSで実行した場合の画面は以下の通りです。




iOSにて実行

iOSにて実行



Androidでも同じように表示されます。




Androidにて実行

Androidにて実行



実際のコードを見る



先ほどの index.html で実行している window.HelloWorld.say ですが、これは plugins/jp.co.asial.helloworld/www/hello_world.js で定義されています。



  1. var HelloWorld = function() {};
  2.  
  3. HelloWorld.prototype.say = function(success, fail) {
  4.     cordova.exec(success, fail, "HelloWorldPlugin","say", []);
  5. };
  6.  
  7. var helloWorld = new HelloWorld();
  8. module.exports = helloWorld;

この中で実行されている cordova.exec がネイティブプラグインの実行部になります。 HelloWorldPluginのsayメソッドを実行しています。



iOS用のコード



iOSでは plugins/jp.co.asial.helloworld/src/ios/HelloWorldPlugin.* が使われています。HelloWorldPlugin.m のコードは次の通りです。



  1. #import "HelloWorldPlugin.h"
  2.  
  3. @implementation HelloWorldPlugin
  4.  
  5. - (void) say:(CDVInvokedUrlCommand*)command
  6. {
  7.  
  8.     // get arguments from Javascript
  9.     //id arg = [command.arguments objectAtIndex:0];
  10.     BOOL arg = YES;
  11.     
  12.     CDVPluginResult* result;
  13.  
  14.     if (arg)
  15.     {
  16.         // Success Callback
  17.         result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"Hello World!"];
  18.         [self writeJavascript:[result toSuccessCallbackString:command.callbackId]];
  19.     }
  20.     else
  21.     {
  22.         // Error Callback
  23.         result = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
  24.         [self writeJavascript:[result toErrorCallbackString:command.callbackId]];
  25.     }
  26.  
  27. }
  28.  
  29. @end

HelloWorldPluginのsayメソッドが呼ばれています。



そして、resultにCDVCommandStatus_OKまたはCDVCommandStatus_ERRORを送り、writeJavascriptを呼び出してJavaScript側に返しています。



Android用のコード



Android向けのコードは plugins/jp.co.asial.helloworld/src/android/mobi/monaca/HelloWorldPlugin.java が使われています。HelloWorldPlugin.java のコードは次の通りです。



  1. package mobi.monaca;
  2.  
  3. import org.apache.cordova.CallbackContext;
  4. import org.apache.cordova.CordovaPlugin;
  5. import org.json.JSONArray;
  6. import org.json.JSONException;
  7.  
  8. /**
  9.  * This class echoes a string called from JavaScript.
  10.  */
  11. public class HelloWorldPlugin extends CordovaPlugin {
  12.     @Override
  13.     public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
  14.         callbackContext.success("Hello World!");
  15.         return true;
  16.     }    
  17. }

こちらはsuccessのみですが、 callbackContext.success を呼び出すことでsuccessを呼び出しています。



設定のXML



実際のコードとは別に plugins/jp.co.asial.helloworld/plugin.xml を用意しています。内容は次の通りです。



  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
  3.   id="jp.co.asial.helloworld"
  4.   version="0.0.1">
  5.     <name>HelloWorldPlugin</name>
  6.     <description>HelloWorldPlugin Description</description>
  7.     <author>Asial Corporation</author>
  8.     <license>Apache 2.0 License</license>
  9.     <engines>
  10.         <engine name="cordova" version=">=2.9.0" />
  11.     </engines>
  12.     <js-module src="www/hello_world.js" name="helloworld">
  13.         <clobbers target="HelloWorld" />
  14.     </js-module>
  15.  
  16.     <platform name="ios">
  17.         <config-file target="config.xml" parent="/*">
  18.             <feature name="HelloWorldPlugin">
  19.                 <param name="ios-package" value="HelloWorldPlugin"/>
  20.             </feature>
  21.     </config-file>
  22.     <header-file src="src/ios/HelloWorldPlugin.h" target-dir="src/ios" />
  23.         <source-file src="src/ios/HelloWorldPlugin.m" target-dir="src/ios" />
  24.     </platform>
  25.     <platform name="android">
  26.         <config-file target="res/xml/config.xml" parent="/*">
  27.             <feature name="HelloWorldPlugin"> 
  28.                 <param name="android-package" value="mobi.monaca.HelloWorldPlugin"/>
  29.             </feature>
  30.         </config-file>
  31.         <source-file src="src/android/mobi/monaca/HelloWorldPlugin.java" target-dir="src/mobi/monaca" />        
  32.     </platform>
  33. </plugin>

この中のjs-moduleというのはJavaScriptの設定になります。



  1. <js-module src="www/hello_world.js" name="helloworld">
  2.   <clobbers target="HelloWorld" />
  3. </js-module>

そしてiOSの設定と、



  1. <platform name="ios">
  2.   <config-file target="config.xml" parent="/*">
  3.     <feature name="HelloWorldPlugin">
  4.       <param name="ios-package" value="HelloWorldPlugin"/>
  5.     </feature>
  6.   </config-file>
  7.   <header-file src="src/ios/HelloWorldPlugin.h" target-dir="src/ios" />
  8.   <source-file src="src/ios/HelloWorldPlugin.m" target-dir="src/ios" />
  9. </platform>

Androidの設定に分かれています。



  1. <platform name="android">
  2.   <config-file target="res/xml/config.xml" parent="/*">
  3.     <feature name="HelloWorldPlugin"> 
  4.       <param name="android-package" value="mobi.monaca.HelloWorldPlugin"/>
  5.     </feature>
  6.   </config-file>
  7.   <source-file src="src/android/mobi/monaca/HelloWorldPlugin.java" target-dir="src/mobi/monaca" />
  8. </platform>

iOSまたはAndroid向けのみにプラグインを提供する場合は、もう片方の指定は不要です。しかしハイブリッドアプリとしてマルチプラットフォームに対応させる場合は両プラットフォーム向けの開発が必要になります。



注意点



注意点としてはMonacaデバッガーが使えないので何か不具合があった時のデバッグが難しいというのがあげられます。特にメソッドが呼ばれないと言った問題の時は解決に時間がかかりますので、サンプルのプラグインをはじめとして、動くものをベースにして開発するのが良いのではないでしょうか。



JavaScriptとObjective-C/Javaとの連携はメッセージを送受信する形で行われます。また、その処理は非同期になりますのでコールバックを使った開発となります。なお、iOS、Android両方の開発を行う場合はプラグインのメソッド(インタフェース)を合わせておく必要があります。



Monacaではサードパーティー製のCordova/PhoneGapプラグインを利用可能ですが、その動作保証は行っておりませんのでご注意ください。また、任意のプラグインの利用はGoldプラン以上になります。



まとめ



HTML5だけでは難しいネイティブを活用した機能や、速度を重視した処理などはプラグインを使うことで解決できる場合があります。Monacaでもサポートされていますので、アップロードの仕方とその開発法をぜひ覚えてください。



Monaca - HTML5ハイブリッドアプリ開発プラットフォーム