第2回に引き続き、PhoneGapを用いて簡単なアプリを制作します。せっかくのハイブリッドアプリの特徴を生かすべく、今回はデバイス機能にアクセスしてみましょう。具体的にはPhoneGapのカメラAPIを用いて、撮影した写真を並べていくアプリケーションを作っていきます。
ネイティブ機能へのアクセス
Webアプリにはないハイブリッドアプリの大きな特徴がデバイスやOSのネイティブ機能へのアクセスです。モバイル端末には、カメラや加速度センサー、コンパスなどの各種デバイス機能、連絡帳やファイルシステムなどのOSが持つ機能が備わっています。PhoneGapではJavaScript APIを通じて、こういったネイティブ機能にアクセスすることができます。例として執筆時点の最新版であるPhoneGapバージョン2.2では、下記の機能がAPIとして提供されています。
| 機能 | 説明 |
|---|---|
| 加速度センサー | 端末に内蔵された加速度センサーを読み取り、端末の傾きを取得する |
| カメラ | 端末のカメラやアルバムにアクセスし、写真を取得する |
| ビデオキャプチャー | ビデオを録画する |
| オーディオ録音・再生 | オーディオを録音したり、再生する |
| コンパス | 端末の向きを方位情報として取得する |
| 接続状態確認 | OSのネットワーク接続状態を取得する |
| アドレス帳 | OSの連絡帳にアクセスし、情報の入出力を行う |
| デバイス情報 | デバイスのモデル名や端末IDなどの取得や、OS情報を取得する |
| ハードウェアボタン | Android端末の持つ各種ボタンに対するイベントを取得する |
| ファイルシステム | OSのファイルシステムにアクセスし、ファイルの入出力を行う |
| GPS | GPSセンサーにアクセスし、現在の緯度経度を取得する |
| 国際化 | OSの利用言語や各種ロケール情報を参照する |
| バイブレーター | バイブレーターを実行する |
| スプラッシュ操作 | 起動時に表示されるスプラッシュ画面を制御する |
| SQLデータベース | SQLデータベースにアクセスする |
今回は、これらの機能のなかからカメラ機能を取り上げます。簡単なアプリの作成を通じて、ネイティブAPIの使い方を見ていきましょう。
PhoneGap APIの概要と使い方
PhoneGap APIはすべてJavaScriptの関数形式となっています。PhoneGap APIを呼び出すと、裏側でネイティブ関数を実行し、その結果が戻ります。実行に時間がかかる関数があることから、PhoneGap APIは非同期処理が中心となります。詳しくは後ほど説明します。
PhoneGap APIを利用するためには、JavaScriptライブラリーを読み込む必要があります。具体的には、PhoneGapに同梱されるcordova-xxx.js（xxxにはバージョン名が入ります）というJavaScriptをHTMLファイルの先頭で読み込みます。Monacaを利用する場合には、Monacaプラグインという仕組みにより、plugin-loader.jsがPhoneGapライブラリーも含む形となっています。
ローカルで開発する場合と、Monacaで開発する場合のJavaScriptライブラリーを読み込む表記の違いは下記の通りです。
Monacaで開発する場合
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
ローカルで開発する場合
<script type="text/javascript" src="path/to/cordova-2.2.0.js"></script>さてJavaScriptライブラリーを読み込んだあと、PhoneGap APIが利用可能になるまで若干のタイムラグがあります。これは、画面の表示と同時にPhoneGapが内部的に初期化処理を行っているためです。PhoneGapの初期化処理が完了し、APIが利用可能な状態になると、devicereadyというイベントが発生します。そのため、PhoneGap APIが利用可能になったかどうかは、下記のようにして判定することができます。
document.addEventListener("deviceready", function() {
// PhoneGap APIが利用可能になってからの処理の記述
});
