Firefox OS搭載スマホ「Fx0」でつくろう！はじめてのFirefox OSアプリ開発（AD）

Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声APIを使った楽器アプリの作例

Firefox OS搭載スマホ「Fx0」でつくろう！はじめてのFirefox OSアプリ開発第3回

2015/03/26 14:00

W3C標準のAPI（2）

GPS

　GPSの値は、おなじみの地理位置情報APIで取得します。これは厳密にはGPSだけでなく、Wi-Fiや基地局情報などからの測位結果をも含んだものになります。地理位置情報APIでは現在位置の取得、現在位置の監視が可能です（※1）。Firefox OSのプリインアプリでは検索時のスマートコレクション機能やカメラのジオタグ、Find My Device機能の位置特定などに使用されています。

注釈

※1　GPSの電波を受信しづらい地下街、建物内、ビル陰などでは位置情報の制度が悪くなる場合があります。

　地理位置情報APIはこれまでのAPIと違い、使用するための許可設定をマニフェストに書く必要があります。マニフェストの例を以下に示します。

manifest.webapp

"permissions": {
    "geolocation": {}
},

　地理位置情報APIはnavigator.geolocationのメソッドにイベントハンドラを渡す形で使用します。地理位置情報APIにはgetCurrentPosition、watchPosition、clearWatchというメソッドがあります。以下に簡単な例を挙げます。

var watchId;

var geo = navigator.geolocation;

// まず現在地を取る
geo.getCurrentPosition((pos) => {
    // 精度を上げるために監視を始める
    watchId = geo.watchPosition((position) => {
        (snip)
    }, (error) => {
        (snip)
    }, {enableHighAccuracy: true});
}, (error) => {
    errorPrint(error);
});

　地理位置情報APIは引数や返却される値にたくさんのプロパティを持っていますが、引数、返り値、コールバックに渡ってくる値などの詳細は今回解説しません。詳しいことは以下のURLを参照してください。

近接センサー

　近接センサーはデバイスと他の物体がどれほど近づいたかを検知するセンサーです。Firefox OSでは通話時に顔とデバイスの近さを検出して消灯することで省電力化する用途に使われます。

　近接センサーAPIはwindowオブジェクトに属します。環境光センサーと同様に、windowオブジェクトにaddEventListenerでイベントハンドラを登録する利用方法になります。ただし近接センサーAPIには、userproximityとdeviceproximityの二つのイベントがあり、userproximityは接近の検知、deviceproximityは距離の測定と用途によって使い分けます。以下に例を示します。

window.addEventListener('userproximity', (event) => {
    if (event.near) {
        // 近接状態
        (snip)
    } else {
        // 離脱状態
        (snip)
    }
});


window.addEventListener('deviceproximity', (event) => {
    var min = event.min; // 観測可能な最小距離
    var max = event.max; // 観測可能な最大距離
    var value = event.value; // 現在距離(センチメートル単位)
    (snip)
});

　近接センサーAPIのイベントとプロパティは簡単なのでサンプルで十分かもしれませんが、近接センサーAPIのリファレンスは以下のURLを参照してください。

Proximity

加速度センサー

　加速度センサーはデバイスの移動を加速度として取得するセンサーです。Firefox OSではデバイスの向きに応じたスクリーン表示の制御、シェイクの検知などに使われます。

　加速度センサーの値をもとに動作するAPIには、スクリーンの向きに関するAPIとデバイスの姿勢に関するAPI、さらに加速度に関するAPIがあります。イベントハンドラを登録して値を取得する形はこれまでと同様です。

　スクリーンの向きの変化は、window.screenオブジェクトのorientationchangeイベントで受け取ることができます。スクリーンの現在の向きはwindow.screen.orientationプロパティで取得できます。その他に、向きの固定を行うwindow.screen.lockOrientationメソッドと、向きの固定の解除を行うwindow.screen.unlockOrientationメソッドが存在します。

window.screen.addEventListener('orientationchange', () => {
    if (window.screen.orientation === 'landscape-primary') {
        (snip)
    } else if (window.screen.orientation === 'landscape-secondary') {
        (snip)
    } else if (window.screen.orientation === 'portrait-primary') {
        (snip)
    } else if (window.screen.orientation === 'portrait-secondary') {
        (snip)
    }

    if (/* some condition */) {
        window.screen.lockOrientation('landscape');
    } else {
        window.screen.unlockOrientation();
    }
});

　プロパティの取りうる値、引数、返り値などについて詳しい解説はしません。詳しいことは以下のURLを参照してください。

　Managing screen orientation

　スクリーン方向の値についてはW3Cの定義と若干違うので、違いを意識しておくとFirefox OS以外への適用にもよいでしょう。

The Screen Orientation API

　デバイスの姿勢の変化は、windowオブジェクトのdeviceorientationイベントにイベントハンドラを登録することで取得することができます。姿勢の値はイベントハンドラの引数として渡されます。地軸の方向とデバイスの軸の方向が何度ずれているかによって表されます。

window.addEventListener('deviceorientation', (orient) => {
    var absolute = orient.absolute; // 地軸との差分を取れているか疑似的な値か
    var alpha = orient.alpha; // z軸中心の回転量
    var beta = orient.beta; // x軸中心の回転量
    var gamma = orient.gamma; // y軸中心の回転量
    (snip)
});

　デバイスの姿勢に関するAPIについてもここでは詳しく解説しません。各軸取りうる値の範囲が違うので、実際の利用の際はリファレンスを確認してください。デバイスの向きについての詳細は以下のURLを参照してください。

イベントやレイアウトに関する解説

デバイスの方向の検出

デバイスの向きに関する詳しい解説

方向および動きとして示されるデータ

　加速度の変化は、windowのdevicemotionイベントによって捕捉することができます。加速度の値はイベントハンドラの引数として渡されます。重力加速度を含んだ値、重力加速度を含まない値、姿勢の値を取得することができます。

window.addEventListener('devicemotion', (motion) => {
    var gravity = motion.accelerationIncludingGravity; // 重力加速度を含んだ加速度
    var acceleration = motion.acceleration; // 重力加速度を含まない加速度
    var rotateRate = motion.rotateRate; // deviceorientationで取得できるものと同じ値
    (snip)
});

　加速度APIについても詳しい解説はしません。イベントで取得できる値についての詳細は以下のURLを参照してください。

devicemotion

バイブレーション

　バイブレーションAPIは端末のバイブレータを制御するためのAPIです。Firefox OSでは着信音とともにバイブレートする機能や通知の一種に使われています。バイブレーションAPIはゲームでのフィードバックなど触覚効果としての利用が推奨されます。

　バイブレーションAPIは、navigatorに属するメソッドです。振動させたい時間を与えることで制御します。振動時間と停止時間の配列を渡すことによってパターンも表現することができます。0秒指定することで停止もできます。

// 三三七拍子
navigator.vibrate([300, 150, 300, 150, 300, 300,
                   300, 150, 300, 150, 300, 300,
                   300, 150, 300, 150, 300, 150, 300, 150,
                   300, 150, 300, 150, 300, 300]);

　バイブレーションAPIは単純なのでここまでの解説で問題なく使えるかと思いますが、資料のURLを記載しておきます。

Vibration API

getUserMedia

　getUserMediaはWebRTCの中心的な機能です。あとで紹介するカメラAPIと比べると細かい制御はできないもののお手軽にカメラにアクセスすることができます。さらにカメラだけでなくマイクからの音声も取得することができるため、利用シーンは多いでしょう。

　getUserMediaはnavigatorオブジェクトに属します。Firefox OSの場合getUserMediaを使うにはパーミッションを指定する必要があります。

manifest.webapp

"permissions": {
    "audio-capture": {},
    "video-capture": {}
}

　getUserMediaに使用したいリソースを指定することで、そのストリームを取得することができます。

var constraint = {
    video: true,
    audio: false
};
navigator.getUserMedia(constraint, (mediaStream) => {
    var video = document.getElementById('video'); // 任意のビデオ要素
    video.src = window.URL.createObjectURL(mediaStream);
}, (error) => {
    if (error === NOT_SUPPORTED_ERROR) {
        // 指定のリソースをサポートしていないエラー
        (snip)
    }
});

　getUserMediaはFirefox OSでは古いバージョンの実装となっており、W3C仕様と一部違います。Chromeなど他のブラウザと差異がある場合があるので注意して使用して下さい。詳しくは以下のURLを参照してください。

Navigator.getUserMedia

次のページ
W3C非標準のAPI

この記事は参考になりましたか？

印刷用を表示

Firefox OS搭載スマホ「Fx0」でつくろう！はじめてのFirefox OSアプリ開発連載記事一覧: Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声...

Firefox OSでCamera APIを利用したカメラアプリを作ろう～カメラ関連AP...

FirefoxブラウザとWebの技術ですぐ作れる！ HTML5で手軽にFirefox OS...

もっと読む

この記事の著者: 藪下正美（ヤブシタマサミ）

　株式会社グローバルサイバーグループマネージャ。　大阪のソフトウェア開発会社で主に携帯電話・スマートフォンのドライバからアプリまで幅広く開発に従事。　関東支社に転属後はスマートフォン・タブレット向けのアプリ開発を主に担当。　2012年終わりごろからFirefox OSに注目しコミュニティ活動に精力的に参加している。会社ブログ個人ブログ　FxOSコードリーディング主催サイト Facebookグループ

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事