タッチデバイスでサイトを機能させる

携帯電話、タブレット、ラップトップ、デスクトップのタッチスクリーンは、Web開発者にとってまったく新しい一連のやり取りを可能にしました。 翻訳されたガイドでは、Patrick LokiがJavaScriptでタッチイベントを操作する基本について説明しています。 以下で説明する例はすべてアーカイブにあります 。

タッチを心配する必要がありますか？

タッチデバイスの出現により、開発者からの主な質問は、「サイトまたはアプリケーションがそれらで動作することを確認するために何をする必要がありますか？」です。驚くほど、答えは何もありません。 デフォルトでは、モバイルブラウザは、タッチデバイス用に設計されていないほとんどのサイトに対応しています。 アプリケーションは、静的ページで正常に動作するだけでなく、JavaScriptでインタラクティブサイトを処理します。JavaScriptでは、ホバーなどのイベントにスクリプトが関連付けられます。



これを行うために、ブラウザはデバイスのタッチスクリーンでマウスイベントをシミュレートまたはシミュレートします。 単純なページテスト（添付ファイルのexample1.html）は、タッチデバイス上でも、ボタンを押すと次の一連のイベントがトリガーされることを示しています： mouseover> mousemove> mousedown> mouseup> click 。



これらのイベントは、実質的に遅延することなく、連続してトリガーされます。 mousemoveイベントに注意してください。これは、マウスの動作によってトリガーされるすべてのスクリプトの少なくとも1回の実行を提供します。



サイトがマウス操作に応答する場合、ほとんどの場合、その機能は追加の変更を必要とせずにタッチデバイスで引き続き機能します。

マウスイベントシミュレーションの問題

クリック遅延

タッチスクリーンを使用する場合、ブラウザーは、タッチアクション（ボタンまたはリンクのクリックなど）と実際のクリックのアクティブ化の間で約300ミリ秒の人為的な遅延を意図的に使用します。 この遅延により、ユーザーは誤って他のページ要素をアクティブにすることなく、ダブルタップを実行できます（たとえば、画像を拡大および縮小するため）。



ネイティブアプリケーションとしてユーザーアクションに応答するサイトを作成する場合は、問題が発生する可能性があります。 これは、一般ユーザーがほとんどのインターネットリソースに期待するものではありません。

指追跡

既にお気付きのように、ブラウザーによって送出される合成イベントにはmousemoveイベントが含まれています-常に1つだけです。 ユーザーが画面を過度にスワイプすると、合成イベントはまったく生成されません。ブラウザは、そのような動きをスクロールのようなジェスチャーとして解釈します。



これは、サイトがマウスの動き（描画アプリケーションなど）によって制御されている場合に問題になります。



簡単なキャンバスアプリケーション （example3.html）を作成しましょう。 特定の実装の代わりに、スクリプトがマウスの動きにどのように応答するかを見てみましょう。

var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マウスを使用して例をテストすると、カーソルの移動に合わせてポインターの位置が継続的に監視されていることがわかります。 タッチデバイスでは、アプリケーションは指の動きに応答せず、合成モーションイベントをトリガーするクリックにのみ応答します。

「もっと深く」

これらの問題を解決するには、抽象化する必要があります。 iOS 2.0のSafariにはタッチイベントが登場し、ほとんどすべてのブラウザーに実装された後、 W3C Touch Events仕様で標準化されました。 標準に記録される新しいイベントは、タッチスタート、タッチムーブ、タッチエンド、タッチキャンセルです。 最初の3つの仕様は、標準のmousedown、mousemove、およびmouseupと同等です。



Touchcancelは、タッチ操作が中断されると呼び出されます。たとえば、ユーザーが現在のドキュメントを超えて指を伸ばした場合などです。 クリックのために感覚イベントと合成イベントがトリガーされる順序を観察すると、次のようになります（example4.html）：



touchstart> [touchmove] +> touchend> mouseover>（単一）mousemove> mousedown> mouseup>をクリックします 。



すべてのタッチイベントが関係します：touchstart、1つ以上のtouchmove（ユーザーが画面上で指を動かさずにボタンをどれだけ慎重に押すかによって異なります）、およびtouchend。 その後、合成イベントがトリガーされ、最後のクリックが発生します。

感覚イベント検出

単純なスクリプトを使用して、ブラウザーがタッチイベントをサポートしているかどうかを判断します。

 if ('ontouchstart' in window) { /* browser with Touch Events support */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このスニペットは、最新のブラウザーでうまく機能します。 古いものには、皮膚から登った場合にのみ見つけることができる癖と矛盾があります。 アプリケーションが古いブラウザーに焦点を合わせている場合は、 Modernizrプラグインとそのテストメカニズムを試してください。 ほとんどの矛盾を特定するのに役立ちます。



感覚イベントのサポートを決定する際、テスト対象を明確に理解する必要があります。



選択されたフラグメントは、タッチを認識するブラウザの機能のみをチェックしますが、タッチスクリーンでアプリケーションが開いているとは言いません。

遅延作業をクリックします

タッチデバイスでブラウザーに送信され、同期情報（example5.html）を含む一連のイベントをテストすると、touchendイベントの後に300ミリ秒の遅延が表示されることがわかります。



touchstart> [touchmove] +> touchend> [300ms delay]> mouseover>（単一）mousemove> mousedown> mouseup>をクリックします 。



したがって、スクリプトがクリックに応答する場合、touchendまたはtouchstartに対する反応を記述することにより、デフォルトのブラウザー遅延を取り除くことができます。 これらのイベントのいずれかに応答することでこれを行います。 タッチスタートは、画面に触れるとすぐに起動するインターフェイス要素に使用されます-たとえば、htmlゲームのコントロールボタン。







繰り返しますが、タッチイベントのサポートについて、またアプリケーションがタッチデバイス上で特に開かれているという誤った仮定をしてはなりません。 モバイルの最適化に関する記事でよく言及される一般的なトリックの1つを次に示します。

 /* if touch supported, listen to 'touchend', otherwise 'click' */ var clickEvent =('ontouchstart'in window ?'touchend': blah.addEventListener(clickEvent,function(){ ... });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このシナリオは意図的なものですが、相互に排他的な原則に基づいています。 ブラウザのサポートに応じて、クリックまたはタッチのいずれかに対する反応は、ハイブリッドデバイスで問題を引き起こします。マウス、トラックパッド、またはタッチとのやり取りはすぐに中断されます。



より堅牢なアプローチでは、両方のタイプのイベントを考慮します。

 blah.addEventListener('click', someFunction,false); blah.addEventListener('touchend', someFunction,false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

問題は、関数が2回実行されることです。1回目はtouchendで、2回目は合成イベントとクリックが発生します。 preventDefault（）を使用してマウスイベントへの標準応答を抑制することにより、これを回避できます。 また、タッチエンドハンドラーに目的のクリックイベントをトリガーさせるだけで、コードの繰り返しを防ぐこともできます。

 blah.addEventListener('touchend',function(e){ e.preventDefault(); e.target.click(); },false); blah.addEventListener('click', someFunction,false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

preventDefault（）には問題があります。ブラウザで使用すると、他のデフォルトの動作は抑制されます。 最初のタッチイベントに直接適用すると、スクロール、マウスの長い移動、スケーリングなど、他のアクティビティがブロックされます。 これは適切な場合もありますが、このメソッドは注意して使用する必要があります。



上記のコード例は最適化されていません。 信頼できる実装については、 FTLabsのFastClickで確認してください。

touchmoveによるモーショントラッキング

感覚イベントの知識を身に付けて、追跡の例（example3.html）に戻り、タッチスクリーン上の指の動きを追跡するためにどのように変更できるかを見てみましょう。



このスクリプトの特定の変更を見る前に、まずタッチイベントとマウスイベントの違いを理解する必要があります。

感覚イベントの解剖学

ドキュメントオブジェクトモデル（DOM）レベル2によると、マウスイベントに応答する関数は、マウスイベントオブジェクトをパラメーターとして受け取ります。 このオブジェクトには、スクリプトが現在のマウス位置を決定するために使用するプロパティ-clientXおよびclientY座標が含まれます。



例：

 interface MouseEvent : UIEvent { readonly attribute long screenX; readonly attribute long screenY; readonly attribute long clientX; readonly attribute long clientY; readonly attribute boolean ctrlKey; readonly attribute boolean shiftKey; readonly attribute boolean altKey; readonly attribute boolean metaKey; readonly attribute unsigned short button; readonly attribute EventTarget relatedTarget; void initMouseEvent(...); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、toucheventには3つの異なるタッチリストが含まれています。

• 触れます。 実行中の機能が属しているアイテムに関係なく、画面上で現在アクティブなすべての共通グラウンドが含まれます。
• TargetTouches。 ユーザーが指を要素の外側に移動しても、要素内で開始したタッチポイントのみが含まれます。
• 変更されたタッチ。 最後のタッチイベント以降に変更された共通の基盤が含まれます。

これらの各シートは、個々の感覚オブジェクトのマトリックスです。 ここで、clientXとclientYに似た座標のペアを見つけます。

 interface Touch { readonly attribute long identifier; readonly attribute EventTarget target; readonly attribute long screenX;; readonly attribute long screenY; readonly attribute long clientX; readonly attribute long clientY; readonly attribute long pageX; readonly attribute long pageY; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タッチイベントを使用して指を追跡する

キャンバスベースの例に戻ります。 感覚イベントとマウスアクションの両方に応答するように、関数を変更する必要があります。 単一のタッチポイントの動きを追跡する必要があります。 targetTouches配列の最初の要素からclientXおよびclientY座標を取得するだけです。

 var posX, posY; function positionHandler(e) { if ((e.clientX)&&(e.clientY)) { posX = e.clientX; posY = e.clientY; } else if (e.targetTouches) { posX = e.targetTouches[0].clientX; posY = e.targetTouches[0].clientY; e.preventDefault(); } } canvas.addEventListener('mousemove', positionHandler, false ); canvas.addEventListener('touchstart', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タッチデバイス（example6.html）で変更されたスクリプトをテストすると、1本の指の動きの追跡が確実に機能することがわかります。



マルチタッチが機能するように例を拡張する場合は、最初のアプローチを少し変更する必要があります。 単一の座標ペアの代わりに、周期的に処理されるシリーズ全体を考慮します。 これにより、シングルマウスクリックとマルチタッチ（example7.html）の両方を追跡できます。

 var points = []; function positionHandler(e) { if ((e.clientX)&&(e.clientY)) { points[0] = e; } else if (e.targetTouches) { points = e.targetTouches; e.preventDefault(); } } function loop() { ... for (var i = 0; i<points.length; i++) { /* Draw circle on points[0].clientX / points[0].clientY */ ... } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようなもの：

パフォーマンスの問題

mousemoveイベントのように、touchmoveは指を動かしながら高速で動作できます。 複雑なコード（複雑な計算または各移動の描画イベント全体）を避けることをお勧めします。 これは、最新のタッチデバイスよりも古い強力なタッチデバイスにとって重要です。



この例では、絶対最小値を実行します。最後のマウス配列またはタッチポイントの座標を保存します。 アプリケーションコードは、setIntervalを使用して個別のループで独立して実行されます。



スクリプトによって処理されるイベントの数が多すぎる場合は、 limit.jsなどの特別なソリューションの作業に値します。



既定では、タッチデバイスのブラウザーは特定のマウススクリプトを処理しますが、タッチ操作用にコードを最適化する必要がある場合があります。 このチュートリアルでは、JavaScriptでタッチイベントを操作する基本について説明しました。 これが役に立つことを願っています。