jQuery Mobile Beta1の変更点を速やかに即日でまとめる

ちょっと大きめアップデート



初のβリリースとなった今回はそれなりに変更点をため込んだアップデートです.詳細はきっと誰かが粘着質にまとめる!

とはいえ,Twitterでは苦い顔をしながら追いかけてきた身なので,自分でもさらっとアップデート内容をなめてみます.

以前のバージョンからの移行についての特化記事は,jQuery Mobile Beta1へのアップデートについてのほうを.

全体的に良アップデートな主たる内容

Key Changesを元に,主な変更や新規の内容について追いかけてみます.

トランジションがいろいろスムーズになった

最も重要.これはもう体感したほうがいいと思いますが,iOSで見てる限りは確かにそこそこスムーズになった印象です.不自然にガッコンガッコンとした座標調整も諦めてくれたみたいで,全体的な動きがスムーズになりました.Androidはちょっとちらつき残ってるので今後に期待.

移動量がしきい値に満たない場合は前のスクロール位置の復元をしなくなったようです.今後もデバイス間の事情と相談しながら改良予定らしいです.

$(document).bind('mobileinit', function(){
    //デフォルトはデバイスの解像度の1/2
    console.log($.mobile.minScrollBack);

    // スクロール位置が常に復元される
    $.mobile.minScrollBack     = '0';

    // 常に復元されなくなる
    $.mobile.minScrollBack     = 'infinity';
});

と,書いてあるような気がするんですが,そういう動作になってないような気のせい??

iOSとAndroidで,URLバーを隠すようになった

ページ遷移時のズレを軽減して見た目をスムーズにするために,URLバーを常に非表示にするようになりました.

これを実現するために,通常のclickよりも先に動くvclickイベントを利用しています.これが他のjQueryPluginなどがbindしたclickイベントを,阻害する可能性があります.影響はタッチ型デバイスに限りますが,これを回避するには,既存のclickイベントをvclickイベントに書き換えます.

$.mobile.useFastClickオプションをfalseにすると,URLバーは隠れなくなり,Ajaxハンドリングが通常のclickイベントで処理されるようになります.

$(document).bind('mobileinit', function(){
    // URLバーが隠れなくなってAjax
    $.mobile.useFastClick = false;
});

このあたり,中の実装コードを読んでみると面白いです.

file://pathや../../dir/などを含むすべてのURLを処理できるように

file://とかは特にローカルインストール型のアプリケーション向けのサポートだとか.内部的にも,$.mobile.path.parseUrl()や,$.mobile.path.makeUrlAbsolute()などの$.mobile.path.???系のメソッドが多く追加されました.

PhoneGapとかでjQueryMobileを使うひとには特に恩恵がありそう.DwのCS5.5でサポートされたらしいですしね.

自動でviewportが挿入されなくなった

今までviewportの指定がないときはjQM側で自動で挿入していましたが,それがなくなりました.手動でイイ感じにすればいいでしょ,という旨.そもそも,alpha4まで動的なviewportの挿入が,Windows Phone7をサポートしていなかったらしいです.

<!-- 今まで自動挿入されていたviewport -->
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

<!-- 下記の理由によりピンチズームを無効化しないほうがよさげな推奨viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">

関連して,デモページのviewportは,minimum-scale=1, maximum-scale=1の自動挿入をやめて,initial-scale=1になりました.iOS bug test pageで示されるiOS側の変な動作により,デバイスを回転させてからさらに元に戻したとき,フィットする倍率に戻ってくれないためです.今のところネイティブなピンチズームは無効化しないのが良いという話.

Responsive Layout Helpersが非推奨化

今までMedia Queriesに対応しないInternetExplorerのためにリサイズや回転がある度に,.portraitや.min-width-480pxのようなクラスをHTML要素に付与していました.Beta1からはそれによって発生する無駄な処理を嫌って,v1.0までに廃止する方向でこれらのクラスの利用が非推奨になりました

今後は基本的にMedia Queriesで書いて,IEにはRespond.jsで対応するのがオススメとのこと.

datepickerをオフィシャルのドキュメントおよびリポジトリから除外

モバイルデバイスにとって処理が重かったらしく除外されました.今年の後半には新しいdatepickerを搭載する予定だけど,それまでの間にdatepickerを使いたい場合は,jQuery-Mobile-Themed-DatePickerとかjquery-mobile-dateboxを使うとよろしいとのこと.

$.mobile.changePage()が拡張性のために分離

loadPage(), changePage(), transitionPages()になりました.changePage()自体の引数の順序も変更されて,第1がurlまたはpageを含むjQueryコレクションで,第2がオプションobjectです.詳しくはMethodsを参照のこと.

base要素を指定してパスをより確実に通せるように

jQMは一番最初に開いたドキュメントのDOMにAjaxでpageを追加していくわけですが,それぞれのpageが必要とするJSやCSS,画像の類を読み込むにあたってbase要素を指定しておくと,違うディレクトリにあるpageをイイ感じに扱えるようになります.base要素が書かれてていなかったら,スクリプトが自動で挿入します.

単にbeta1にアップグレードした場合は,特に変更する必要はないらしいです.

ページトランジションが分割されて,拡張可能に

拡張方法はこちらのPage Transition Pluginsを参照のこと.

BlackBerry5とOpera Miniがサポート対象に追加された

らしいです.

依存するjQuery本体バージョンが1.6.1になった

順当に上がりましたね.

かんそう

自分の見解は"jQuery Mobile != モバイルコンテンツの最適ソリューション"であり,"jQuery Mobile == コストカットツール"というスタンスで,今のところまだそういう認識です.ただ,このbeta1で大分良くなってきたので,今後も期待していいんじゃないでしょうか.


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search