SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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>

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Collapsible

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7647 2014/03/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング