Blog

jQuery Mobileを利用したスマートフォンサイト作成手順

2010年11月6日

jQuery Mobileを利用してスマートフォンサイト作成してみたので、手順を覚書として書いておきます。
ちなみにまだ正式版ではなく、アルファ版となります。※2010年11月現在
現在のバージョンなどは下記の本家サイトよりご確認ください。

jQuery Mobile

この記事の内容

jQuery Mobileを利用したページ作成概要

本家のデモ作成画面を和訳してくれている下記ページがわかりやすいです。

http://dev.screw-axis.com/doc/jquery_mobile/

読み込みファイル

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

※Alpha1.0の時点のコードを掲載していますので、最新のバージョンを確認してからご使用ください。→最新情報を確認

PHPでPCサイト/モバイルサイト(3キャリア)/スマートフォンで分岐する方法

jQuery Mobileとは直接関係ないですが、例として、スマートフォンとその他の端末向けの分岐の仕方を記しておきます。ます、ドキュメントルートにindex.phpを置き、そこに下記の分岐を記述します。内容としては携帯からアクセスがあれば/m以下にリダイレクト、スマートフォン(iPohone、Android)からアクセスがあれば/s以下にリダイレクトするようにします。

//スマートフォンユーザーエージェントの場合はスマートフォンサイトにリダイレクト
if (preg_match('/(iPhone)|(iPod)|(BlackBerry)|(Windows Phone)|(Symbian)|(Android)/', $_SERVER['HTTP_USER_AGENT'])) {
header('Location: '.str_replace('index.php','',$_SERVER['PHP_SELF']).'s');
exit();
}
//モバイルユーザーエージェントの場合はモバイルサイトにリダイレクト
if (preg_match('/(DoCoMo)|(J-PHONE)|(Vodafone)|(SoftBank)|(UP\.Browser)/', $_SERVER['HTTP_USER_AGENT'])) {
header('Location: '.str_replace('index.php','',$_SERVER['PHP_SELF']).'m');
exit();
}
//PCサイトの処理

基本形1(シングルページ)

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.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><!-- /header -->
</div><!-- /page -->
</body>
</html>

基本形2(複数ページ※1ソース)

<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><!-- /header -->
</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 first in the source order so I'm shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>

外部リンク又は、AJAXのページ遷移を切る場合

jQuery Mobileでのページ遷移は基本的にはAJAXでの切り替えになるので、通常のページ切り替えを行いたい際にはaタグにrel="external"をつける
例)
<a rel="external" href="hogeultipage.html">ページ名</a>

ボタン要素

aタグにdata-role="button"とつけることでデザインを変更できる。 その他inputタグなど様々なオプションもある
http://jquerymobile.com/demos/1.0a1/#docs/buttons/buttons-types.html
例)
<a href="index.html" data-role="button">リンクボタン名</a>