DeviceOrientationEvent を用いてデバイスの方向を検出する

記事タイトルとURLをコピーする

こんにちは、技術1課の加藤です。
今年の1 〜 3月の間、ANGEL Dojo という AWS が主催する若手エンジニア向けハッカソンイベントに参加し、Ossu! という Webアプリを作成しました。
(詳しくはこちら: 新卒1, 2年目の若手エンジニアがANGEL Dojo に参加。 Invent and Simplify 賞を受賞!)

このアプリでは方位磁石のような要素を表示するために、デバイスの向きを取得する必要がありました。
そんなことWebアプリでできるのか...? と思っていたんですが、 ちゃんとWeb API が用意されているんですね。すごい。

ということで今回は、デバイスの方向を検出する Web API、DeviceOrientationEvent について解説していきます。

DeviceOrientationEvent とは

デバイスの方向の情報を制御するイベントです。
方向がかわるたびにイベントが発火され、新しく更新された値を教えてくれます。

使いたい時は Eventリスナーを登録して使うことになります。

window.addEventListener("deviceorientation", () => {
  // 処理
});

なお 2020/04/09 時点で、DeviceOrientationEvent は実験的な機能となっています。利用する際は、ブラウザが対応しているのか確認するようにしましょう。
デバイスの方向の検出 - Web API | MDN

DeviceOrientationEvent で取得する値

デバイスは 3次元で扱うものですので、方向の情報は3次元の動きを表現する必要があります。このため、DeviceOrientationEvent では 3つの値を教えてくれます。

  • alpha (上端部方向)
  • beta (右方向)
  • gamma (空方向)

デバイスを地面に置いた状態を想像してください。
この時、デバイスの中心から上端部に向かう方向が alpha、
右に向かう方向が beta、デバイスの画面からまっすぐ空に向かう方向が gamma です。

デバイスを縦向きに回転させるとalpha値が変わります。
横向きに回転させるとbeta値が変わり、
コマのように回転させるとgamma値がかわります。

これらの値を利用することで、デバイスがどういうの方向を向いているのか、検知することができます。

言葉だけだと伝わりにくいので、図も貼っておきますね。
回転について - 方向および動きとして示されるデータ | MDN

DeviceOrientationEvent を利用する際に気をつけること

イベントリスナーを登録するだけなので利用は比較的簡単なのですが、気をつけないといけないことがあります。それが iOS の制限です。

iOS では 12.2 から、Safari の「モーションと画面の向きのアクセス」を許可してあげないと DeviceOrientation を含むデバイスの状態に関するイベントを取得することができなくなりました。

そしてさらに iOS 13 からは、取得時にユーザーから許可を受け取ることが必要になりました。
DeviceOrientationEvent.requestPermission 関数を動かして許可を求めるわけですが、この許可を求めるのにもちょこっと工夫が必要です。

というのも、この requestPermission 関数は、「ページを開いた瞬間」に動かすことができず、「ユーザーがボタンを押すなど明示的に操作を行った場合にのみ」実行することが可能なのです。

このため、以下のような記述をする必要があります。

<!-- 許可を求めるボタン -->
<button onclick="handleOnClick">許可</button>
...
<script>
function handleOnClick() {
  // 許可を求める
  DeviceOrientationEvent.requestPermission().then(function () {
    // イベントリスナーを登録
    window.addEventListener("deviceorientation", function (e) {
      // 処理
      console.log(e);
    }
  }).catch(function (e) { console.log(e) });
}
</script>

ちょっと面倒くさいですね。
そして現状、以下の3つの環境が混在しているため、これらを意識してコーディングをしてやる必要があります。

  • iOS 12.1 以前 / Android: 許可の必要なし
  • iOS 12.2 以降 〜 13未満: Safari の設定を行う必要あり
  • iOS 13 以降: ユーザーアクションにより許可を行う必要あり

ハマりやすいので覚えておきましょう。

おまけ

冒頭でチラリと話した ANGEL Dojo が、第二期を募集しているようです。

「日本を元気にする」APN Next Generation Engineer Leaders(ANGEL) Dojo Season2の申し込みスタート!

AWS の全面バックアップのもと開発の経験を積める非常に有意義な会です。
APN パートナー企業所属の IT 経験 3年目までなら応募可能なので、興味ある方、ぜひぜひ挑戦してみてください!