PhoneGapのプラグイン開発

現在、モバイルアプリケーションのクロスプラットフォーム開発の開発が勢いを増しています。 この記事では、このようなアプリケーションを実装するための別のツール、PhoneGapに注目したいと思います。 これは、モバイルアプリケーションを作成するための無料のオープンソースフレームワークです。



PhoneGapでは、JavaScriptを使用してiOS、Android、Windows Phone、BlackBerry、Bada、Symbian、webOS HTMLアプリケーションを作成できます。 このフレームワークのダウンロード数はすでに100万を超えており、開発者の数は400,000に達します。







PhoneGapで開発されたアプリケーションは小さく、非常に便利ですが、このフレームワークでは、デバイスを操作するすべての機能が説明されているわけではありません。 この記事では、PhoneGap用の独自のプラグインの作成について説明します。 このようなプラグインは、上記のフレームワークのメインパッケージでは提供されないデバイスの機能を利用するために必要です。



開始するには、 公式Webサイトから PhoneGapをダウンロードする必要があります。 執筆時点では、最新バージョンは2.0.0でした。 プロジェクトの作成には焦点を当てません。このプロセスについては、 ここで説明します 。 開発プラットフォームとして、Androidを選択しました。



まず、ビデオカメラを起動するための既存のプラグインの例を示します。

$('#makeVideo').click(function() { navigator.device.capture.captureVideo(captureSuccess, captureError, { limit : 1 } ); function captureSuccess(mediaFiles) { console.log("Capturing video successfully finished"); } function captureError(error) { console.log("Video capture error + " + error.code); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

独自のプラグインを作成するときは、Javaクラスを記述することから始める必要があります。

 public class IntentPlugin extends Plugin { … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、phoneGapアプリケーションのボタンを押すことでトリガーされるいくつかの簡単なメソッドを作成します（パラメーターを使用しても使用しなくてもかまいません）。



カメラの起動方法：

 private void openPhotoCamera() throws IOException { Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); this.cordova.getActivity().startActivity(intent); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザの起動方法：

 private void openBrowse(String url) throws IOException { Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); this.cordova.getActivity().startActivity(intent); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

地図の起動方法：

 private void openMap(String url) throws IOException { Intent intent = new Intent(android.content.Intent.ACTION_VIEW, Uri.parse(url)); this.cordova.getActivity().startActivity(intent); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、オーバーロードメソッドを作成します。

 @Override public PluginResult execute(String action, JSONArray args, String callbackId) { PluginResult.Status status = PluginResult.Status.OK; String result = ""; try { if (action.equals("makePhoto")) { openPhotoCamera(); } else if (action.equals("lookAtBrowse")) { openBrowse(args.getString(0)); } else if (action.equals("lookAtMap")) { openMap(args.getString(0)); } else { status = PluginResult.Status.INVALID_ACTION; } return new PluginResult(status, result); } catch (JSONException e) { return new PluginResult(PluginResult.Status.JSON_EXCEPTION); } catch (IOException e) { return new PluginResult(PluginResult.Status.IO_EXCEPTION); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、「makePhoto」、「lookAtBrowse」、および「lookAtMap」の行はJavaScriptファイルから渡されます。



この段階では、すべてが非常にシンプルに見えます。 次に、作成したプラグインをconfig.xmlファイルに含める必要があります。このファイルはres / xmlにあります。 これは次のように行われます。

 <plugin name="IntentPlugin" value="com.ruswizards.phonegapplugin.IntentPlugin"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいJSファイルで、IntentPluginクラスのオブジェクトを作成します。

 function IntentPlugin() { }; if(!window.plugins) { window.plugins = {}; } if (!window.plugins.intentPlugin) { window.plugins.intentPlugin = new IntentPlugin(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1つの関数を作成する例を使用して、このオブジェクトにアクセスするプロセスを検討してください。

 IntentPlugin.prototype.makePhotoFunction = function(url) { cordova.exec(null, null, "IntentPlugin", "makePhoto", [url]); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、makePhotoFunction（ ""）を呼び出すときに、openPhotoCamera（）メソッドにアクセスします。

他の2つの関数についても同じことが言えます。

 IntentPlugin.prototype.lookAtBrowseFunction = function(url) { cordova.exec(null, null, "IntentPlugin", "lookAtBrowse", [url]); }; IntentPlugin.prototype.lookAtMapFunction = function(url) { cordova.exec(null, null, "IntentPlugin", "lookAtMap", [url]); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらの関数が呼び出されるファイルに、次を追加します。

 <script type="text/javascript" charset="utf-8" src="intentPlagin.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべて完了しました。対応する関数を呼び出すことができます。

ファイル本文に4つのボタンを追加します。

 <a id="makeVideo" data-role="button">Create video</a> <a id="makePhoto" data-role="button">Create photo</a> <a id="lookAtBrowse" data-role="button">Open browse</a> <a id="lookAtMap" data-role="button">Open map</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それらの最初のものは、記事の冒頭で説明した内部関数を処理します。 残りは、独自に作成された関数を参照します。 これは次のように発生します。

 $('#makePhoto').click(function() { window.plugins.intentPlugin.makePhotoFunction(""); }); $('#lookAtBrowse').click(function() { window.plugins.intentPlugin.lookAtBrowseFunction("http://www.google.com"); }); $('#lookAtMap').click(function() { window.plugins.intentPlugin.lookAtMapFunction("geo:52.431198,31.004899"); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

動作します！ この記事が好印象を残し、PhoneGapでのアプリケーション作成に関する有用な情報を提供してくれることを願っています。