ジャイロスコープとは

ジャイロスコープは、スマートフォン、タブレット、またはノートパソコンに内蔵された小型センサーで、3つの軸周りの回転を測定します。加速度計と磁力計と組み合わせることで、デバイスの傾き方向、回転速度、向いている方向をデバイスに認識させます。このデータは、画面の自動回転、拡張現実、レーシングゲーム、パノラマ写真、歩数計測、画像安定化を実現します。

最新のデバイスは、この情報をDeviceOrientationEvent APIを通じてウェブブラウザに公開しています。ブラウザは3つの角度（alpha、beta、gamma）を報告し、これらが地球を基準とした3D空間でのデバイスの向きを表します。

alpha、beta、gammaについて

3つの向き角は、それぞれ異なる軸周りの回転を表します：

  • Alpha（0～360°） — Z軸（垂直）周りの回転。テーブルの上でデバイスを回転させることを考えてください。alphaはコンパスのような方位です。
  • Beta（-180～180°） — X軸（左右）周りの回転。これは前後の傾きで、デバイスを自分の方に向けたり、離したりするようなものです。
  • Gamma（-90～90°） — Y軸（上下）周りの回転。これは左右の傾きで、デバイスを横に傾けるようなものです。

ツールの説明

このツールはデバイスのジャイロスコープからリアルタイムの向きデータを読み込み、3Dモデルとしてレンダリングして、リアルタイムであなたの動きを反映します。また、生のalpha、beta、gamma値を度単位で表示するため、センサーが正常に動作し、正確な読み値を生成していることを確認できます。

例

デバイスの位置 Alpha Beta Gamma
平らに置いた状態、画面上向き、上部が北 0° 0° 0°
縦向きモードで直立 0° 90° 0°
右端が下に傾いた状態（横向き） 0° 0° 90°
180°回転、平らに置いた状態、画面上向き 180° 0° 0°

機能

  • デバイスの動きと同期して回転するライブ3Dモデル
  • リアルタイムのalpha、beta、gamma読み値（度単位）
  • ブラウザが向きAPIをサポートしているかどうかを検出
  • モーションアクセスのためのiOSパーミッションプロンプトに対応
  • 向きデータが絶対的（地球を基準）か相対的かを表示

ユースケース

  • 不良センサーの診断 — 修理に出す前や返品する前に、スマートフォンのジャイロスコープが正常に動作しているか確認します。
  • モーション機能を使用するウェブアプリのテスト — AR体験、モーション制御ゲーム、またはVRプレビューを構築している開発者は、ブラウザ内でセンサー入力を直接検証できます。
  • キャリブレーション確認 — デバイスを平らに置いたときに向き値がゼロに戻ることを確認し、ドリフトやキャリブレーション不良を検出するのに役立ちます。

仕組み

このツールはブラウザのdeviceorientationイベントをサブスクライブし、デバイスの向きが変わるたびに発火します。各イベントは現在のalpha、beta、gamma値を提供します。3Dモデルはこれらの角度をクォータニオン回転に変換するためにThree.jsを使用し、すべてのアニメーションフレームでスムーズな補間を適用してジッターを回避します。

制限事項

  • 内蔵ジャイロスコープを備えたデバイスが必要です（ほとんどのデスクトップと多くのノートパソコンには搭載されていません）
  • iOS Safariでは、ユーザーのジェスチャーを通じて明示的なパーミッションが必要です
  • ほとんどの最新ブラウザではセキュアコンテキスト（HTTPS）が必要です
  • 一部のブラウザはページがフォアグラウンドにある場合のみ向きを報告します

ヒント

  • 読み値がゼロのままの場合、デバイスにジャイロスコープがないか、ブラウザがアクセスをブロックしている可能性があります
  • iOSでは、ページ読み込み後に「モーションを有効にする」ボタンをタップしてください。パーミッションは自動的に付与されません
  • 傾きをテストする前に、デバイスを安定した平らな面に置いて、ベースライン値を確認してください