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とかだとデフォルトでタッチ操作可能ですけどね。