お正月コンテンツのネタに使える？スマホの加速度センサーで遊んでみました

JavaScript

2017.11.24

みなさんごきげんよう。yamashitaです。
最近トピックは特にないですが、アニメのゴジラを見てない人はこの記事を読み終わったらすぐ見にいってください。

※記事の内容はゴジラと一切関係ございません

さて今回は加速度の取得方法についてです。

スマホについている加速度センサーの値って使えるのかな？
位置情報とか傾きはどこでも使ってるけどあまり使われてないかなと思い
まさか取得できないなんてことは・・・と思ったら簡単に取得できました。

早速取得する方法の紹介

まずは必要なjsを読み込みます

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>

読み込んだ後は"devicemotion"イベントを取得するだけです。

<script>
    // 加速度イベント
    window.addEventListener("devicemotion", accelerationEvent);

    // イベント発生
    function accelerationEvent(event) {
        // x軸
        var x = event.acceleration.x;
        // y軸
        var y = event.acceleration.y;
        // z軸
        var z = event.acceleration.z;

                // 取得した値を表示
        xDir = document.getElementById("xDir");
        yDir = document.getElementById("yDir");
        zDir = document.getElementById("zDir");
        xDir.innerHTML = 'x=' + x;
        yDir.innerHTML = 'y=' + y;
        zDir.innerHTML = 'z=' + z;
    }
</script>

表示部分はとりあえず数値だけ出すだけにしてます。

<div style="text-align:center">
加速度取得中</br>
<p id="xDir"></p>
<p id="yDir"></p>
<p id="zDir"></p>
</div>

しかしこれだけだと問題がありました。

実際の映像をご覧いただこう

文明の発達ゆえかセンサーが常に動きを察知してイベントが動き続けてます。
映画とかで出てきそうなハッキングされてバグったパソコンみたいですね。

ということで取得した後に一定以上の加速度が出ないとイベントを通らないようにしました。

// イベント発生
function accelerationEvent(event) {
    // x軸
    var x = event.acceleration.x;
    // y軸
    var y = event.acceleration.y;
    // z軸
    var z = event.acceleration.z;

    // 値が一定以下の時は表示しないようにする
    if (!(-1 < x && x < 1) || !(-1 < y && y < 1) || !(-1 < z && z < 1)) {
        // 取得した値を表示
        xDir = document.getElementById("xDir");
        yDir = document.getElementById("yDir");
        zDir = document.getElementById("zDir");
        xDir.innerHTML = 'x=' + x;
        yDir.innerHTML = 'y=' + y;
        zDir.innerHTML = 'z=' + z;
    }
}

これで強く本体を傾けたり振ったりする時だけイベントを通って表示が変わるようになりました。
これからいろいろ考えて何か作りたかったのですが、常に重力加速度が下に向いてるとかなんとか3方向合わせた計算とか
学生時代物理を投げ捨てた私には至難の業だったのでここまでにします。
使い道を考えてみましたが、振って何かするミニゲームとかそういう系のコンテンツに使えそうですね。