イベントとメソッドの修正
jQuery Mobile 1.4で非推奨になったイベント・メソッドについて以下に説明します。既存Webページでこれらが利用されている場合、修正が必要です。
表2に示すjQuery Mobile固有イベントは非推奨となりました。
| 非推奨イベント | 代替イベント | イベントの内容 |
|---|---|---|
| pageshow | pagecontainershow | ページ切替終了時（切替先ページで発生） |
| pagehide | pagecontainerhide | ページ切替終了時（切替元ページで発生） |
| pagebeforeload | pagecontainerbeforeload | ページ取得前 |
| pageload | pagecontainerload | ページ取得時 |
| pageloadfailed | pagecontainerloadfailed | ページ取得失敗時 |
| pagechangefailed | pagecontainerchangefailed | 切替先ページ取得失敗時 |
| pageinit | pagecreate | ページ初期化時 |
例として、サンプルコードではpageinitをpagecreateに変更しています。
$(document).on("pageinit", function(event) {
$(document).on("pagecreate", function(event) {
また、画面遷移を行う$.mobile.changePageとページの先読みを行う$.mobile.loadPageメソッドは非推奨となりました。Pagecontainerに対するchange、loadメソッドを用いて以下のように変更します。
$.mobile.changePage( "second_1_3.html", { transition: "slide" });
$("body").pagecontainer("change", "second_1_4.html", {transition: "slide"});
現在表示されているページを取得する$.mobile.activePageプロパティは、Pagecontainerに対するgetActivePageメソッドに変更します。
var activePage = $.mobile.activePage;
var activePage = $("body").pagecontainer("getActivePage");
jQuery Mobile 1.4が備えるパフォーマンス改善オプション
jQuery Mobileを利用する際にしばしば問題となる表示や動作のパフォーマンスについて、jQuery Mobile 1.4ではいくつかの改善策が提示されています。ここではdefaultsとenhancedの2種類のオプションを紹介します。
defaultsオプション
defaultsオプション（data-defaults属性）をtrueに設定すると、ウィジェットが持つすべてのオプションがデフォルト値に設定されます。この時data-*属性のオプション値を解釈する処理がスキップされるため、ページ表示時のパフォーマンスを改善することができます。
<div data-role="collapsible" data-defaults="true"> <h2>オツベルと象</h2> <p>オツベルときたら大したもんだ。</p> </div>
enhancedオプション
enhancedオプションは、jQuery Mobileが行うHTML生成処理をスキップしてパフォーマンスを上げるためのオプションです。シンプルなHTML記述を元に最適化されたコードを自動生成してくれるのはjQuery Mobileの魅力の一つですが、パフォーマンスを追求するためにあえてjQuery Mobileに頼らず、開発者が自分で最適なHTMLを記述できるようになったわけです。
例えばリスト13のHTMLは、jQuery MobileのHTML生成処理によって表示時にリスト14のような内容になります。
<form> <label for="button1">ボタン:</label> <input type="button" id="button1" data-icon="delete" value="ボタン"> </form>
<form>
<label for="button1">ボタン:</label>
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-left">
ボタン
<input type="button" id="button1" data-icon="delete" value="ボタン">
</div>
</form>
jQuery Mobileがリスト13からリスト14を生成するならば、最初からリスト14の内容を記述しておけば生成処理のコストを節約できるというのがenhancedオプションの考え方です。inputタグのenhancedオプション（data-enhanced属性）をtrueに設定した上で、変換後のHTMLを記述したのがリスト15です。
<form>
<label for="button1">ボタン:</label>
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-left">
ボタン
<input type="button" id="button1" data-icon="delete" value="ボタン" data-enhanced="true">
</div>
</form>
リスト13とリスト15は結果的にはまったく同じ表示ですが、jQuery MobileによるHTML生成処理が発生しない分だけリスト15のほうが良好なパフォーマンスを期待できます。その反面、enhancedオプションを使いこなすためにはjQuery Mobileが生成するHTMLの構造を把握しておく必要があり、それなりにハードルが高いと言えます。開発時の利便性と成果物のパフォーマンスを天秤にかけて使う機能と言えるでしょう。
まとめ
本記事では、jQuery Mobile 1.4について、旧バージョンからの変更点や既存のWebページを対応させる修正ポイントを紹介しました。パフォーマンス改善やフラットデザインの導入など魅力的な内容を含むアップデートですが、その分変更になった点も多く、既存Webページへ導入する際には十分な事前検証とコードの修正、および動作確認が必要です。
次回は本記事の続きとして、画面を構成する各種ウィジェットに関する変更点を説明します。
