PR

 第2回に引き続き、PhoneGapを用いて簡単なアプリを制作します。せっかくのハイブリッドアプリの特徴を生かすべく、今回はデバイス機能にアクセスしてみましょう。具体的にはPhoneGapのカメラAPIを用いて、撮影した写真を並べていくアプリケーションを作っていきます。

ネイティブ機能へのアクセス

画像●スクリーンショット
画像●今回作成するアプリ
[画像のクリックで拡大表示]

 Webアプリにはないハイブリッドアプリの大きな特徴がデバイスやOSのネイティブ機能へのアクセスです。モバイル端末には、カメラや加速度センサー、コンパスなどの各種デバイス機能、連絡帳やファイルシステムなどのOSが持つ機能が備わっています。PhoneGapではJavaScript APIを通じて、こういったネイティブ機能にアクセスすることができます。例として執筆時点の最新版であるPhoneGapバージョン2.2では、下記の機能がAPIとして提供されています。


表●PhoneGapの機能一覧
機能 説明
加速度センサー 端末に内蔵された加速度センサーを読み取り、端末の傾きを取得する
カメラ 端末のカメラやアルバムにアクセスし、写真を取得する
ビデオキャプチャー ビデオを録画する
オーディオ録音・再生 オーディオを録音したり、再生する
コンパス 端末の向きを方位情報として取得する
接続状態確認 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ライブラリーを読み込む表記の違いは下記の通りです。

コード1●外部ライブラリーを読み込む
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が利用可能になったかどうかは、下記のようにして判定することができます。

コード2●PhoneGapが利用できることの確認
document.addEventListener("deviceready", function() {
  // PhoneGap APIが利用可能になってからの処理の記述
});

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
有料会員と登録会員の違い