ページ機構

jQuery Mobileの「ページ」構造は、1枚のページとして用いることも、内部的なリンク構造を持った複数のページとして作成することも可能です。

このモデルは、ウェブサイト開発におけるベストプラクティスの実現を目指しています。つまり通常のリンクも、特別な設定なしに動作するようになっていますし、一方で普通のHTTPリクエストでは実現できないようなリッチでネイティブなリンクを作成することも可能なようにすることです。

携帯ページの構造

jQuery Mobileで作成するサイトは、HTML5のDOCTYPE宣言で始まることにより、最大限の機能を発揮します(HTML5を理解できないブラウザを積んだ古いデバイスの場合、DOCTYPEや様々なカスタム属性は無視されるだけです)。

次にhead要素内でjQuery本体、jQuery Mobile、モバイル用テーマCSSを参照してください。jQuery Mobile 1.1は、jQueryコア1.6.4および1.7.1との組み合わせで動作します。パフォーマンス面から、ファイルはCDNから取得することをお勧めします。

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

メタ要素 Viewport

先ほどのコード例で head 要素内に viewport というメタ要素が指定されていることに注意してください。これは、ブラウザに対してページを表示する際のズームレベルや方向を指示するためのものです。この指定が無いと、多くのブラウザは900ピクセル程度の仮想ページを表示します。しかしこれはデスクトップ用につくられたサイトを表示するのに適した大きさで、jQuery Mobileでつくられたサイトにはズームアウトしすぎでしょう。この viewport に content=“width=device-width, initial-scale=1” と指定することで、横幅はデバイス画面の持つピクセル数にあわせられます。

<meta name="viewport" content="width=device-width, initial-scale=1">

この設定によって、ユーザが自分で最適に見られるようズームするなどの動作が阻害されることはありません。わずかにiOS上で端末の向きを変えた際に適切な横幅が用いられないという問題がありますが、将来的なリリースで修正されることを期待します。この viewport 設定でズーム機能を停止することも可能ですが、それはつくられるサイト特性上の話であり、ライブラリは関知しません。

ページコンテナ

マークアップの body> 要素内には、携帯端末上の「ページ」ごとに data-role=“page” という属性指定をした要素(通常は div )を作ってやります。ページコンテナに指定できる属性についてはdata属性リファレンスを参照してください。

<div data-role="page"> 
  ...
</div>

ページコンテナ内には、正しいHTMLであればどんなものでも記述することが出来ます。しかしjQuery Mobileの典型的なページ構造としては、ページdivの直下にdata-roles属性で “header”, “content”, “footer” 要素が入る形になります。

<div data-role="page"> 
  <div data-role="header">...</div> 
  <div data-role="content">...</div> 
  <div data-role="footer">...</div> 
</div>

基本的な単一ページテンプレート

ここまでをまとめた、標準的なボイラープレート・ページが次のようになります。これが全てのはじまりになるでしょう。

<!DOCTYPE html> 
<html> 
        <head> 
        <title>Page Title</title> 

  <meta name="viewport" content="width=device-width, initial-scale=1"> 

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

  <div data-role="header">
                <h1>Page Title</h1>
        </div><!-- /header -->

  <div data-role="content">       
                <p>Page content goes here.</p>              
        </div><!-- /content -->

  <div data-role="footer">
                <h4>Page Footer</h4>
        </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

ボイラープレート・テンプレート

複数ページテンプレート

ひとつのHTMLが複数の「ページ」を内包することも可能です。その場合 data-role 属性に page を指定した div 要素が複数設置されます。各ページブロックはユニークなID( id=“foo” など )を必要とします。これが、そのページへのリンクをつくるさいに使われます( href=”#foo” のように )。このリンクがクリックされると、フレームワークはページ内の指定IDを探し、そのページへ遷移する処理を行います。

以下は、2ページを含むサンプルの body 部分です。それぞれが、IDを使ってお互いのページにリンクを持っています。

<body> 

<!-- Start of first page -->
<div data-role="page" id="foo">

  <div data-role="header">
                <h1>Foo</h1>
        </div><!-- /header -->

  <div data-role="content">       
                <p>I'm first in the source order so I'm shown as the page.</p>              
                <p>View internal page called <a href="#bar">bar</a></p>       
        </div><!-- /content -->

  <div data-role="footer">
                <h4>Page Footer</h4>
        </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

  <div data-role="header">
                <h1>Bar</h1>
        </div><!-- /header -->

  <div data-role="content">       
                <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>          
                <p><a href="#foo">Back to foo</a></p> 
        </div><!-- /content -->

  <div data-role="footer">
                <h4>Page Footer</h4>
        </div><!-- /footer -->
</div><!-- /page -->
</body>

複数ページ・テンプレート

設計指針

これらの構造は、jQuery Mobileを使ってサイトを構築する際の標準的な指針ですが、必須条件ではありません。フレームワークは柔軟に設計されており、ここで挙げたような page, header, content, footer といったような data-role 属性で指定された要素は、いずれも取捨選択可能です。ページコンテナは、以前のバージョンでは自動初期化処理のために必須の要素でしたが、現在ではこれも省略可能です。

ただし、複数ページテンプレートにおいては data-role=“page” の指定されたページコンテナは必須になるので注意してください。