中国Firefox OS勉強会で使った資料

1. 組み込み屋さんから見たFirefox OS
株式会社グローバルサイバーグループ
マネージャ
藪下正美

2. はじめに
• 今回は20分でざっとFirefox OSでのセンサ類の使い方を見ていきます
• 時間がないので詳しい話はしません
• 全部MDNとgaiaのソースコードから収集できる情報なので詳しいことは調べま
しょう
– https://developer.mozilla.org/
– https://github.com/mozilla-b2g/gaia/
• 今回の話のほとんどはCodezineの記事のおさらいなのであとで見てね！
– http://codezine.jp/article/detail/8540
• 組み込み屋さんなのでもっと中身に興味があります！ という方は大雑把な
構造のお話やってるので以前のプレゼン見てください
– http://www.gcg.bz/labo_blog/?p=904
– http://www.slideshare.net/aoitan/firefox-os-50967714

3. 自己紹介
• 藪下正美
• 所属
– 株式会社グローバルサイバーグループ
– Firefox OSコミュニティ
– FxOSコードリーディング
– くらぶWoT

4. どんな人
• スマホとかアプリとか作ってる人
• コンピュータ科学もちょっとやってる人
• FxOSコードリーディングいいだしっぺ
• Firefo OS センサで検索すると上のほうに出るタイプの人
– https://www.google.co.jp/search?q=Firefox+OS+%E3%82%BB%E3%83%B3%E3%82%B5
&ie=utf-8&oe=utf-8&hl=ja

5. 会社紹介
• 株式会社グローバルサイバーグループ
– http://gcg.bz
• どんな会社
– 組み込み系と業務系をやってる大阪の会社
– 大阪東京広島あたりでお仕事してます
• Firefox OSとのかかわり
– 従業員がFirefox OS端末の開発に関わったりFirefox OSの技術を追いかけてブログ書
いたり

6. コミュニティ紹介
• Firefox OSコミュニティ
– 言わずと知れたFirefox OSのユーザコミュニティ
– 各地で勉強会を開催している人はたいていいる
– http://fxos.org

7. NoirさんやUemmra3さんも
• FxOSコードリーディング
– 月に一回ぐらいMozilla Japanオフィスの片隅でわいわいソースコードを読んでいる人
たちの集まり
– FxOSのソースコードに興味がある人をつなぎたい。交流したい
– 本拠地 → https://www.facebook.com/groups/fxos.code.reading/
– 看板 → http://reading.fxos.org/
– 活動が垣間見れるところ → https://github.com/FxOS-Code-Reading-Group

8. 今日のアジェンダ
• Firefox OSで触れるセンサ触れないセンサ
• グローバルオブジェクトとイベントリスナで触るセンサ
– 近接センサ
– 環境光センサ
– デバイス方向
• 機能別のオブジェクトとイベントリスナで触るセンサ
– バッテリー
– 地理位置
– スクリーン方向
• 機能別のオブジェクトで触るセンサ
– getUserMedia
– カメラ

9. Firefox OSで触れるセンサ触れないセンサ
• Firefox OSにはアプリの権限或いはAPIの権限がいくつかあります
• センサーを触るAPIには権限によってユーザアプリで触れるものと触れないも
のがあります
– 今回の基準はFx0です
– Fx0より後のバージョンだと触れるものもあります

10. Firefox OSで触れるセンサ触れないセンサ
• 触れるセンサ
– 近接センサ
– 環境光センサ
– デバイス方向
– バッテリー
– 地理位置
– スクリーン方向
– getUserMedia
– カメラ
• (Mozillaかキャリアかメーカしか)触れないセンサ
– NFC v2.2からPrivileged
– Bluetooth v2.5かv3.0からPrivilegedの予定
– Fx0から触れないので今回は解説しません

11. windowオブジェクトと
イベントリスナで触るセンサ
• Firefox OSでセンサを触るAPIにはいくつか類型的な使い方があります
• まずは比較的簡単なwindowオブジェクトに対するイベントリスナ登録で使え
るものを紹介します

12. 近接センサ
• 近接センサはたいていの端末でインカメラの横あたりについてるセンサです
• 物体が近くにすると反応するので電話アプリなどが顔の接近で消灯するなど
省電力用途で使うことが多いです
• Firefox OSでは二種類のイベントで近接センサの値を参照できます
– 近接検知のみを行うuserproximity
– ごく短距離での測距を行うdeviceproximity

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

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

15. 環境光センサ
• 環境光センサは近接センサと同じく多くの端末ではインカメラの近くについて
いるセンサです
• 環境光センサは周囲の明るさをルクス単位で測定しディスプレイの輝度を調
節するなどの用途で使用されます
• Firefox OSではdevicelightというイベントで値を参照できます

16. devicelight
window.addEventListener('devicelight', handler);
function handler(event) {
var light = event.value; // 環境光センサーの値(ルクス)
(snip)
}

17. デバイス方向
• Firefox OSは加速度センサも搭載してます
• デバイスの方向や姿勢も検知可能です
• Firefox OSでは加速度センサに基づく三種類のイベントがあります
– ここではより単純なもの二つを扱います
– deviceorientation
– devicemotion

18. deviceorientation
• デバイスの姿勢の変化は地軸の方向とデバイスの軸の方向が何度ずれてい
るかによってあらわされます

19. 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)
});

20. devicemotion
• 加速度そのものを得たい場合はdevicemotionイベントで取得できます
• 重力加速度を含んだ値、重力加速度を含まない値、姿勢の値を取得できま
す

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

22. 機能別のオブジェクトとイベントリスナで触る
センサ
• Firefox OSにはwindowオブジェクトに対するイベントリスナ登録で触れるセン
サのほかに事前定義されたオブジェクトにイベントを登録して値を得るタイプ
のAPIがあります
• 次ページから機能別のオブジェクトを使うAPIを見ていきましょう

23. バッテリー
• battery APIは電池の残量や充電状態を監視できます
• すべての端末に存在するしほぼすべてのスマホでは電池残量をどこかしらに
ピクト表示していますね
• Firefox OS (というよりブラウザ) ではnavigatorオブジェクトのbatteryプロパティ
にイベントリスナを登録して値を参照します
• battery APIには参照できる値が四つあります
– 電池残量
– 充電状態
– 満充電までの時間
– 枯渇までの時間

24. battery
var battery = navigator.battery || navigator.mozBattery;
battery.addEventListener("levelchange", updateBatteryStatus);
battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("chargingtimechange", updateBatteryStatus);
battery.addEventListener("dischargingtimechange", updateBatteryStatus);

25. battery
function updateBatteryStatus() {
var level = battery.level;
var charging = battery.charging;
var chargingTime = battery.chargingTime;
var dischargingTime = battery.dischargingTime;
(snip)
}

26. 地理位置
• GPSの値はおなじみの地理位置情報APIで取得します
• Firefox OSだけでなくブラウザでも使えるので触ってみたことがある人は多い
かもしれません
• 地理位置情報APIでは現在位置の取得、現在位置の監視を行えます

27. geolocationのマニフェスト
"permissions": {
"geolocation": {}
},

28. geolocation
• 地理位置情報APIは```navigator.geolocation```のメソッドにイベントハンドラを
渡す形で使用します
– ここではよく使うgetCurrentPositionとwatchPositionのみ見ていきます

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

30. スクリーン方向
• Firefox OSには加速度センサに基づいたイベントは三つあります
• deviceorientationとdevicemotionはすでに説明しましたがこのほかにスクリー
ンの方向を扱うイベントがあります
• スクリーン方向はwindow.screenオブジェクトのorientationchangeイベントで受
け取ることができます
– さらにスクリーン方向をロックするメソッドが存在します

31. orientationchange
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)
}
});

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

33. 機能別のオブジェクトで触るセンサ
• ここまでイベントリスナを登録して値をもらうだけのAPIを見てきました
• センサの値をもらうだけでなくセンサへの設定やアクションを行うAPIも存在し
ます
• ここからは機能別のオブジェクトでのセンサ制御の方法を見ていきます

34. getUserMedia
• getUserMediaはWebRTCの中心的な機能です
• カメラAPIほど細かい制御はできないもののカメラにアクセスできます
• WebAudio APIほど細かい制御はできないもののマイクにアクセスできます

35. getUserMediaのマニフェスト
• Firefox OSの場合getUserMediaを使うにはパーミッションを指定する必要があ
ります

36. getUserMediaのマニフェスト
"permissions": {
"audio-capture": {},
"video-capture": {}
}

37. メディアストリームの取得
• getUserMediaに使用したいリソースを指定することでそのストリームを取得す
ることができます。

38. メディアストリームの取得
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)
}
});

39. カメラ
• カメラAPIはgetUserMediaではできないカメラデバイスに対する細やかな制御
が可能です
• 静止画動画の撮影だけでなくセンサやASICで行える画像処理 (ホワイトバラン
ス調整など) を制御することができます

40. カメラのマニフェスト
• カメラAPIを使う場合パーミッションの設定が必要になります

41. カメラのマニフェスト
"permissions": {
"camera": {
"description": "Required for accessing cameras on the device."
}
}

42. カメラAPI
• カメラAPIの使用は少し煩雑です
• ざっと以下の流れで初期化します
– navigator.mozCamerasからCameraManagerを取得
– CameraManagerからmozCameraオブジェクトを取得、コンフィグ、セットアップ
– mozCameraオブジェクトに対していくつかのイベントハンドラを登録
• MDNに記載されているのは古いデザインのAPIなので注意

43. カメラAPI
var manager = navigator.mozCameras;
var opstion = {
mode: 'picture', // モード
recorderProfile: 'jpg', // 保存形式
previewSize: {
width: previewWidth,
height: previewHeight
},
pictureSize: {
width: 1080, // フルHD
height: 1920 // フルHD
}
};

44. カメラAPI
// カメラ使用のリクエスト
var promise = manager.getCamera('front', option);
promise.then((cameraData) => {
// カメラのリクエストが成功した
(snip)
}, (error) => {
// カメラのリクエストが失敗した
(snip)
});

45. オートフォーカスと撮影
var focus = cameraData.camera.autoFocus();
focus.then((success) => {
return cameraData.camera.takePicture({pictureSize: { width: 1080, height:
1920 }});
}).then((picture) => {
(snip)
});

46. まとめ
• センサのほとんどは値を見るだけなので大体イベントリスナで値がプッシュさ
れるのを待つようになっている
• 一部のアクション可能なセンサについては機能別のオブジェクトが用意され
ているのでその機能のオブジェクトのメソッドを介して操作する
• 困ったらMDNでリファレンスを探そう。根気よく
– MDNでわからなければコミュニティに質問！
– http://fxos.org

47. おしまい
• ご清聴ありがとうございました