PhoneGapを使えば、HTMLやCSS、JavaScriptといったWebベースの技術を用いて、複数のモバイルプラットフォーム向けのネイティブアプリケーションを、単一のソースコードから作成することができます。PhoneGapを使うために、特別なプログラミング言語の使い方を覚える必要はありません。Webアプリケーションを作成するのと同様の感覚で、HTML/CSS/JavaScriptのみで完結したアプリケーションを作ることができます。

各種センサーや音楽再生などといったデバイス固有の機能や、電話帳などのプラットフォーム固有の機能を利用したい場合には、PhoneGap APIと呼ばれるJavaScriptベースのAPIを利用します。通常、これらの機能にアクセスする手段はプラットフォームごとに異なりますが、その差異はPhoneGap APIによって吸収されるため、開発者は対象とするプラットフォームの違いを意識することなくコーディングを行うことが可能です。

本稿では、このPhoneGap APIの概要と、そのうちのNotification APIの使い方について解説します。サンプルコードのビルドおよび実行環境としては、Adobe Dreamweaver CS6とPhoneGap Buildを使用しています。

DreamweaverにおけるPhoneGap Buildの基本的な使い方や、Accelemeter APIおよびCamera APIの使い方については、「Dreamweaver CS6とPhonaGap Buildで作るモバイル・アプリケーション  」を参考にしてください。

PhoneGap APIの概要

PhoneGapにおいてプラットフォーム固有の機能を利用するためのAPIとしては、表1のようなものが用意されています。プラットフォームによってはサポートされていないAPIがあることや、サポート対象に入っていてもデバイス側に対応する機能が無い場合には利用できないことなどが挙げられます。また、この表にある対応プラットフォームはPhoneGap 2.0時点のものです。

表1:PhoneGap API一覧

API 概要 対応プラットフォーム
Accelerometer 加速度センサーの情報を取得する。X/Y/Z軸方向の傾きやタイムスタンプ、指定した時間間隔における加速度などの情報を取得できる。 iOS/Android/Blackberry/Windows Phone 7/Bada
Camera デバイスのカメラ機能を利用する。カメラで撮影した写真の画像データや、フォトアルバムから選んだ画像ファイルのデータを取得できる。 iOS/Android/Blackberry/webOS/Windows Phone 7/Bada/
Capture デバイスのマイクやカメラの機能にアクセスして、音声の録音や写真/動画の撮影を行う。HTML5のCapture APIに対応している。 iOS/Android/Blackberry/Windows Phone 7
Compass デバイスに搭載された電子コンパスを利用して、デバイスが向いている方向を取得する。 iOS(3GS以降)/Android/webOS/Windows Phone 7/Bada
Connection デバイスの回線情報を取得する。ネットワーク接続の種類や接続状態を確認できる。 iOS/Android/Blackberry/webOS/Windows Phone 7/Bada
Contacts 連絡先データベース(いわゆる電話帳)にアクセスする。登録済みの連絡先の情報を取得したり、新しい連絡先の登録を行える。 iOS/Android/Blackberry/Bada
Device 各種デバイスのハードウェアおよびソフトウェア情報を取得する iOS/Android/Blackberry/webOS/Windows Phone 7/Bada
Events PhoneGap独自のイベントハンドラ機能を提供する。PhoneGapライブラリのロードが完了した際に発生するdevicereadyイベントや、各種ボタンが押された際に発生するイベントなどが用意されている。 iOS/Android/Blackberry/Windows Phone 7/Bada
File デバイスのファイルシステムにアクセスしてファイルの読み書きを行う。 iOS/Android/Blackberry/Windows Phone 7
Geolocation デバイスの位置情報を取得する。GPSセンサーによる緯度経度やネットワーク情報をもとに算出された現在位置を取得できる。W3C Geo location API Specificationに準拠している。 iOS/Android/Blackberry/webOS/Windows Phone 7/Bada
Media オーディオの再生や録音を行う。現在のAPIは暫定的なもので、将来的にはW3C仕様に置き換えられる予定。 iOS/Android/BlackBerry/Windows Phone 7
Notification デバイスの通知機能を利用する。ダイアログや音、バイブレーションなどによる通知が行える。 iOS/Android/Blackberry/webOS/Windows Phone 7/Bada
Storage デバイスのストレージにアクセスする。SQLを利用したデータの読み書きを行うことができる。W3C Web SQL DatabaseおよびW3C Web Storageに準拠している。 iOS/Android/Blackberry/webOS

PhoneGap APIは、W3Cをはじめとする業界標準の仕様に可能な限り準拠する方針で設計されています。現時点で標準的な仕様が存在しない場合でも、将来的に標準仕様が登場した場合には積極的にサポートおよび移行を進めていくとのことです。特にHTML5で導入される新しい仕様とは共通する部分も多いため、Web開発者にとっては学習コストが低く抑えられるというメリットがあります。

PhoneGap Buildにおけるパーミッションの設定

プラットフォームネイティブの機能のうちのいくつかは、インストール時にユーザによる許可を受けていなければ利用することができません。PhoneGap Buildを使う場合、デフォルトでの設定では必要のない機能に対する使用許可まで要請してしまいます。この設定をオフにして、必要な機能のみ許可を求めるようにするためには、プロジェクトのconfig.xmlファイルに以下の記述を追加してください。

サンプルコード: インターネットアクセス機能以外の使用許可申請をオフにする

<preference name="permissions" value="none"/>

これによって、インストール時にはインターネットアクセス機能の使用許可のみ求めるようになります。インターネットアクセス機能についてはPhoneGapを使用する上で必要となるため、この設定でオフにはできません。

この上で、必要な機能の使用許可を要求するには、使用したい機能ごとに個別に<feature>タグによる設定を追加します。例えば、カメラ機能のみ使用したい場合は次のような記述になります。

サンプルコード: カメラ機能へのアクセス権限のみ申請する

<preference name="permissions" value="none"/> <feature name="http://api.phonegap.com/1.0/camera"/>

Notification APIを利用する

まず、もっとも基本的な機能とも言えるNotification APIについて説明します。Notification APIはユーザに通知を行うためのAPIで、ダイアログでメッセージを表示したり、短くビープ音を鳴らす、バイブレーションを利用して端末を振動させるなどといったことができます。

このAPIではNotificationというオブジェクトがひとつだけ定義されています。通知を行うには、notificationオブジェクトに用意された以下の4つのメソッドを利用します。

  • notification.alert - メッセージダイアログを表示する
  • notification.confirm - 確認用ダイアログを表示する
  • notification.beep - ビープ音を鳴らす
  • notification.vibrate - 端末を振動させる

notification.alertメソッド

次のコードは、PhoneGap Buildのデフォルトのテンプレートからアプリを作成した場合に、最初に用意されるindex.htmlのコードです。このコードでは、onDeviceReadyメソッドの中でnotification.alertを利用してメッセージを表示しています。onDeviceReadyは端末がPhoneGapのライブラリの読み込みを完了したタイミングで実行されるので、そのときにダイアログが表示されるということです。

サンプルコード: PhoneGap Buildでデフォルトで用意されるindex.html

<!DOCTYPE html> <html> <head> <title>Hello PhoneGap Notification</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta charset="utf-8"> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript"> function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { // do your thing! navigator.notification.alert("PhoneGap is working") } </script> </head> <body onload="onBodyLoad()"> <h1>Hey, it's PhoneGap!</h1> </body> </html>

図1はこのアプリの実機での実行例です。

notification.alertメソッドはタイトルやボタンに表示されるテキストをカスタマイズすることができます。また、ボタンが押された際に呼び出されるコールバック関数も指定できます。次のコードは、メッセージとして「ようこそADCへ!」、タイトルを「Welcome」、ボタンを「確認」とした例です。また、コールバックとしてalertConfirm関数を呼び出します。

サンプルコード: 通知ダイアログをカスタマイズ

function onDeviceReady() { navigator.notification.alert( "ようこそADCへ!", alertConfirm, "Wecome", "確認"); } function alertConfirm() { document.getElementById("confirm").innerHTML = "確認ボタンが押されました。"; }

これを実機で実行すると図2のように表示されます。

notification.confirmメソッド

ユーザに選択を促すような確認ダイアログを表示させるには、notification.confimメソッドを使用します。confirmメソッドの使用方法はalertメソッドと同様ですが、ボタンに表示するテキストを次のコードのようにコンマで連結して複数指定できます。

サンプルコード: 確認ダイアログを表示

function onDeviceReady() { navigator.notification.confirm( "PhoneGapは好きですか?", onConfirm, "質問", "いいえ, はい"); } function onConfirm(buttonIndex) { if (buttonIndex==1) { button = "いいえ"; } else if (buttonIndex==2) { button = "はい"; } else { button = "unknown"; } document.getElementById("confirm").innerHTML = button + " が押されました。"; }

confirmメソッドではボタンは図3のように複数表示され、コールバック関数には押されたボタンの番号が渡されます。

notification.beepメソッド

ビープ音を鳴らして通知を行いたい場合には、notification.beepメソッドを利用します。beepメソッドは、引数にビープ音を鳴らす回数を指定します。例えば次のように呼びだせば、ビープ音が5回鳴らされます。

サンプルコード: ビープ音を5回鳴らす

navigator.notification.beep(5);

notification.vibrateメソッド

バイブレーション機能を利用して端末を振動させることもできます。それにはnotification.vibrateメソッドを使います。vibrateメソッドは、引数に指定されたミリ秒単位の秒数だけ端末を振動させます。例えば次のようなコードであれば、3秒間に渡ってデバイスが振動します。

サンプルコード: 端末を3秒間振動させる

navigator.notification.vibrate(3000);

なお、このメソッドを使用するには端末のバイブレーション機能に対するアクセス許可が必要です。PhoneGap Buildでは、config.xmlに次のように記載することでバイブレーション機能に対するアクセスを申請できます。

サンプルコード: バイブレーション機能へのアクセス権限を申請する

<feature name="http://api.phonegap.com/1.0/notification"/>