Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回は前回から引き続き、jQuery Mobile 1.4の変更に既存のWebページを対応させるための修正ポイントを説明します。

目次

はじめに

 jQuery Mobileは、jQueryを用いたスマートフォン向けのUIライブラリです。本記事では前回に引き続きjQuery Mobileの最新バージョンとなる1.4について、既存Webページを対応させるための修正ポイントについて説明します。後編となる今回は、画面を構成する各種ウィジェットに関する変更点をとりあげます。なお、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を用いたWebページ作成において、ウィジェットの活用は欠かせません。前編では、主にページやボタンの記述方法に関する変更点を説明しましたが、後編ではそれ以外のウィジェットについての変更点を説明していきます。なお本記事のサンプルコードには、以下で説明する内容を反映した修正前後のコードが含まれています。

Slider

 Sliderが非推奨とされ、Flipswitchで置き換えられました。

[リスト1a]Sliderの変更(変更前)
<form>
  <label for="switch">スイッチ:</label>
  <select id="switch" name="switch" data-role="slider">
    <option value="off">オフ</option>
    <option value="on">オン</option>
  </select>
</form>
[リスト1b]Sliderの変更(変更後)
<form>
  <label for="switch">スイッチ:</label>
  <select id="switch" name="switch" data-role="flipswitch">
    <option>オフ</option>
    <option>オン</option>
  </select>
</form>

リストビュー

 リストビュー行内に画像を指定したときに自動的に検知してレイアウトされる処理が非推奨となり、liタグにui-li-has-thumbクラスを明示的に指定することが求められるようになりました。また、アイコン画像を指定するui-li-iconクラスも非推奨となりました。

[リスト2a]ListView内画像指定の変更(変更前)
<li>
  <a href="img/001.jpg" rel="external">
    <img alt="ヤギ" src="img/001_thumb.jpg"/>
    <h1>サムネイル</h1>
  </a>
</li>
<li>
  <img src="img/001_thumb.jpg" class="ui-li-icon" />
    <h1>アイコン</h1>
</li>
<li>
  <div class="ui-li-thumb"></div>
  <h1>画像以外をサムネイルにしたい場合の記述</h1>
</li>
[リスト2b]ListView内画像指定の変更(変更後)
<li class="ui-li-has-thumb">
  <a href="img/001.jpg" rel="external">
    <img alt="ヤギ" src="img/001_thumb.jpg"/>
    <h1>サムネイル</h1>
  </a>
</li>
<li class="ui-li-has-thumb">
  <img src="img/001_thumb.jpg" style="max-width:16px; max-height:16px;" />
    <h1>アイコン</h1>
</li>
<li class="ui-li-has-thumb">
  <div class="ui-li-thumb"></div>
  <h1>画像以外をサムネイルにしたい場合の記述</h1>
</li>

  • 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