2011年9月29日

スマートフォン用HTML5フレームワークphonegapで使えるネイティブAPI

こんにちは、久保田です。

Monacaで利用しているスマートフォン向けHTML5フレームワークのPhoneGapでは、AndroidやiOS, WebOSなどの様々なスマートフォンプラットフォームの違いを吸収する抽象化レイヤを提供します。どういうことかというと、例えばiOSとAndroidではアプリケーション開発に利用するプログラミング言語自体が違います。AndroidではJava、iOSではObjective-Cを用いてアプリケーションは開発します。言語が違う以上、ネイティブのAPIの使い方も違います。

Phonegapはその違いを吸収して、iOSでもAndroidでもどちらのプラットフォームでも利用できるJavaScript用のAPIを提供してくれます。

この記事では、PhoneGapがどのようなネイティブAPIを提供しているのかの一部を紹介します。

カメラ機能

端末に付属しているカメラを起動し、その結果を得ることができます。ファイルシステムに取った写真を保存させたり、base64で写真自体のデータを得ることができます。以下の例は、カメラで撮影した画像をbase64形式で取得する例の引用です。


navigator.camera.getPicture(onSuccess, onFail, { quality: 50 }); 
function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
    alert('エラーが発生しました: ' + message);
}

カメラAPIの詳細はこちらで見ることができます。

ファイルシステムへのアクセス

端末内のファイルシステムにアクセスできます。ファイルを読み書きしたり、ローカルのファイルを外部サーバにアップロードすることができます。

以下の例は、単純にファイルの中身を読み出す例の引用です。


var win = function(evt) {
    console.log(evt.target.result);
};
var fail = function(evt) {
    console.log(evt.target.error.code);
};
var paths = navigator.fileMgr.getRootPaths();
var reader = new FileReader();
reader.onload = win;
reader.onerror= fail;
reader.readAsDataURL(paths[0] + "readme.txt");

ファイル関連のAPIの詳細はこちらで見ることができます。

位置情報の取得

デバイスの位置情報にアクセスできます。

以下の例は、GPSからの情報を取得する例の引用です。


// 成功時のコールバック関数
//  このメソッドはGPSの現在座標を保有する `Position` オブジェクトを引数とします
//
var onSuccess = function(position) {
    alert('緯度: '          + position.coords.latitude          + '\n' +
          '経度: '         + position.coords.longitude         + '\n' +
          '高度: '          + position.coords.altitude          + '\n' +
          '位置精度: '          + position.coords.accuracy          + '\n' +
          '高度精度: ' + position.coords.altitudeAccuracy  + '\n' +
          '方位: '           + position.coords.heading           + '\n' +
          '速度: '             + position.coords.speed             + '\n' +
          'タイムスタンプ: '         + new Date(position.timestamp)      + '\n');
};
// 失敗時のコールバックは、PositionErrorオブジェクトを受けとる
//
function onError(error) {
    alert('コード: '    + error.code    + '\n' +
          'メッセージ: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);