書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門（6）
Android向けのCordovaプラグインを実装する
アプリの一部をネイティブで記述するには、プラグインの実装が必要。そこでAndroid向けにCordovaプラグインを実装する方法を解説。今回で「Cordovaアプリ開発の基礎」に関する部分の転載完了。
オープンソースのフレームワーク「Apache Cordova」（Adobe版：「 PhoneGap」）を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。この連載記事（＝書籍転載）の第1回～第6回（＝今回）で、その開発方法を一通り解説しています。また、第7回からは、「JavaScriptコード」と「iOS／Andoridネイティブ機能」をつなぐ仕組みを説明しています。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
前回は「4.5～4.5.5 Cordovaプラグインを利用する」を説明しました。本稿はその続きです。
■
4.5.6 Android向けのCordovaプラグインを実装する
アプリの要件によっては、自分が利用したいネイティブの機能のCordovaプラグインがあるとは限りません。また、機能面に限らずパフォーマンスや原理的にHTML5での実装が難しい画面の場合などにも、Cordovaプラグインを実装して、特定の画面のみをネイティブで記述するというようなことが必要になります。
Cordovaフレームワークでは、あらかじめ誰でもプラグインを実装できるように設計されています。簡単なプラグインであれば短時間ですぐに実装できます。
まず、Androidプロジェクトの向けのCordovaプラグインを実装する手順を紹介します。
- config.xmlを編集して、プラグインに関する情報を追加する
- Javaでプラグインのコードを記述する
- JavaScriptからプラグインのコードを呼び出す
これらの作業は、Android用のプロジェクトであるplatforms/androidディレクトリ以下で行います。ネイティブ側のコードをJavaで記述するので、Eclipseを起動してAndroidのプロジェクトを開いてください。
config.xmlを編集して、プラグインに関する情報を追加する
Cordovaでプラグインを実装するには、まずCordovaフレームワークが実行時に参照する設定ファイルであるconfig.xmlにプラグインに関する情報を追加します。Androidプロジェクトの場合には、config.xmlはres/xml/config.xmlにあります。
config.xmlに登録する情報は、プラグイン名とAndroid用のプラグインのコードを記述するクラス名の2つです。JavaScriptからはここで指定したプラグイン名を用いてプラグインを呼び出します。ここでは、プラグイン名を「MyFirstPlugin」、クラス名を「com.example.helloworld.MyFirstPlugin」にします。res/xml/config.xmlを開いて、widget要素にリスト4.21のようにfeature要素を追加してください。
|
<feature name="MyFirstPlugin">
<param name="android-package" value="com.example.hello.MyFirstPlugin" />
</feature>
|
Javaでプラグインのコードを記述する
Androidのプロジェクトでは、com.example.hello.MyFirstPluginというクラスを作成します。
config.xmlに追加したプラグインのクラス名と同じクラス名です。プラグインを実装するクラスはCordovaPluginクラスを継承する必要があります。
Eclispeの画面の左にあるPackage Explorerからsrcディレクトリを開き、com.example.helloパッケージを右クリックして表示されるメニューで［New］→［Class］を選択してください（図4.4）。
新しいクラス作成ダイアログが表示されるので、［Name］欄にクラス名として「MyFirstPlugin」、［Superclass］欄に親クラスとして「CordovaPlugin」を指定します（図4.5）。
［Finish］ボタンを押すと、MyFirstPluginクラスが作成されます。これを開いて、リスト4.22のように記述してください。
|
package com.example.hello;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class MyFirstPlugiNextends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args,
CallbackContext callbackContext) throws JSONException {
return true;
}
}
|
AndroidのCordovaプラグインのJavaの部分は、このコードが基本になります。executeメソッド内に、JavaScriptから呼び出せるネイティブの処理を記述します。JavaScriptからMyFirstPluginプラグインを呼び出すと、Cordova内部のブリッジ機構によりこのexecuteメソッドが呼び出されます。executeメソッドのシグネチャはリスト4.23のようになっています。
|
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException
|
action引数には、JavaScriptが指定したプラグインのアクション名が入ります。args引数には、JavaScriptから渡されてくるJSON形式の引数が格納されています。callbackContext引数は、JavaScript側に値を返したりプラグインの結果やエラーを通知したりするためのメソッドを持つオブジェクトです。executeメソッドは、JavaScriptからの呼び出しがネイティブ側に受け入れられたかどうかの値を返します。もし、action引数に渡っているアクション名が間違っている場合にはfalseを返してプラグインの呼び出しが間違っていることを伝えます。
このMyFirstPluginプラグインで、JavaScript側から渡されてきた値をポップアップで表示してみます。executeメソッド内をリスト4.24のように書き換えます。
|
public boolean execute(String action, JSONArray args,
CallbackContext callbackContext) throws JSONException {
callbackContext.success();
android.widget.Toast.makeText(
this.cordova.getActivity(), args.getString(0), 2000).show();
return true;
}
|
このコードでは、action引数を利用していません。args引数から渡された文字列を、ポップアップを表示するメソッドに渡しています。
JavaScriptからプラグインのコードを呼び出す
ネイティブ側で実装したコードは、cordova.execメソッドから呼び出します。どんなプラグインも、このexecメソッドを通じて呼び出します（リスト4.25）。execメソッドのシグネチャは表4.8のようになっています。
|
cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);
|
| 名前 | 概要 |
|---|---|
| <successFunction> | 呼び出し成功時に実行される関数 |
| <failFunction> | 呼び出し失敗時に実行される関数 |
| <service> | config.xmlに追加したプラグイン名 |
| <action> | 呼び出すプラグインのアクション名 |
| <args> | ネイティブ側に引数として渡す配列。JSON化できるもののみを渡す |
先ほどJavaで実装したMyFirstPluginプラグインを呼び出します。www/index.js以下を編集します（リスト4.26）。devicereadyイベントが発火してから初めてプラグインのメソッドを利用できるようになります。
|
onDeviceReady: function() {
cordova.exec(function() {
console.log('プラグイン呼び出しに成功しました');
}, function() {
console.log('プラグイン呼び出しに失敗しました');
}, 'MyFirstPlugin', 'actionName', ['Hello my first Cordova plugin']);
}
|
cordova prepareコマンドを実行して配置します。Eclispeから［File］→［Refresh］を選択して、実行してください。
成功すると、図4.6のようにJavaScriptから渡した文字列がポップアップとして表示されます。
プラグインから値を返す
プラグインから、JavaScriptに対して値を返すときには、プラグインのexecuteメソッドに渡されたCallbackContextオブジェクトのsuccessメソッドに文字列を渡します（リスト4.27）。
|
onDeviceReady: function() {
cordova.exec(function() {
console.log('プラグイン呼び出しに成功しました');
}, function() {
console.log('プラグイン呼び出しに失敗しました');
}, 'MyFirstPlugin', 'actionName', ['Hello my first Cordova plugin']);
}
|
cordova prepareコマンドを実行して配置します。Eclispeから［File］→［Refresh］を選択して、実行してください。
成功すると、図4.6のようにJavaScriptから渡した文字列がポップアップとして表示されます。
図4.6 JavaScriptからネイティブのポップアップメッセージを表示する
プラグインから値を返す
プラグインから、JavaScriptに対して値を返すときには、プラグインのexecuteメソッドに渡されたCallbackContextオブジェクトのsuccessメソッドに文字列を渡します（リスト4.27）。
|
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
callbackContext.success("A message from java");
return true;
}
|
Java側から返されたメッセージは、cordova.execメソッドに渡した成功時に呼ばれるコールバックの引数に渡されます（リスト4.28）。
|
cordova.exec(function (message) {
alert(message);
}, function () {
alert('プラグイン呼び出しに失敗');
}, "MyFirstPlugin", "hello", []);
|
これを実行して成功すると、図4.7のようにJava側から受け取ったメッセージが入ったアラートが表示されます。
4.5.7 Android向けのプラグイン開発の詳細
他にもプラグインからは様々な処理を行うことができます。詳細は、Androidのプラグイン開発について記述されている以下のCordovaのドキュメントを参照してください。
■
この後、「4.5.8 iOS向けのCordovaプラグインを実装する」へと続きますが、今回の転載対象ではないため、公開されません。次回からは「第11章 JavaScriptとネイティブとのブリッジ」を公開します。
久保田光則（くぼたみつのり）
東京都在住。アシアル株式会社に所属するUI/UXデザイナー兼ソフトウェアエンジニア。社内では，HTML5ハイブリッドアプリの開発に多数関わる。優れたデザインとエンジニアリングを両立したオーバークオリティなアプリケーションの開発を実現するために日々，頑張る。
アシアル株式会社（あしあるかぶしきがいしゃ、Asial Corporation）
PHPなどのサーバサイドの技術と，PhoneGapなどのスマートフォン関連を中心とした開発を手がける技術ベンチャー。HTML5ハイブリッドアプリをブラウザ上で開発できるMonacaや，PhoneGapの日本語情報を配信するPhoneGap Fanなどのウェブサービスを手がける。
※以下では、本稿の前後を合わせて5回分（第4回～第8回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
6. 【現在、表示中】≫ Android向けのCordovaプラグインを実装する
アプリの一部をネイティブで記述するには、プラグインの実装が必要。そこでAndroid向けにCordovaプラグインを実装する方法を解説。今回で「Cordovaアプリ開発の基礎」に関する部分の転載完了。
7. JavaScriptからネイティブの機能を呼び出す方法 ― addJavascriptInterface方式（前編）
Apache Cordova／Adobe PhoneGapによるハイブリッドアプリ内での、JavaScriptとネイティブとの通信の仕組みを解説する。書籍転載の7本目（「Part 2《実践編》 第11章 JavaScriptとネイティブとのブリッジ」より）。
8. addJavascriptInterface方式（後編）／ネイティブからJavaScriptへ値を渡す
Apache Cordova／Adobe PhoneGapによるハイブリッドアプリ内での、JavaScriptとネイティブとの通信の仕組みを解説。書籍転載の8本目。
