はじめに
jQuery Mobileは、jQueryを用いたスマートフォン向けのUIライブラリです。jQueryとjQuery Mobileを活用することにより、スマートフォンに最適化されたWebページをシンプルなコーディングで作成することができます。
jQuery Mobileの最新版となる1.4では、Webページの外観と処理内容の両面で従来バージョンから変更が行われたため、jQuery Mobileを用いた既存のWebページをjQuery Mobile 1.4に対応させるためには修正が必要になります。そこで本記事では、jQuery Mobile 1.4の変更点と、既存WebページをjQuery Mobile 1.4に対応させるための修正ポイントについて、前後編の2回に分けて説明します。
今回は前編として、テーマやページ、イベントやメソッドの変更点を説明するほか、パフォーマンスを高めるためにjQuery Mobile 1.4から導入された機能を紹介します。なお次回（後編）は各種ウィジェットの変更点について説明します。
対象読者
- Webページで利用しているjQuery Mobileをバージョンアップしたい方
- jQuery MobileのWebページを流行のフラットデザインにしたい方
- 単純にjQuery Mobile 1.4にバージョンアップしてみたがうまくいかなかった方
必要な環境
今回利用するjQuery Mobileは1.4.1です。jQuery Mobile 1.4.1が対応するjQueryは1.8～1.11、または2.1と案内されていますが、スマートフォン向けWebサイトには1.10系が持つInternet Explorer 6～8との互換性が必要ないことからjQuery 2.1.0を使用します。
今回は以下の環境で動作を確認しています。
-
iOS 7.0.4
- iPhone 5s 16GB SoftBank版
- Safari
-
Android 4.2.2
- Xperia Z SO-02E
- Google Chrome 32.0.1700.99
jQuery Mobile 1.4の主な変更点
最初にjQuery MobileのWebサイトに記載されているjQuery Mobile 1.4の変更点を列挙しておきます。従来バージョンの弱点を改善し、スマートフォン業界のトレンドに追従する魅力的な変更が行われています。
- パフォーマンス改善：DOM操作や生成されるHTMLを削減
- テーマ継承：JavaScriptを用いていたスタイル処理をCSSのみで行うよう変更
- 新しいデフォルトテーマ：フラットでモダンな新デザイン
- SVGアイコン：解像度に応じた最適な表示をサポート
ただし変更内容が大きいため、jQuery Mobileの既存WebページはjQuery Mobile 1.4に対応する修正が必要です。本記事ではアップグレードガイドに記載された内容を中心に修正方法を説明します。なお本記事のサンプルコードには、以下で説明する内容を反映した修正前後のコードが含まれています。
ページ記述の修正
jQuery Mobileのコンテンツにおいて、もっとも基本的な記述と言えるページの記述方法が変更となっています。
コンテンツ領域
まずページ内容を表すcontentの指定が、従来のdata-roleからCSSクラスを用いた方法に変更されました。
<div data-role="content">
<div class="ui-content" role="main">
［戻る］ボタンの設置（ヘッダー）
ページのヘッダーにボタン（「BACK」など）を配置する場合、pageそのものではなくheader要素の属性として指定するように変更されました。
<div data-role="page" data-theme="c"
data-add-back-btn="true" data-back-btn-text="BACK" data-back-btn-theme="d">
<header data-role="header" data-position="fixed">
<h1>遷移先</h1>
</header>
<div data-role="page" data-theme="a">
<header data-role="header" data-position="fixed"
data-add-back-btn="true" data-back-btn-text="BACK" data-back-btn-theme="a">
<h1>遷移先</h1>
</header>
ダイアログ
ページの一種として記述するダイアログの記述も、data-dialog属性を用いた記法に変更されています。
<div data-role="page" id="dialog1">
<div data-role="content">
<h1>ダイアログ例</h1>
</div>
</div>
<div data-role="page" data-dialog="true" id="dialog1">
<div class="ui-content" role="main">
<h1>ダイアログ例</h1>
</div>
</div>
<a href="#dialog1" data-rel="dialog">ダイアログオープン</a>
<a href="#dialog1" data-transition="pop">ダイアログオープン</a>
フィールドコンテナ
フィールドコンテナを定義するdata-role="fieldcontain"の指定は非推奨になりました。代わりに、ui-field-containクラスを用います。
<div data-role="fieldcontain">
<div class="ui-field-contain">
