jQuery Mobile 1.0正式版までの大きな変更点のピックアップ

先日、ついにjQuery Mobileの1.0正式版がリリースされ、いよいよ本格的な利用が視野に入ってきました。そこで、jQuery Mobileのここ最近の変更点の中から大きなものをピックアップしてお伝えしたいと思います。



テーマのカスタマイズツール「ThemeRoller」のリリース
まずは、jQuery Mobileのオリジナルのテーマを作成することができるThemeRollerです。ThemeRollerは、これまで個別にスタイルを編集するしかなかったテーマのカスタマイズを簡単に行うことができます。各カラーをドラッグ＆ドロップで簡単に変更できたり、左側のインスペクタパネルで詳細に変更することができたりします。是非ともお試しください。

（http://jquerymobile.com/themeroller/）

大幅なパフォーマンスUP
これまでマイナーバージョンアップが行われるたびにチューニングされていましたが、正式版となる1.0では、さらに30%〜50%のパフォーマンスアップとなりました。今までもっさりと感じていた方は、再度試してみてはいかがでしょうか。

（フォームギャラリーの装飾に掛かった時間を測定してベンチマーク結果）

ページ遷移のパフォーマンスチューニング（DOMキャッシュとプリフェッチ）
jQuery Mobileでは、さまざまなページの装飾を行うため、プレーンなページを表示する場合に比べてページ遷移が遅くなっています。少しでもパフォーマンスを改善するために、ページのキャッシュができるようになっています。ページ要素に次のようにdata-dom-cache属性を追加し、属性値にtrueを指定すると再度表示したときにキャッシュを表示するようになります。変更が少ないページなどに適用すると良いでしょう。

<div data-role="page" data-dom-cache="true">

また、それでも遅い場合には、遷移先のページを先に読み込んでおくようにすることができます。<a>要素にdata-prefetch属性を追加することで元のページが表示された際にバックグラウンドで取得するようになります。

<a href="index.html" data-prefetch>プリフェッチ付きリンク</a>


pjax（pushState）対応
jQuery Mobileで作成された各ページは、これまでハッシュベースで管理されていました。そのため、例えば最初のページ（index.html）からメニュー（menu.html）へ遷移するとURLが次のようになっていました。

http://example.com/index.html#menu.html

これを、HTML5のHistory APIを利用して、対応ブラウザであれば正常なURLに書き換えるように変更されています。

http://example.com/menu.html


以上、大きな変更点を4つほどピックアップしてみました。ここで紹介したもの以外でもいろいろな機能追加や変更点があります。モバイルサイトを簡単に作成できるjQuery Mobileを是非、試してみてください。


[PR] 12月17日(土)にjQuery Mobileをまる1日使って学習する「タッチイベントが簡単実現で超便利！ jQuery Mobile徹底習得講座」が開催されます。興味のある方は、この機会に是非チェックしてみてください。