Capacitor デバイスセンサーガイド: 動き、コンパス、歩数

Capacitor デバイス センサーは、小さく集中したプラグインを通じて利用可能です: @capgo/capacitor-accelerometer 動きの @capgo/capacitor-barometer 気圧の @capgo/capacitor-compass ヘッダー用 @capgo/capacitor-pedometer for steps, plus light, proximity and shake plugins. Each follows the same pattern: check availability, request permission if needed, start updates, listen, and stop when you are done. This guide covers every sensor with Capacitor 8 code, the platform differences that matter, and the battery rules that keep apps out of trouble.

センサーの概要

必要なものだけをインストールする。各プラグインは小さく、許可文字列が少ないため、アプリレビューで質問されることが少なくなります。

bun add @capgo/capacitor-accelerometer @capgo/capacitor-compass @capgo/capacitor-pedometer
bunx cap sync

iOS設定

必要なセンサーの文字列を追加する ios/App/App/Info.plist:

<!-- Accelerometer, pedometer, barometer altitude -->
<key>NSMotionUsageDescription</key>
<string>Counts your steps and detects movement during workouts.</string>

<!-- Compass heading -->
<key>NSLocationWhenInUseUsageDescription</key>
<string>Shows which direction you are facing on the map.</string>

ユーザーに簡単な言葉で利点を説明する。一般的なテキスト「このアプリは動きのアクセスが必要です」は、アプリレビューの却下の理由のよくあるものです。

Android設定

ほとんどのセンサーには許可が必要ありません。歩数計プラグインは ACTIVITY_RECOGNITION Android 10以降では、実行時にはマージされたマニフェストにアクセスします。

If a sensor is essential, declare the hardware feature so Google Play hides your app from devices without it. If it is optional, declare it with required="false" と実行時で利用可能性を確認します:

<uses-feature android:name="android.hardware.sensor.barometer" android:required="false" />
<uses-feature android:name="android.hardware.sensor.stepcounter" android:required="false" />
<uses-feature android:name="android.hardware.sensor.compass" android:required="false" />

加速度計:動作と傾斜

加速度計はx、y、z軸の加速度をG単位で報告します。平らに置いたスマホは約 z = -1 または 1 プラットフォームの規約に応じて、重力が含まれているためです。

import { CapacitorAccelerometer } from '@capgo/capacitor-accelerometer';

const { isAvailable } = await CapacitorAccelerometer.isAvailable();
if (isAvailable) {
  await CapacitorAccelerometer.requestPermissions();

  const listener = await CapacitorAccelerometer.addListener('measurement', ({ x, y, z }) => {
    const tiltX = Math.atan2(x, Math.sqrt(y * y + z * z)) * (180 / Math.PI);
    ball.style.transform = `translateX(${tiltX * 3}px)`;
  });

  await CapacitorAccelerometer.startMeasurementUpdates();

  // later
  await CapacitorAccelerometer.stopMeasurementUpdates();
  await listener.remove();
}

context

const alpha = 0.2;
let smoothed = { x: 0, y: 0, z: 0 };

function lowPass(m: { x: number; y: number; z: number }) {
  smoothed = {
    x: smoothed.x + alpha * (m.x - smoothed.x),
    y: smoothed.y + alpha * (m.y - smoothed.y),
    z: smoothed.z + alpha * (m.z - smoothed.z),
  };
  return smoothed;
}

Capacitorライブアップデートの代替品の比較ページ。ロール:長いマーケティングまたは法的文章。見つける場所:ページalternatives.astro。Capgo製品/ブランドおよび開発者用語を完全に保持します。 requestAnimationFrame loop.

依存するプラットフォームの慣習に応じて、重力が含まれているためです。

使用例:ゲームの傾斜制御、「起動時に画面を起こす」UI、落下または衝撃検出、活動強度。データはノイズが多いので、低パスフィルタで平滑化して使用する前に:

import { CapacitorShake } from '@capgo/capacitor-shake';

const handle = await CapacitorShake.addListener('shake', () => openFeedbackForm());

ジャイロスコープとデバイスの向き

回転は別のプラグインが必要ありません。 WebView はすでにそれを公開しています:

async function enableMotion() {
  // iOS 13+ requires a user gesture and explicit permission
  const DME = DeviceMotionEvent as unknown as { requestPermission?: () => Promise<'granted' | 'denied'> };
  if (typeof DME.requestPermission === 'function') {
    const result = await DME.requestPermission();
    if (result !== 'granted') return;
  }

  window.addEventListener('devicemotion', (e) => {
    const r = e.rotationRate; // alpha, beta, gamma in degrees per second
    if (r) updateRotation(r.alpha ?? 0, r.beta ?? 0, r.gamma ?? 0);
  });

  window.addEventListener('deviceorientation', (e) => {
    // alpha: 0-360 around z, beta: -180..180 front/back, gamma: -90..90 left/right
    updateOrientation(e.alpha, e.beta, e.gamma);
  });
}

document.querySelector('#enable-motion')!.addEventListener('click', enableMotion);

Call requestPermission ボタンをタップしたとき、ページが読み込まれるときではなく、iOS はリクエストを拒否します。

コンパス: 方位角

import { CapgoCompass, CompassAccuracy } from '@capgo/capacitor-compass';

const status = await CapgoCompass.requestPermissions(); // iOS: location permission
if (status.compass === 'granted') {
  await CapgoCompass.addListener('headingChange', ({ value }) => {
    needle.style.transform = `rotate(${-value}deg)`;
  });

  await CapgoCompass.startListening({
    minInterval: 100,      // ms between events
    minHeadingChange: 2,   // degrees
  });

  // Android only: ask the user to calibrate when accuracy drops
  await CapgoCompass.addListener('accuracyChange', ({ accuracy }) => {
    calibrationHint.hidden = accuracy >= CompassAccuracy.MEDIUM;
  });
  await CapgoCompass.watchAccuracy();
}

// One-off reading
const { value } = await CapgoCompass.getCurrentHeading();

value 磁気北の方向から 0 から 360 度の角度です。知っておくべきことは:

• 磁気センサは、携帯電話ケース、ノートパソコン、自動車のマウントなどの磁石によって乱れます。Android が精度が低いと報告した場合、キャリブレーションヒントを表示してください (電話を八字形で動かしてください)。
• サーボ制御 minInterval と minHeadingChange JavaScript ではなく、プラグインで実行するのではなく、橋接トラフィックを節約します。
• 地図がユーザーと一緒に回転する場合、向きと位置情報を組み合わせてください。アプリがバックグラウンドで実行されている場合に位置情報が必要な場合は、 バックグラウンド位置情報プラグイン.

歩数計: 歩数、距離、階数

ステップカウンタは、常にアプリが実行されていなくても、低消費電力のチップで連続してカウントします。

import { CapacitorPedometer } from '@capgo/capacitor-pedometer';

const features = await CapacitorPedometer.isAvailable();
// { stepCounting, distance, pace, cadence, floorCounting }

const perm = await CapacitorPedometer.requestPermissions();
if (perm.activityRecognition !== 'granted') {
  // explain why and link to settings
}

// Steps today (start and end are required on iOS)
const startOfDay = new Date();
startOfDay.setHours(0, 0, 0, 0);
const today = await CapacitorPedometer.getMeasurement({
  start: startOfDay.getTime(),
  end: Date.now(),
});
console.log(today.numberOfSteps, today.distance, today.floorsAscended);

// Live updates during a walk
await CapacitorPedometer.addListener('measurement', (m) => {
  stepsEl.textContent = String(m.numberOfSteps ?? 0);
});
await CapacitorPedometer.startMeasurementUpdates();

プラットフォームの差異:

• iOS (Core Motion) は、約7日前の過去のクエリに答え、サポートされているデバイスで距離、階数、ペース、キャデンスも提供します。
• Android 歩数のみを報告します。ハードウェアカウンタは再起動時にリセットされるため、ライフタイムの合計として扱うことはできません。基準値を保存するようにしてください。

長期的な履歴、デバイス間の日別合計、またはウォッチからデータを取得する場合は、代わりに @capgo/capacitor-health を使用します。Apple HealthとHealth Connectからすべてのソースの歩数を集約します。 は、セットアップ方法について説明しています。 気圧計: 気圧、標高

気圧と高度センサ

import { CapacitorBarometer } from '@capgo/capacitor-barometer';

const { isAvailable } = await CapacitorBarometer.isAvailable();
if (isAvailable) {
  await CapacitorBarometer.requestPermissions();
  await CapacitorBarometer.addListener('measurement', ({ pressure, relativeAltitude }) => {
    pressureEl.textContent = `${pressure.toFixed(1)} hPa`;
    altitudeEl.textContent = `${relativeAltitude.toFixed(1)} m`;
  });
  await CapacitorBarometer.startMeasurementUpdates();
}

pressure 両プラットフォームでヘクトパスカルの単位で表示されます。 relativeAltitude iOSでは、更新が開始された時点から現在までのメートルの変化を表します。Androidでは常に 0、なので、気圧式の式を使って計算する必要があります。

const P0 = 1013.25; // standard sea-level pressure in hPa
const altitudeMeters = (p: number) => 44330 * (1 - Math.pow(p / P0, 1 / 5.255));

let baseline: number | null = null;
function relativeAltitude(pressure: number) {
  baseline ??= altitudeMeters(pressure);
  return altitudeMeters(pressure) - baseline;
}

絶対的な高さは、気象条件によって海面気圧が変化するため、数十メートルもずれます。1分間の相対的な変化は、約1メートルの精度で正確です。これは、階段や登山の数を数えるのに十分です。多くの安価なAndroidスマートフォンには、気圧計が搭載されていないため、常に isAvailable.

周囲光センサー (Android)

import { LightSensor } from '@capgo/capacitor-light-sensor';

const { available } = await LightSensor.isAvailable(); // always false on iOS
if (available) {
  await LightSensor.addListener('lightSensorChange', ({ illuminance }) => {
    document.body.classList.toggle('high-contrast', illuminance > 10_000); // bright sunlight
  });
  await LightSensor.start({ updateInterval: 500 });
}

典型的な値: 10 ルクス未満は暗い部屋、数百ルクスはオフィス、数万ルクスは直射日光です。この値を使用して、部屋に合わせた読み取りモードを作成するか、外出時はコントラストを上げることができます。画面の明るさを直接変更するには、 @capgo/capacitor-brightness.

近接センサー

近接センサーは、画面の上部を何かが覆っているかどうかを教えてくれます。通常、電話の際にはユーザーの耳が覆っています。iOSではこれが

import { CapacitorProximity } from '@capgo/capacitor-proximity';

const status = await CapacitorProximity.getStatus();
if (status.available) {
  await CapacitorProximity.enable();  // screen turns off when covered
}

// when the call or voice message ends
await CapacitorProximity.disable();

を切り替えます。これは、画面を覆ったときに表示をオフにすることを意味します。Androidではプラグインは近接センサーに反応し、画面のウィンドウを暗くします。声の通話、声のメッセージ、ウォークイーターモードが有効なときにのみ有効にしてください。ユーザーの顎がボタンを押してしまうのを防ぎましょう。 UIDevice.isProximityMonitoringEnabledセンサー用アプリの実用的なルール

利用可能かどうかを確認してください。

1. targetLanguage タブレットでは、歩数カウンターや気圧計などの機能が欠けていることがあります。エミュレータでは、ほとんどのセンサーを擬似化します。サポートできない機能を非表示にします。
2. 非表示時は更新を停止する。 使う @capacitor/app's appStateChange アプリがバックグラウンドに移動したときにリスナーを停止し、再開したときに再起動する必要があります。 Sensors が実行中のままになるとバッテリーを消耗させ、1つ星のレビューを引き起こします。
3. Nativeで許可されている場合、プラグイン内で code をサルーンする (compass) minInterval光センサー updateIntervalJavaScriptでは使用できません。
4. 許可を求める 運動を開始するときにユーザーが運動アクセスを要求するように設定し、初回起動時ではなく。
5. 実機でテストする。 シミュレータは定数または合成値を返します。少なくとも1台のAndroidのバジェット端末をテストして、センサーが欠落しているかノイズが多いことを確認してください。
6. プライバシー規則を尊重してください。 モーションと位置データはApp StoreのプライバシーラベルとPlayデータセーフティフォームで敏感データとしてカウントされます。集めているデータを宣言してください。

トラブルシューティング

コンテキスト: サポート/プレミアムサポートページまたはフッターのサポートセクション。役割: セクションまたはページヘッダー。見られる場所: サポートポリシーページ。メッセージキー `support_policy_troubleshooting_title` (サポートポリシー トラブルシューティング タイトル)。iOS上ではイベントが発生しません。 Info.plist: 使用方法の文字列が欠落している、または許可が拒否されました。設定、プライバシー、セキュリティ、モーション、フィットネスを確認してください。

ペダルメーターはAndroid上で0を返します。: ACTIVITY_RECOGNITION : Android上で精度を確認し、キャリブレーションヒントを表示してください。許可が拒否されました、またはデバイスにステップカウンタが存在しません。 isAvailable().stepCounting.

コンパスは乱れます。: 磁気干渉またはキャリブレーションが欠如している可能性があります。Android上で精度を確認し、キャリブレーションヒントを表示してください。

relativeAltitude は常に0です: Android における期待値を計算します。圧力から計算します。上記に示すように。

DeviceMotionEvent.requestPermission : 例外: これは、ユーザー イベントから呼び出されていないためです。

: バッテリー消耗の報告: リスナがバックグラウンドで実行され続けます。停止するには appStateChange.

: センサ機能を迅速に実装

: センサ機能の閾値、平滑化係数、UIは、実際のユーザーと複数回の調整が必要です。ロジックは JavaScript で実行されるため、 : Capgo のライブ更新 : ストアのレビューなしで実行できます。新しいプラグインやパーミッション文字列は通常のビルドを通じて実行されます。胸帯などの外部センサを接続している場合は、 : Capacitor で心拍数モニターを構築するための続き.