モバイルブラウザでクリックの動作が遅い問題の対応(改善編)
相変わらず開発を続けている「チェンクロパーティーシミュレーター」ですが・・・
Get our light! - チェンクロパーティーシミュレーター
・・・昨年末に「部分的でもいいからスマフォ対応が欲しい」という要望をいただきまして
「パーティーを編集する仕組み」として考えると、
スマフォの狭い画面ではいろいろ設計が面倒なのですが、
「データを見るだけ」であれば、専用の画面を作ればいけるかなと
「データを見るだけモード」は元々ToDoに入れて放置していたのですが、
今回の要望とあわせ、イメージが湧いたので、
現在ごりごりと実装しております...φ(・ω・`)
まあ、裏のAPIは同じでViewを差しかえるだけですので、
大雑把なプロトタイプはすぐに完成し、
試しにサーバに突っ込んで実機テストしてみたのですが・・・
・・・いろいろ動作が怪しすぎて、使い物になりませんでした(´・ω・`)
どうもクリック周りの動作が怪しいのです
最初の2回くらいはまともなのですが、
そのうちイベントが取れなくなり、最後には固まるという・・・
そもそも、タブレットで動作させた時にも、
クリック周りで怪しい動きがあったのですが、
見なかったことにしていたんですよね・・・Σ(・ω・ノ)ノ
今回はそういうわけにいかないので、いろいろ調査してみたところ、
たぶん「Hammer.js」が原因、というところに行き着きました
そもそもこのライブラリをなんで使ったのかというと、
タブレットのブラウザでクリック動作が遅かったからなのです
「チェンクロパーティーシミュレーター」を公開しました - ぱろっと・すたじお
Hammer.jsはいろいろなイベントを実装する上で、
クリックの動作も改善していたわけですが、
「汎用的にいろいろ作り込まれていて、影響が大きい」のも事実です
最初のうちはHammer.jsでいろいろやろうとしていたのですが、
今使っているのは結果的に「クリックの反応速度改善」だけであり、
もっと軽いのはないのか・・・と調べ始めました
そして見つけたのがこちらです(´・ω・)っ
JavaScript - FastClickを使った体感応答時間の短縮テスト - Qiita
その名の通り、クリック速度の改善に特化されており、
ライブラリもシンプルで、組み込みやすくなってます
しかも、Hammer.jsと違い、イベントの記述は一般的な
「$(hoge).on 'click'」とかでよく、コードもシンプルで良いです(`・ω・´) b
とはいえ、やはりイベントに割り込んで動作するライブラリのため、
他のライブラリ(盲点なレベルだとBootstrap)等と、
競合しておかしくなる可能性は十分にあります
当たり前のことですが、動作確認はしっかりと(´-ω-)
・・・とまあ、これで終わってもいいのですが、
今回の話には落ちがありまして
サーバに改善版をUPし、実機でテストしてもOKだったので安心していたら、
コードに記述漏れがあり、ライブラリは読み込んでいたけど、
イベントは適用されてない状態でしたΣ(゚Д゚)ガーン
でも、実機でテストしたときにクリックの違和感はなかったわけです
だとすると、元々私が「遅い」と感じたクリックはどこへ・・・
という疑問が湧きます
私のスマフォはAndroidで、ブラウザはChromeですので、
先ほどの実験記事にある「対策済み」のパターンに該当しますし、
元々スマフォでは「編集できない」という表示テストしかしてません
しかし、タブレットはiPad miniで、OSは7で留めてますので、
Safariのバージョンはリリース当初と変わってないはずなんですよね・・・
・・・まあ、今まともに動いているからいいかΣ(・ω・ノ)ノ