Javascriptでユーザ端末のタッチ操作が可能か調べる方法

Javascriptでユーザ端末のタッチ操作可否を判定する

最近JavascriptもしくはTypescriptで仕事をする機会が増えたので今一度Javascriptの基本技術を振り返って行こうと思います。

そのため今回はJavascriptで良く使うユーザ端末のタッチ操作可否を判断できる手法を紹介していきます。

ソース画像を表示

ユーザ端末のタッチ操作可否を判断するソースコード

あまりもったいぶるほどの内容でもないので早速ですがソースコードを紹介していこうと思います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <mata charset="UTF-8">
    <title>Programming News</title>
  </head>

  <body>
      <p id = "test">初期状態</p>
    <script>
      //タッチ可能ならtoucheventcheckにtrueが入る
      const toucheventcheck = !! (
          'ontouchstart' in window ||
          (navigator.pointerEnabled && navigator.maxTouchPoints > 0)
      )
      let test = document.getElementById("test")
      
      if(toucheventcheck)
      {
        test.innerHTML = "この端末はタッチ操作可能です";
      }
      else
      {
        test.innerHTML = "この端末はタッチ操作不可です";
      }
    </script>
  </body>
</html>

たったこれだけでユーザ端末のタッチ操作可否が分かります。ちなみに出力ページはこちらのようになります。私が使っている端末は普通のノートPCなのでタッチ操作はできません。Microsoft社が出しているSurface Proとかだとデフォルトでタッチ操作可能ですけどね。

はい当然ですが不可になっていますね。少しだけ解説していこうと思います。

まずユーザが使っているwindowオブジェクトにタッチイベントを監視できるイベントハンドラーontouchstartが存在すればiOSかAndroid端末という事になります。このチェックをしているのが

‘ontouchstart’ in window の部分になります。

またWindowsでタッチデバイスを判定するには有効可否を判定するためにpointerEnabledプロパティが存在し,かつタッチ可能なポイント数(maxTouchPoints)が0以上かを確認しています。その確認をしているのが

(navigator.pointerEnabled && navigator.maxTouchPoints > 0)

この部分になります。やってる事は非常に単純ですよね。

他にもJavascript関連画像処理(OpenCV)関連の記事もあげているので興味があれば是非見ていってください。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です