jQuery Mobile のbeta2がでたので例によって変更点まとめた
Posted: Updated:
beta2ですよー，すぐにbeta3もくるみたいですよー
先日，jQuery Mobileがbeta2にあがりました．前回みたいにテンションあがるアップデートではないので，淡々と．
beta1以前にあったXSS等の問題はキチンとfixされているようなので，beta1以前でサイトを大公開しちゃってる方々は，可及的速やかにbeta2に上げましょう．
今度こそ脆弱性がなくなってるといいですね！
今回の変更点
alphaからbetaほどの大々的な動きはありません．普通にHTML駆動で利用している分には，あまり関係なくCDNからの読み込みをb2に変更するだけで，すんなり移行できるはずです．
- UIウィジェットを選択的にビルドできるように
- サポートされるプラットフォームの追加
- createイベントの追加
- DOMキャッシュ管理機構
- vclickイベントの廃止
- スワイプイベントのしきい値が設定可能に
- 動的にローディングメッセージを書き換えられるように
- ページプリフェッチ
- チェックボックスとラジオボタンのUIを更新
- data-role="page"が必須ではなくなった
- 自動の初期化を無効化できるように
- コードのクリーンナップとかベンダプレフィックスの拡充とか
- JS駆動を考慮してドキュメントが整備
- jQuery本体バージョンは順当に1.6.2へ
UIウィジェットを選択的にビルドできるように
jQuery MobileのUIウィジェット (buttonとかlistviewとかformとか) が個々の分割したファイルに分けられたことで，それらを選択的な構成でビルドできるようになりました．
ただし，依存性は手動で解決しなければなりません．例えば，buttonのように他のUIでも多用されるような依存性パーツについて，それを除いてビルドすることはできても，他のウィジェットをbuttonなしで使うことはできません．
今のところ，MakefileのJSFILESとCSSFILESから，ファイルの指定を外してからmakeするのがカスタムビルドの方法....かな？
依存関係を考慮したビルダーツールを用意する予定があるみたいなので，それ待ちということで．jQuery UIのアレみたいなもんですかね．
…ウィジット？…ウィジェット？
サポートされるプラットフォームの追加
主に，Nokia追加したよ！って言ってますが対応自体はB-grade扱いです．Nokia携帯シリーズの型番がよくわからないのでなんとも．日本であんまりお目にかかれないのも相まって．
A-grade : Android Honey Comb, Palm WebOS 3.0
B-grade : Nokia Symbian^3
createイベントの追加
各ウィジェットで，createイベントをtriggerできるようになりました．どの要素に対しても呼び出しができるイベントで，これを起動すると，手動でUIの初期化を行うことができます．
たとえば，開発者がAjaxでウィジェットの記述を含むHTMLを呼び出したときに，createイベントをトリガすることで，自動で見た目を初期化してくれます．
$('ウィジェットを含むあたらしいHTML').appendTo( ".ui-page" ).trigger( "create" );
で，リリースノートによれば，上記のようなコードで追加分のHTMLを初期化してウィジェットが含まれていればjQuery Mobileがきれいにしてくれるはず，なんですが手元で試しみたら失敗しました（汗
よって，この辺の解釈は自信ありません・・・．
createイベントと，いくつかのウィジェットがもつrefreshメソッドは使い所が異なります．createイベントはナマHTMLを初期化する手段で，refreshメソッドはUI同期込みでウィジェットの表示データを更新するような場合に使います．普通に使ってたら混同する恐れもない気がするけど，但し書きっぽく載っていたので一応．
DOMキャッシュ管理機構
今までページ遷移のトランジションのために，一度読み込んだページはDOMに追加したままにしてありましたが，いくつかのデバイスではメモリ上限にあたって遅くなるorクラッシュするようなことがありました．
そこでbeta2から，Ajaxで読み込んだページには除去フラグを立てて，別のページに移動した時点でDOMからこまめに除去するようになりました．これは前述のクラッシュ対策です．
DOMから取り除かれたページに戻る場合は，ブラウザキャッシュを使うかもしれないし，必要があればサーバーに再リクエストして取得することでしょう．
これは以下のようなオプションとして管理されています．デフォルトはfalseになっていますが，trueにすることで従来のDOMキャッシュを有効にできます．
// HTML駆動では，data-dom-cache属性をtrueに
<div data-role="page" data-dom-cache="true">ページ</div>
// JS駆動では，domCacheオプションをtrueに
elem.page({ domCache: true });
// デフォルト設定から書き換えるなら初期化時にprototypeを
$.mobile.page.prototype.options.domCache = true;
vclickイベントの廃止
beta1で導入されたvclickカスタムイベントは，ロールバックされて通常のclickが利用されるようになりました．細かく検証したら色々問題があったみたいです．
vclickが廃止されると，コンテンツを押し下げて再描画を強制してしまうURLバーの問題が復活します．これについては，alphaの頃と比べれば，beta1ほどではないにせよ改善されている状態は維持しているそうです．色々試したみたいだけど，完全にURLバーの非表示を維持するのは難しいみたい．
ちなみに，これに伴ってuseFastClickオプションが削除されています．
スワイプイベントのしきい値が設定可能に
スワイプイベントを判定する際の移動量などの設定値がハードコーディングされていたのを，外部から設定可能になりました．
scrollSupressionThreshold（デフォルト10px） : 水平方向の移動量の指定で，これ以上の移動量であればスクロールを抑止する．
durationThreshold（デフォルト 1000ms） : 設定値以内の時間で操作が完了しなければswipeとみなさない．
horizontalDistanceThreshold（デフォルト 30px） : 水平方向の移動量の指定で，これ未満の移動量であれば水平スワイプとみなさない．
verticalDistanceThreshold（デフォルト 75px） : 垂直方向の移動量の指定で，これ未満の移動量であれば垂直スワイプとみなさない．
// たとえばこのようにプロパティを書き換えられる
$.event.special.swipe.scrollSupressionThreshold = 10;
動的にローディングメッセージを書き換えられるように
beta2以前はmobileinit時に，$.mobile.loadingMesssageに文字列を入れることで書き換えるしかありませんでした．
それがbeta2からは，いつでも$.mobile.loadingMessageを書き換えできるようになったので，操作実行中でも動的にメッセージを変更して表示できるようになりました．
ページプリフェッチ
プリフェッチ（先読み）させておきたいページを指定できるようになりました．
// HTML駆動では，data-prefetch属性を指定する
<a href="foo/bar/baz" data-prefetch>リンクテキスト</a>
// JS駆動では，loadpageメソッドを利用する
$.mobile.loadpage(url);
スクリプトでやるときは，Ajaxでリクエスト〜レスポンスまで空打ちしてキャッシュさせときゃいいんじゃね，的なアプローチなのかな？
チェックボックスとラジオボタンのUIを更新
チェックボックスとラジオボタンのUIについて，アクティブ項目のボタン全体の背景色がドぎつい感じだった為，チェック部分の背景のみ色がつくようになりました．
ただし，水平方向にグループ化されたボタンについては，まだ暫く全体の背景色が設定されている状態だそうです．UIのビジュアルもまだ安定しない感じですね．
data-role="page"が必須ではなくなった
data-role="page"の指定が必須ではなくなりました．自動的にheader, content, footerを内包する要素をpageとしてみなすようになっています．
ただし，複数のpageをひとつのHTML内に持つ場合(multi-page)は，個々のページの切り分けのためにdata-role="page"を必ず指定しなくてはなりません．
自動の初期化を無効化できるように
これをfalseにした場合は，勝手に初期化しないで手動でjQuery Mobileライクに初期化していくことになります．
$.mobile.autoInitializePage = false;
…ってことですがうん，それやるなら使うべきはjQuery Mobileじゃないんじゃ．
コードのクリーンナップとかベンダプレフィックスの拡充とか
SLintのバリデーションが通るぐらいにキレイにしたよ！っていう話ですが，"Thanks to an intense 24 hour sprint by Rick Waldron of Bocoup"とあるので，このご両名がゴリゴリ24時間耐久コードクリーンナップを行った成果なのでしょう．すごい．
あと，CSSのほうもベンダプレフィクスを充実させて，ブラウザサポート幅が充実したらしいです．CSSはdata-*のnamespace指定時に，手動で書き換えないといけない手間を何とかしてほしいなー．
JS駆動を考慮してドキュメントが整備
すべてのプラグインについて，オプション・メソッド・イベントなどのAPIドキュメントの形式が整備されました．実際にはまだ適用の途中みたいですが，JavaScript駆動で開発したい利用者向けの情報が，今後より見やすい形で充実していくようです．
jQuery本体バージョンは順当に1.6.2へ
なったみたいですね．
つぎは9月にベータ3ですって
changelogまで追い切れていないのですが，その他のバグフィックスも入っています．
今度イベントで，jQuery Mobileの簡単な紹介をすることになっているんですが，それまでにbeta3出てくれるといいな〜，と思う次第です．
訳・解釈等で誤ってるところがあればTwitterとかでご指摘ください．サイレントにはてブコメントで指摘してもらっても気づかないことがままあります．
