jQuery Mobile1.4でスマホサイト作成１〜文書構造作成

jQuery Mobileのバージョン1.4では、従来バージョンから変更があります。1.4に対応した記述方法を学習します。

jQuery Mobileの準備
data-roleで文書構造を作成
1. マルチページの作成

jQuery Mobileの準備

モバイルページサンプル
meta要素にviewportの設定を記述します。Viewportを指定することで表示サイズを設定することができます。
viewportについて

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

ライブラリの読み込みはCDN(Contents Delivery Network)で行います。オンライン環境で使用する場合はCDNの方がレスポンスが良いと言われています。これはサーバーが分散されるためです。
jQuery Mobileのページ
Copy-and-Paste snippet for jQuery CDN hosted files:と書かれている部分をhead内にコピペします。

参考例

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

data-roleで文書構造を作成

マルチページの作成

Homeページと下層ページを別々のファイルに分けて作成する既存のページ作成方法と、ひとつのファイルに複数のページをまとめて記述するマルチページ作成の方法があります。今回はマルチページ作成を説明します。

ページ領域

マルチページはひとつのファイルに複数のセクションを作成して各セクションをページ内リンクで移動する方法です。
Topページや下層ページなどそれぞれのページの領域をつくるセクション部分のタグにdata-role属性に値をpageとして付加します。

data-role=”page”属性を使用してマルチページ化
各ページの識別はid属性で行います。
各ページへの遷移はhref属性の値でid名を指定

マルチページ作成は
data-role=”page”

文書構造作成例

<div data-role="page" id="top">
Homeページの内容
</div>
<div data-role="page" id="info">
infoの内容
</div>
<div data-role="page" id="menu">
menuの内容
</div>

ヘッダーとフッター領域

各ページにあたるセクションにはヘッダーとフッターを設定することができます。
ヘッダーとフッターはdata-role属性で値をheaderまたはfooterとします。

ヘッダー領域はdata-role=”header”
フッター領域はdata-role=”footer”

また、ヘッダーを画面の一番上に、そしてフッターを画面の一番下に固定したい場合はdata-position=”fixed”を使用します。

ヘッダーとフッターの固定は
data-position=”fixed”

ヘッダー領域の例

<div data-role="header" data-position="fixed">
<h1>食いしん坊クラブ</h1>
</div>

フッター領域の例

<div data-role="footer" data-position="fixed">
<small>Copyright &copy; 2015 StudioM</small>
</div>

コンテンツ領域

コンテンツ領域は1.4からdata-role=”content”が無くなり、classとroleを使用するように変更になりました。
class=”ui-content” role=”main”となったので注意が必要です。

コンテンツ領域の設定
class=”ui-content” role=”main”

コンテンツ領域の例

<div class="ui-content" role="main">

data-role属性の使い方は以下の表のとおりです。

data-roleの値	役割
page	ページを作成
role=”main” (class=”ui-content”併用)	コンテンツ領域
header	ヘッダー領域
footer	フッター領域

ページ遷移はAjaxが使用されています。
Ajaxの特徴として遷移したい部分だけ表示内容を変更できるところです。通常のページ遷移はリクエストとレスポンスの関係で、表示しているページすべての内容が書き換えられます。
Ajaxを使用することで通信効率がアップしますのでスムーズなページ遷移が実現できます。
けれども欠点もあります。最初に読み込まれたページのheadがそのまま使用されますので別ページでCSSのリンクを変更している場合などは問題が起こります。特定の領域だけを表示させるため最初のheadがそのまま使用されるからです。
そのようなページにリンクする場合はAjaxを無効にしておきます。

aタグにrel=”external”を指定するとAjaxを使用せずにリンクされます。
また特定のフォームだけAjaxを使用しない場合はformタグにdata-ajax=”false”属性を使用します。

Ajaxの無効
aタグにrel=”external”を指定