nerineと考えるWebアプリのiPad対応

若干ブームに乗り遅れましたが、iPadを触る機会があったので、思った事を書こうかと思います。

iPhoneより画面が大きくて見やすいので、ブラウジングはもの凄いやりやすい！！
けど、逆にタッチ操作に向いてないサイトであると一気に操作感が悪くなる。
一部のサイト(youtube,twitter)等ではiPad向けのデザインを提供しているみたいだが、そんなに多くはない様子。

@rosylilly氏が開発したHTML5を用いたプレゼンテーションツール"NERINE"
http://www.aduca.org/nerine/
で作られたプレゼンページもiPadでは見ることができなかったorz

具体的に言うと、iPadではソフトウェアキーボードなのでフォーム入力時にしかキー入力が行えない。
そのため、ページ送りができないのだ。
(もし僕の勘違いでソフトウェアキーボードを出すことができても、矢印キーがないorz)

しかし、jsであれば結構簡単にタッチでのページ送り等は実装できる感じである

jsによるiPad検出は以下のコードで行える(http://davidwalsh.name/detect-ipad)

var isiPad = navigator.userAgent.match(/iPad/i) != null;

次にタッチ時のイベントを登録する

document.addEventListener('touchstart', touchStartHandler, false);
document.addEventListener('touchend', touchEndHandler, false);

タッチ開始時に、開始点を保存

function touchStartHandler(e)
{
  isTouch=true;
  startX=e.touches[0].screenX;
  startY=e.touches[0].screenY;
}

タッチ終了時に、終点からタッチの移動方向を求める

function touchEndHandler(e)
{
  endX=e.changedTouches[0].screenX;
  endY=e.changedTouches[0].screenY;

  if(Math.abs(startX-endX)+Math.abs(startY-endY)<100)
    return;

  if(startX-endX>0)
    Nerine.prevPage();
  else
    Nerine.nextPage();	
}

移動範囲が狭い場合はreturnを行う。ここら編のパラメーターはどうすべきか微妙。
あとは、タッチの移動方向での処理を書けばおｋ

これだけでページ送りは実装できる。
nerineにiPad対応を雑に行ったのがこちら
http://yukino-test.appspot.com/example/Example.htm#p0

作ってから思ったのだが、iPadではブラウジングするときにタッチ+スライドでスクロールを行う。
それを阻害する感じでtouch系のイベントを使ってしまうかもしれない。そこが難しい。
ブラウジング時のスクロールとしてタッチしたつもりが、なにかしらのイベントがおこるというのは不愉快だろう。拡大縮小も、同様だと思う。

iPad向けWebアプリは特に1画面で収まった方が無難な感じだ...