センサーiOS独自requestPermissionスマホ推奨判定中...

Device Orientation API

端末の傾き（alpha/beta/gamma）をイベントで取得できるAPI。水準器やコンパス、モーション操作に使える。

1対応判定

ブラウザ	対応バージョン
Chrome	9+
Firefox	6+
Safari	17+（13+はrequestPermission必須）

備考: iOSは明示許可フロー

2権限フロー

権限不要
API呼び出しだけで動く。プロンプトも操作起点の縛りもない
ユーザージェスチャー必須
ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない
権限プロンプトあり
呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ
iOS独自requestPermissionこのAPI
iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

iOS 13+ では DeviceOrientationEvent.requestPermission() をユーザージェスチャー内で呼び、明示的に許可を得る必要がある。他環境は権限不要。

3ライブデモ: 水準器とコンパス

4コードスニペット

TypeScript（要約版）

// iOS 13+ は明示的な許可が必要（クリックハンドラ内で呼ぶ）
async function start() {
  const D = DeviceOrientationEvent as unknown as {
    requestPermission?: () => Promise<"granted" | "denied">;
  };
  if (typeof D.requestPermission === "function") {
    const result = await D.requestPermission();
    if (result !== "granted") return;
  }
  window.addEventListener("deviceorientation", onOrient);
}

function onOrient(e: DeviceOrientationEvent) {
  const alpha = e.alpha; // Z軸: 0-360 コンパス方位に利用
  const beta = e.beta;   // X軸: -180-180 前後の傾き
  const gamma = e.gamma; // Y軸: -90-90 左右の傾き
  // 水準器: gamma/betaから気泡の位置を計算
  bubble.style.transform =
    "translate(" + gamma! * 3 + "px, " + beta! * 3 + "px)";
}

// 後始末
window.removeEventListener("deviceorientation", onOrient);