JavaScriptを使うとスマートフォンやタブレットの傾きを検出できます。うまく利用するとゲームなどにも応用できると思います。
deviceorientationイベント
スマートフォンやタブレットの傾きが変化したときにはdeviceorientationイベントが発生するので、これを補足します。イベント変数eを通してデバイスの傾きを取得できます。
|
1 2 3 4 5 6 |
// 加速度センサーイベント処理 window.addEventListener("deviceorientation", function(e){ let alpha = e.alpha; // z軸を中心にしたデバイスの動き。値は0～360 let beta = e.beta; // x軸を中心にしたデバイスの動き。値は-180～180 let gamma = e.gamma; // y軸を中心にしたデバイスの動き。値は-90～90 }, false); |
これで端末の傾きを取得して表示させることができます。小数点以下長々と表示されても見づらいだけなので、四捨五入して0.1の位までしか表示されないようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptでスマートフォンの傾きを検出する</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id = "result"></div> <script> window.onload = () => { let $result = document.getElementById("result"); window.addEventListener("deviceorientation", (e) => { let x = e.gamma; let y = e.beta; let z = e.alpha; $result.innerHTML = `X: ${roundOff(x)}<br>Y: ${roundOff(y)}<br>Z: ${roundOff(z)}`; }); // PCでは使用不可なのでその旨を表示する // ユーザーエージェントから端末がスマホかタブレットかPCかを判断する let ut = navigator.userAgent; let isSmartPhon = false; let isTablet = false; if(ut.indexOf('iPhone') > 0 || ut.indexOf('iPod') > 0 || ut.indexOf('Android') > 0 && ut.indexOf('Mobile') > 0) isSmartPhon = true; else if(ut.indexOf('iPad') > 0 || ut.indexOf('Android') > 0) isTablet = true; if(!isSmartPhon && !isTablet) $result.innerHTML = 'スマートフォンまたはタブレットでアクセスしてください'; } // 小数点以下第2位で四捨五入する function roundOff(value){ return Math.round(value * 10) / 10; } </script> </body> </html> |
スマホを傾けて操作するゲーム？
これを使えばスマホを傾けて操作するゲームをつくることができそうです。しかしこのままではスマホを横に傾けたときに画面の自動回転が起きてしまいます。JavaScriptでこれを抑止する方法はないようなのでスマホの設定で画面の自動回転をOFFにするようにしてもらうしかないようです。
あまり操作性はよくありませんが、かつて作ったゲームをスマホの傾きのみで操作するものに作りかえてみました。PCでは操作できません。
