アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

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

Monacaで利用しているスマートフォン向けHTML5フレームワークのPhoneGapでは、AndroidiOS, WebOSなどの様々なスマートフォンプラットフォームの違いを吸収する抽象化レイヤを提供します。 どういうことかというと、例えばiOSAndroidではアプリケーション開発に利用するプログラミング言語自体が違います。AndroidではJavaiOSでは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);




位置情報関連のAPIの詳細はこちらで見ることができます。

最後に


というわけでPhoneGapで利用できるAPIを紹介しました。 ここで紹介した以外にも、以下のような通常のJavaScriptではできない様々なネイティブ機能にアクセスすることができます。

  • 端末情報の取得

  • コンパス

  • 連絡先データベースへのアクセス

  • ネットワーク状態の取得

  • 加速度センサー

  • 位置情報

  • バイス通知機能


それらのAPIの詳細については http://phonegap-fan.com/docs/を参照しましょう。