【iPhoneの加速度センサのデータを取得】javascript×firebaseでやってみた

iPhoneの加速度センサのデータの取得

iPhoneの加速度センサのデータの取得

こんにちは、ゆきぽんずです。

今日は研究の下準備としてjavascript、firebaseを使って、iPhoneの加速度センサの値をiPhone自体に表示させるプログラムを作りました。

firebaseの使い方

firebase自体の使い方については、こちらの記事が詳しく説明しているのでこちらを参照してください。

Firebaseの始め方 - Qiita

＊こちらの記事で作成するhtmlファイルを今後も使うので、必ずfirebaseの初期設定を行ってください。

javascriptを使ってiPhoneの加速度センサの値をとるようなプログラムはたくさんありましたが、肝心のパソコンとiPhoneとの連携の方法がものすごく曖昧な記事が多かったような気がします。

そこについてもしっかり説明しているので、興味があれば覗いていってください。

実行結果

とりあえず実際に動いている結果を見てください。

動作結果

iPhoneの加速度センサのデータを無事に取得することが出来ました。

firebase自体の使い方を紹介している記事で作成したhtmlファイルを以下のように書き換えてください。

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>加速度の値を得る</title>
</head>

<body>
<div id="txt">ここにデータを表示</div>             <!-- データを表示するdiv要素 -->

<script>
var aX = 0, aY = 0, aZ = 0;                     // 加速度の値を入れる変数を3個用意

// 加速度センサの値が変化したら実行される devicemotion イベント
window.addEventListener("devicemotion", (dat) => {
    aX = dat.acceleration.x;    // x軸の重力加速度（Android と iOSでは正負が逆）
    aY = dat.acceleration.y;    // y軸の重力加速度（Android と iOSでは正負が逆）
    aZ = dat.acceleration.z;    // z軸の重力加速度（Android と iOSでは正負が逆）
});

// 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定
var timer = window.setInterval(() => {
    displayData();      // displayData 関数を実行
}, 33); // 33msごとに（1秒間に約30回）

// データを表示する displayData 関数
function displayData() {
    var txt = document.getElementById("txt");   // データを表示するdiv要素の取得
    txt.innerHTML = "x: " + aX + "<br>"         // x軸の値
                  + "y: " + aY + "<br>"         // y軸の値
                  + "z: " + aZ;                 // z軸の値
}
</script>

</body>
</html>