本稿で作成する楽器アプリのサンプルは、GitHubにて公開しています。
はじめに
連載の第3回を担当します藪下です。Firefox OSコミュニティでいろいろイベントのスタッフをしたり、Firefox OSのソースコードを読む勉強会を開いたりしている「FxOSコードリーディング」というコミュニティを主宰しています。
第1回では、Firefox OSの概要や開発環境について、第2回ではAPIを使ったカメラアプリ開発の手順について解説しましたが、第3回となる今回は、第2回で取り上げたカメラAPIなどのような、ハードウェア制御が可能なAPIを掘り下げていきます。すべてのハードウェア制御を詳しく解説はできませんが、大まかに何ができるかや、簡単な使い方、資料の所在を一通り解説します。
Firefox OSのハードウェアAPIの概要
Geolocation APIやVibrator APIに代表されるように、昨今のHTML5ではHTMLとJavaScriptからハードウェアにアクセスすることができます。モバイル向けブラウザやFirefox OSなどのモバイル端末上で動作するブラウザでは、多彩なセンサーを搭載しているので、これらのセンサーにアクセスすることで今までのWebアプリでは実現できなかった体験を提供できるようになってきました。
Firefox OSでは、W3Cで定義され各ブラウザで提供されているAPIに加えて、さらに多彩なAPIを備えています。W3Cで定義されていないAPIにも、BluetoothやNFCなど今後の標準化が楽しみなものも含まれていたり、カメラAPIのようにW3C標準に見られるAPIより細やかな制御が可能なAPIも存在します。
本記事では、Firefox OSに搭載されたハードウェアアクセスAPIについて、概要と簡単な使い方を述べた後、いくつかのセンサーAPIと音声APIを使って簡単なアプリケーションの作り方を見ていきます。
Firefox OSでアクセスできるハードウェア
Firefox OSでアクセスできるハードウェアには以下のようなものがあります。W3C標準規格があるものとないものがあるので、大きく二つに分けて紹介します。今回はそれぞれのAPIについて詳細は述べません。各API資料のURLを付記しておくので、実際の使用に際しては資料で仕様を確認してください。
本記事では、下記のAPIについて解説します。
W3C標準
- 環境光センサー
- バッテリー
- GPS
- 近接センサー
- 加速度センサー
- バイブレーション
- getUserMedia
W3C非標準
- カメラAPI
- Bluetooth
- NFC
- ストレージ
W3C標準のAPI（1）
環境光センサー
環境光センサーは周辺の明るさを測定するセンサーです。環境光センサーAPIでは測定した明るさをルクス単位で扱います。Firefox OSのプリインアプリでは、環境の明るさに応じて液晶パネルの明るさを変え、見やすく省電力にする用途に使われています。
環境光センサーAPIは、windowに環境光センサーの値が変化した際に呼び出される、イベントハンドラを登録しておく形で使用します。これは他のセンサーAPIにもよく見られる形です。イベント名はdevicelightです。以下に例を示します。
window.addEventListener('devicelight', handler);
function handler(event) {
var light = event.value; // 環境光センサーの値(ルクス)
(snip)
}
環境光センサーAPIについてのリファレンスは以下のURLを参照ください。
バッテリー
バッテリーステータスAPIでは、バッテリーの残量や充電状態、満充電／枯渇までの時間を知ることができます。Firefox OSのプリインアプリでは、ステータスバーの電池ピクト表示や設定アプリでのバッテリー状態表示、残量低下時の警告、残量低下時のモード変更などに使われています。
バッテリーステータスAPIは、navigator.batteryのプロパティとイベントが基本になります。navigator.batteryはバッテリー残量、充電状態、満充電までの時間、枯渇までの時間の4つのプロパティと対応するイベントを持っています。
バッテリー状態の取得の例を以下に示します。
var battery = navigator.battery || navigator.mozBattery;
battery.addEventListener("levelchange", dateBatteryStatus);
battery.addEventListener("chargingchange", dateBatteryStatus);
battery.addEventListener("chargingtimechange", dateBatteryStatus);
battery.addEventListener("dischargingtimechange", dateBatteryStatus);
function updateBatteryStatus() {
var level = battery.level;
var charging = battery.charging;
var chargingTime = battery.chargingTime;
var dischargingTime = battery.dischargingTime;
(snip)
}
イベントとプロパティそれぞれの詳しい仕様は述べません。バッテリーステータスAPIのリファレンスは以下のURLを参照して下さい。