2012 年 8 月 18 日

androidでtouchmoveイベントが取得できない理由

android4.0

iphone,ipad,android用のHTML5アプリを開発していて、androidのタッチイベントの挙動が(mobile safariと比べて)おかしいなと思うことがあります。w3c Touch Eventsでの策定でも、細かなところまでは決められないだろうし、守られるものでもないだろうとは思うが、出来る限り統一されることを望みます。
W3C Touch Events version 2

機種・バージョンの差異に加えて、様々なブラウザが登場しているので、ネイティブアプリにせよ、HTML5アプリにせよ、ますます開発と試験が混沌としてきたと感じます。

touchmoveイベント

手元のSonyTableS(android4.0.3)では、コンテンツをscalableに設定した場合、touchmoveイベントが取得できません。viewportにてuser-scalable=noとすると正しく取得できるようになります。

 <meta name="viewport" content="user-scalable=no">

noにしなくても、touchmoveイベントを捕捉したら、preventDefault()を呼び出してやると正しく処理できます。そのかわりにピンチイン・アウトによるコンテンツの縮小・拡大ができなくなります。

  content.addEventListener('touchmove', function(event) {
    event.preventDefault(); // user-scalableに関係なく、touchmoveをpreventすると、ただしくイベントを扱える。ただし、scalableは無効となる。
    touches = event.touches;
  });

ブラウザとHTML5アプリとで、イベントの競合が起こっているというか、ブラウザによりイベント通知の仕様が異なっているのでしょう。

ピンチができないとスマートフォンじゃない

じゃあ、scalableにしなければいいのでは?と思いますが、一般の人にとっては、このピンチによる縮小・拡大こそ、スマートデバイスだと感じている人が多いため、この機能を諦めることがなかなか認められないこともあります。スワイプ・フリックも同様ですが、これらの機能こそスマートデバイスたらしめるということでしょうか。

多くのHTML5アプリでも、スワイプ・フリックは可能でも、ピンチはだめというのが多いように思います。

しかし、mobile safariでは、scalableであっても、ただしくイベントを捕捉し、処理できるのです。だから、よけいに悩ましいのです。iphone,ipadならできてるじゃないかと言われてしまいます。mobile safariではかなりきっちり扱えるという印象です。

スマートフォンHTML5追従型広告

最近、スマートフォンHTML5コンテンツで追従型の広告を見ることあります(スクロールしようがピンチしようがついてくる広告)。ネイティブアプリではめずらしくありませんが、HTML5でも見たことがあります。

最初見たときに、ピンチにも追従するので、どうやってこれを実装しているんだろうと興味を持ちました。
しかし、それはiphone,ipadのmobile safariでしか、今のところ見たことがありません。おそらく、その原因は、このタッチイベントあたりの理由なんだろうなと思います。

私だったら、最初から実装を諦めたかもしれないですが、広告は表示することが一番の目的ですから、あきらめずに試行錯誤されたんだろうと思います。脱帽です。