터치 장치에서 화면을 눌렀을 때의 압력을 웹 브라우저 + 자바스크립트로 얻기

개요

스마트 폰이나 태블릿 화면을 눌렀을 때의 강도를 웹 브라우저에서 얻는다

Touch Events Level 2라는 JavaScript API로 압력 얻기

iPhone 등의 감압 터치(3D Touch, Force Touch)에 대응

터치 이벤트 레벨 2

터치 관련으로 touchstart, touchend, touchmove, touchcancel 라는 이벤트가 발생한다

이벤트 발생시 Touch 인터페이스 또는 TouchList 인터페이스를 사용할 수 있습니다

Touch.force에서 압력을 얻을 수 있습니다 (값은 0.0과 1.0 사이입니다).

참고: 터치 이벤트 - 레벨 2

소스 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your touch device information</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>
  html, body, div { padding: 0; margin: 0; border 0; }
  html, body { width: 100%; height: 100%; }
</style>

<script>

// 表示領域をクリアする
function clear(id) {
  document.getElementById(id).textContent = "";
}

// 表示領域に情報を追加する
function add(id, key, value) {
  const e = document.createElement("div");
  document.getElementById(id).appendChild(e);
  e.textContent = key + "=[" + value + "]";
}

// ブラウザ情報を表示する
function set_info() {
  const keys = [
    "window.navigator.userAgent",
    "window.navigator.maxTouchPoints",
    "window.parent.screen.width",
    "window.parent.screen.height",
    "window.screen.width",
    "window.screen.height",
  ];
  for (var key of keys) {
    add("information-area", key, eval(key));
  }
}

// タッチデバイスの情報を表示する
function handle_touch(event) {
  clear("touch-area");
  try {
    for (var i=0; i<event.touches.length; i++) {
      var touch = event.touches.item(i);
      // Touch.force: 圧力を0.0〜1.0の値で取得する
      add("touch-area", "Touch[" + i + "].force", touch.force);
      add("touch-area", "Touch[" + i + "].clientX", touch.clientX);
      add("touch-area", "Touch[" + i + "].clientY", touch.clientY);
    }
  } catch(e) {
    add("touch-area", "error", e);
  }
}

window.onload = function() {
  set_info();
  // 画面に触れはじめたときのイベントに関数を登録
  document.body.addEventListener("touchstart", handle_touch);
  // 画面上で移動しているときのイベントに関数を登録
  document.body.addEventListener("touchmove", handle_touch);
};

</script>

</head>
<body>

<h1>Your touch device information</h1>

<div id="area">
  <div id="information-area"></div>
  <div id="touch-area"></div>
</div>

</body>
</html>

여러 기기에서 동작 확인

거동 확인 결과 일람

터미널
OS
웹 브라우저
force 값을 얻을 수 있습니까?
비고

iPhone X
iOS 12
Safari
획득 가능
3D Touch 탑재 단말기

iPhone X
iOS 12
Google 크롬
획득 가능
3D Touch 탑재 단말기

iPhone X
iOS 13
Safari
획득 가능
3D Touch 탑재 단말기

iPhone X
iOS 13
Google 크롬
획득 가능
3D Touch 탑재 단말기

iPhone XR
iOS 12
Safari
항상 force=0
3D Touch 비탑재 단말기

iPhone XS Max
iOS 12
Safari
획득 가능
3D Touch 탑재 단말기

iPhone Pro 11
iOS 13
Safari
항상 force=0
3D Touch 비탑재 단말기

iPhone Pro 11
iOS 13
Google 크롬
항상 force=0
3D Touch 비탑재 단말기

iPad Pro (11-inch)
iOS 12
Safari
항상 force=0
3D Touch 비탑재 단말기

iPad Pro (11-inch)+ Apple Pencil
iOS 12
Safari
획득 가능
3D Touch 비탑재 단말이지만 Apple Pencil을 이용하여 압력을 얻을 수 있다

iPad Pro (11-inch)+ Apple Pencil
iPadOS 13
Safari
획득 가능
3D Touch 비탑재 단말이지만 Apple Pencil을 이용하여 압력을 얻을 수 있다

iPad Pro (11-inch)+ Apple Pencil
iPadOS 13
Google 크롬
획득 가능
3D Touch 비탑재 단말이지만 Apple Pencil을 이용하여 압력을 얻을 수 있다

Xperia XZ
Android 7.0
Google 크롬
획득 가능

아래에 몇 가지 스크린 샷이있는 샘플을 둡니다.