Ext JS 5 でのタブレットとタッチパネルのサポート

Ext JS 5 に追加された機能の中でとても楽しみにしていた機能は、タッチパネルのノートパソコンやタブレットなどの、タッチパネル入力デバイスのサポートです。この機能の主な目的は、Ext JS アプリケーションが、ほとんど変更せずタッチパネル デバイスで動作させる事です。それにより、開発者は互換性の問題について検討する時間を減らし、その時間をアプリケーションの開発に回す事ができます。

タッチパネルサポートの実装方法

タッチパネル デバイスのサポートは、3つの分野に分ける事ができます。

イベント正規化

イベント正規化があるから Ext JS 5 のアプリケーションは、タッチパネル デバイス上で動作できます。この正規化は、裏で動作し、標準のマウスイベントを対等のタッチイベントやポインターイベントに変換します。

ポインターイベントは、w3c 標準で、入力デバイス (マウス、タッチ、スタイラスなど) に関わらず、画面の特定の座標をターゲットするイベントを扱います。

あなたのコードがマウスイベントのリスナーをリクエストすると、フレームワークが必要に応じてよく似たタッチイベントまたはポインターイベントを追加します。例えば、アプリケーションが mousedown リスナーをアタッチするには、次の様にします。

myElement.on('mousedown', someFunction);

タッチイベントをサポートするデバイスの場合には、イベントシステムがこれを touchstart に変換します。

myElement.on('touchstart', someFunction);

または、ポインターイベントをサポートするデバイスの場合には、これを pointerdown に変換します。

myElement.on('pointerdown', someFunction);

この変換は既に準備されているので、コードを追加しなくても、タブレットやタッチパネルのサポートを実現する事ができます。

ほとんどの場合には、フレームワークがマウス、タッチ、ポインターの入力の間をシームレスで切り替える事ができます。しかし、いくつかのマウス操作 (例えば、mouseover) は簡単にタッチ操作に変換できません。このようなイベントは一つひとつ取り組む必要があり、次のセクションで説明します。

ジェスチャーシステム

通常の DOM イベントに加え、エレメントは合成された “ジェスチャー” イベントも発火します。Sencha Touch のイベントシステムは、Ext JS 5 の新しいイベントシステムの基盤となっていますから、Sencha Touch のユーザーは、既にこの概念をご存じのことでしょう。

ブラウザの視点からすると、ポインター、タッチ、マウス、の各イベントには、主に3つのタイプ (Start, Move, End) があります。

このイベントのシーケンスとタイミングを解釈した後、drag、 swipe、 longpress、 pinch、 rotate、 tap などの複雑なイベントを合成します。Ext JS アプリケーションは、他のイベントと同じように、ジェスチャーイベントをリッスンする事ができます。例えば。

Ext.get('myElement').on('longpress', handlerFunction);

オリジナルの Sencha Touch ジェスチャーシステムは、主にタッチ イベントの為に設計されました。ジェスチャー システムにポインターとマウス イベントのサポートを追加すると、Ext JS 5 がどの入力でもジェスチャーに反応するような仕組みが可能になりました。このため、全てのジェスチャーは、タッチ入力でトリガーされるだけではなく、全てのシングル ポイントのジェスチャー (タップ、スワイプなど) もマウスを利用し、トリガーする事も可能になりました。その結果、入力方法に関わらず、複数デバイスに渡ってシームレスはジェスチャーシステムができました。

タッチスクローラー

コンテンツがオーバーフローするエレメントのネイティブなスクロールは、いくつかの Webkit ブラウザでは機能が不足しているところが多くあります。モーメンタム スクロールとスクロール位置のインジケーターが無いため、スクロールが退屈で直感的ではない体験になります。Sencha Touch から持ってきた ‘touch scroller’ は、JavaScript を利用し、スクロール インジケーター付きのモメンタム スクロール を導入し、この問題を解決しました。アプリケーション開発者は、ほとんど何もせずに touch scroller を使えるはずです。ネイティブスクロールが最適ではないブラウザではデフォルトで有効になります。

タッチパネルのサポートはアプリケーションにどんな影響があるか

正規化されたイベントとジェスチャーの認識は、Ext JS 5 アプリケーションではデフォルトで有効になっています。このため、ほとんどの場合、タブレットとタッチパネルのサポートを有効にするために、特別なアクションは必要ではありません。しかし、注意する部分が二つあります。

一つ目は、タッチ世界では対応するものが無いマウスイベントに関してです。現時点では、Ext JS 5 は、次のマウスイベントに対して、正規化を行いません。

• mouseover
• mouseout
• mousenter
• mouseleave

デスクトップのデバイスで上記のイベントに反応するアプリケーションの機能は、タッチデバイスのために、再び実装される必要があるでしょう。開発者はアプリケーションを設計する際にこのことを頭に入れておきましょう。タッチパネルでも重要なアプリケーションの機能性が使用可能な状態になっている事を確保するために、この操作に関して、別な実装を提供する必要もあるでしょう。これはよくマウスイベントを適切なタッチジェスチャーに切り替える事となります。Ext JS は内部的に何カ所でこれを行います。

一つの例はグリッドのコンポーネントです。デスクトップ デバイスでは、グリッドのカラムヘッダーのメニューは、ヘッダーのトリガーエレメントのクリックに反応して、表示されます。しかし、カラムヘッダーの mouseover の反応の時だけに見える事ができます。タッチパネルでは mouseover にあたるもの存在していないため、トリガーは表示されず、タッチできない状態になります。カラムヘッダーのメニューにアクセスできる事を確保するために、タッチパネルのデバイスでグリッドが使われている事を検出すると、Ext JS は longpress (長押し) によってメニューを表示します。

注: アプリケーションやカスタムコンポーネントの開発者は、必要に応じてこのような調整を行う必要があります。

二つ目の注意すべき部分は、フレームワークの内部的な変更です。タッチジェスチャーをサポートするために、Ext JS 5 は委譲イベントモデルに切り替えました。リスナーを直接 DOM の要素にアタッチせずに、DOM の最上位 (window または document) に、イベントタイプごとに、一つのリスナーがアタッチされます。 その後Ext JS イベントシステムは、windows オブジェクトまで遡ってきたイベントのターゲットエレメントをベースとして、イベントハンドラーをディスパッチします。 イベントをリッスンするために、Ext JS API だけを使っている場合には、、この新しいアプローチによって、問題が発生することはありません。

しかし、DOM API を使ってリスナーを直接アタッチ (addEventListener や attachEvent) していてる場合や 、サードパーティーの JavaScript ライブラリを使っている場合は、直接アタッチされているイベントハンドラーと委譲された対応する部分にタイミングの問題が発生する可能性があります。

注: タブレットやタッチパネルのサポートは、現在の所 Safari、Chrome、IE10以降で動作します。 Android ブラウザーは現在の所サポートしていません。