タッチ操作のデバッグ

2016年3月20日 Iván Sánchez 投稿

ほとんどの場合、Leafletのコードのバグ修正は簡単です。コードはシンプルで、読みやすく（ほとんどの場合）、よく構造化されています。コーディング規約とユニットテストにより、初心者がコアコードの変更を試すのが容易になっています。過去数ヶ月の間に、私たちはいくつかの簡単なバグレポートをYour First PRの人々に送りました - 初めてLeafletに修正を貢献する人を見るのは大好きです！

LeafletのようなJavaScriptライブラリを保守・開発する際の難しさの1つは、すべての主要ブラウザで全てが動作するようにすることです。UbuntuデスクトップのFirefoxで動作するテクニックが、MacbookのSafariではグリッチが発生する可能性があります。Windows 10のEdgeで動作するものが、AndroidのChromeでは完全に壊れる可能性があります。

幸いなことに、Leafletにおけるブラウザ固有のハックは、コード内のL.Browserへの参照を見ることで簡単に見つけることができます。

これにより、時々望ましくないコードになることがあります。

    // On some platforms (notably, chrome on win10 + touchscreen + mouse),
    // the browser doesn't fire touchend/pointerup events but does fire
    // native dblclicks. See #4127.
    if (!L.Browser.edge) {
    	obj.addEventListener('dblclick', handler, false);
    }

私はブラウザ開発者から、ブラウザの判別は間違っていて、機能検出が正しいと何度も言われてきました。つまり、3D CSS変換やHTML5 <video>のサポートを検出するのは簡単ですが、タッチスクリーンをダブルタップしたときにブラウザがdblclickイベントを自動的に発行するかどうかを検出する（まともな）方法はありません。

タッチ操作のデバッグは特に厄介です。タッチ操作のバグを再現するための条件が単純な場合（同じ場所でタッチスクリーンをダブルタップするなど）もありますが、より特定的な場合もあります。#3798と#3814では、「1本の指でドラッグし、別の指を置いてピンチする」という条件であり、#3530では、「maxZoomに達するまでピンチインし、次に2本の指でドラッグする」という条件です。

この種のバグの問題は、制御された条件下で再現するのがイライラするし、時間がかかることです。コードエディタとブラウザのデバッガを使用しながら、同時に両手を使って非常に特定のタッチジェスチャを実行し、デバッガを見ていることを想像してください。次に、デバッガ内の変数を調べたいのですが、指を1ピクセルでも動かすと、さらにコードが実行されて状態が変わってしまうため、指を動かすことができません。

そして、過去1時間で5回目になりますが、グラグラするスマホの充電コネクタがまたグラグラし、デバッガが切断され、最初からやり直さなければなりません。

もし私がもう1つか2つの余分な手を持っていれば、タッチ操作のデバッグはずっと簡単になるでしょう。しかし、バイオテクノロジーは、私が余分な手を成長させることを可能にするにはまだほど遠いです。

幸いなことに、ブラウザへのカスタムイベントのディスパッチを利用できます。通常、マウス（またはタッチパッド、タッチスクリーン、デジタイザタブレット）を使用すると、WebブラウザはMouseEvent（またはTouchEventまたはPointerEvent）を生成します。しかし、そうではなく、私たちJavaScriptプログラマーは合成（つまり、偽の）イベントを作成し、それをブラウザにスローして、イベントをリッスンしているコードにディスパッチさせることができます。

残念ながら、このようなイベントの作成とディスパッチは面倒です。タッチジェスチャには、特定の順序で、特定の日時で、特定のデータを持つ、少なくとも4〜8個のイベントが含まれます。これを自動化する試みがいくつかありました（私が最も見つけたのはhammer.jsシミュレータでしたが）、複雑なカスタムタッチジェスチャをエミュレートする良い方法はありません。

今までは。

余分な手が必要なJavaScriptデバッグのニーズに応えるために、prosthetic-handを発表できることを誇りに思います。

prosthetic-handを使用すると、LeafletのWebページでピンチズームジェスチャを自動化できます。

おまけとして、私のバラバラになった指を見ることができます。

このライブラリをロードしたら、余分な手（特定のタイミングモード付き）を求めるだけです。

var h = new Hand({ timing: 'frame' });

次に、指を生やします。

var f1 = h.growFinger('touch');
var f2 = h.growFinger('touch');

次に、指を動かします（ピクセル座標とミリ秒を使用）。

f1.wait(100).moveTo(250, 200, 0)
	.down().wait(500).moveBy(-200, 0, 1000).wait(500).up().wait(500)
	.down().wait(500).moveBy( 200, 0, 1000).wait(500).up().wait(500);

f2.wait(100).moveTo(350, 200, 0)
	.down().wait(500).moveBy( 200, 0, 1000).wait(500).up().wait(500)
	.down().wait(500).moveBy(-200, 0, 1000).wait(500).up().wait(500);

ライブのprosthetic-handデモでこれを確認できます。

prosthetic-handライブラリは完璧ではありません。一部のタイプのイベントは一部のブラウザでしか機能しませんが、調整可能なタイミングで、繰り返しの可能な方法でマウス/タッチ/ポインタイベントをトリガーするのに役立ちます。これにより、開発者は両手をデバッガに置いたままにできます。タイミングモードを使用すると、発生するイベントを細かく制御できるため、同じジェスチャに対してコードの反復回数を減らすことができます。これは、何が起こっているかをより簡単に、よりよく理解できることを意味します。

有名な引用（しばしばエイブラハム・リンカーンに誤って帰属される）によれば

ある時、木こりが「木を切り倒すのに5分しか与えられなかったらどうしますか」と尋ねられました。彼は「最初の2分半は斧を研ぎます」と答えました。

Web開発も同様です。適切なツールを使用すると、タスクが非常に簡単になります。

時間の問題だけではありません。おそらく、ツールをゼロから書くのは時間がかかりましたが、最も大きな収穫は、デバッグがイライラしなくなることです。以前は、「タッチスクリーンに手を置き、デバッガを注意深く見て、手が足りないためブレークポイントを使用しない」でした。今では、「prosthetic-handイベントのタイミングを変更し、ブレークポイントを設定し、ドーン」です。

さらに良いことに、自動化されたツールがあるということは、Leafletがタッチ操作のユニットテストを導入したことを意味します。PhantomJSヘッドレスWebブラウザは、prosthetic-handが生成するTouchEventを理解でき、そのジェスチャが実行されたときにマップが期待どおりに動作するかどうかを確認できます。

自動タッチテストを導入することで、Leafletで節約できる時間と頭痛の種は膨大になるでしょう。より多くのプロジェクトが同様の自動テストの恩恵を受けることを願うばかりです。

オープンソースコードを書くだけではなく、皆のためにより良いツールを作りましょう。

敬具、Iván