[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なのでちょっと面白くないところですね。
 よくプッシュアップとかシットアップのアプリでスマホの画面にタッチさせるものがありますが、タッチまで行くのは結構物理的に大変なことが多い(スマホを置く場所が床とか膝の上とかになる)ので、近接センサで一定の近さになったら成立にするとかに使えるかもしれません。これも面白いことを思いついたらぜひ作って教えてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">