LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2019年12月21日土曜日

スマホでタッチ操作したときのイベントを取得したい


Google Apps ScriptのHtml Serviceでスマホのタッチ操作の情報を取得してみる

今回取得したい情報

画面を指で触ったときの位置: start
指を離したときの位置: end
指が動いた距離: change




デモ
https://script.google.com/macros/s/AKfycbwZWp6v5V0T77NVzVKu4b9CQgzA2atqlIxpr3_Cpnt89bjVYtg/exec



コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index")
                    .addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}




index.html
<!DOCTYPE html>
  <html>
    <head>
      <style>
        .ta {
          width: 98%;
          height: 12em;
        }
      </style>
    </head>
    <body>
      <input type="text" id="startX" class="tb">: startX
      <input type="text" id="endX" class="tb">: endX
      <input type="text" id="startY" class="tb">: startY
      <input type="text" id="endY" class="tb">: endY
      <input type="text" id="changedX" class="tb">: changeX
      <input type="text" id="changedY" class="tb">: changeY
      <input type="text" id="type" class="tb">: type
      <br>
    </body>
    <script>
      document.ontouchstart = onTouch;
      document.ontouchmove = onTouch;
      document.ontouchend = onTouch;
    
      function elem(id) {
        return document.getElementById(id);
      }
    
      function onTouch(e) {
        var type = e.type;
        var touchList = e.changedTouches;
        var listLen = touchList.length;
        for (var i = 0; i < listLen; i++) { 
          var touch = touchList[i];
          var x = touch.screenX;
          var y = touch.screenY;

          switch(type) {
            case "touchstart":
              elem("startX").value = x;
              elem("startY").value = y;
              elem("endX").value = 0;
              elem("endY").value = 0;
              elem("changedX").value = 0;
              elem("changedY").value = 0;
              break;
            case "touchend":
              elem("endX").value = x;
              elem("endY").value = y;
              break;
            case "touchmove":
              elem("changedX").value = parseInt(elem("startX").value) - x;
              elem("changedY").value = parseInt(elem("startY").value) - y;
              break;
          }
            elem("type").value = type;
        }
      }
    </script>
  </html>
  


最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...