[Firefox OS][イベント情報]中国Firefox OS勉強会2ndに登壇します

[Firefox OS][イベント情報]中国Firefox OS勉強会2ndに登壇します

 藪下@2課のガジェオタです。

 中国Firefox OS勉強会2ndに登壇します。
 今回は1stのメンバに加えてHTML5jエンプラ部で活躍していたり、FxOSコードリーディングをはじめいろいろなFirefox OS関連勉強会でスタッフとしてお手伝いいただいている酒巻さんも登壇されます。

 今回のイベントから弊社では正式にFirefox OS関連勉強会の支援を行うことになりました。
 いくつか条件がありますが、会場代や機材のレンタル費のスポンサード、弊社メンバの登壇などで協力させていただきます。詳細はお気軽に以下のフォームでお問い合わせください。

お名前 (必須)

メールアドレス (必須)

開催イベント名(未定の場合未定とご記入ください)

日時(未定の場合未定とご記入ください)

場所(未定の場合地域をご記入ください)

開催概要や要望など

captcha

[Firefox OS][WebAPI]近接センサの使い方

 藪下@薄い本とか勉強会資料とか書き物ばっかりしてる気がする。です。

 前回は環境光センサについて書きました。今回は近接センサについて見ていきます。
 環境光センサの時に物体からの相対位置を計算できるかもしれないと書きましたが、その意味では今回のAPIが本来の大本命です。後述する通り残念な動きになりますが。。。

近接センサ

 近接センサはデバイスと他の物体がどれほど近づいたかを検知するセンサです。
携帯電話では通話時に顔とデバイスの近さを検出して消灯することで省電力化する用途に使われます。
 Firefox OSでは近接センサの値を取得することもできます。近接センサの値を取得するにはuserproximityあるいはdeviceproximityイベントのハンドラを登録します。

イベントの登録

 近接センサAPIはwindowオブジェクトに属します。なのでイベントハンドラをaddEventListenerで登録する場合はwindow.addEventListenerで、onハンドルプロパティに代入して登録する場合はwindow.on<イベント名>を使用します。

 近接センサAPIには二つのイベントが存在します。同じ近接センサからの値に対して動くイベントですが、それぞれ取得できる値が違います。

userproximity

  • イベント名:userproximity

 addEventListenerでのイベント登録は次の通りです。

  window.addEventListener('userproximity', userHandler);

 onイベントプロパティでのイベント登録は次の通りです。

  window.onuserproximity = userHandler;

イベントハンドラの書式

 userproximityで取得する近接センサの値はevent.nearで取得できます。
 event.nearはすぐ近くに物体があることを検知した場合true、そうでない場合にfalseの値を取ります。

function userHandler(event) {
  var near = event.near;
  (snip)
}

サンプル

var interval;

function startVibrate() {
  interval = setInterval(() => {
    navigator.vibrate([200, 200]);
  }, 400);
}

function userHandler(event) {
  if (event.near) {
    // 近かったらバイブする
    startVibrate();
  } else {
    // 近くなかったらバイブ止める
    navigator.vibrate(0);
    if (interval) {
      clearInterval(interval);
    }
  }
}

 userproximityのサンプルでは近接状態を検知するとバイブレータを振動させています。
 バイブレータAPIの仕様で振動し続けさせることができないのでsetIntervalで振動し続けさせています。バイブレータAPIについてはいずれ記事にします。
 近接状態でなくなったらバイブレータを停止させます。

deviceproximity

  • イベント名:deviceproximity

 deviceproximityのaddEventListenerでのイベント登録は次の通りです。

  window.addEventListener('deviceproximity', deviceHandler);

 deviceproximityのonイベントプロパティでのイベント登録は次の通りです。

  window.ondeviceproximity = deviceHandler;

イベントハンドラの書式

function deviceHandler(event) {
  var min = event.min;
  var max = event.max;
  var value = event.value;
  @<i>{(snip)}
}
  • event.value
    • event.valueの値はセンサで検出した物体とのセンチメートル単位の距離を表します
  • event.min
    • event.minの値は検知できる最小のセンチメートル単位の距離を表します
  • event.max
    • event.maxの値は検知できる最大のセンチメートル単位の距離を表します

サンプル

function deviceHandler(event) {
  var _ = document.getElementById.bind(document);

  var max = _('max_value');
  var min = _('min_value');
  var val = _('val_value');

  max.textContent = event.max;
  min.textContent = event.min;
  val.textContent = event.value;
}

 deviceproximityのサンプルではセンサの値が変化したら画面に表示しています。
 確認に使ったkeonでは10か0しか返りませんでしたが、もっと遠くまで検知できて段階的に値が変化する端末なら値に応じて目のつむりかたが変わるキス顔アプリとか作れそうですね。
 キス顔アプリ好きすぎやねん。。。

まとめ

 今回紹介した近接センサAPIも環境光センサと同様にセンサイベントに対してイベントハンドラを設定して待ち受ける仕組みでした。
 近接センサの使いどころもやっぱり輝度調整とかなんですが、環境光センサの記事で書いた通りcertifiedなのでちょっと面白くないところですね。
 よくプッシュアップとかシットアップのアプリでスマホの画面にタッチさせるものがありますが、タッチまで行くのは結構物理的に大変なことが多い(スマホを置く場所が床とか膝の上とかになる)ので、近接センサで一定の近さになったら成立にするとかに使えるかもしれません。これも面白いことを思いついたらぜひ作って教えてくださいね。

[Firefox OS][WebAPI]環境光センサの使い方

 藪下@ワールドカップでだれてからblog停滞中です。

 個人的な活動でいくつかのAPIを使ってみる機会があったのでしばらくAPIを使ってみたシリーズやります。
 中身を読むのが本来の藪下の興味なので、一通り使い方の記事を書いたら気になるAPIは中身も読んでいきます。

 今回は環境光センサを使ってみます。

環境光センサ

 環境光センサはデバイス周辺の照度を検出するセンサです。
 携帯電話では環境の明るさに応じて液晶パネルの明るさを変えて見やすく省電力にする用途に使われます。
 環境光センサAPIはその名の通り環境光センサの値を取得します。
 環境光センサの値を取得するにはdevicelightイベントにハンドラを登録します。

イベントの登録

 環境光センサAPIはwindowオブジェクトに属します。なので

  • イベントハンドラをaddEventListenerで登録する場合
    • window.addEventListener
    • イベント名:devicelight
  • ondevicelightに代入して登録する場合
    • window.ondevicelightを使用します。

 addEventListenerでのイベント登録は次の通りです。

  window.addEventListener('devicelight', handler);

 ondevicelightのイベント登録は次の通りです。

  window.ondevicelight = handler;

イベントハンドラの書式

 環境光センサAPIはセンサで検出したルクス単位の明るさをunrestrected doubleで返します。
 環境光センサの値はevent.valueで取得できます。

  function handler(event) {
    var light = event.value; // ambient light sensor value
    @<i>{(snip)}
  }

サンプル

  • [https://github.com/aoitan/C86_samples/tree/master/devicelight](https://github.com/aoitan/C86_samples/tree/master/devicelight 環境光センサのサンプル}
window.addEventListener('devicelight', function(event) {
  console.log('環境光センサの値は' + event.value + 'です');
  var brightness = '';
  var l10n = navigator.mozL10n;
  if (event.value > 35000) {
    brightness = l10n.get('SHINE');
  } else if (event.value > 10000) {
    brightness = l10n.get('CLOUDY');
  } else if (event.value > 1000) {
  } else if (event.value > 200) {
    brightness = l10n.get('ROOM');
  } else if (event.value > 100) {
    brightness = l10n.get('NIGHT');
  } else if (event.value > 10) {
    brightness = l10n.get('CANDLE');
  } else {
    brightness = l10n.get('MOONLIGHT');
  }
  var light_value = document.getElementById('light_value');
  light_value.innerHTML = event.value + '(' + brightness + ')';
});

 上記コードでは環境光センサの値に応じてどのぐらい明るいかの文字列を表示しています。
 明るさを表す文字列はl10n.getでロケールに合わせた文字列を取得しています。
 l10n.get('SHINE')の場合英語 (アメリカ) ロケールだと ‘shine’ が、日本語ロケールだと ‘晴天’ が表示される要領です。

まとめ

 環境光センサAPIはFxOSのセンサAPIに多く見られるイベントリスナを登録してデバイスイベントを待つスタイルのAPIでした。
 このAPIの使いどころはやっぱり輝度調整とかになるのかなと思うのですが、ディスプレイの制御がcertifiedなのでそこはいまいち面白味ないです。
 環境光センサAPIである程度物体の近さを計算する補助になるので、やりようによっては物体からの相対位置を計算することができるかもしれません。
 たとえば顔を近づけると目をつぶったりほほを赤らめてくれるようなキス顔アプリとかも頑張れば作れるかもしれませんね。面白いことを思いついたらぜひ作った教えてくださいね。