Device Orientation API というものを JavaScript から触ることで、デバイスの傾きを取得することができる。
デスクトップ PC だとかノート PC だとか、あるいはタブレットとかそのほかモロモロの端末でも加速度センサーがサポートしていれば Chrome なり Firefox なりブラウザがよしなに対応してくれているはず。
Detecting device orientation - Web API reference | MDN
Can I use… Support tables for HTML5 CSS3 etc
ちょっと気になったのだけど W3C の TR を見たら、メンテしないぜ！的なことが書いてあって！？！？な感じ。
DeviceOrientation Event Specification
加えて Geolocation Working Group なのもちょっと不思議な気がしたのだけど、これはきっと、デバイスの傾きを取るというのが本題ではなくて、方角や座標系をいい感じにとるための API なり仕様なりを定めようとしていたのかもしれない、という推測。
話を戻して W3C の仕様は少し怪しいものの Can I Use を見る限りはなんとなく幅広いブラウザで一部サポートがされている。でもって MDN を見ると使い方が書いてある。
ざっくりとはこういう形で値を取得することができる。 ようは傾きに応じてイベントがバシバシ発行されるからそれを各自拾ってくれスタイル。
window.addEventListener('deviceorientation', function(event) {
console.log({
beta: event.beta // x 軸
gamma: event.gamma // y 軸
alpha: event.alpha // z 軸
})
});
これをお試すべく、ちょっと計算が間違っている…というか 3 次元の傾きを 2 次元に投影するっていうのがよくわかんないので 若干適当になったものの、ごみばこいんのトップページをスマホで開いたときに傾きを使って重力をコントロールできるようにした。
モバイル端末からお試しあれ。
余談になるけど Chrome の DevTools からセンサーのエミュレーションもできることに気づいた。 More Tools から Sensors を開く。
こういうものが見えるようになるので Orientation のところでドロップダウンリストから選んだり、スマホの形状をしているものをドラッグしてぐるぐる回して 遊べる 回転を調整したものを Chrome がエミュレーションしてくれる。
ちなみにちなみに、すでにページを開いている状態からこの Sensors のエミュレーションをしようとすると以下のような文言が出てくる。
A reload is required so that the existing AbsoluteOrientationSensor and RelativeOrientationSensor objects on this page use the overridden values that have been provided. Close the inspector and reload again to return to the normal behavior.
これはそのままページをリロードすれば解決する。 冷静に考えて動的にデバイスのエミュレーションを差し込むってすげー大変だと思うよ。