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> |
関連記事
HtmlServiceでviewportを使いたい
参考
TouchEvent.changedTouches
https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches
HtmlServiceでviewportを使いたい
参考
TouchEvent.changedTouches
https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches