jQuery Mobile のbeta3が待望のpushStateに対応したっぽい＆その他
Posted: Updated:
コンスタントにbeta3でてきましたね
beta2あたりから既にそうですが，今回も大きな変更というよりはブラッシュアップが中心になっているリリースです．
パッケージビルダーの用意や，アニメーションのCSS Transitionへの切り替えは，まだまだこれから．
私事ですが，明日jQuery Mobileについて人前でしゃべるので，ネタ的には滑り込みセーフでよかった〜．
今回の変更点
jQuery Mobile Beta 3 released! | jQuery Mobileより変更点を解釈していきます．
回を重ねる毎に，jQuery Mobileというよりモバイル端末への実装アプローチの勉強になってきています・・・．本来の目的はどこへやら．
- pushStateに対応してURLがクリーンに！
- 新しいpagechange系イベントが発行されるようになった
- iOS5での動きが劇的に改善
- beta2からbeta3への変更点
- キーフレームベースからCSSトランジションにするのは1.0以降
- ビルドツールは引き続き準備中
- サポート端末が追加
- jQueryのバージョンは1.6.2で据え置き
例によって訳・解釈等で誤ってるところがあればTwitterとかでご指摘くださいませ．あやふやなところとか，自分自身情報が欲しいところもございまして．
pushStateに対応してURLがクリーンに！
pushStateによるURL制御に公式対応しました．前から有志や第三者の試みとしてはありましたが，待望の正式サポートです．この機能はデスクトップのモダンブラウザ系とAndroid2.2以上＆Honeycomb，そしてもうすぐ出るであろうiOS5以降をサポート対象としています．
iOS4.x系をはじめその他の環境は含まれていません．サポートされないブラウザでは，従来通りのHash-Based URLによってサポートされます．
beta2以前のHash-Based URLの場合 : jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/abut/intro.html
beta3以降のpushState対応時のクリーンURLの場合 : jquerymobile.com/demos/1.0b2/docs/abut/intro.html
// 無効にする場合は，pushStateEnabledオプションをfalseにします
$.mobile.pushStateEnabled = false;
従来通りHash-Based URLで制御した後に，対応しているブラウザであればpushState & replaceStateの処理をかけているみたいです．何にせよ，腹立たしくもダーティだったURLがクリーンになって何よりですね．
ついでにDocument & Demosのソースも参照しやすくなりました．ブラウザのURL欄がreplaceStateで書き換えられていれば，該当URLのソースを素直に表示できます．
新しいpagechange系イベントが発行されるようになった
$.mobile.changePageが，新しい3つのpagechange系イベントを発行するようになりました．それに伴って，古いbeforechangepageとchangepageは改名されています．
changePageは通常，主にaタグにおけるclickイベントを乗っ取って，Ajaxを伴うページ遷移時に裏でコールされていますし，あるいはスクリプトから$.mobile.changePage()を直接コールして使われています．
クライアントサイドでオンメモリなJSONなどのデータから動的にページを生成したいときに，今回のようなイベントが役立つようになります．今まではサーバーサイドで表示すべきページHTMLが完全に作られる前提であったとも言えます．
pagebeforechangeイベント : ページを読み込む直前と，ページトランジションの直前に呼び出されます．data.toPageはページ読み込み直前であればリソースのパスが，トランジションの直前であれば読み込まれたページリソースが入ります．（分かりづら…）
pagechangeイベント : ページが読み込まれてトランジションまで終わったあとに発火します．data.toPageは実質表示中のページに相当します．
pagechangefailedイベント : 新しいページの読み込みに失敗したときに発火します．
通常のAjax遷移だと，以下のようなイベント発火の流れになります．
- 移動先ページのURLが指定されたa要素をタップ
- pagebeforechange 発火（data.toPageには移動先ページのURL）
- 移動先ページの読み込み
- pagebeforechange 発火（data.toPageには読み込まれたpageオブジェクト）
- トランジション
- pagechange 発火
これが #anchor のように指定されたページ内リンク風のpage遷移だと，リソースは読み込まれている状態なので，2と3が省略されて，pagebeforechangeは1度だけ発火します．
// 第2引数 ＆ preventDefault
$('#aboutPage').live('pagebeforechange',function(event, data){
// dataオブジェクトは，optionsとtoPageの情報を持ちます
// 実際に確認すると，いろいろと操作・参照できそうな感じ
console.log(data.toPage);
// pagebeforechangeでe.preventDefaultすると，pagechangeにいきません
e.preventDefault();
});
// pagechangefailedイベント
$(document).bind('pagechangefailed',function(event, data) {
// 新しいページのロードに失敗したときに発火します
});
Dynamically Injecting Pagesに，この機能に関する主要なドキュメントが載っています．
pagebeforechangeで要素のタップで得られたパスを拾って，それを元にJSONとかごにょごにょしてからpreventDefaultすりゃいいんじゃないの，っていう意図みたいですが，上記ドキュメントのサンプルコード見るのが一番早いです．
個人的には，pagebeforechangeという名称のイベントで，リソースのローディングと，トランジションの直前をそれぞれ捉えるのがしっくりこない印象です．どうせなら，pagebeforeloadとpagebeforechangeじゃないのかしら．
iOS5での動きが劇的に改善！
iOS5が，position: fixed，oveflow: auto，-webkit-overflow-scrolling:touchの各CSSに対応したことにより，今までJavaScriptで無理に重い処理をしてカバーしていた部分を，ネイティブの機能（本来の姿）に置き換えることができました．
これらのCSSをお手軽に試すなら下のような組み合わせで使うことになります．今までiScrollやSenchaTouchのScrollerで再現していた，特定領域のインナースクロールがCSSだけでサクッとできるようになった感じ．
.some_selector {
height: 480px;
overflow: auto;
-webkit-overflow-scrolling:touch;
}
これらのCSSがネイティブサポートされたことは，これらの表現にハードウェアアクセラレーションの恩恵も加わったことを意味します．それによって，よりネイティブアプリに近い操作感が今後提供できるようになるでしょう．
唯一欠点というかバグとして，-webkit-overflow-scrolling:touchが指定されていると，ステータスバー（画面の一番上のあたり）をタップしたときに，画面の一番上にスクロールする動きが無効化される点があるそうです．確かにそのようです（iOS5 beta7）．正式リリースまでに直るとよいですね
この素晴らしい対応は，デフォルトでoffなので以下のようにして有効にします．
$(document).bind('mobileinit', function() {
$.mobile.touchOverflowEnabled = true;
});
現状のiOS5 beta7で確認した限りは，むしろ上記のtouchOverflowEnabledをtureにしないと，data-position: fixedが正しく動作しないような．
beta2からbeta3への変更点
beforechangepageイベントがpagebeforechangeイベントに改名され．changepageイベントがpagechangeイベントに改名されました．
キーフレームベースからトランジションにするのは1.0以降
現在，keyframe-basedで行っているアニメーションを，CSS Transitionに置き換えるテストをしてみたものの，多くのモバイルブラウザで大したパフォーマンス改善がみられなかったそうで．ブラウザ側の改良も含めて，まだしばらく時間をかけるみたいです．
というか，キーフレームベースって，setIntervalとかrequestAnimationFrameのことを指してると思っていいのでしょうか？ jQuery1.6.2のままですし．このへん理解追いついてないです・・・．
2011-09-13 09:15追記
@yoshikawa_tさんに，キーフレームベースとトランジションについてご教授いただいたので，その内容のメモを追記します．webkit-keyframesという指定の存在をしりませんでした． orz
CSS Animation ( keyframe-based ) のこと
- キーフレームベースというのはCSS Animationのこと
- CSS AnimationもCSS TransitionもどっちもCSS3
- CSS以外からCSSに移行するわけではない
- 具体的には、@-webkit-keyframesを指定する
- キーフレーム単位の柔軟なアニメーション指定ができる
CSS Transition のこと
- CSS Transitionは開始と終了の2点しか指定することができない
- CSS Transitionsのほうが単純な分，パフォーマンスの向上が見込めた
- サポートされるブラウザがCSS Transitionsのほうが多い ※参考
- クロスプラットフォームをすすめているjQuery Mobileには都合が良い
すべて @yoshikawa_t さんからTwitterでいただいたリプライより
ということらしいです！
理解が及ばず不明だったポイントがスッキリして，大変たすかりました！m(_ _)m
- Using Keyframes – WebKit CSS Animation Examples « GirlieMac! Blog
- safari4 betaで実装されたCSS Animationを使ってみました。 : アシアルブログ
- CSS3のアニメーションってすごい。 - ありの日記
ビルドツールは引き続き準備中
beta2でつくる予定と書いてあったので，beta3でIn the worksになってるなら，RCないし正式版ではビルドツールも利用可能な状態になってるんでしょうかね．
サポート端末が追加
AグレードにBlackberry 7が追加されました．
jQueryのバージョンは1.6.2で据え置き
てっきりjQuery本体も1.6.3にシフトすると思っていたんですが．当てずっぽうですが，関係ありそうなのだと，1.6.3で，requestAnimationFrame APIのサポートを諦めた件とかの兼ね合いだったりするんでしょうかね？
つぎはいよいよRC（リリース候補版）
RCは今月末の予定だそうで，そうなるとこのブログの次回更新も今月末ってところですかね…近ごろすっかり更新が滞っております．
