ぱろっと・すたじお

技術メモなどをまったりと / my site : http://parrot-studio.com/

モバイルブラウザでクリックの動作が遅い問題の対応(改善編)

相変わらず開発を続けている「チェンクロパーティーシミュレーター」ですが・・・


Get our light! - チェンクロパーティーシミュレーター

・・・昨年末に「部分的でもいいからスマフォ対応が欲しい」という要望をいただきまして

「パーティーを編集する仕組み」として考えると、
スマフォの狭い画面ではいろいろ設計が面倒なのですが、
「データを見るだけ」であれば、専用の画面を作ればいけるかなと

「データを見るだけモード」は元々ToDoに入れて放置していたのですが、
今回の要望とあわせ、イメージが湧いたので、
現在ごりごりと実装しております...φ(・ω・`)

まあ、裏のAPIは同じでViewを差しかえるだけですので、
大雑把なプロトタイプはすぐに完成し、
試しにサーバに突っ込んで実機テストしてみたのですが・・・

・・・いろいろ動作が怪しすぎて、使い物になりませんでした(´・ω・`)

どうもクリック周りの動作が怪しいのです
最初の2回くらいはまともなのですが、
そのうちイベントが取れなくなり、最後には固まるという・・・

そもそも、タブレットで動作させた時にも、
クリック周りで怪しい動きがあったのですが、
見なかったことにしていたんですよね・・・Σ(・ω・ノ)ノ

今回はそういうわけにいかないので、いろいろ調査してみたところ、
たぶん「Hammer.js」が原因、というところに行き着きました

そもそもこのライブラリをなんで使ったのかというと、
タブレットのブラウザでクリック動作が遅かったからなのです


「チェンクロパーティーシミュレーター」を公開しました - ぱろっと・すたじお

Hammer.jsはいろいろなイベントを実装する上で、
クリックの動作も改善していたわけですが、
「汎用的にいろいろ作り込まれていて、影響が大きい」のも事実です

最初のうちはHammer.jsでいろいろやろうとしていたのですが、
今使っているのは結果的に「クリックの反応速度改善」だけであり、
もっと軽いのはないのか・・・と調べ始めました

そして見つけたのがこちらです(´・ω・)っ


ftlabs/fastclick · GitHub


JavaScript - FastClickを使った体感応答時間の短縮テスト - Qiita

その名の通り、クリック速度の改善に特化されており、
ライブラリもシンプルで、組み込みやすくなってます

しかも、Hammer.jsと違い、イベントの記述は一般的な
「$(hoge).on 'click'」とかでよく、コードもシンプルで良いです(`・ω・´) b

とはいえ、やはりイベントに割り込んで動作するライブラリのため、
他のライブラリ(盲点なレベルだとBootstrap)等と、
競合しておかしくなる可能性は十分にあります

当たり前のことですが、動作確認はしっかりと(´-ω-)


・・・とまあ、これで終わってもいいのですが、
今回の話には落ちがありまして

サーバに改善版をUPし、実機でテストしてもOKだったので安心していたら、
コードに記述漏れがあり、ライブラリは読み込んでいたけど、
イベントは適用されてない状態でしたΣ(゚Д゚)ガーン

でも、実機でテストしたときにクリックの違和感はなかったわけです
だとすると、元々私が「遅い」と感じたクリックはどこへ・・・
という疑問が湧きます

私のスマフォはAndroidで、ブラウザはChromeですので、
先ほどの実験記事にある「対策済み」のパターンに該当しますし、
元々スマフォでは「編集できない」という表示テストしかしてません

しかし、タブレットiPad miniで、OSは7で留めてますので、
Safariのバージョンはリリース当初と変わってないはずなんですよね・・・

・・・まあ、今まともに動いているからいいかΣ(・ω・ノ)ノ