この記事はtomowarkar ひとりAdvent Calendar 2019の15日目の記事です。
はじめに
HTML5を使った3分で作れるクソアプリシリーズ。
Webブラウザから取れる情報ってめちゃくそあるんやで!!
デモページ(スマホで開いてね)
AndroidのChromeでの動作は確認しているよ
コード
デバイスの方向(加速度)を取得して閾値を超えたらバイブレーションをさせるってだけ。
改良すれば振ったか振ってないかの判定もできました(判定ガバガバだったけど)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0" />
<title></title>
<script>
window.addEventListener("devicemotion", e => {
x = e.accelerationIncludingGravity.x;
y = e.accelerationIncludingGravity.y;
z = e.accelerationIncludingGravity.z;
if (z > 9) {
navigator.vibrate(30);
}
let result = document.getElementById("result");
result.innerHTML =
"X：" + Math.round(x * 10) / 10 + "<br>" +
"Y：" + Math.round(y * 10) / 10 + "<br>" +
"Z：" + Math.round(z * 10) / 10 + "<br>"
}, true);
</script>
</head>
<body>
<div id="result">vibration</div>
</body>
</html>
おわりに
以上明日も頑張ります！！
tomowarkar ひとりAdvent Calendar Advent Calendar 2019