書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(6)

書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(6)

Android向けのCordovaプラグインを実装する

2014年3月11日

アプリの一部をネイティブで記述するには、プラグインの実装が必要。そこでAndroid向けにCordovaプラグインを実装する方法を解説。今回で「Cordovaアプリ開発の基礎」に関する部分の転載完了。

  • このエントリーをはてなブックマークに追加

 オープンソースのフレームワーク「Apache Cordova」(Adobe版:「 PhoneGap」)を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。この連載記事(=書籍転載)の第1回~第6回(=今回)で、その開発方法を一通り解説しています。また、第7回からは、「JavaScriptコード」と「iOS/Andoridネイティブ機能」をつなぐ仕組みを説明しています。

書籍転載について

 本コーナーは、技術評論社発行の書籍『[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 『[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門』の詳細や購入は技術評論社のサイト目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは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要素を追加してください。

XML
<feature name="MyFirstPlugin">
  <param name="android-package" value="com.example.hello.MyFirstPlugin" />
</feature>
リスト4.21 config.xmlにプラグインの情報を追加する
Javaでプラグインのコードを記述する

 Androidのプロジェクトでは、com.example.hello.MyFirstPluginというクラスを作成します。

 config.xmlに追加したプラグインのクラス名と同じクラス名です。プラグインを実装するクラスはCordovaPluginクラスを継承する必要があります。

 Eclispeの画面の左にあるPackage Explorerからsrcディレクトリを開き、com.example.helloパッケージを右クリックして表示されるメニューで[New]→[Class]を選択してください(図4.4)。

図4.4 com.example.helloパッケージに新しいクラスを作成する

 新しいクラス作成ダイアログが表示されるので、[Name]欄にクラス名として「MyFirstPlugin」、[Superclass]欄に親クラスとして「CordovaPlugin」を指定します(図4.5)。

図4.5 com.exmample.hello.MyFirstPluginクラスを作成する
図4.5 com.exmample.hello.MyFirstPluginクラスを作成する

 [Finish]ボタンを押すと、MyFirstPluginクラスが作成されます。これを開いて、リスト4.22のように記述してください。

Java
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;
  }

}
リスト4.22 MyFirstPlugin.javaの基本形

 AndroidのCordovaプラグインのJavaの部分は、このコードが基本になります。executeメソッド内に、JavaScriptから呼び出せるネイティブの処理を記述します。JavaScriptからMyFirstPluginプラグインを呼び出すと、Cordova内部のブリッジ機構によりこのexecuteメソッドが呼び出されます。executeメソッドのシグネチャはリスト4.23のようになっています。

Java
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException
リスト4.23 executeメソッドのシグネチャ

 action引数には、JavaScriptが指定したプラグインのアクション名が入ります。args引数には、JavaScriptから渡されてくるJSON形式の引数が格納されています。callbackContext引数は、JavaScript側に値を返したりプラグインの結果やエラーを通知したりするためのメソッドを持つオブジェクトです。executeメソッドは、JavaScriptからの呼び出しがネイティブ側に受け入れられたかどうかの値を返します。もし、action引数に渡っているアクション名が間違っている場合にはfalseを返してプラグインの呼び出しが間違っていることを伝えます。

 このMyFirstPluginプラグインで、JavaScript側から渡されてきた値をポップアップで表示してみます。executeメソッド内をリスト4.24のように書き換えます。

Java
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;
}
リスト4.24 JavaScriptから渡されてきた文字列をポップアップで表示する

 このコードでは、action引数を利用していません。args引数から渡された文字列を、ポップアップを表示するメソッドに渡しています。

JavaScriptからプラグインのコードを呼び出す

 ネイティブ側で実装したコードは、cordova.execメソッドから呼び出します。どんなプラグインも、このexecメソッドを通じて呼び出します(リスト4.25)。execメソッドのシグネチャは表4.8のようになっています。

JavaScript
cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);
リスト4.25 corodova.execメソッド
名前概要
<successFunction> 呼び出し成功時に実行される関数
<failFunction> 呼び出し失敗時に実行される関数
<service> config.xmlに追加したプラグイン名
<action> 呼び出すプラグインのアクション名
<args> ネイティブ側に引数として渡す配列。JSON化できるもののみを渡す
表4.8 cordova.execメソッドのシグネチャ

 先ほどJavaで実装したMyFirstPluginプラグインを呼び出します。www/index.js以下を編集します(リスト4.26)。devicereadyイベントが発火してから初めてプラグインのメソッドを利用できるようになります。

JavaScript
onDeviceReady: function() {

  cordova.exec(function() {
    console.log('プラグイン呼び出しに成功しました');
  }, function() {
    console.log('プラグイン呼び出しに失敗しました');
  }, 'MyFirstPlugin', 'actionName', ['Hello my first Cordova plugin']);
}
リスト4.26 index.jsからMyFirstPluginプラグインを呼び出す

 cordova prepareコマンドを実行して配置します。Eclispeから[File]→[Refresh]を選択して、実行してください。

 成功すると、図4.6のようにJavaScriptから渡した文字列がポップアップとして表示されます。

図4.6 JavaScriptからネイティブのポップアップメッセージを表示する
プラグインから値を返す

 プラグインから、JavaScriptに対して値を返すときには、プラグインのexecuteメソッドに渡されたCallbackContextオブジェクトのsuccessメソッドに文字列を渡します(リスト4.27)。

JavaScript
onDeviceReady: function() {

  cordova.exec(function() {
    console.log('プラグイン呼び出しに成功しました');
  }, function() {
    console.log('プラグイン呼び出しに失敗しました');
  }, 'MyFirstPlugin', 'actionName', ['Hello my first Cordova plugin']);
}
リスト4.26 index.jsからMyFirstPluginプラグインを呼び出す

 cordova prepareコマンドを実行して配置します。Eclispeから[File]→[Refresh]を選択して、実行してください。

 成功すると、図4.6のようにJavaScriptから渡した文字列がポップアップとして表示されます。

 図4.6 JavaScriptからネイティブのポップアップメッセージを表示する

プラグインから値を返す

 プラグインから、JavaScriptに対して値を返すときには、プラグインのexecuteメソッドに渡されたCallbackContextオブジェクトのsuccessメソッドに文字列を渡します(リスト4.27)。

Java
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
  callbackContext.success("A message from java");
  return true;
}
リスト4.27 JavaからJavaScriptに値を返す

 Java側から返されたメッセージは、cordova.execメソッドに渡した成功時に呼ばれるコールバックの引数に渡されます(リスト4.28)。

JavaScript
cordova.exec(function (message) {
  alert(message);
}, function () {
  alert('プラグイン呼び出しに失敗');
}, "MyFirstPlugin", "hello", []);
リスト4.28 Java側から値を受け取る

 これを実行して成功すると、図4.7のようにJava側から受け取ったメッセージが入ったアラートが表示されます。

図4.7 Java側から値を受け取る
図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]を参照してください。

4. Cordova:プラットフォームごとにカスタマイズする

アプリをクロスプラットフォーム対応にする際に、プラットフォームごとに少し違った挙動にする方法を解説。書籍転載の4本目。

5. Cordovaプラグインを利用する

Cordovaで提供されているプラグインの概要と、実際にアプリのプロジェクトへプラグインを導入する方法を説明する。書籍転載の5本目。

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本目。

サイトからのお知らせ

Twitterでつぶやこう!