連載：jQuery Mobile入門

第5回　jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ―

山田 祥寛
2012/05/17
Page1 Page2

　前回までの内容で、マークアップだけで賄えるjQuery Mobileの主な機能をおおよそ解説した。jQuery Mobileを利用することで、JavaScriptのコードすら記述することなく、ネイティブ・アプリ・ライクなサイトを作成できることを実感いただけたと思う。

　もっとも、jQuery Mobileの魅力は、その手軽さばかりではない。JavaScriptのAPIも充実しており、独自の機能をごく手軽に実装できる。連載第5回となる本稿では、それらJavaScript APIの中でも、「グローバル設定」と「イベント」について解説していく。

■jQuery Mobileの動作をカスタマイズしよう ― グローバル設定

　jQuery Mobileでは、ページを表示するに当たって、あらかじめ決められたパラメータに従ってさまざまな自動処理を行っている。この自動処理のおかげで、われわれ自身がコードを書かなくとも、ネイティブ・アプリ・ライクなサイトが自然と出来上がっているわけだ。

　もしもjQuery Mobileの挙動をカスタマイズしたいと思うならば、まずはこの「あらかじめ決められたパラメータ」（＝グローバル設定）を変更するのが手軽だろう。グローバル設定を変更するには、$.mobileオブジェクトのプロパティにアクセスすればよい。$.mobileオブジェクトはjQuery Mobileのコアともいうべきオブジェクトで、ウィジェットを含めたフレームワークの機能は、このオブジェクトの下でまとめられている。

　まずはどんな設定があるのか、主なプロパティをまとめておこう。

分類 パラメータ名 概要 デフォルト値
基本 ns 名前空間の設定 ''
subPageUrlKey サブページを表すクエリ文字列 ui-page
autoInitializePage ページの自動初期化を有効にするか true
ajaxEnabled Ajax式リンクを有効にするか true
domCache DOMキャッシュを有効にするか false
minScrollBack ページを戻ったときに復元する最小のスクロール位置  
メッセージ loadingMessage ページ遷移時のローディング・メッセージ loading
pageLoadErrorMessage ページ遷移失敗時のエラー・メッセージ Error Loading Page
page.prototype.options.addBackBtn ［戻る］ボタンを表示するか true
page.prototype.options.backBtnText ［戻る］ボタンのキャプション Back
page.prototype.options.backBtnTheme ［戻る］ボタンのテーマ （ヘッダの設定値）
dialog.prototype.options.closeBtnText ダイアログ左上の［×］（閉じる）ボタンに割り当てられるツールヒント close
スタイル activePageClass アクティブなページを表すスタイル・クラス ui-page-active
activeBtnClass アクティブボタンを表すスタイル・クラス ui-btn-active
エフェクト defaultPageTransition デフォルトのページ遷移エフェクト fade（1.0では「slide」）
defaultDialogTransition デフォルトのダイアログ表示エフェクト pop
jQuery Mobileの主な動作パラメータ

　例えば以下は、jQuery Mobileのメッセージを日本語化する例だ。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" / >
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile入門</title>
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="./config.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
</head>
<body>
……中略……
</body>
</html>
$(document).bind('mobileinit', function(){
  $.mobile.loadingMessageTextVisible = true;
  $.mobile.loadingMessage = 'ロード中';
  $.mobile.pageLoadErrorMessage = 'ページの読み込みに失敗しました';
  $.mobile.page.prototype.options.backBtnText = '戻る';
  $.mobile.dialog.prototype.options.closeBtnText = '閉じる';
  $.mobile.selectmenu.prototype.options.closeText= '閉じる';
  $.mobile.listview.prototype.options.filterPlaceholder = 'キーワードを入力してください';
});
jQuery Mobileで利用するメッセージを日本語化するコード（上：config.html、下：config.js*1）

*1　jQuery 1.7では、新たなイベント・メソッドとしてon／offメソッドが追加された。今後は、bind／unbind、live／die、delegate／undelegateなどのメソッドの代わりに、こちらを利用していくのが望ましい。ただし、本稿では1.6以前との互換性も考慮して、on／offメソッドは利用していない。

　グローバル設定を定義する際に注意すべき点は、ただ1つ。

mobileinitイベント・リスナで定義しなければならない

という点だけだ。

　jQueryを理解している読者であれば、アプリケーション・コードはまず$(document).readyメソッドで記述することがクセになっているかもしれない。

　しかし、jQuery Mobileではreadyメソッドを利用する状況はかなり限定的になるので、注意してほしい（全く使わないわけではないが、その意味を理解して利用する必要がある）。

　例えば、グローバル設定の例でもそうだ。jQuery Mobileでは、文書ツリーが組み立てられる前に、内部的にさまざまな初期化処理を行っている。グローバル設定を変更するならば、初期化処理の前――mobileinitイベントのタイミングで行わなければ正しく認識できないのだ*2。

*2　正確には、これより後のタイミングでも構わない設定もあるが、コードの可読性を考慮しても、まずはmobileinitイベント・リスナに集約すべきだ。

　なお、mobileinitイベント・リスナは、その性質上、「jQueryを読み込んだ後」「jQuery Mobileを読み込む前」に登録しなければならない（jQuery Mobileを読み込んだ後では、初期化も終わってしまっているからだ）。

　以降では、表だけでは分かりにくい、いくつかの設定項目について補足しておく。

●名前空間を設定する ― nsプロパティ

　前回までに見てきたように、jQuery Mobileではマークアップ・レベルでの設定をdata-xxxxx属性（＝独自データ属性）で表すのが一般的だ。もっとも、独自データ属性はHTML5の汎用的な機能であるので、ほかのライブラリが利用しているものと名前が衝突する可能性は十分にあり得る（例えば、ほかのライブラリが「data-role」という名前の属性を利用する可能性は十分にある）。

　そのような場合の回避策として有効なのが名前空間の設定だ。例えば名前空間として「jqm-」を指定した場合、従来のdata-role属性は「data-jqm-role」と表せる。これによって、名前の競合を避けられるというわけだ（次のコードはその例）。

<script src="./ns.js"></script>
……中略……
<div id="basic" data-jqm-role="page" data-jqm-title="jQuery Mobile入門">
  <div data-jqm-role="header" data-jqm-position="fixed">
    <h1>jQuery Mobile入門</h1>
  </div>
  <div data-jqm-role="content">
    <p>こんにちは、jQuery Mobile！</p>
  </div>
  <div data-jqm-role="footer" data-jqm-position="fixed">
    Copyright 1998-2012, WINGS Project
  </div>
</div>
$(document).bind('mobileinit', function(){
  $.mobile.ns = 'jqm-';  // 名前空間「jqm-」を設定
});
名前空間「jqm-」を設定したコード（上：ns.html、下：ns.js）

　ただし、名前空間の変更は全てのマークアップだけでなく、スタイルシートにも影響を及ぼす。例えば、以下のような箇所だ。名前空間を変更した際には、こちらも変更忘れのないよう、注意してほしい。

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { ... }

.ui-mobile [data-jqm-role=page], .ui-mobile [data-jqm-role=dialog], .ui-page { ... }

［参考］jqmData疑似クラス

　$()関数で<div data-role="page">要素を検索する場合、jQuery標準の機能であれば「$('div[data-role="page"]')」と記述するのが基本だ。しかし、これでは名前空間に変更があった場合に、「$('div[data-jqm-role="page"]')」のように書き換えなければならず、不便だ。

　そこでjQuery Mobileでは、jqmData疑似クラスを用意している。これを利用することで、先の例であれば、名前空間の有無にかかわらず、「$('div:jqmData(role="page")')」と記述できるようになる。将来的な影響に備えるならば、現在、名前空間を利用しているかどうかにかかわらず、こちらを利用しておくのが望ましいだろう。

　同じ理由からdata-xxxxx属性にアクセスする場合には、jQuery標準のdata／removeDataメソッドではなく、jQuery Mobileで用意されたjqmData／removeJqmDataメソッドを利用するのが望ましい。例えば、以下はdata-jqm-role属性の値をdata／jqmDataメソッドで取得した例だ。

$('#basic').data('jqm-role')   → 名前空間を加味しなければならない
$('#basic').jqmData('role')    → 名前空間は省略できる
data-jqm-role属性の値をdata／jqmDataメソッドで取得した例

●DOMキャッシュを有効化する ― domCacheプロパティ

　第1回で見たように、jQuery Mobileでは、外部ページをいったん現在の文書ツリーに取り込んだうえでページを遷移することで、いわゆる「スムーズな遷移」を実現しているのだった。

　では、遷移後にいらなくなったページはどうしているのだろう。デフォルトでは、ページが不要になったというフラグが立てられた後、pagehideというイベント（後述）の発生タイミングで破棄される。これによって、文書ツリーの肥大化を防いでいるわけだ。よって、破棄されたページに再度アクセスするには、また非同期通信が発生することになる*3。

*3　あるいは、ブラウザ・キャッシュが残っていれば、そちらが利用されるかもしれない。

　DOMキャッシュは、この削除処理（＝文書ツリーの掃除）を無効化し、文書ツリーにページを残しておくことで、次回以降のアクセス負荷を軽減する機能だ。以下は、キャッシュ機能をサイト全体で有効にする例。

$.mobile.page.prototype.options.domCache = true;
サイト全体でキャッシュを有効にする例

　もっとも、キャッシュの乱用は文書ツリーの肥大化を招き、最悪、ブラウザのフリーズを招く原因ともなる（そうでなくとも、例えば100ページを1つの文書ツリーに残してしまえば、メモリ・リソースの乏しい端末では著しいレスポンスの劣化を招くだろう）。

　よって、よほど小さなサイト（アプリケーション）でなければ、上のようなコードを書くべきでない。一般的には、トップページをはじめ、頻繁にアクセスするようなページのみを限定的にキャッシュするという使い方になるはずだ。

　ページ単位にキャッシュを有効にするには、ページ要素に対して「data-dom-cache="true"」属性を追加すればよい。

<div id="index" data-role="page" data-dom-cache="true">
ページ単位でキャッシュを有効にする例

［参考］プリフェッチ

　ページ遷移を高速化するもう1つの施策として、jQuery Mobileには「プリフェッチ」という機能がある。これは、リンク先のページをクリックされる前にあらかじめ取り込んでおくことで、体感速度を高める機能のこと。アンカータグ（＝<a>タグ）に対してdata-prefetch属性を追加することで、有効にできる。

<a href="index.html" data-prefetch>先読みするページ</a>
リンク先のページを先読みするための設定例

　もっとも、キャッシュと同じく、プリフェッチについても乱用は禁物だ。要はユーザーに対して通信を強制する機能なので、使いすぎればトラフィックを無用に占有し、全体としてのレスポンスを低下させる原因にもなる。利用に当たっては、ユーザーのほとんどがそのページにアクセスするか、という視点で是非を検討してほしい。

　続いて次のページでは、jQuery Mobileのイベントについて解説する。


　INDEX
　 ［連載］jQuery Mobile入門
　 第5回　jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ―
  1．jQuery Mobileの動作をカスタマイズしよう ― グローバル設定
　   2．jQuery Mobileのイベントを理解しよう

インデックス・ページヘ 　「連載：jQuery Mobile入門」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）
- PR -

注目のテーマ

業務アプリInsider 記事ランキング

本日 月間
＠IT
ソリューションFLASH