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

「jQuery プラグイン」の利用（20）

その他の修正：生成HTMLの構造変更に注意

　jQuery Mobile 1.4では、最終的に生成されるHTMLの構造が従来バージョンと異なっているため、従来の構造を前提としたCSSセレクタなどは修正が必要です。例えばListViewの1行に対応する生成HTMLは、以下のようになっています。

図1　ListView1行（赤枠部分）に対応する生成HTMLを調べる

［リスト9］図1赤枠部分の生成HTML（jQuery Mobile 1.3）

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" 
  data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right 
  ui-li-has-arrow ui-li ui-li-has-thumb ui-first-child ui-btn-up-d">
  <div class="ui-btn-inner ui-li">
    <div class="ui-btn-text">
      <a rel="external" href="img/001.jpg" class="ui-link-inherit">
        <img src="img/001_thumb.jpg" alt="ヤギ" class="ui-li-thumb">
        <h1 class="ui-li-heading">サムネイル</h1>
      </a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">
      &nbsp;
    </span>
  </div>
</li>

［リスト10］図1赤枠部分の生成HTML（jQuery Mobile 1.4）

<li class="ui-li-has-thumb ui-first-child">
  <a rel="external" href="img/001.jpg" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
    <img src="img/001_thumb.jpg" alt="ヤギ">
    <h1>サムネイル</h1>
  </a>
</li>

まとめ

　本記事では、jQuery Mobile 1.4について、旧バージョンからの変更点や既存のWebページを対応させる修正ポイントを紹介しました。旧バージョンからの変更点が多く存在するため、既存Webページへ導入する際には十分な事前検証とコードの修正、および動作確認が必要です。

　なお、jQuery Mobile 1.5以降のロードマップがすでに公開されています。直近のメジャーバージョンアップとなるjQuery Mobile 1.5では、1.4で非推奨とされたウィジェットのスタイル設定（data-*によるもの）が削除され、CSSを用いた設定方法に移行する予定です。この予定通りの内容でバージョンアップされた場合、今回説明した非推奨の内容の多くが1.5では機能しなくなることになります。

　一方で長期的にはjQuery UIからウィジェットが随時取り込まれ、2.0において完全なjQuery UIのウィジェットがサポートされる見込みです。このようにjQuery Mobileの進歩は1.4以降も続いていくので、進歩の流れに乗るためにも現段階で非推奨の内容へ対応しておくことが重要です。

参考資料

• jQuery
• jQuery Mobile
• jQuery Mobile 1.4 Upgrade Guide
• Roadmap