スマホで使えるWeb水平器｜JavaScriptで傾きをリアルタイム表示

スマホで使えるWeb水平器｜JavaScriptで傾きをリアルタイム表示

スマートフォンを使って水平・傾きの確認ができるWebツールです。
JavaScriptのDeviceOrientationEventを利用して、スマホのセンサーから取得したx軸・y軸・z軸の角度をリアルタイムに表示します。
「水平器 web」「水準器 スマホ」「傾きセンサー」などをお探しの方におすすめの、シンプルで軽量なブラウザツールです。

<div id="orientation"></div>

<script>
  window.addEventListener("load",function(){
  window.addEventListener("deviceorientation", function(e){
    let a=e.absolute;//方位が地球座標フレームかデバイス任意フレームか
    let z=e.alpha;//z軸 0～360
    let x=e.beta; //x軸 -180～180
    let y=e.gamma;//y軸 -90～90
    document.getElementById("orientation").innerHTML=
      " alpha(z軸):"+z.toFixed(3)+"<br>"+
      "  beta(x軸):"+x.toFixed(3)+"<br>"+
      " gamma(y軸):"+y.toFixed(3);
    });
  });
</script>