デバイスの回転角度の検出をreactで実装してみる

はじめに

デバイスの回転角度を知るにはdeviceOrientation
を使用しますが、reactとtypescriptで実装している記事が少なかったのでまとめました。

実装時につまづいた点

二点です。

deviceOrientationはios13以降だと、サイトごとにジャイロセンサーの許可をする必要があるみたいでそのためにDeviceOrientationEvent.requestPermission()を呼び出します。
https://tknc.jp/tp_detail.php?id=1116

もう一つは、このイベントはhttps環境でないと使えないのでそのままのローカルホストで開発しているとDeviceOrientationEvent.requestPermission()の返り値が一生deniedのままです。
ローカル環境開発にhttpsを有効化するのはこの記事を参考にしました。
https://chaika.hatenablog.com/entry/2023/08/10/083000

コード

  const [text, setText] = useState("");
  const [iosFlag, setIosFlag] = useState(false);
  const [isDisabled, setIsDisabled] = useState(true);
  const ua: string[] = ["iPod", "iPad", "iPhone"];

  useEffect(() => {
    if (window.DeviceOrientationEvent && "ontouchstart" in window) {
      //mobile
      for (let i: number = 0; i < ua.length; i++) {
        if (window.navigator.userAgent.indexOf(ua[i]) > 0) {
          setIosFlag(true);
          setIsDisabled(false);
          setText("ボタンを押してください!");
          break;
        }
      }

      if (!iosFlag && window.navigator.userAgent.indexOf("Android") > 0) {
        setIsDisabled(false);
        setText("ボタンを押してください!");
      }
    } else {
      //pc
      setText("このデバイスでは対応しておりません");
    }
  }, []);

  function check() {
    setIsDisabled(true);

    if (iosFlag) {
      //ios
      try {
        (DeviceOrientationEvent as any)
          .requestPermission()
          .then((res: string) => {
            if (res === "granted") {
              main();
              setText("許可したよ");
            } else {
              setText("失敗しました。");
            }
          });
      } catch (e) {
        setText("失敗しました。");
        alert(e);
      }
    } else {
      //android
      main();
    }
  }
  function main() {
    addEventListener("deviceorientation", (event) => {
      setText(
        event.alpha?.toFixed(0) +
          " " +
          event.beta?.toFixed(0) +
          " " +
          event.gamma?.toFixed(0)
      );
    });
  }
  return (
    <>
      <input
        id="check"
        type="button"
        value="スタート"
        onClick={check}
        disabled={isDisabled}
      />
      <h2>スマホの向き: </h2>
      <p>{text}</p>
    </>
  );

操作端末でonTouchイベントが有効であれば、スタートボタンがクリック可能になります。
onTouchはタッチ動作ができる端末、ipadやiphoneは使えますが、pcには使えません。（検証ツールを作動していると有効になりますが）

そしてスタートボタンをタップすると、iosが動作と方向へのアクセスの許可を求めるので許可をタップします。
するとmainメソッドが作動してデバイスの角度が表示されるという内容です。

参考にさせてもらった記事

https://qiita.com/Akatsuki1910/items/311179cb3747d290dcaf