jQuery Mobileを利用したスマートフォンサイト作成手順
更新日:2010年11月6日|公開日:2010年11月6日
jQuery Mobileを利用してスマートフォンサイト作成してみたので、手順を覚書として書いておきます。
ちなみにまだ正式版ではなく、アルファ版となります。※2010年11月現在
現在のバージョンなどは下記の本家サイトよりご確認ください。
この記事の内容
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>