はじめての jQuery Mobile 1.0 〜その1:コンテンツの記述〜


jQuery Mobile とは

jQuery Mobile は HTML5 と CSS3 の機能を利用して、複数のモバイルプラットフォームに一貫したユーザエクスペリエンスを提供するための JavaScript フレームワークです。jQueryjQuery UI の利用経験があれば、簡単にモバイル向けのアプリケーションを作り始めることができます。


jQuery Mobile は HTML5 のカスタム属性(data-)を抽出し、追加のマークアップCSS向けのclass属性、イベントのバインドを追加することで、複雑なユーザインターフェースをシンプルなマークアップにて実現できます。


2010年8月にアルファ版の公開が始まってから、2011年11月に 1.0 版が公開されました。Web上にはアルファ版やベータ版をもとにした情報が多く混乱するので、1.0 版をターゲットに利用方法をまとめていきます。


jQuery Mobile の基本ヘッダ

jQuery Mobile ライブラリのインポートは以下のHTMLコードにて行います。
現在 jQuery Mobile はバージョン1.0 がリリースされており、jQuery 1.6.4 に依存しているため、jQuery Mobile のインクルードの前に JQuery のインクルードが必要です。jQuery 1.7 系には jQuery Mobile 1.1 からの対応となる予定です。

<!DOCTYPE html> 
<html> 
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  </head> 
<body>
・・・


ページ表示の拡大率を最適化するため、viewport メタタグを指定しています。指定しない場合には、ページがかなり縮小されて表示されてしまうことがあります。アルファ版の jQuery Mobile では自動的に追加されていましたが、現在のバージョンでは明示的に指定する必要があります。


jQuery Mobile の基本コンテンツ

コンテンツはカスタム属性 data-role にてマークアップにロールを追加することで作成していきます。div タグにてコンテンツを追加し、data-role を指定していきます。

<div id="page1" data-role="page">
  <div data-role="header"><h1>My Title</h1></div>
  <div class="content" data-role="content"><p>Hello world</p></div>
  <div data-role="footer"><h4>Page Footer</h4></div>
</div>

jQuery Mobile は data-role に指定された page や header などの値をもとにコンテンツの UI を構築します。


HTML5 のタグを使って以下のように記載する事も出来ます。というか、今後はこちらの書き方が主流でしょう。

<section id="page1" data-role="page">
  <header data-role="header"><h1>My Title</h1></header>
  <div class="content" data-role="content"><p>Hello world</p></div>
  <footer data-role="footer"><h4>Page Footer</h4></footer>
</section>


内部ページ

jQuery Mobile では、通信効率を向上させるために、1つの HTML ファイルに複数のページを記述できます。これにより、1ページのコンテンツが小さくなりがちなモバイルアプリケーションのファイル管理と(サーバへのリクエストの無い)スムーズなページ遷移とページ遷移の管理が簡素化されます。


ページを追加するには、data-role="page" を指定したセクションを追加していきます。先ほどの例にページを追加してみましょう。この時セクションの id を一意になるように定義することに注意してください。

<!-- 1ページ目 -->
<section id="page1" data-role="page">
  <header data-role="header"><h1>Page 1</h1></header>
  <div class="content" data-role="content">
    <p>Page 1</p>
    <p><a href="#page2">Go To Page 2</a></p>
  </div>
  <footer data-role="footer"><h4>Page Footer</h4></footer>
</section>

<!-- 2ページ目 -->
<section id="page2" data-role="page">
  <header data-role="header"><h1>Page 2</h1></header>
  <div class="content" data-role="content">
    <p>Page 2</p>
    <p><a href="#page1">Back To Page 1</a></p>
  </div>
  <footer data-role="footer"><h4>Page Footer</h4></footer>
</section>

1ページ目

2ページ目

これだけの記述で、ページ間の遷移など jQuery Mobile が全て処理してくれます。


戻るボタンの追加とローカライズ

ヘッダ部に戻るボタンを付けるのも簡単です。ページ要素に対して data-add-back-btn="true" の指定をすると戻るボタンが有効になります。

<!-- 2ページ目 -->
<section id="page2" data-role="page" data-add-back-btn="true">


アンカータグでは、リンク先に左スライドして遷移していましたが、戻るボタンでは右にスライド(逆スライド)して遷移元のページへ戻ります。


jQuery Mobile のベータ版では、戻るボタンが自動的に付与されていましたが、jQuery Mobile 1.0 からはこの機能はオプション扱いとなっています(ブラウザで戻るボタンが既に存在するため)。ベータ版と同じように自動挿入を有効にするには、初期設定イベント mobileinit の中でオプション設定を行います。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
  $(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
  });
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

注意点として、jquery.mobile の js が読み込まれる前に定義する必要があるので、jquery → 設定処理 → jquery.mobile の順番で書く必要があります。この設定により data-add-back-btn="true" を指定しなくとも、各ページのヘッダに戻るボタンが自動的に挿入されます。


自動挿入される戻るボタンのテキストを変更するには backBtnText を指定することでローカライズができます。

  $(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
    $.mobile.page.prototype.options.backBtnText = '戻る';
  });

外部ページ

jQuery Mobile は、内部ページのほかにも、もちろん外部のページを扱うこともできます。
先ほどまでのファイルに外部ページの指定を追加してみましょう。

<!-- 1ページ目 -->
<section id="page1" data-role="page">
  <header data-role="header"><h1>Page 1</h1></header>
  <div class="content" data-role="content">
    <p>Page 1</p>
    <p><a href="#page2">Go To Page 2</a></p>
    <p><a href="external.html">Go To Page External Page 3</a></p>
  </div>
  <footer data-role="footer"><h4>Page Footer</h4></footer>
</section>


外部ファイルとして external.html を作成します。

<!DOCTYPE html> 
<html> 
  <head><meta charset="UTF-8"></head> 
  <body>

  <!-- 3ページ目 -->
  <section id="page3" data-role="page">
    <header data-role="header"><h1>Page 3</h1></header>
    <div class="content" data-role="content">
      <p>Page 3</p>
      <p><a href="#page1">Back To Page 1</a></p>
    </div>
    <footer data-role="footer"><h4>Page Footer</h4></footer>
  </section>    
  </body>
</html>

外部ファイル external.html は、jQuery Mobile によって非同期で読み込まれます。これは jQuery Mobile のデフォルトの挙動であり、href が自動的に Ajax リクエストにパースされるためです。
外部ページへのリンクが押下されると、jQuery Mobile は非同期リクエストにてファイルをファイルを取得し、ページ中の data-role="page" の属性を持つ要素を取り込み、リンク元の DOM に追加します。
そのため、外部ページを非同期で取得する場合は、ID が重複しないように注意する必要があります。


外部ページの Ajax 読み込み抑止

外部ページの Ajax 読み込みを抑止するには、アンカータグに rel="external" を指定するか、data-ajax="false" を指定、または(_blankなどの) target 属性を指定します。
セマンティクスとしては、rel="external" は外部サイトへの遷移時に指定し、data-ajax=“false”は同じサイト内であっても何らかの理由で Ajax 読み込みを行いたくない場合に指定します。
異なるドメインの場合にも Ajax 読み込みは行われません。


グローバルな設定は $.mobile.ajaxEnabled にて行います。

  $(document).bind("mobileinit", function() {
      $.mobile.ajaxEnabled = false;
     $.mobile.pushStateEnabled = false
  });

Ajax 読み込みを抑止した場合には、$.mobile.pushStateEnabled を false に設定してください。pushStateEnabled は Ajax によるハッシュベースのURLを通常のドキュメントパスに変換するか否かの設定となります。


部分的に Ajax を無効化するには以下のようにタグに data-ajax=“false”を指定します。

// アンカータグの場合
<a href="external.html" data-ajax="false">External</a>

//formタグの場合
<form action="action.do" method="get" data-ajax="false">


ページの Ajax 読み込みを抑止した場合には、ページ遷移時のローディングや遷移時の UI効果も無効となるので注意してください。
通常は、内部ページも外部ページも Ajax にて取得してページの一部を書き換えることで実現されるため、 タグが最初のページに依存するなどディスクトップ向けのアプリケーションとは異なる挙動となります。このような独特の挙動に問題がある場合に Ajax 読み込みを抑止する必要が出てくるかもしれません。


はじめての jQuery Mobile 1.0 〜その2:ページ遷移〜 - etc9に続く..