///

jQuery Mobileを使った最小ソース

wrote :

jQurey Mobile。まもなくβ版がリリースされるそうですが、現状のα版3を見てみました。
最低限必要なソースまで削り落として、ちょっとjQuery Mobileに触れてみます。

jQuery Mobileを使った最小ソースサンプル(スマートフォン、もしくはSafariかChromeで動作確認できます)

test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

</head>
<body>
<div data-role="page" id="test1">
<p><a href="test_next.html">相対パス</a></p>
<p><a href="/jquery/test_next.html">絶対パス</a></p>
<p><a href="http://www.allinthemind.biz/jquery/test_next.html">絶対URI</a></p>
<p><a href="http://allinthemind.org/">ドメイン違い</a></p>
<p><a href="test_next.html" rel="external">相対パス+rel="external"</a></p>
<p><a href="#test2">ページ内遷移</a></p>
</div>
<div data-role="page" id="test2">
#test2
</div>
</body>
</html>
test_next.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div data-role="page">
test_next.html
</div>
</body>
</html>

metaのviewportは、jQuery Mobileと直接関係ありませんが、スマートフォン対応で必要、ということで詳細はここでは触れませんが適時修正を。よく分からない場合はこのままで。
必要なのはこれだけ。

  1. jQuery関連のファイルを3つ(CSS 1ファイル、JavaScript 2ファイル)読み込む。
  2. data-role属性とその値pageを指定したdivを用意する。

間単にお試しできるように、jQuery関連ファイルをhttpから始まる絶対URIで参照していますが、本家jQuery Mobile / Downloadからダウンロードできます。

data-role属性とその値pageを指定したdivを用意する。実はこれ、必須なんです。

スマートフォン(もしくはSafariかGoogle Chrome)でjQuery Mobileを使った最小ソースサンプルをご覧いただくと分かりますが、test.htmlを開くと最初のdata-role="page"を設定した要素内のみの表示となります。
実は、jQuery Mobileを使う場合、data-role="page"が必須です(idは任意、ページ内にdata-role="page"が一度しかない場合はid自体不要)。
これがないとページがうまく表示されません。
これは、jQuery Mobileを導入することで、全要素がvisibility:hidden;がデフォルト設定されるためです(CSSで上書きすれば表示できます)。

同一ドメイン内のページ遷移時は右から左へスライドがデフォルト

同一ドメイン内のページ遷移時は右から左へスライドするトランジション効果が発生します。
他ドメインへのページ遷移は何もトランジションは起きません。普通にページ遷移します。
同一ドメイン内でもトランジションを発生させてくたない場合は、ページ遷移するタグに「rel="external"」を追加することで対応できます。

同一ドメインのページ遷移先での注意点(重要)

ページ遷移先で、jQueryを使う予定がないとしても、data-role="page"は必須です(test_next.htmlのソース参考)。
これがないと遷移時にローディング画像が永遠表示され、ページ遷移しません。
これは、遷移時のURLを見てもらうと分かるのですが、実際にはページ遷移しないで、遷移先のページを読み込んでいるようです。

ページ遷移先で、data-role="page" でコンテンツをくくることができない場合は、ページ遷移するタグに「rel="external"」を追加して対応します(このとき、スライドするといったtransition効果は発生しません。通常のページ遷移と同様)。

jQuery Mobileありきで新規のスマートフォンページを作るのではなく、既存コンテンツにjQuery Mobileを徐々に適用させる場合は、特に注意が必要です。

川上 武範(かわかみ たけのり)
1975年生。シンプルシンプルデザイン代表兼Webクリエイター。たびのとWebサイト運営責任者。

企画からサイト設計、正しいマークアップを意識したWebサイト制作やユーザー視点の情報設計を得意としている。

シンプルシンプルデザイン
たびのと
twitter : たけたけ@OnlyTwo

メディア掲載
2016年10月25日 レバテックフリーランスの記事「自作Webサービス記事紹介まとめ」でサイト内の記事「Webサービス「たびのとTOKYO」を作ってみました」を紹介していただきました。