「jQuery Mobile 1.3」公開、新ウィジェットの追加や使い勝手の向上、レスポンシブデザインサポートの強化などが特徴

 jQuery Mobile開発チームは2月20日、モバイル端末向けのWebフレームワーク「jQuery Mobile」の最新版「jQuery Mobile 1.3.0」をリリースした。レスポンシブデザインのサポートを強化したほか、新ウィジェットの追加、AJAXによるページ遷移システムの改善などが行われている

 jQuery Mobileはスマートフォンやタブレットといったタッチインターフェイスを持つモバイル端末向けのUIフレームワーク。jQuery Foundation傘下のプロジェクトで、jQueryを利用して実装されている。少ないコードでUIを実装できるのが特徴で、タッチUI向けのデザインを提供するCSSと、動的なUIコンポーネントを実装したJavaScriptから構成されている。対応プラットフォームはiOSやAndroid、BlackBerry、Windows Phoneなど。

 jQuery Mobile 1.3は2012年10月に公開されたバージョン1.2以来のメジャーアップデート版。jQuery Mobileは「モバイル向け」とされているものの、スマートフォンだけでなくタブレットやデスクトップのWebブラウザから利用される例も多いことから、モバイルだけでなくデスクトップにも利用できる「モバイル最優先」のフレームワークという位置付けで開発を進めていき、同じくjQuery Foundation傘下のプロジェクトである「jQuery UI」とのコード共有も進めていく方針だという。それを踏まえ、jQuery、 Mobile 1.3では同一のHTMLファイルを使いつつデバイスに最適なデザインの表示を行う「レスポンシブWebデザイン(RWD)」を実現するための機能をより強化しているとのこと。

 大きな新機能としては、新しいウィジェットの導入がある。まずレスポンシブWebデザインを実現するためのウィジェットである「Responsive Table」が用意された。表形式のデータを表示するためのウィジェットで、画面のサイズに応じて内部に配置されたコンテンツの表示方法を自動的に切り替える機能を持つ。表示方法としては画面の横幅にあわせて表を分割・並び替えて表示する「Reflow」と、優先順位に応じて列を隠し、ポップアップで表示する項目をユーザーが選択できるようにする「Column Toggle」の2つが用意されている。同様に画面の横幅に応じてコンテンツの表示方法を切り替えられるグリッド「Responsive Grid」も導入されている。

 また、画面の右端もしくは左橋に表示できる「パネルウィジェット」も追加された。パネルにはテキストやボタン、メニューといったコンポーネントを配置でき、ユーザーの操作に応じてアニメーション付きで表示/非表示を切り替えられる。そのほか、1つのスライダで2つの値を指定できる「Range slider」も追加されている。

 ナビゲーション機能では「navigate」イベントや「$.mobile.navigate」メソッドが追加され、AJAXによるページ遷移をより細かくカスタマイズできるようになっている。また、Internet Explorer 10およびWindows Phone 8でもアニメーション付きのページ遷移が可能となっている。

 リスト形式でコンテンツを表示する「Listview」コンポーネントも改良され、検索用のテキストボックスで自動コンプリートを容易に実現するための機能が追加されている。また、「Nested Listviews」は本バージョンでは非推奨となり、次期バージョンでは削除される予定となった。

 そのほか、ダイアログで「閉じる」ボタンの位置を変更したり非表示にするオプションや、ポップアップの表示時にポップアップ以外の部分をタップした場合でもポップアップを閉じないようにするオプションなども追加されている。

 jQuery MobileはプロジェクトWebサイトのダウンロードページなどからダウンロードできる。利用には別途jQueryが必要で、なお、対応するjQueryのバージョンは1.7.2から1.9.1。登場予定の2.0.0への対応についてもテストが進められているとのこと。また、従来と同様コンテンツ配信ネットワーク(CDN)経由での利用も可能。

jQuery Mobile
http://jquerymobile.com/