English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
モバイル開発では、デスクトップでプロトタイプ設計を始めて、サポートする予定のデバイスでモバイル特有の部分を処理するという、より簡単な方法があります。マルチタッチは、ほとんどのPCがタッチ入力を持っていないため、PC上でテストするのが難しい機能の1つです。
モバイルデバイス上で行うテストは、あなたの開発サイクルを延ばす可能性があります。なぜなら、あなたが行う変更の各々は、コードをサーバーにアップロードし、デバイスに再読み込みする必要があるからです。そして、一旦実行されると、タブレットやスマートフォンはweb開発者に使われるツールが不足しているため、アプリケーションのデバッグがほとんどできません。
この問題の1つの解決策は、開発マシンでイベントをシミュレートすることです。単一タッチの場合、タッチイベントはマウスイベントに基づいてシミュレートできます。タッチ入力デバイス（例えば、現代のApp MacBook）がある場合は、マルチタッチもシミュレートできます。
単一タッチイベント
デスクトップで単一タッチイベントをシミュレートしたい場合は、Phantom Limbを試してみてください。このプログラムはウェブ上でタッチイベントをシミュレートし、巨大な手を導きます。
また、TouchableというjQueryプラグインもあります。このプラグインはプラットフォームに依存せずにタッチとマウスイベントを統一します。
マルチタッチイベント
あなたのマルチタッチウェブアプリがブラウザやマルチタッチパネル（例えばApple MacBookやMagicPad）で動作するように、私はこのMagicTouch.jsパックツールを作成しました。このツールはタッチパネルからのタッチイベントをキャッチし、それらを標準互換のタッチイベントに変換します。
1．npTuioClient NPAPIプラグインをダウンロードして、~にインストールします。/Library/Internet Plug-Ins/フォルダーにあります。
2．このMac MagicPadのTongSeng TUIOアプリをダウンロードして、サーバーを起動します。
3．MagicTouch.jsというjavascriptライブラリをダウンロードして、npTuioClientコールバック規格に対応するタッチイベントをシミュレートします。
4．以下のように、magictouch.jsスクリプトとnpTuioClientプラグインをアプリケーションに含めます：
< head> ... < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script> < /head> < body> ... < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;"> Touch input plugin failed to load! < /object> < /body>
私はChromeでしか 10この方法をテストしましたが、少し調整すれば他の現代ブラウザでも動作するべきです。
あなたのコンピュータに多指タッチ入力が無い場合、他のTUIOトラッカーやreacTIVisionを使用してタッチイベントをシミュレートすることができます。詳細については、TUIOプロジェクトページを参照してください。
注意すべき点の一つは、あなたの手はOSレベルの多指タッチジェスチャーと同じになることがあります。OS Xでは、System PreferencesのTrackpad設定ページにアクセスして、システム範囲のイベントを設定できます。
多指タッチ機能がクロスモバイルブラウザで徐々に広くサポートされるにつれて、私は新しいwebアプリケーションがこの豊富なAPIを最大限に活用していることに非常に嬉しく思っています。
元のソース：html5rocks.com
元のタイトル：Developing for Multi-Touch Web Browsers
一、スマートフォン上のタッチイベント
基本的なイベント：
touchstart //指がスクリーンに接触した場合にトリガーされる
touchmove //指がスクリーン上で移動している場合にトリガーされる
touchend //指がスクリーンから離れた場合にトリガーされる
以下はあまり使用されない：touchcancel //タッチプロセスがシステムによりキャンセルされた場合にトリガーされる
各イベントには以下のリストがあります、例えばtouchendのtargetTouchesはもちろん0です：
touches //スクリーン上に位置するすべての手のリスト
targetTouches //その要素に位置するすべての手のリスト
changedTouches //現在のイベントに関連するすべての手のリスト
各イベントにリストがあり、各リストには以下の属性があります：
その座標は、通常pageX,pageYを使用します：
pageX //ページに対するX座標
pageY //ページに対するY座標
clientX //ビューポートに対するX座標
clientY //ビューポートに対するY座標
screenX //スクリーンに対するX座標
screenY //スクリーンに対するY座標
identifier // 現在のタッチポイントのユニークな識別番号
target //指でタッチしたDOM要素
他の関連イベント：
event.preventDefault（） //タッチ時のブラウザの拡大、スクロールバーのスクロールを阻止
var supportTouch = "createTouch" in document //タッチイベントのサポートを判断する
二、例
以下は異なるタイプのスライドを取得するコードの具体的な方法です。先人の考えを取り入れ、封装して、参考に学ぶことができます：
var touchFunc = function(obj,type,func) {
//スライド範囲は5x5内部ではクリック処理を行い、sは開始、eは終了
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase();
obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") != -1) func();
}, false);
obj.addEventListener("touchmove",function() {
event.preventDefault();//タッチ時のブラウザの拡大、スクロールバーのスクロールを阻止
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move") !=-1) func();
}, false);
obj.addEventListener("touchend",function() {
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
//左右イベント
if(changeX > 0) {
if(type.indexOf("left") !=-1) func();
}else{}}
if(type.indexOf("right") !=-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
//上下一イベント
if(changeY > 0) {
if(type.indexOf("top") !=-1) func();
}else{}}
if(type.indexOf("down")!=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
//クリックイベント、ここでは時間差に応じて詳細に分類します
if((eTime - sTime) > 300) {
if(type.indexOf("long")!=-1) func(); //長押し
}
else {
if(type.indexOf("click")!=-1) func(); //クリック処理時
}
}
if(type.indexOf("end")!=-1) func();
}, false);
};
転載の記事：モバイルタッチスクリーンのJSイベント
Touchイベントを処理することで、ユーザーの各指の位置を追跡できます。以下の4つのTouchイベントをバインドできます：
1.touchstart: // 指がスクリーン上に置かれた時にトリガーされます
2.touchmove: // 指がスクリーン上で動く時にトリガーされます
3.touchend: // 指がスクリーンから持ち上げられた時にトリガーされます
4touchcancel: // システムがtouchイベントをキャンセルする時にトリガーされます。システムがいつキャンセルするかは不明です
属性
1.client / clientY：// タッチポイントがブラウザのビューポート上の位置
2.pageX / pageY：// タッチポイントがページ上の位置
3.screenX /screenY：// タッチポイントがスクリーン上の位置
4.identifier： // touchオブジェクトのユニークID
//touchstartイベント
function touchStartFunc(e) {
//evt.preventDefault(); //タッチ中のブラウザの拡大、スクロールバーのスクロールなどを阻止
var touch = e.touches[0]; //最初のタッチポイントを取得
var x = Number(touch.pageX); //ページのタッチポイントのX座標
var y = Number(touch.pageY); //ページのタッチポイントのY座標
//タッチポイントの初期位置を記録
startX = x;
startY = y;
}
//touchmoveイベント
function touchMoveFunc(e) {
//evt.preventDefault(); //タッチ中のブラウザの拡大、スクロールバーのスクロールなどを阻止
var touch = evt.touches[0]; //最初のタッチポイントを取得
var x = Number(touch.pageX); //ページのタッチポイントのX座標
var y = Number(touch.pageY); //ページのタッチポイントのY座標
var text = 'TouchMoveイベントがトリガーされる：（' + x + ', ' + y + ';
//スライド方向の判定
if (x - startX != 0) {
//左右スライド
}
if (y - startY != 0) {
//上下スライド
}
}
転載の第二篇文章：Mobile Webフロントエンド開発シリーズ: イベント処理（二）
前回の記事ではhtmlの基本的なイベントについて説明しました。この記事では、タッチイベントに焦点を当てて説明します。タッチイベントがトリガーされる条件は、指がスクリーンに接触したり、スクリーン上で移動したり、スクリーンから離れたりすることです。イベントはタッチの集合であり、最初の指がスクリーンに置かれたときから最後の指がスクリーンから離れたときまでのすべてのタッチ操作が同じイベントのレコードに保存されます。
touchイベント
touchイベントは単点タッチとマルチタッチの2種類に分類できます。単点タッチはハイエンド端末では一般的にサポートされていますが、Safari2.0、Android3.0以上のバージョンがマルチタッチをサポートしており、最大5本の指が同時にスクリーンにタッチするとき、iPadは最大11本の指が同時にスクリーンにタッチするとき、以下のイベントモデルを使用してこれらのイベントをキャッチすることができます：
ontouchstart ontouchmove ontouchend ontouchcancel
ユーザーが指をスクリーンに押下したときにontouchstartがトリガーされ、ユーザーが1本または複数の指を移動するときにontouchmoveがトリガーされ、ユーザーが指を離したときにontouchendがトリガーされます。それでは、ontouchcancelがいつトリガーされるのでしょうか？例えば、alert、電話がかかってきたり、プッシュ通知が表示されたりした場合、現在のtouch操作をキャンセルし、ontouchcancelがトリガーされます。webゲームを開発している場合、ontouchcancelは非常に重要で、ontouchcancelがトリガーされたときにゲームを一時停止したり、ゲームを保存することができます。
ジェスチャーイベント
ジェスチャーイベントの動作原理はtouchイベントと同じですが、ジェスチャーイベントはスクリーン上に少なくとも2本の指がある場合にのみトリガーされるため、Safari2.0、Android3.0以上のバージョンがサポートしており、ジェスチャーは多くの利点を持ち、二指のズームインとズームアウト、回転操作を測定するのに役立ちます。イベントモデルは以下の通りです：
ongesturestart ongesturechange ongestureend
イベント属性
タッチまたはジェスチャーイベントを使用する場合、これらのイベントを単独のタッチに変換して使用する必要があります。そのためには、イベントオブジェクトの属性のシリーズにアクセスする必要があります。
targetTouches 目标元素的所有当前触摸 changedTouches 页面上最新更改的所有触摸 touches 页面上的所有触摸
changedTouches、targetTouches、およびtouchesはそれぞれ少し異なるタッチリストを含んでいます。targetTouchesとtouchesはそれぞれ現在スクリーン上に位置する指のリストを含んでいますが、changedTouchesは最後に発生したタッチのみをリストアップします。touchendまたはgestureendイベントを使用している場合、この属性が非常に重要です。この場合、スクリーン上には指がもうないため、targetTouchesとtouchesは空になりますが、最後に発生したことを理解するためにchangedTouches配列を確認できます。
タッチ属性はすべて配列を生成するため、JavaScriptの配列関数を使用してそれらにアクセスできます。これは、event.touches[0]が最初のタッチを返し、event.touches.lengthを使用して現在保存されているタッチの数を計算できることを意味します。
単一のタッチを確認する場合、event.targetTouches[0]を使用して他のタッチにもアクセスできます。各タッチにはいくつかの具体的な情報が含まれています。
clientX、clientYは現在のスクリーンのXまたはY位置に対して、pageX、pageYは全体のページのXまたはY位置に対して、screenX、screenYはユーザーのコンピュータスクリーンのXまたはY位置に対して、identifierはイベントのユニークな識別子です。targetはタッチのターゲットオブジェクトを生成します
ジェスチャーイベントのイベントオブジェクトは、通常のタッチイベントよりも2つの属性が追加されています。rotation（指の回転角度）、scale（拡大の値）
転載記事：JavaScriptタッチとジェスチャーイベント
iOS版Safariは、開発者に特別な情報を伝えるために、いくつかの特別なイベントを追加しました。iOSデバイスにはマウスもキーボードもなく、モバイルSafariのインタラクティブウェブページを開発する際には、通常のマウスとキーボードイベントは十分ではありません。WebKitがAndroidに加わった後、多くのこのような特別なイベントが事実上の標準になりました。
1.タッチイベント
iOSを含む2.0ソフトウェアのiPhone 3Gがリリースされたとき、新しいバージョンのSafariブラウザも含まれています。この新しいモバイルSafariは、タッチ（touch）操作に関連する新しいイベントを提供了一些。その後、Androidのブラウザも同じイベントを実現しました。タッチイベントは、ユーザーの指がスクリーンに置かれたとき、スクリーン上でスライドしているとき、またはスクリーンから離れたときにトリガーされます。具体的には、以下のタッチイベントがあります。
タッチスタート：指がスクリーンに触れたときにトリガーされます；すでに指がスクリーンに触れている場合でもトリガーされます。
touchmove: 手指がスクリーン上でスライドしているときに連続してトリガーされます。このイベントが発生中にpreventDefault()を呼び出すと、スクロールを阻止できます。
touchend: 手指がスクリーンから離れたときにトリガーされます。
touchcancel: システムがタッチを追跡を停止したときにトリガーされます。このイベントの正確なトリガーについては、ドキュメントでは明確に記載されていません。
上記のイベントはすべてバブルアップし、キャンセルもできます。これらのタッチイベントはDOM規格では定義されていませんが、DOMに対応した方法で実装されています。したがって、各タッチイベントはDOM規格では定義されていませんが、DOMに対応した方法で実装されています。したがって、各タッチイベントのeventオブジェクトには、マウスイベントで一般的に見られる属性が提供されています：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey、およびmetaKey。
一般的なDOM属性に加えて、タッチイベントには以下の3つのタッチ追跡用の属性が含まれます。
touches: 現在追跡されているタッチ操作を示すTouchオブジェクトの配列。
targetTouches: 特定のイベントターゲットに特化したTouchオブジェクトの配列。
changeTouches: 最後のタッチ以来何が変わったかを示すTouchオブジェクトの配列。
各Touchオブジェクトには以下の属性が含まれます。
clientX: タッチターゲットがビューポート上のX座標。
clientY: タッチターゲットがビューポート上のY座標。
identifier: タッチのユニークなIDを表す。
pageX: タッチターゲットがページ上のx座標。
pageY: タッチターゲットがページ上のy座標。
screenX: タッチターゲットがスクリーン上のx座標。
screenY: タッチターゲットがスクリーン上のy座標。
target: タッチされたDOMノードの座標。
これらの属性を使用して、ユーザーのスクリーンタッチ操作を追跡できます。以下の例を参照してください。
function handleTouchEvent(event) {
//タッチを1度だけ追跡します
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "タッチが開始されました（" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML +タッチが終了しました（" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //スクロールを阻止
output.innerHTML +="<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
以下のコードはスクリーン上で発生する一つのタッチ操作を追跡します。簡単のために、活動的なタッチ操作がある場合のみ情報を出力します。touchstartイベントが発生したとき、タッチの場所情報を出力します。
要素内で、touchmoveイベントが発生すると、デフォルトの動作をキャンセルし、スクロールを阻止（タッチ移動のデフォルトの動作はページをスクロールすることです）し、次にタッチ操作の変化情報を出力します。一方、touchedイベントはタッチ操作に関する最終情報を出力します。注意していただきたいのは、touchedイベントが発生したとき、touchedコレクションにはTouchオブジェクトが一切存在しないことです；活動的なタッチ操作が存在しないため、この場合、changeTouchsコレクションを使用する必要があります。
これらのイベントはドキュメントのすべての要素でトリガーされ、ページの異なる部分をそれぞれ操作できます。スクリーン上の要素をタッチしたとき、これらのイベントが発生する順序は以下の通りです：
touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend
タッチイベントをサポートするブラウザには、iOS版のSafari、Android版のWebKit、beta版のDolfin、OSが含まれます。6+BlackBerry WebKit、Opera Mobile 10.1LGの専用OS「phantomブラウザ」もサポートしています。現在、iOS版のSafariのみがマルチタッチをサポートしています。デスクトップ版のFirefox 6+Chromeもタッチイベントをサポートしています。
2.手势イベント
IOS 2iOSのSafariでは、一連の手势イベントが導入されました。二本指でスクリーンをタッチすると、手势が発生し、通常は表示項目の大きさを変更したり、表示項目を回転させます。三つの手势イベントがあり、以下の通りです。
gesturestart:一つの指がスクリーンに触れ、もう一つの指がスクリーンに触れたときにトリガーされます。
gesturechange:スクリーンのどの指の位置が変更されたときにトリガーされます。
gestureend:どの指かに関わらず、スクリーンから指を離したときにトリガーされます。
これらのイベントは、イベントの受信容器に両方の指が触れている場合にのみ発生します。要素にイベントハンドラを設定することは、ジェスチャーイベントをトリガーするためにはその要素の範囲内に両方の指が同時に存在する必要があります（この要素はターゲットです）。これらのイベントはバブル化するため、ドキュメントにイベントハンドラを置くことですべてのジェスチャーイベントを処理することもできます。この場合、イベントのターゲットは、両方の指がその範囲内にいる要素です。
タッチイベントとジェスチャーイベントにはある種の関係があります。一つの指がスクリーンに触れたとき、touchstartイベントが発生します。もう一つの指がスクリーンに触れた場合、まずgesturestartイベントが発生し、その後、その指に基づくtouchstartイベントが発生します。一かつ一かつの指がスクリーン上でスライドすると、gesturechangeイベントが発生しますが、指の一つが離れた場合、gestureendイベントが発生し、その後、その指に基づくtouchendイベントが発生します。
タッチイベントと同様に、各ジェスチャーイベントのeventオブジェクトには標準のマウスイベント属性が含まれています：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey、metaKey。さらに、2つの追加属性があります：rotationとscale。そのうち、rotation属性は指の変化による回転角度を示し、負値は反時計回り、正値は時計回り（この値は0から始まります）。scale属性は2本の指の距離の変化を示し（例えば、内側に収縮すると距離が短くなります）、この値は1始まり、距離が伸びると大きくなり、距離が縮むと小さくなります。
以下は、ジェスチャーイベントを使用する例です：
function handleGestureEvent(event) {
var output = document.getElementById("output");
switch(event.type) {
case "gesturestart":
output.innerHTML = "ジェスチャー開始（回転＝" + event.ratation +",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale"+" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
前の例と同様に、ここのコードは各イベントを同じ関数に関連付け、その関数を通じて各イベントの情報を出力しています。
これで本記事の全てです。皆様の学習に役立てば幸いです。皆様のサポートをよろしくお願いします。
声明：本記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、当サイトは所有権を有しておらず、人工編集もされていません。著作権侵害が疑われる内容を見つけた場合は、メールを送信して：notice#wまでお知らせください。3codebox.com（メール送信時、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとりたいとされると、当サイトは即座に侵害される内容を削除します。）