バグフィックス中心の1.0.1とは異なり、かなり大きな変更を含むバージョン1.1.0の公開が近づいています。今回は変化が激しいため、RCを挟むようです。
Announcing jQuery Mobile 1.1.0 RC1
以下、主要な変更ポイントのまとめ。
固定ツールバーのスキーム変更
jQuery Mobileの開発スタート当初は実用的なサポートがほとんどされていなかった position:fixed ですが、最近対応状況が良くなっていることから大々的に書き直したとのこと。実際にiOS5で試してみましたが、確かに劇的にスムーズです。スクロールする度に逐一消えていたツールバーも、表示されたままで自然な感じに。ただ、ページがオペレーション可能になるまでの時間が遅くなったようにも感じますが。
このネイティブな新固定ツールバーが動作するのは、次のブラウザ。
- iOS5 – iPhone and iPad
- Android 2.2 and 2.3
- Android 3.x tablets (Honeycomb)
- Android 4.x (ICS)
- Chrome for Android (beta)
- BB Playbook 1-2
- BB7
- Nook Color/Tablet
- Kindle Fire
- Kindle 3
- All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)
これ以外の環境では、どうやら固定ツールバーとして設定しても、通常のページと一緒にスクロールされる形になるようです。1.0で実装されていたスクリプトによる動的なものは、廃止になったということですね。
ページ切り替え機能の向上
重いと言われることの多いページ切り替え機能も、かなり手を入れられました。スマートデバイス上での切り替え効果実装が何故難しいのかが色々と書かれていますが、つまりは遷移前のページと後のページ両方を描画したままアニメーションすることが、スクロールページ位置などの関係で大変だということで。今回は、現在表示中のページを一度ホワイトアウトさせてしまうことで、この辺の問題を解決することにしたようです。実際に見てみると一目瞭然ですが、特に不自然さは感じないので良いと思います。
もうひとつ強調されているのは、Androidプラットフォームのアニメーション描画性能の悪さ。色々頑張ったけれど充分なパフォーマンスを得るのは難しかったようで、結局、3DトランスフォームをきちんとサポートしていないAndroid2系の環境などでは、効果に何を指定しても一番軽いフェードアウト/インのページ切り替え効果にしてしまうようになりました。
新たなページ切り替え効果2つ実装
そんなページ切り替え効果ですが、サポートの良いプラットフォームでは更にリッチに使えるよう、新たに2つの効果が追加されています。”turn” と “flow” で、試してみるならこちらから。
ページ切り替え効果のFirefoxサポート
-moz系の記述が入り、FFでもページ切り替え効果が動作するようになりました。これは切り替え効果へのニーズが低いPC端末向けではなく、いずれ出るFirefoxモバイルを睨んだものでしょう。
Ajaxローダのデザイン変更
「よりロードが速く感じる」デザインに変更したのだとか。どうでしょう。
あわせて、ローディングメッセージを表示させるかどうかのオプションや、メッセージをメソッド呼び出しのその場で引数として指定できる機能も加えられた様子。動作確認は、こちらで。
TouchOverflow機能の廃止
書籍でも「今後デフォルトになっていくのでは」と書いたTouchOverflowですが、敢無く廃止となりました。iOS5以外ではサポートが進まなかった上、そこでの実装もバグだらけ。メンテの手間が大変なので、断念とのこと。
jQuery 1.7.1のサポート
これまでjQuery本体は1.6.4とされてきましたが、1.7.1も正式に対応バージョンとなるようです。今後はむしろ、1.7.1を使ってくれとのこと。
ミニフォームの実装
固定ツールバーなどを進めていると、ヘッダ/フッタにフォーム要素を入れたくなることも。しかし従来の拡張オブジェクトではレイアウトに入れるのが難しいということで、新たにミニ版がつくられました。
これを使うには、要素に data-mini=”true” を指定するだけ。実際に従来のものとどれくらい異なるのかは、こちらを参照。
フリップスイッチのデザイン変更
つまみの部分が小さくなったり、最近のインターフェースを研究してデザインを改善したとのこと。確認はこちらから。
スライダーにハイライト機能の追加
スライダーの左側に色をつける「ハイライト」機能が追加されました。確かに、直観的に大きさが分かりやすいかもしれません。
この機能を有効にするには、要素に data-highlight=”true” を指定。
スライダーにステップ指定機能追加
HTML5のrange要素には既にある、step属性の指定が可能になりました。デフォルトは1ですが、ここに例えば step=”25″ と指定すれば、25おきにしか数値指定できなくなります。
iOSでのズーム機能のバグに対応するスクリプト
iOSでデバイスの回転とページのズームに関するバグに悩まされてきましたが、Scott Jehl氏のハックで対応可能になったようです。これを取り込むため、新たに zoom.iosorientationfix.js という身も蓋もない名前のユーティリティを追加。
更に、セレクトボックスやインプット要素がフォーカスを得た際に発生する別のズーム問題を解決するための zoom.iosfocusfix.js も用意されました。
ユーティリティとして $.mobile.zoom が用意され、enable()/disable()メソッドでズーム機能を切り替えることもできるようですが、まだ試せていません。
AMDモジュール対応
AMDに対応し、実行時に動的に追加モジュールをダウンロードできるようになりました。既にjQuery本体ではサポートされている機能です。
data-enhance=”false”属性
フレームワークが自動的に全てのマークアップを拡張してしまうため、サードパーティ製のウィジェットやライブラリで用意された要素にも自動的に拡張され、意図した動作やデザインが上書きされてしまう問題がありました。それをシンプルに解決するため、要素に data-enhance=”false” が指定されている場合には自動初期化処理が行われない仕様になりました。
今日は時間が無く、ざっと。
いずれ日本語リファレンスの方に対応を入れ、補足します。
Related posts:
- [jQuery Mobile] Markup Cheat Sheet
- [jQuery Mobile] ActionSheetプラグイン
- [jQuery Mobile] PhotoSwipeプラグイン
- [jQuery Mobile] SEOとユーザビリティを両立させるポイント
- [jQuery Mobile] ベータ2 リリースノート
