icon

傾き検知サンプル集

デバイスの 端末方向イベント を取得し、ReactPixi などで描画するサンプルです。

スマートフォンなど、傾き検知が利用できるデバイスでご利用ください。

※ iOS では "動作と方向" へのアクセス許可が必要です。次のボタンを押して許可してください。

alpha: 端末方向イベントを読み取れませんでした
beta: 端末方向イベントを読み取れませんでした
gamma: 端末方向イベントを読み取れませんでした

動作確認済みの環境

  • iPhone XS (iOS 17.5)
    • Safari
    • Google Chrome 125.0.6422.51
    • Brave 1.65
  • Zenfone 9 (Android 14)
    • Google Chrome 125.0.6422.53
    • Brave 1.65.133 (設定 > サイトの設定 > モーションセンサー を 許可 にする)

メモ

モバイル端末には、一般的にジャイロスコープ、コンパス、加速度センサーなどが搭載されており、端末上で動作するアプリケーションが端末の方向や動きを検出できる。

端末の方向や傾きは 地球座標フレーム および 端末座標フレーム を元に算出され、Web API では 端末方向イベント としてアクセスすることができる。

当ページでは端末方向イベントのうち、DeviceOrientationEvent から得られる下記の情報を利用している。

alpha 回転角 (0 度 ~ 360 度)

  • 端末の 東西南北方向 への向き。
  • 端末の上端が地球の北極をまっすぐ向いているときが 0 度。
  • 端末が左へ回転するのに従って最大 360 度まで増加する。

alpha

方向および動きとして示されるデータ - Web API | MDN

beta 回転角 (180 度 ~ -180 度)

  • 端末の 縦方向 の向き。
  • 端末が地球表面と平行になっている (上端および下端から地球表面までの距離が同じ) ときが 0 度。
  • 端末を前方へ傾けるのに従って 180 度まで増加、後方へ傾けるのに従って -180 度まで減少する。

beta

方向および動きとして示されるデータ - Web API | MDN

gamma 回転角 (90 度 ~ -90 度)

  • 端末の 横方向 の向き。
  • 端末が地球表面と平行になっている (左端および右端から地球表面までの距離が同じ) ときが 0 度。
  • 端末を右へ傾けるのに従って 90 度まで増加、左へ傾けるのに従って -90 度まで減少する。

gamma

方向および動きとして示されるデータ - Web API | MDN

使用ライブラリ

参考文献

v0.2.1on 2025-10-27