センサーの仕組み解説

ブラウザはどうやってスマホのセンサーを読んでいるのか

使っているWeb標準API

このサイトは外部ライブラリを一切使わず、ブラウザが標準で持っている以下の2つの イベントAPIだけでセンサー値を読み取っています。どちらもW3C(Web標準化団体)が 仕様を定めている、アプリ不要でJavaScriptから直接使えるAPIです。

方位角(alpha)の仕組み — 真北ピタリで使用

スマホには磁気センサー(マグネトメーター)が内蔵されており、地磁気の向きを検知して 「今どちらを向いているか」を計算しています。地図の方位磁石アプリの裏側もこれと同じ 仕組みです。iOS SafariではAppleが独自拡張した webkitCompassHeading プロパティで真北基準の角度を直接取得でき、それ以外のブラウザでは alpha(反時計回りの角度)を 360 - alpha で真北基準に 変換して使っています。

磁気センサーは「地磁気」という非常に弱い磁場を読み取っているため、次のようなものの 近くでは簡単に誤差が出ます: 金属製の机・鉄骨・スピーカーやモーターの磁石・他のスマホ・ ノートPC。屋内では10〜20°程度のずれは珍しくなく、金属デスクの上などでは50°以上 ずれることもあります。

傾き(beta/gamma)の仕組み — 水平の達人で使用

ジャイロスコープ(角速度センサー)と加速度センサーを組み合わせて、端末が どれだけ前後(beta、-180°〜180°)・左右(gamma、-90°〜90°)に傾いているかを 計算しています。これは実物の気泡式水準器が重力方向を利用するのと同じ原理を、 電子的なセンサーで置き換えたものです。

加速度の仕組み — 衝撃G・置物チャレンジで使用

加速度センサー(アクセロメーター)は、MEMS(微小電気機械システム)という 非常に小さな機械式のバネ構造の変位を電気信号に変換して加速度を測っています。 accelerationIncludingGravity は地球の重力(常に約9.8 m/s²下向き)も 含んだ値で、完全に静止しているときはこの値の大きさがちょうど1G前後になります。 衝撃G計測ではこの値の合成ベクトルの大きさをGに換算し、置物チャレンジでは 一定時間のブレ幅(標準偏差)を計算しています。

反応速度テストだけセンサー不要な理由

反応速度テストは performance.now() という高精度タイマーAPIだけで 動いており、モーションセンサーとは無関係です。そのためPCのマウスクリックでも、 センサー非搭載の端末でも遊べます。