タッチデバイスを指で快適に操作させるために：HTML5アプリのタッチUX（2）（2/2 ページ）

タッチデバイスのUIの特徴とその癖から、HTML5のWebアプリでUXを実現するポイント、Webでのタッチイベント仕様を見てみよう。

[高岡大介，ITmedia]

Appleのタッチイベント仕様

　ここまで、W3Cで標準化が進められているタッチイベントについて説明してきました。W3Cのタッチイベント仕様は、元々AppleのTouchEvent仕様をベースに作られました。Appleのタッチ仕様には、W3Cで標準化されているTouchEventの他に、もう1つ、GestureEventというイベントがあります。

　これはマルチタッチでのタッチイベントを抽象化したジェスチャー動作のイベントで、表5のイベントタイプがあります。

イベントタイプ	概要
gesturestart	2つ以上のタッチが触れたときに発生
gesturechange	タッチが移動したときに発生
gestureend	タッチしている点が1つか0になったときに発生
表5．ジェスチャーイベントタイプ一覧

　2本の指でタッチしたときの、タッチイベントとジェスチャーイベントは以下のような順序で発生します。

1. 1本目の指がタッチして、touchstartが発生
2. 2本目の指がタッチして、gesturestartが発生
3. gesturestartの直後に、2本目の指のtouchstartが発生
4. 指を動かすと、gesturechangeが発生
5. 4の直後に、動かした指のtouchmoveが発生
6. 2本目の指を1つだけ離すと、gestureendイベントが発生
7. 6の直後に、離した2本目の指のtouchendイベントが発生
8. 1本目の指を離すと、touchendイベントが発生

　GestureEventはscaleやrotationを持っています。2本の指を広げた距離と回転角度です。これらを使えば、ピンチの動作を簡単に実装できます。

　しかし、GestureEventにはいくつか問題もあります。まず、TouchListが取得できません。そのためタッチ点を利用したい場合は、タッチイベントとうまく連携する必要がありますが、タッチイベントよりもジェスチャーイベントが先に発生するため、工夫が必要です。次に、AndroidではこのGestureEventは実装されていません。Androidでもジェスチャーを行いたい場合は、別途似たような処理を自分で行う必要があります。

　最後に、現段階のiOS6ではジェスチャーイベントに問題があります。gesturestartの発生タイミングが遅れたり、gestureendが数回発生するなど、仕様通りの動きをしないときがあります。

　以上のことから、ジェスチャーイベントの利用は、iOS5以前だけを対象とした、簡単な処理の場合など、限定された環境でしか使わない方が良いでしょう。

今後のタッチ仕様の動向

　W3Cの標準化仕様と、Appleの仕様に乖離があるのには複雑な事情があります。実は、W3Cでのタッチイベントの標準化は難航していて、勧告候補が2011年12月に出てから10カ月ほど停滞しています。W3Cのタッチイベント仕様は、Appleが実装していたタッチイベントを標準化しようと進めていました。しかし、Appleの特許開示によりTouch Events PAG（Patent Advisory Group）というグループが立ち上がり、その影響を調査することになりました。この報告が出るまでは仕様策定は一時停止されます。現在も調査中で、まだその報告は挙がっていません。

　そんな中、MicrosoftはMSPointerという独自の仕様をWindows 8のIE10で採用することにしました。MSPointerの概要については、IEBlog（Touch Input for IE10 and Metro style Apps）の記事に分かりやすくまとめられています。簡単に説明すると、タッチもマウスもペンも、ポインタという抽象概念で同じように扱い、今後出てくるだろう新しいデバイスにも同じインターフェイスで対応しようというコンセプトです。ちょうど9月に、W3Cへ仕様を提出したようで提案（Pointer Events Specification）が挙げられています。

　またMicrosoftが独自APIを、と嘆く技術者も多いかと思いますが、実はこのモデルは2009年頃にW3Cで検討され、Firefoxでも一時期実装されていました。しかし、標準化がまとまらず中止されていた仕様を、今日になって、Microsoftが再検討し、取り入れたというわけです。技術的にはタッチの先を見据えた優れた仕様で、今後注目される技術です。

　少し前にこのあたりの経緯がjQuery Blog（Getting Touchy About Patents）に挙がり一部で話題になりました。W3CとAppleがこのまま折り合いがつかずタッチイベント仕様は頓挫するのか、はたまた新しい方向へ舵を切るのか、われわれ開発者にとって非常に大きな関心の的です。

想像以上に不安定なタッチ操作をうまく吸収するために

　タッチUIの特徴とその癖から、HTML5のWebアプリでUXを実現するポイント、Webでのタッチイベント仕様の内容と最近の動向までを見てきました。

　これまで何度も述べてきたように、タッチ操作は想像以上に不安定です。それをシステムでうまく吸収し適切なフィードバックを与えることで、快適なUXを提供しなければなりません。

　また、タッチデバイス、特にモバイルWebブラウザはまだまだ発展途上です。アップデートのサイクルが速く、仕様が変わることも多々あります。ブラウザ間の互換性やパフォーマンス、潜在的なバグの問題もあります。

　FacebookアプリがHTML5ベースからネイティブアプリへ転換した、という一件から、HTLM5の幻想と現実のような話が盛り上がりましたね。確かに現段階ではネイティブに勝てる点は少なく、標準化の道も明るくないかもしれません。すべてを救う銀の弾丸どころか、複雑に断片化し続ける環境に悩まされることになりそうです。

　しかし、それでもやはりWeb化の流れは止まらないでしょう。インストールレスのアプリはユーザーにインストールの負担を与えず、いつでも、どの端末でもすぐに使い始められるメリットがあります。開発者にとっても、HTML5ベースアプリのプロトタイピングの開発速度は目を見張るものがあります。もちろんすべてのアプリがHTML5になるわけではないでしょう。適材適所ですが、その対象領域がますます広がっていくことは想像に難くありません。

　HTML5もタッチUIもまだ新しい技術です。今後、技術的課題も改善され、もっと優れたUXも考えられるでしょう。新しいパラダイムへシフトするさなかの現在、こういった新しい技術に触れるのはワクワクしませんか？ 今後もHTML5 Webアプリから目が離せません。

高岡大介

大手外資系ITベンダから独立行政法人の研究所を経て、現在はフリーエージェントとして活動。コンピューターサイエンスの研究開発や、フロント/バックエンドの実装からプロジェクト管理まで幅広く手掛ける。最近はタブレット向けHTML5 WebアプリInkpod Webの開発や、AITCの運営委員、Japan Sencha User Group共同運営者などコミュニティ活動も活発に行っている。