jQuery Mobileについて社内LTした
「jQuery Mobileを触ってみた」
http://bossato.github.com/lt/jquery_mobile/
jQuery Mobileを仕事で使うようになり、色々知識がたまったので社内でLTデビューしました。
発表内容は大きく以下の通りです。
1.jQuery Mobileの紹介
2.jQuery Mobileの使い方
- 準備やページ構造等
- こういうUIが作れるというサンプル
- 実際に使って便利だった機能について
3.Tipsとか注意点とか
1や2に関しては公式ドキュメントのほぼ抜粋です。
その中で僕が良いと思った項目や機能を発表しました。
それよりも伝えたかったのが3についてです。
- UI(jQuery Mobile)について
仕事とかでたまにjQuery Mobileを使いたい！というお客様がいてその理由が、
jQuery Mobileを使うとリッチなコンテンツが出来る！
誤解されやすいかもですが、あくまでjQuery MobileはUIフレームワークです。
カルーセル出来ません。スライドショーみたいなこと出来ません。
ただ、jQueryの先駆者の方々が作られてきたjQueryプラグインや
公式にいくつかあるjQueryMobileのプラグインなどを使って対応することは可能です。
(その分、追加の対応となることを考慮してもらえれば)
- UI(CSS)について
jQuery MobileのUIを変えたい場合は大きく以下の2つの方法があります。
-
- ThemeRollerを使う
- jQuery MobileのCSSをオーバーライドする
色を変えたい、文字を変えたいレベルであれば上記の方法で問題ないです。
しかし、jQuery MobileのUIの仕様を外れるような変更(paddingの調整など)は、
jQuery MobileのCSSや他のパーツまで影響されないようになどに注意する必要があります。
そのため、かかるコストや影響範囲を考えた上でもなるべく避けた方がよいです。
早い段階でjQuery Mobileで出来るUIというのを調整した方が後々幸せになれます。
それでも変えたいという場合は、jQuery Mobileを選択肢から外すべきだと思います。
- Androidについて
今まで触ってきた感覚ですが、Ajax処理、アニメーション周りでAndroid端末の挙動の不安定さを感じます。
そもそもAndroid端末自体のCSS周りが怪しいのと、
Android端末依存の問題はjQuery Mobileに限らず避けられないので、
ここの関しても早めの段階でAndroid端末の挙動に対して調整した方が後々(ry
- Ajax処理について
jQuery Mobileを触った人の流行として、Ajaxを無効にする流れが出来てます。
理由はアニメーションが重い、スクリプトが動かない、挙動が不安定など。
そんなあなたに読んで頂きたい記事が下記です。
そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか - へっぽこプログラマーの日記
http://d.hatena.ne.jp/pikotea/20120405/1333631161
こちらの記事ではAjaxを疑うのではなく、1つ1つの挙動を確認して対処するように書かれています。
また、ページ表示が重たいという方は追加で以下の項目も確認して頂ければと思います。
基本的なことですがこういう所から対処をすることが大事な気がします。
