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

2010/11/06

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>

この記事について