スマホのWebブラウザで加速度センサーを利用し、端末の向きや傾きでゲームを作ったり、ちょっとしたギミックを仕掛けることができます。スマホの加速度を利用するにはDeviceMotionEventで発火でき、傾きや方向などをX軸・Y軸・Z軸で取得できます。詳しくは以下のドキュメントにて。

• DeviceMotionEvent – Web API | MDN

ただし、iOS（iPhone）ではちょっと細工が必要だったのでメモです。HTMLは以下の通り。

<button id="btn_flg">加速度センサーを許可する</button>
<p id="txt_position"></p>

JavaScript部分は以下の通り。

const btn_flg = document.getElementById('btn_flg'); //iOS専用許可ボタン
const txt_position = document.getElementById('txt_position'); //座標表示用
let x,y,z;
const isMotionEvent = () => {
 DeviceMotionEvent.requestPermission().then((res) => {
  if(res === 'granted'){
   //許可した時
   alert('スマホを動かしてね');
  }else{
   //許可しなかった時
   alert('🥺');
  }
 }).catch((e) => {
  alert(e);
 });
}
const motionEvent = (e) => {
  x = Math.floor(e.accelerationIncludingGravity.x);
  y = Math.floor(e.accelerationIncludingGravity.y);
  z = Math.floor(e.accelerationIncludingGravity.z);
  //それぞれの座標を表示させる
  txt_position.textContent=`X:${x} Y:${y} Z:${z}`;
}
if(window.DeviceMotionEvent){
 if(DeviceMotionEvent.requestPermission){
  //iOS専用　センサー取得の許可ボタン
  btn_flg.addEventListener('click',() => {
   isMotionEvent();
  });
 }else{
  btn_flg.style.display = 'none';
 }
 window.addEventListener('devicemotion', motionEvent);
}

iOS13以降はユーザの許可無く加速度センサーの利用ができず、予めセンサーの利用の承諾をユーザに得なくてはなりません。その許可を行うダイアログを表示させるためにボタンを“タップさせて”、端末のセンサーの利用を許可してもらいます。この時使う関数がDeviceMotionEvent.requestPermissionの部分です。必ずユーザーがタップしてダイアログを表示させる必要があります。

DeviceMotionEvent.requestPermission().then((res) => {
 if(res === 'granted'){
  //許可した時
 }else{
  //許可しなかった時
 }
}).catch((e) => {
 //エラー
 console.log(e);
});

現状のAndroidOSのブラウザではそのまま加速度センサーが使えました。以下は加速度センサーのサンプル。

• スマホを振ってゲージを満タンにさせる

スマホを降るとプログレスバーのゲージが貯まり、ずんだもんの顔が赤くなります。なお、先述のようにiOSでは先に[Shake Hand!]のボタンを押下してください。2025年現在で最新のiOSのSafari及びAndroidのGoogleChromeで確認済み。

おしまい♥