jQuery Mobileを試した記録

2012 年 7 月 24 日 by 山平

過去に弊社fujiiがjQueryMobileの紹介記事を書いています。

jQuery Mobileを試してみました。

先日やっと試すことができたので、記録しておきます。
PC向けサイトでjQueryに慣れているけど、jQueryMobileは初めて使う、と言う人は以下の点に注意して利用されることをおすすめします。

jQuery上に構築されたレイアウト調整機能であるため(?)意外と遅い

jQueryはクロスブラウザ対応、Ajax対応、ハイパフォーマンスで既存の(DOM操作を中心に)javascript処理を一新したイメージがあります。
しかし、同じことをjQueryMobileに求めるべきではないような印象を受けました。

HTMLとdata-XXX属性を駆使してスマートフォン向けレイアウトを自動構築する作業は負担が大きいようで、使い勝手やパフォーマンスにjQueryに覚えた衝撃を期待するとがっかりするだけでなく、非効率なスマホサイトができてしまいます。
jQueryのMobile版、ではなく、jQueryのMobileレイアウトプラグインという気持ちで向き合う姿勢が大切なようです。

jQueryMobile(スマートフォン?)的なHTML構造が求められる

既存のWebサイトにjQueryMobile向けのdata-XXX属性を追加すれば「誰でも・素早く・簡単に」スマホ対応ができる、というものではないようです。
特にリスト内の要素の扱いはjQueryMobile独特と考えておいた方がよさそうです。

以下にサンプルを作成しました。
3つ以上のリンクのあるリスト要素、画像を含むリスト要素が、data-XXX属性を付与していなくてもレイアウトされていることに注目して下さい。

sample01_element_in_list.html

動的な要素追加の際に更新が必要(な場合がある)

FireBugなどで覗いてみると、スマホ的な見た目を実現するために、たくさんのクラスが指定されています。
javascriptを使って動的に要素を追加した場合に、手動で更新する必要がある場合があります。
Ajaxを使って部分的にページを更新する際などは注意が必要です。

リストの更新 – リストビューについて | jQuery Mobile 1.1.0 日本語リファレンス

sample02_add_listitem.html
※clickイベントが2回呼ばれるバグが残っています。正しく動作していたコードをコピーしてサンプルを作成したのですが…。

結局、jQueryMobileのルールに従うのが効率がよい

なんだか普通の結論になってしまいますが、結局のところjQueryMobileという環境の上で何かを作る際には、jQueryMobileのルールに従うべきです。
公式サイトに慣れるまではドキュメントに不満を覚えてしまうのですが、読み込むと意外と重要な情報が書かれています。
動的なページを作りたい場合はスクリプティングの項は目を通しておくとよいと思います。

スクリプティング | jQuery Mobile 1.1.0 日本語リファレンス

タグ: , , , ,

TrackBack