JavaScriptのデバイス指向にアクセスする

This article has interactive version. You may open it to play around with the device orientation right from your mobile device.

デバイスの向きにアクセスする
JavaScriptでは、デバイスの向きのデータをdeviceorientation イベント.以下のように簡単です.

window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
  const alpha = event.alpha;
  const beta = event.beta;
  const gamma = event.gamma;
  // Do stuff...
}

ここでの意味はalpha , beta and gama アングル

イメージソース:newnow.co
でも!すべてのブラウザでは、ユーザーの許可なしに方向データにアクセスすることができます.例えば、iOS 13でアップルはrequestPermission メソッド.これは、ユーザーのアクション(クリック、タップまたは等価)でトリガする必要があります.
デバイスの向きにアクセスする例はもう少し複雑になります.

function onClick() {
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    // Handle iOS 13+ devices.
    DeviceMotionEvent.requestPermission()
      .then((state) => {
        if (state === 'granted') {
          window.addEventListener('devicemotion', handleOrientation);
        } else {
          console.error('Request to access the orientation was rejected');
        }
      })
      .catch(console.error);
  } else {
    // Handle regular non iOS 13+ devices.
    window.addEventListener('devicemotion', handleOrientation);
  }
}

場合は、デバイスの向きを切り替えるにはinteractive version of this post あなたのデバイスが報告している角度を見る必要があります.


ブラウザでのオリエンテーションアクセスのデバッグ
デスクトップデバイスを使用している場合には、「dev」ツールの「センサー」タブからデバイスの回転を模倣することができます.

クール!だから今、我々はデバイスの向きへのアクセスを持って、私たちも、ブラウザでテストすることができます!

デバイスの向きにアクセスするフックを返す
私が取りたい最後のステップはReact hook , これは、私にとってのオリエンテーションフェッチをカプセル化し、反応コンポーネント(それはあなたに上の角度を表示したもののように)でそれを使いやすくします.
ここでは、の例ですuseDeviceOrientation.ts フックを入力します.

import { useCallback, useEffect, useState } from 'react';

type DeviceOrientation = {
  alpha: number | null,
  beta: number | null,
  gamma: number | null,
}

type UseDeviceOrientationData = {
  orientation: DeviceOrientation | null,
  error: Error | null,
  requestAccess: () => Promise<boolean>,
  revokeAccess: () => Promise<void>,
};

export const useDeviceOrientation = (): UseDeviceOrientationData => {
  const [error, setError] = useState<Error | null>(null);
  const [orientation, setOrientation] = useState<DeviceOrientation | null>(null);

  const onDeviceOrientation = (event: DeviceOrientationEvent): void => {
    setOrientation({
      alpha: event.alpha,
      beta: event.beta,
      gamma: event.gamma,
    });
  };

  const revokeAccessAsync = async (): Promise<void> => {
    window.removeEventListener('deviceorientation', onDeviceOrientation);
    setOrientation(null);
  };

  const requestAccessAsync = async (): Promise<boolean> => {
    if (!DeviceOrientationEvent) {
      setError(new Error('Device orientation event is not supported by your browser'));
      return false;
    }

    if (
      DeviceOrientationEvent.requestPermission
      && typeof DeviceMotionEvent.requestPermission === 'function'
    ) {
      let permission: PermissionState;
      try {
        permission = await DeviceOrientationEvent.requestPermission();
      } catch (err) {
        setError(err);
        return false;
      }
      if (permission !== 'granted') {
        setError(new Error('Request to access the device orientation was rejected'));
        return false;
      }
    }

    window.addEventListener('deviceorientation', onDeviceOrientation);

    return true;
  };

  const requestAccess = useCallback(requestAccessAsync, []);
  const revokeAccess = useCallback(revokeAccessAsync, []);

  useEffect(() => {
    return (): void => {
      revokeAccess();
    };
  }, [revokeAccess]);

  return {
    orientation,
    error,
    requestAccess,
    revokeAccess,
  };
};

フックは以下のように使われます:

import React from 'react';
import Toggle  from './Toggle';
import { useDeviceOrientation } from './useDeviceOrientation';

const OrientationInfo = (): React.ReactElement => {
  const { orientation, requestAccess, revokeAccess, error } = useDeviceOrientation();

  const onToggle = (toggleState: boolean): void => {
    const result = toggleState ? requestAccess() : revokeAccess();
  };

  const orientationInfo = orientation && (
    <ul>
      <li>ɑ: <code>{orientation.alpha}</code></li>
      <li>β: <code>{orientation.beta}</code></li>
      <li>γ: <code>{orientation.gamma}</code></li>
    </ul>
  );

  const errorElement = error ? (
    <div className="error">{error.message}</div>
  ) : null;

  return (
    <>
      <Toggle onToggle={onToggle} />
      {orientationInfo}
      {errorElement}
    </>
  );
};

export default OrientationInfo;

デモ
最後に、デバイスの向きへのアクセスを持って、3 D空間を模倣し、可能性を3 Dの視点からオブジェクトを見て、モバイルデバイスを回転させます.あなたが仮想ショッピングアイテムを持って想像し、あなたのバスケットに入れて前に別の角度と側面からそれを見たい.
我々は、純粋なCSSで作られたシンプルな3 Dキューブを使用してperspective , perspective-origin and transform プロパティを使用すると、スタイルの完全な例を見つけることができますon css-tricks.com ).
ここでは、ここに行く、我々のジャイロキューブは、あなたのデバイスの向きに応じて別の角度から見ることができるはずです!
場合は、ラップトップからの記事を読んでいる場合は、ここでどのようにデモをモバイルデバイス上で動作する場合はinteractive version of this post :

この記事(ジャイロキューブのスタイルを含む)からのすべてのコード例を見つけることができますtrekhleb.github.io レポ.
私はこの例はあなたのために有用であることを望む!私はまた、上記のジャイロキューブよりもデバイスの向きのためにはるかに興味深いと現実的なユースケースを考え出すことを願って😄 ハッピーコーディング!