Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

jQuery Mobile 1.4の変更点と既存ページ対応のポイント(前編)

「jQuery プラグイン」の利用(19)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回と次回の2回にわたり、2014年1月に正式版がリリースされたjQuery Mobile 1.4について、前バージョンからの変更点や既存のWebページを対応させるための修正ポイントを説明していきます。

目次

はじめに

 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クラスを用いた方法に変更されました。

[リスト1a]content指定の変更(変更前)
<div data-role="content">
[リスト1b]content指定の変更(変更後)
<div class="ui-content" role="main">

[戻る]ボタンの設置(ヘッダー)

 ページのヘッダーにボタン(「BACK」など)を配置する場合、pageそのものではなくheader要素の属性として指定するように変更されました。

[リスト2a]ヘッダーボタンの変更(変更前)
<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>
[リスト2b]ヘッダーボタンの変更(変更後)
<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属性を用いた記法に変更されています。

[リスト3a]ダイアログの変更(変更前)
<div data-role="page" id="dialog1">
  <div data-role="content">
    <h1>ダイアログ例</h1>
  </div>
</div>
[リスト3b]ダイアログの変更(変更後)
<div data-role="page" data-dialog="true" id="dialog1">
  <div class="ui-content" role="main">
    <h1>ダイアログ例</h1>
  </div>
</div>
[リスト4a]ダイアログ表示処理の変更(変更前)
<a href="#dialog1" data-rel="dialog">ダイアログオープン</a>
[リスト4b]ダイアログ表示処理の変更(変更後)
<a href="#dialog1" data-transition="pop">ダイアログオープン</a>

フィールドコンテナ

 フィールドコンテナを定義するdata-role="fieldcontain"の指定は非推奨になりました。代わりに、ui-field-containクラスを用います。

[リスト5a]fieldcontainの変更(変更前)
<div data-role="fieldcontain">
[リスト5b]fieldcontainの変更(変更後)
<div class="ui-field-contain">

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5