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
