WEBで端末の方位の絶対値を取得する方法

WEBで端末の方位の取得方法

初めての質問です，慣れないところありますがご容赦ください．
タイトルの通りになります．
今まで方位を使用するWEBアプリを作成しておりまして，該当部分は以下のように記述しておりました．
JSです．

JS
1window.addEventListener('deviceorientation', function (event) {
2　　event.alpha//この値をなんやかんや
3});

で，これがおかしな方向を向くようになりまして，調べたところどうも相対値（サイトによっては絶対と相対が逆のところもありますが）を取っているようです．
つまり，取得開始時点に向いている方向を0にしているようです．

これまでそのようなエラーは体感せず，また数十人のユーザが利用しておりましたがそのような報告はありませんでした．
日常的に使用している人もいます．

また，ここでいう”event.absolute”の値が”true”のときは絶対値，”false”（または”undefined”）の時は相対値になる．
GPSを利用していると”true”になる．
との情報を見つけたのですが，手元のAndroid端末（Android9）とiPhoneXR（iOS13）ではどちらも”undefined”でした．
GPSは取得できてます．

なお，iPhoneで方向を取得する権限はとれており，相対的な方位はわかります（もちろんAndroidでも）．
順番としてGPSを取得してから方位を取得するようにしても駄目でした．
また，コンパスなどを作成している色々なサイトを回りましたが，どこも同じ現象が発生しました．

さて，究極的にはiOSとAndroidの両方で方位の絶対値を取得する比較的簡単な方法があればご教授いただければ解決します．

ですが，なぜ急に絶対値が取れなくなったのか，それともこれまで取れてたと思っていただけなのか，端末が悪いのか，仕様が変わったのか，他に同じ症状の方はいるのか等々気になるところではあります．
思うところありましたら宜しくお願いいたします．

行動規範の内容に同意します

回答5件

deviceorientation イベント

deviceorientation イベントは、方位における有意な変化が生じる度に発火されるべきである。この文脈における有意な変化の定義は、実装に委ねられる — 最大な閾値として，変化 1 度°が推奨されるが。実装はページのデータが新鮮でないと予見するに足る事由があるならば、このイベントを発火してもよい。

このイベントの［ alpha, beta, gamma ］属性は、機器の方位を，地球基準系から本体基準系への座標系変換により指定するものとする。これらの基準座標系は、以下に述べるように方位するものとする：

とあるので、alpha,beta,ganmaは相対方位なのでしょう。

deviceorientationabsolute イベント

deviceorientationabsolute イベントは、絶対方位を供する — したがって，磁力計の様な追加のセンサも利用できる — ことを除いて， deviceorientation イベントに完全に相似的である。 absolute プロパティは true に設定するものとする。実装は、方位情報をまったく供せない場合は、イベントの［ alpha, beta, gamma ］属性をいずれも null に設定した上で発火するべきである。

Re: BABACODE さん

投稿2020/01/04 07:41

think49

総合スコア18162

Safari

DeviceOrientationEvent - WebKit JS | Apple Developer Documentation
safariでは相対値との事です。画面右上に API Changes:Noneと有るので、仕様は変更なしと思います。

They are defined as an offset from an arbitrary direction—typically, the direction in which the device was held when the orientation was first obtained.

Chrome

端末画面の向きと端末のモーション | Web | Google Developers
Androidは絶対値との事…ですが、手元の実機では相対値でした。

[Device orientation and motion demo]
(http://hron.fei.tuke.sk/~korecko/WT/05JsZaklady/54devMotionOrientation.html)
ページを閉じたり開いたりして実験しました。
ページを開いた瞬間の向きからの相対値っぽいですがときどきページを閉じる前の値を覚えているような動きをしました。

Generic Sensor APIのAbsoluteOrientationSensor

Absolute orientation sensor demo
上記Demoで想定の動き(端末が北を向く)のなら、Generic Sensor APIおよびGitHub - kenchris/sensor-polyfills: Polyfill for Generic Sensor APIが使えそうです。
※iOSで使用する場合、Known issuesをみておいてください。

投稿2020/01/04 14:16

編集2020/01/04 17:22

oikashinoa

総合スコア2826

自己解決

皆様ご回答ありがとうございました．

多少検証していたため時間がかかってしまいました．
結局急に使用できなくなった原因のほうは特定できませんでしたが，皆様の回答を参考に様子が見えてきましたのでご報告いたします．
＊参考のために方位取得に関する事項について質問外の内容も記載します
＊詳細は各自で調べてください
＊~~めんどくさいので~~マークダウンに準拠しませんご了承ください

対応策
端的には端末とブラウザによって処理を使い分けることになります．
勿論SSL（https）限定です．

■イベント
端末がAndroid，ブラウザがGoogle Chromeの場合は”deviceorientationabsolute”イベントを使用する．
それ以外の端末，ブラウザでは”deviceorientation”イベントを使用する．

■プロパティ（端末の向き，またはZ軸周り：α）
”webkitCompassHeading”が使用可能（基本的にiPhone）ならそれを使用，
使用可能でないなら”event.alpha”を使用する．
＊”event.alpha”は向いている方向を計算する場合”360 - event.alpha”なので注意

以上の条件で試した結果下のような結果になりました．手元の端末で行った結果なので過信しないでください．ブラウザは多分それぞれ最新版です．

・iOS（テスト機：iPhoneXR，iOS 13）
Safari：〇
Google Chrome：〇
Firefox：〇
＊ただしiOS12では権限を設定で与える必要あり，iOS13では権限を取得するコードが必要

・Android（テスト機：Android9くらい）
Google Chrome：〇
Firefox：△（基本的に相対値）
Opera：×，そもそも取得できていない？

・それ以外の端末，ブラウザ
不明

考察や詳細やら

そもそも相対値になったり絶対値になったりするのが厄介．
event.absoluteがtrueの時は絶対値らしいが，基本的にundefinedしか返ってこない．
iPhoneは”webkitCompassHeading”使っていれば安定する．
勝手な予想だが”deviceorientation”に不都合があって代わりにiPhoneは”webkitCompassHeading”を用意したのでは？？

Androidでは”deviceorientation”イベントを使用した場合，ChromeとFirefoxは相対と絶対のどちらで取得しているかわからない．
これはChromeでしか動かなかったが，”AbsoluteOrientationSensor”と”deviceorientation”イベントを同時に使用した場合必ず絶対値が取得できた．
”AbsoluteOrientationSensor”を使用した時点で磁気センサ？の値が利用できるようになっている？？
体感的な話だが，Chromeの他のタブで絶対値を使用している場合ChromeやFirefoxで絶対値を取得しやすい気がした．何かしら端末側の都合がありそう．

GPSの値が利用できると絶対値になるとの表記もあり，取得順序をGPS→方位にしてみたが効果はなかった．
また，GPSの値に方位が入っているが精度が悪く使えそうになかった．

また，”compassneedscalibration”というのがあるが，相対値だろうがずれていようが私が使用している限りでは発火しなかった．この辺は詳細は検証してない．

個人的にはGPSはすんなり渡すのになぜ方位や加速度をそんなに渋るのかわからない，，，

今回急にこの現象が発生した理由だが，OSに変更がありそうな気がしている．もしくはGPSの精度が落ちたか？？体感だがこのところGPSの精度が悪い気もする．
GoogleMapがかなり複雑な方法で方位を計算してそうなところを見ると方位の取得は結構難しいのかもしれないとは思う．

AndroidのFirefox等でも絶対値が欲しいので，他に思い当たりそうな原因や絶対値取得の方法がありましたら回答いただけますと幸いです．

投稿2020/01/11 21:21

編集2020/01/11 21:52

BABACODE

総合スコア19

alpha は端末を地面と平行にしたときにに正確な方位を得られるのではないでしょうか。
（端末を立てるように画面をみると、空を指す）

どの記事をご覧になったのか知りませんが、仕様：DeviceOrientation Event Specification （日本語訳）に基づいた記事を読みましょう。

DeviceOrientation Event についてが分かりやすく纏めてくれています。

投稿2020/01/02 08:27

AkitoshiManabe

総合スコア5432

daldalshi

2020/01/02 08:56

用法については問題ありませんし、これまでは正しく動いていた内容です

AkitoshiManabe

2020/01/02 09:10

https://qiita.com/Morlin1129/items/cfc9aaf224d09c95aa39 の「参考」としてリンクされてる箇所がヒントになるかもしれませんね。こうした記事があるということは、実装が変わった可能性も否めません。

BABACODE

2020/01/04 06:30

iOS12,13の条件にも対応済です一応サービス提供していたもので素人や調査不足の質問ではないとご理解ください文章中の iPhoneで方向を取得する権限はとれておりはその事を表してます端的にはそういった現状を既にご存知の方にお聴きしたいです

think49

2020/01/04 07:53

@daldalshi さん「仕様が変わったのか」については、AkitoshiManabeさんが紹介してくださった「仕様書」を読めば解決できるように思います。「正しく動いていた当時の仕様書」と「現在の仕様書」を読み比べてみてください。ポイントとなる部分は別回答に起こしました。 > 一応サービス提供していたもので素人や調査不足の質問ではないとご理解ください玄人の自負が強いようですが、「正しく動いていた内容」や「調査不足の質問ではない」はあなただけが観測している主観的情報になります。エビデンスなどの第三者が確認可能な事実を掲示する方がより前向きな回答が望めると思います。回答する立場からすると、素人か玄人は重要ではなく、質問者が掲示した情報さえも疑うことが正道になります。後出しじゃんけんが出来るだけなくなるように配慮してもらえると、有難いです。

行動規範の内容に同意します

GPS取得時に”position.coords.heading”で向きを取得できます．
これを使用する方法を試しましたが，精度が十分でないため解決に至りませんでした．

投稿2020/01/01 10:51

編集2020/01/01 11:23

BABACODE

総合スコア19