The Diary of Aska

スマートフォンのWebはモッサリしていてダメなのか?その真偽を追って我々は検証を開始した。 Vol.1

「スマートフォンのWebはモッサリしていてダメだ」 その真偽を追って我々は検証を開始した...

※ 1/31追記(1): 検証に用いたOSはiOS6.1(Safari/Chrome)で他のOS/Browserは進行中です m(__)m
※ 1/31追記(2): clickが鈍いのはダブルタップのズーム待ちがあるからだそうです by @teyosh
※ 1/31追記(3): サンプルがAndroid 2.3系でも動くようになりましたがモッサリしてダメです(悲)
※ 1/31追記(4): 未来の為、新しめの端末向けに検証自体は続けていきます

1/31追記: Android 2.3系(2〜3年前の端末で検証)の追加検証

経緯

1年以上前に書いたスマートフォン用のWebアプリが残念過ぎてこれじゃ人に見せられない、折角なのでWebでどこまで気持良いアプリが掛けるのか検証してみることに。

検証(最新機種)

まずはスライダーを実装してみる、スライダーを書くのは初めてなので恐る恐るJsを書いた。

動きはするがモッサリしている...、うーん、なんだこりゃ。。。

ダメもとで click じゃなく touchstart イベントにバインドしてみる、超速ぇーなんだこりゃ..

しかし触った瞬間反応するんじゃ使えない、スクロールやスワイプが出来ないのだ、そこで touchend も組み合わせることに、おぉ、いいじゃん。

で、まとめたのが以下。

デモ(タッチデバイス推奨)

ボタン(touch) と ボタン(click) で反応速度が全然違うのがおわかりいただけるだろうか...

http://stage.tasks.7kai.org/static/sandbox/slider/

スワイプにもちゃっかり対応している。( page2 => page1, page3 => page2 のみ )

ポイント

  1. click は鈍いので touchstart / touchend を組み合わせて使う
  2. a要素はリンク、ボタンはbutton要素を使う
  3. touchend で e.preventDefault() する
  4. :active, :hover の判定が残り見苦しいので使わない
  5. スライド動かすときは document.activeElement.blur() しとく
  6. animate(Js) じゃなくて translate(CSS)
  7. -webkit-overflow-scrolling: touch;
  8. scrollTo(0, 1) しない

click は鈍い?

デモをスマートフォンで開きタッチボタンとクリックボタンを押し分けてみると反応速度の違いがわかる、イライラするのでタッチボタンを使おう。

a要素はリンク、ボタンはbutton要素を使う

a要素にイベントを張っていると反応時に要素の当たり判定圏内が黒くチラツク、リンクなら別に何がタップされたのかわかっていいね位だがボタン操作でいちいちチラつかれては目障りなのでbutton要素を使い、かつ touchend で e.preventDefault() して回避している

:active, :hover の判定が残り見苦しい

bootstrap.css を使っている場合 .btn:hover.btn:active が掛かってしまうので削って minify している、タッチデバイスではこのactiveの判定がなかなか外れない、js で window.focus() やら document.activeElement.blur() してみたがダメだった。

document.activeElement.blur()

これしないと textarea にフォーカスが当たっているときにスライドすると仮想キーボードが出っぱなしになってみっともない。

animate(Js) じゃなくて translate(CSS)

スライドのアニメーションはCSSで実現している、これの方が速い。

-webkit-overflow-scrolling: touch;

スクロールだがページ全体でなくスライド(section)単位で行っている、昔は2本指でなぞらないとスクロールできなかったが最近ではこの問題も解消したらしい。

しかしここにもTipsが1つあり、section要素に -webkit-overflow-scrolling: touch; を掛けておかないとスクロールガックガクになる。

あとページ全体のスクロールにしていないのは、そうしないと下のメニューがスクロール合わせて動いてしまうからだ。

position: fixed 対応おのお陰で一瞬で居て欲しい位置に戻ってくれるがスクロールの度に一瞬上にせり上がられては格好悪い。

scrollTo(0, 1) しない

もうアドレスバー消さなくていいかなと、ホームに追加してくれると嬉しいな位の感じが好み。