書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門（5）
Cordovaプラグインを利用する
Cordovaで提供されているプラグインの概要と、実際にアプリのプロジェクトへプラグインを導入する方法を説明する。書籍転載の5本目。
オープンソースのフレームワーク「Apache Cordova」（Adobe版：「 PhoneGap」）を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。この連載記事（＝書籍転載）の第1回～第6回で、その開発方法を一通り解説しています。また、第7回からは、「JavaScriptコード」と「iOS／Andoridネイティブ機能」をつなぐ仕組みを説明しています。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
前回は「4.4 プラットフォームごとにカスタマイズする」を説明しました。本稿はその続きです。
■
4.5 Cordovaプラグインを利用する
Cordova3.0からは、ネイティブ機能を提供するものはすべてプラグインとして管理されるようになりました。以前ではCordovaフレームワークに組み込まれていたネイティブ機能も、すべてプラグインとして提供されています。ソースコードのリポジトリとしても全く別になりました。
Cordovaでは、cordova pluginコマンドを用いてプラグインを管理します。開発者はコマンドを通じて様々なプラグインを簡単に導入することができます。
開発者は、公式で提供されているプラグインで以下の機能を利用できます。
- 加速度センサ
- カメラ・録音
- コンパス
- ネットワーク接続
- 端末内のコンタクトリスト
- デバイス情報
- イベント
- ファイルストレージ
- 位置情報
- 国際化
- アプリ内ブラウザ
- 音声・動画
- アラート・ダイアログ・バイブレーション
ここでは、Cordovaプラグインについての概要と、実際にアプリのプロジェクトへCordovaプラグインを導入する方法を記述します。
4.5.1 プラグインを導入する
Cordovaプラグインをプロジェクトに導入するには、cordova pluginコマンドを使います。
コマンドには、プラグインのgitリポジトリのURLを指定します。例えば、端末のカメラ機能を利用できるプラグインを導入するには、以下のようにそのプラグインのコードが保管されているgitリポジトリのアドレスを指定します。
|
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
|
このコマンドを用いると、プロジェクトのpluginsディレクトリに追加したプラグインの実体がダウンロードされます。
また、次にcordova prepareコマンド、cordova runコマンド、cordova emulateコマンド、cordova buildコマンドを実行したときに、プラグインのネイティブコード、設定、JavaScript側のインターフェイスが各プラットフォームのプロジェクトに反映されます。
さっそく導入したCameraプラグインを使ってみましょう。www/js/index.jsの35行目付近にあるonDeviceReadyメソッドの部分をリスト4.17のように編集します。
|
onDeviceReady: function() {
app.receivedEvent('deviceready');
// カメラへのオプション
var options = {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI
};
// カメラを起動する
navigator.camera.getPicture(function(imageData) {
alert(imageData);
}, function() {
alert('fail');
}, options);
},
|
編集が完了したら、cordova runコマンドやcordova emulateコマンドで実行してください。
|
$ cordova run -d
|
アプリの起動直後にカメラが起動すれば成功です。他のプラグインも同様のやり方で導入することができます。
4.5.2 プラグインを管理する
プロジェクトにインストールされているプラグインを一覧するには、cordova plugin lsコマンドを用います。
|
$ cordova plugin ls
[ 'org.apache.cordova.core.camera' ]
|
このプロジェクトにインストールしているプラグインの一覧が表示されます。上記の例では、先ほど導入したカメラプラグインの識別子が表示されています。
プラグインをプロジェクトからアンインストールするには、cordova plugin rmコマンドにそのプラグインの識別子を指定します。リポジトリの場所を指定してプラグインをインストールするのとは違って、プラグインをアンインストールするときにはそのプラグインの識別子を指定します。
|
$ cordova plugin rm org.apache.cordova.core.camera
|
プラグインを取り除いたことを確認するために、cordova plugin lsコマンドを実行します。
|
$ cordova plugin ls
No plugins added. Use `cordova plugin add <plugin>`.
|
プラグインが削除されていることがわかります。
4.5.3 プラグインのインストールを理解する
導入したプラグインがどのようにプロジェクトに反映されるか確認してみましょう。ここでは端末の位置情報を扱うことができるGeolocationプラグインを例として導入してみます。
各種設定や導入したプラグインを実際の各プラットフォームのプロジェクトに反映させるには、cordova prepareコマンドを用います。
|
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
$ cordova prepare -d
|
pluginsディレクトリを見ると、org.apache.cordova.core.geolocationディレクトリが作成されています。その中には、先ほどcordova plugin addコマンドで指定したgitリポジトリの内容がそのまま置かれています。
では、Androidのプロジェクトを見てみましょう。AndroidManifest.xmlを見ると、端末の位置情報にアクセスするためのパーミッションが追加されています（リスト4.18）。
|
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
|
Androidアプリでは、あらかじめAndroid端末の利用する機能をAndroidManifest.xmlに記述します。これにより、もしセキュリティの脆弱性によりアプリ内で任意のコードが実行されたとしても、パーミッションに記述されていない機能は利用できません。また、このパーミッションはGoogle Play Storeでアプリをインストールする際に、このアプリがアクセスする機能としてユーザに表示されます。
位置情報を扱うためのネイティブコードは、platforms/android/src/org/apache/cordova/core以下に追加されます。
|
$ ls platforms/android/src/org/apache/cordova/core
CordovaLocationListener.java
GPSListener.java
GeoBroker.java
NetworkListener.java
|
JavaScript側のインターフェイスは、platforms/android/assets/www/plugins/org.apache.cordova.core.geolocation/www/以下に配置されます。
|
$ ls platforms/android/assets/www/plugins/org.apache.cordova.core.geolocation/www/
Coordinates.js
Position.js
PositionError.js
geolocation.js
|
また、platforms/android/asset/www/cordova_plugins.jsを見ると、リスト4.19のようにGeolocationプラグインの情報が追加されていることがわかります。
|
cordova.define('cordova/plugin_list', function (require, exports, module) {
module.exports = [
{
"file":
"plugins/org.apache.cordova.core.geolocation/www/Coordinates.js",
"id": "org.apache.cordova.core.geolocation.Coordinates",
"clobbers": [
"Coordinates"
]
},
{
"file": "plugins/org.apache.cordova.core.geolocation/www/PositionError.js",
"id": "org.apache.cordova.core.geolocation.PositionError",
"clobbers": [
"PositionError"
]
},
{
"file": "plugins/org.apache.cordova.core.geolocation/www/Position.js",
"id": "org.apache.cordova.core.geolocation.Position",
"clobbers": [
"Position"
]
},
{
"file": "plugins/org.apache.cordova.core.geolocation/www/geolocation.js",
"id": "org.apache.cordova.core.geolocation.geolocation",
"clobbers": [
"navigator.geolocation"
]
}
]
});
|
次はiOSのプロジェクトで更新されたファイルを見てみましょう。platforms/ios/（プロジェクト名）/Pluginsディレクトリには位置情報を扱うObjective-Cのコードが追加されています。
|
$ ls platforms/ios/（プロジェクト名）/Plugins/org.apache.cordova.core.geolocation/
CDVLocation.h
CDVLocation.m
|
また、platforms/ios/（プロジェクト名）/config.xmlの内容を見ると、Geolocationプラグインに関する設定項目が追加されています（リスト4.20）。
|
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
</feature>
|
JavaScript側のインターフェイスとプラグイン定義は、Androidの場合と同様に、platforms/ios/wwwディレクトリ以下に追加されます。
ここでは、cordovaコマンドを通じてプラグインを追加すると、裏ではどのように各プラットフォームのプロジェクトに反映されるかについて解説しました。
4.5.4 プラグインの仕組み
Cordovaプラグインは、Cordova Pluginの仕様に従ってまとめられている1つのパッケージです。このパッケージの中には以下のようなものが含まれています。
- プラグインに関する情報
- JavaScriptインターフェイス
- 各プラットフォーム向けのネイティブコード
- 依存関係
Cordovaのプラグインには、各プラットフォーム特有のネイティブコードが含まれています。
このコードは、iOSではObjective-C、AndroidではJavaで記述されています。また、このパッケージにはHTML5側のインターフェイスを定義するJavaScriptのコードが定義されています。
Cordovaプラグインには、プラグインの依存関係を定義することができます。あるプラグインが、別のプラグインの実装に対して依存していることを定義することで、プラグインのインストール時には自動的のその依存先のプラグインも同時にインストールされます。
開発者は、cordova pluginコマンドを使ってこれらのコンポーネントをiOSやAndroidの各プラットフォームに配置します。
4.5.5 組み込みプラグインの一覧
Cordovaがあらかじめ用意しているプラグインとそのgitリポジトリは、表4.7のとおりです。
上記のプラグインのリストは、以下のCordova3.0.0のドキュメントを参照しました。
Cordovaプラグインは、Cordova開発チーム以外にも開発者が自由に開発して公開することができます。表4.7にあるプラグイン以外にも、サードパーティ製のCordovaプラグインも探してみるとよいでしょう。
■
次回は「4.5.6～4.5.7 Android 向けのCordovaプラグインを実装する」を説明します。
久保田光則（くぼたみつのり）
東京都在住。アシアル株式会社に所属するUI/UXデザイナー兼ソフトウェアエンジニア。社内では，HTML5ハイブリッドアプリの開発に多数関わる。優れたデザインとエンジニアリングを両立したオーバークオリティなアプリケーションの開発を実現するために日々，頑張る。
アシアル株式会社（あしあるかぶしきがいしゃ、Asial Corporation）
PHPなどのサーバサイドの技術と，PhoneGapなどのスマートフォン関連を中心とした開発を手がける技術ベンチャー。HTML5ハイブリッドアプリをブラウザ上で開発できるMonacaや，PhoneGapの日本語情報を配信するPhoneGap Fanなどのウェブサービスを手がける。
※以下では、本稿の前後を合わせて5回分（第3回～第7回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
3. Cordova： アプリの設定
Apache Cordovaアプリの開発準備が整ったら、そのアプリや、iOS／Androidなど特定のプラットフォームでの挙動の詳細を設定しよう。書籍転載の3本目。
5. 【現在、表示中】≫ Cordovaプラグインを利用する
Cordovaで提供されているプラグインの概要と、実際にアプリのプロジェクトへプラグインを導入する方法を説明する。書籍転載の5本目。
6. Android向けのCordovaプラグインを実装する
アプリの一部をネイティブで記述するには、プラグインの実装が必要。そこでAndroid向けにCordovaプラグインを実装する方法を解説。今回で「Cordovaアプリ開発の基礎」に関する部分の転載完了。
7. JavaScriptからネイティブの機能を呼び出す方法 ― addJavascriptInterface方式（前編）
Apache Cordova／Adobe PhoneGapによるハイブリッドアプリ内での、JavaScriptとネイティブとの通信の仕組みを解説する。書籍転載の7本目（「Part 2《実践編》 第11章 JavaScriptとネイティブとのブリッジ」より）。
