[jQuery Mobile] ベータ2 リリースノート

公開されたので、例によって公式のをザクッと。

ベータ2のリリース内容

今回のリリースでは、ライブラリに大幅な向上があります。

• ウィジェットの切り離しによって、必要なコンポーネントだけを選択取り込み可能に
• DOMキャッシュ機能により、メモリ使用量の低減
• ページのプリキャッシュ・オプション
• ページ構造が柔軟に
• チェックボックス、ラジオボタンのデザイン向上
• JavaScriptによる動的ページを作る場合の拡張機能追加

ベータ1リリースから5週間の尽力で、正式版リリースに大きく前進しています。

ベータ3

正式版のRCとしてバグフィックスやパフォーマンス調整に入る前に、更に追加したい幾つかの重要な機能が残されています。来月リリース予定のベータ3では pushState のサポートや、切り替え動作の Firefox や Opera での向上、開発者向けの拡張機能実装などが含まれます。

jQuery Mobile 1.0では、ベースとなる jQuery core の 1.6.2 以上が必須となることに注意してください。jQuery coreでリリースされている更に上のバージョンもサポートされますが、基本線はこのバージョンを基にしています。

サポート対象プラットフォームの更新

ベータ2では、OperaとFirefox向けのCSSサポートを強化しました。また、Android 2.3搭載モバイルとHoneycombタブレット、HP Palm WebOS 3.0タブレットをサポート対象としています。更にNokia S60以降のデバイスをBグレードに加えました。

Nokia S60以降をBグレードとしたのは、これらの端末がハッシュの変更イベントを正しく検知しないためです。つまり、Nokia端末ではAjaxを使ったページ切り替え機能のような拡張機能が動作しないことになります。

この段階で、jQuery Mobileは現在使われている大部分のデスクトップ、スマートフォン、タブレット、電子リーダー上で動作するようになりました。加えて、プログレッシブ・エンハンスメント手法を採っていることで、古いブラウザ上でも動作します。ここでサポートしている広範囲のプラットフォーム上で、ユニヴァーサルなアクセシビリティを担保することが出来ています。

詳しくは、更新した jQuery Mobile 日本語リファレンス：サポートするプラットフォーム 参照。

ウィジェット：分離により柔軟なビルドが可能に

ページプラグインからウィジェットを「分離」させることは長年の課題でしたが、遂にそれが実現しました(参照 1 2 3)。「分離」とは、実際にどういうことか。各ウィジェットやユーティリティは、各個のスクリプトファイルに分割されています。しかし、ページプラグインが全ての公式プラグインをページ上にマークアップされていないかどうか確認するために、結局全てのプラグインファイルを読み込む必要があったのです。これによって、不要なプラグインを外すとエラーを起こすことになってしまいました。今後のウィジェット追加に際しても、非常に良くない慣行です。

今回のリリースで、全てのUIウィジェットはjQuery Mobileライブラリから完全に分離されました。そのため、もし特定のプロジェクトにおいて不要なプラグインがあれば、それを単純に削除することが出来ます。この変更によって実際に必要なプラグインだけを取り込めば良くなり、ダウンロードされるライブラリのサイズを劇的に小さくすることが出来るでしょう。現在、更に完全な分離が進められています。現時点で、次のファイルは分離されていますので、カスタム・ビルドの際に不要なものは取り除くことが可能です。

• page header/content/footer
• collapsible
• controlgroup
• fieldcontain
• fixheaderfooter
• button
• checkboxradio
• select
• slider
• textinput
• links theming
• listview
• navbar
• grid

いくつかのウィジェットは相互に関係しているので、依存関係表の作成も必要になってきます。たとえば、上記の多くのプラグインが動作にはbuttonプラグインを必要としますので、これを削除するには依存関係にある全てのプラグインが不要である場合だけということになります。

こうした推奨依関係表の作成や、分離機能自体も現在なお更新中です。究極的には、この機能はダウンロード・ビルダーに実装されることになると思われます。

“create”イベントの追加

個々のプラグインにウィジェットを適用する作業は、多くの場合、”pagecreate”イベントで自動的にウィジェット自身によって初期化されます。ページ上で該当するウィジェットがあった場合、プラグインスクリプトが自動的にエンハンス処理を行っていました。たとえば、セレクトメニュープラグインがロードされれば、ページ上のセレクト要素は自動的にエンハンスされます。

この処理が、今後は要素に対して “create” イベントを発行することでも可能になりました。これによって、手動で初期化する際の手間が大きく軽減されます。これまでは、コンテンツがAjaxや動的なマークアップによって変更された際、全てのプラグインを手動で初期化する必要がありました。

今後は、マークアップに “create” イベントを発行することで、ページが作られた時同様に必要なプラグインのチェックや処理を自動的に行わせることができます。たとえばログインフォームなどでAjaxを用いてHTMLのブロックを持ってきた場合、このブロックに対して “create” イベントを発行することで自動的に内包する input や button などのウィジェットをエンハンスすることが出来ます。例えば、次のようなコードになるでしょう。

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

ここで “create” イベントと “refresh” メソッドの違いに注意してください。新しい “create” イベントは、生のマークアップに対して包含する複数のウィジェットを適用します。一方 “refresh” メソッドは(幾つかの)ウィジェットに実装されており、既に適用されたウィジェットに対してプログラムから操作を行った場合などに、見た目の更新をするために呼び出すものです。

たとえば、ページがロードされた後で動的に ul 要素を追加し、そこに data-role=”listview” 属性を指定したとします。この要素に対して “create” イベントを実行させれば、この要素は listview スタイルのウィジェットになります。このリストに、プログラムから更に幾つかのアイテムを追加したとします。その場合は、リストビューウィジェットの “refresh” メソッドを呼び出して、リストの見栄えを更新してやります。

DOMキャッシュ管理機能

従来、Ajaxによるページ遷移時には、移動前のDOMに移動先のDOMを追加していくようになっています。これまで、この追加されたページは全体がリフレッシュされるまで追加されたままになっている仕様でした。そのため、あまりに多くのページを行き来されると、ブラウザ上のメモリを消費して動作を重くさせたり、最悪はクラッシュさせる危険性がありました。

ベータ2では、DOMを小さく保つための簡単な仕組みを実装しています。それは、次のように機能します。Ajaxによってページがロードされた場合、遷移が完了すると以前のページはDOMから一度削除されます。このページにユーザが戻ってきた場合、ブラウザはページ内容をキャッシュから取り出すか、必要であれば再度サーバへ要求するようになります。これが階層化リストの場合であれば、ユーザがリストに含まれないページへ遷移した際に全てのリストページを削除することになります。複数ページを内包したファイルである場合はこの限りでなく、あくまでjQuery MobileによってAjaxで取得されたページに限った動作です。

新しく追加されたページオプション “domCache” によって、以前のようにDOMをキャッシュし続けるか、それとも削除して小さく保つかを制御することが出来ます。初期状態では、この “domCache” オプションは “false” に指定されています。これは、ベータ1以前とは異なりDOMのサイズを積極的に制御しようとします。もしこれを “true” に変えるならば、DOMのサイズに関する問題を自分自身で、複数のデバイスに対してテストする必要が出てくるでしょう。

もしこの “domCache” を各ページ単位で指定したい場合、ページコンテナ要素に対して data-dom-cache=”true” 属性を指定するか、次のようなコードを記述します。

elem.page({ domCache: true});

この domCache オプションはグローバル設定も可能です。

$.mobile.page.prototype.options.domCache = true;

ページのプリフェッチ・オプションの追加

今回追加されたクールな機能のひとつが、このプリフェッチ・オプションです。Ajaxによるページ取得をプリフェッチさせることができます。たとえば、各写真が別個のHTMLページになっているフォトギャラリーを作るとしましょう。スライドショーで前後のページをプリフェッチさせることにより、Ajaxローダが逐一動かずに写真を表示させることが可能になります。使い方は簡単で、ページ上のリンク要素に data-prefetch 属性を指定するだけです。フレームワークがバックグラウンドで自動的にページをレイジー・ロードしてDOMに追加しておきます。jQuery Mobileによるサイト構築時、HTMLページは個別に分けられることを奨励していますが、実際は複数ページのテンプレートやネスト構造リスト(!)を使って、ページ切り替えを速くしようとしている姿を見かけます。このプリフェッチ機能が、そうした手法の代替になることが期待されます。

link text

プログラムから $.mobile.loadpage( url ); を呼ぶことでも、ページをプリフェッチできます。プリフェッチリンクは、当然ながらそこに遷移されない場合でも追加のHTTPリクエストを発生させますので、ユーザが遷移する可能性の高いリンクのみに適用するよう心がけましょう。

グローバル・コンフィグ・オプションの追加：autoInitializePage

ページの初期化処理を更に制御したい開発者のために、新たに autoInitializePage オプションを追加しました。これを false に設定すると、ページ作成時の自動初期化処理が停止し、開発者が手動によるページ初期化を行う前にマークアップを操作したりすることができるようになります。初期状態ではオプションは true に設定されています。

ロード時のメッセージを、実行後に指定可能に

以前は、ロード時のテキストメッセージを初期化オプションとして設定可能なだけで、特定の状況で動的にメッセージを変えることは出来ませんでした。追加機能により、実行時にプログラムから動的にメッセージを変えることが可能です。

$.mobile.loadingMessage = "My custom message!";

スワイプイベント発生の閾値設定追加

スワイプに関するコードは、jquery.mobile.js内でかなりハードコーディングされています。このイベントが発生するための閾値も定数になっていますが、開発者がこの値を調整したい場合もあるでしょう。そのための指定が出来るようになりました。

• scrollSupressionThreshold (default: 10px)
• durationThreshold (default: 1000ms)
• horizontalDistanceThreshold (default: 30px)
• verticalDistanceThreshold (default: 75px)

vClick機能の停止

ベータ1で実装されたvClick機能ですが、テストの結果、様々な問題を引き起こすことがわかりました。そこで、元通りに戻すことになったとのことです。問題について詳しくは、翻訳は割愛します。興味がある方は元記事を。

ページコンテナがオプションに

文書構造をよりフレキシブルにするため、ページコンテナとしての data-role=”page” 属性付きの要素はオプション扱いとなりました。これによって既存のサイト流用や外部コンテンツとのマッシュアップがしやすくなったはずです。

これで page, header, content, footer の data-role 要素は全てオプションとなりました。ここで、ページのコード例を確認できます。

実際背後では、コンテナが無い場合にはフレームワークが自動的にマークアップを追加しています。しかし、実際に記述するマークアップはシンプルに出来るでしょう。ただし、複数ページを包含させるためには、やはりページコンテナは必要となります。

チェックボックスとラジオボタンのデザイン変更

以前のチェックボックスやラジオボタンは、ハイライト時に背景が全て変わっていました。これは、特にチェックリストで複数のアイテムが選択可能な時に、少し目立ち過ぎの感がありました。そこで、デザインをよりスッキリしたものに変更することにしました。

コントロールの新デザインは、ややシンプルなものになっています。チェックボックスやラジオボタンは、タップするとボタン全体がハイライトされるのではなく、シンボルの色が変わるだけになっています。ただし、横方向に並べてグループ化されたチェックやラジオは、依然としてボタン全体が彩色されます。

サポートプラットフォームの拡大

ブラウザのサポート対象拡大に伴い、CSS3によるbackground gradients指定のベンダープレフィックスを追加しました。Opera用(-o)、Internet Explorer用(-ms)のプレフィックスが、通常のルールに追加されています。

background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image:      -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image:         linear-gradient(top, #3c3c3c, #111); /* Standard, non-prefixed */

これによって、backgroundのgradients機能が WebKit, Firefox, Opera, Internet Explorer 10, そしてプレフィックスを付けないことによって標準準拠している全てのブラウザで使えるようになりました。以前ブログで書かれたように、一度 -ms プレフィックスを外さなければなりませんでした。これは IE9 が border radius などの機能についてコンフリクトを起こし、Microsoftがこれを修正してくれないためです。このため、WP7やMangoを含む古いバージョンのIEでは、背景色がフラットなものになってしまいます。この問題について詳しくは issue #2046 を参照してください。

コードフォーマットのクリーンアップとJSLint対応

全てのコードフォーマットがjQueryコアのスタイルガイドに準拠したものになりました。これによって、ライブラリが JSLint などバリデーションツールで動くようになっています。

ベータ1からの更新

ベータ1で追加された useFastClick オプションは、削除されています。これは、前述のとおり vclick が使われないようになっているためです。

この他、細かいバグ修正などの変更履歴は元記事参照のこと。

日本語リファレンスについては、徐々に更新していきます。

Related posts:

1. [jQuery Mobile] BartenderプラグインでフッタをiOSアプリ風にする
2. [jQuery Mobile] ActionSheetプラグイン
3. [jQuery Mobile] SEOとユーザビリティを両立させるポイント
4. [jQuery Mobile] Paginationプラグイン
5. [jQuery Mobile] Markup Cheat Sheet