jQuery Mobileをマジメに使うならやっておくべきローカライズとかの設定

jQuery Mobileつかってますか？

jQueryでキャラを立てたいわけじゃないんですが...，たびたびのjQueryネタです．なんだかんだで需要が高く，最近は実案件で触る機会があったので情報を残します．

いくらお手軽でも，まじめに使うならこれぐらいはやっておかないとダメじゃないかと思う設定のポイントを軽く紹介．Loading...とかデフォルト英語なラベルの変更とかです．

設定の初期化

デフォルトの文字表示やクラス名等の設定を変更するときは，Configuring Defaultsによると，jQuery本体とjQuery Mobileの間に初期化スクリプトを挿入します．

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
<script type="text/javascript"> 
$(document).bind('mobileinit', function(){
    $.mobile.ns                   = 'jqm-';
    $.mobile.loadingMessage       = '読み込み中...';
    $.mobile.pageLoadErrorMessage = '表示できませんでした<br />他のページをご覧ください';
});
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 

以下で，個々の設定について説明くわえます．

ローディング中のメッセージ

ページを読み込み中のメッセージを変更します．デフォルトは"Loading..."です．やはりここは，ふつうに読み込み中，とか日本語にしたいですね．

$(document).bind('mobileinit', function(){
    $.mobile.loadingMessage = '読み込み中...';
});

ローディング失敗時のメッセージ

読み込みに失敗してしまったときの表示メッセージも変更できます．デフォルトは"Error Loading Page"です．読み込みの失敗は，ネットワークの都合なケースもあるので，なるべくエンドユーザーに親切なメッセージに変更しておきたいところです．

$(document).bind('mobileinit', function(){
    $.mobile.pageLoadErrorMessage = '表示できませんでした';
});

名前空間の設定

data-* ( カスタムデータ属性 ) の名前空間を指定できます．デフォルトだとカラ文字，つまり未定義の状態ですが，グローバルな名前空間を汚染したくない，ということであれば設置していたほうが先を見据えて賢明だと思います．

下の例では，jqm- と設定しているので，data-roleはdata-jqm-roleのように表記します．data-*以後につづく名称の接頭辞になると考えてもらえればOKです．

$(document).bind('mobileinit', function(){
    $.mobile.ns = 'jqm-';
});

2011-05-24 18:45追記：名前空間を設定したときのCSSの書き換えについて

NOTE: if you're using data- namespacing, you'll need to manually update/override one selector in the theme CSS. The following data selectors should incorporate the namespace you're using:

ドキュメントに上記のようなことが書いてあり，ようはCSSのセレクタには[data-role="page"]のような決め打ちの記述が含まれているので，名前空間を指定したら自力でCSSの該当セレクタも置き換えてね，という意味です．ご注意を！

カスタムデータ属性については，このブログでも過去に，HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしいや，続・HTML5のCustom Data Attributeをもう少し調べながら、HTMLドリヴンな実装を試みるで取り上げていますので，ご参考までに．

戻るボタンのラベル変更

これは上に挙げた初期化スクリプトとは扱いが異なります．data-back-btn-text属性で，data-role="page"が指定された要素に指定します．標準だとBackになってると思いますが，これでテキストを書き換えられます．

<div data-role="page" data-back-btn-text="戻る">
    <!-- 中身 -->
</div>

アルファだもんね

実感として，やっぱりjQuery Mobileは，（この記事の時点で）まだまだアルファ版だなぁという印象．レンダリングもしょっちゅう崩れますし，画面遷移時の挙動が怪しいことも多々あります．ご利用は計画的に！

レンダリング崩れの対策ヒントは，jQuery Mobileでページの挙動がおかしいときは$.mobile.urlHistroyを参照してpageを調整してみるもご参考までに．

---