早速、jQuery Mobileを使ってスマフォで表示させてみた

「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる－ Publickey
に衝撃を受け、サンプルを眺めていても意味がないと思ったので
早速、jQuery Mobileを使ってサクサクっと画面を作ってみました。
また、スマフォだとどんな感じになるのかと表示もさせてみました。

・開発環境
Aptana Studio 3

・スマートフォン（実機）
Galaxy S

・メインページ

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />
        <title>jQuery Mobile Test</title>
        <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
        <script src="jquery-1.5.min.js"></script>
        <script src="jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
        <!-- メインページ -->
        <div data-role="page" id="foo">
            <!-- メインページのヘッダー -->
            <div data-role="header">
                <h1>メインページ</h1>
            </div>
            
            <!-- メインページの内容、サブページへのボタン -->
            <div data-role="content">
                <p>Go To Subpage
                    <a href="sampleJSMSub.html" data-transition="slide" data-role="button">SubPage</a>
                </p>
            </div>
            
            <!-- メインページのフッター -->
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

・サブページ

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />
        <title>jQuery Mobile Test</title>
        <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
        <script src="jquery-1.5.min.js"></script>
        <script src="jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
        <!-- サブページ -->
        <div data-role="page" id="bar">
    
            <!-- サブページのヘッダー -->
            <div data-role="header">
                <h1>サブページ</h1>
            </div>
            
            <!-- サブページの内容 -->
            <div data-role="content">
                <p>Sub Contents</p>
            </div>
            
            <!-- サブページのフッター -->
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

・画面確認（Galaxy Sの標準スクリーンキャプチャを使用）

画面の体裁は、まだまだですがメインページでボタンを押下したら
ちゃんとサブページに遷移することを確認できました。

しかし、問題が遷移時に少し固まるようなことがあります。
スマフォの方の問題なのか、jQuery Mobileなのか、
ローカルサーバが貧弱なのかわからないままとなっています。

とりあえず、次はフッターがキッチリと画面いっぱいに
なるように体裁を整える調査をしてみます。