numalog

ぬまおうの活動日誌

ハイブリッドアプリ開発で役に立ったもの、感想#2

without comments

前回の続編のようなものです。

  • jQuery.clickは遅い

いろいろ調べてるうちに、どうもjQueryのclickイベントや、onclick、a href等をフックする方式は、レスポンスにラグが発生することがわかりました。
これは仕様で、タッチパネルの長押しや、その他操作を検知するためらしいです(300ms?)。
確かにもっともな理由ですが、実際ボタンだけを使いたい側としてはそんなもの必要ありません。
では自分はどうしたかですが

を使いました。 タップを高速で拾うことができるFastClick.jsというライブラリがあるのですが、それをjQueryでラップしたものです。
どんなアプリでもはっきりと分かるぐらい、タッチレスポンスが改善します。   ただし上のjsでは特にunbindする方法が明記されていないので、動的にハンドラーを入れ替えたいときは自分で追加する必要があります。
自分のアプリでは実際に必要があったので、

$.fn.unbindFastClick = function() {
        $(this).unbind('touchend');
        $(this).unbind('click');
        $(this).unbind('touchstart');
}

を追記して使いました。これで確実であるかどうかは分からないけど…。
ハイブリッドアプリでは、この方法を使わないにしても、タッチ周りの対策はほぼ必須といえるかもしれません。

また今回結局使うことは出来なかったのですが、

  • zepto.js (or zepto.min.js)をjqueryの代わりに使う

という方法もなかなか効果があるようです。zepto.jsは、jqueryとある程度互換性を保ちながらも、超軽量化に成功しているライブラリです。
実際にjQuery読み込み時間と比べて半分ぐらいになるそうです。検証はしていないけれど。
いくつかjQueryの機能で実装されていない物があるので注意が必要です。自分はちょうどそれで使用不可能でした。

他には、

  • jQueryMobileを使用していると mediba adのバナーが張れない

ということが発覚しました。jQueryMobileはインポートするだけでDOMを勝手にいじるらしいので、どこかへバナーを隠蔽してしまうのでしょう。多分・・・
これに気づき、UIをjQueryMobileで実装することをやめました。手間は少し増えましたが、幸か不幸かアプリ動作自体は軽くなり、
またレイアウトも細かく自分で実装する分、制御しやすくなった気がします。

その際は、CSSでのグラデーションを生成するサイトや、ボタン風レイアウトCSS生成サイトにお世話になりました。 最終的には動作も軽くなり、特に不自由するところもなかったので、jQueryMobileをなくしたことが良い結果になりました。


Written by numa

5月 2nd, 2013 at 1:15 am

Leave a Reply