jQuery Mobile の基本的な使い方
スマートフォン上のブラウザは、PC 向けのウェブサイトを表示することを基本として設計されているので、 デフォルトでは文字が小さくなる、リンクをクリックしにくいなどの問題が発生します。
そのためにモバイルユーザーが、あなたのウェブサイトを訪れることを想定した場合、スマートフォン上のブラウザでも文字が読みやすくなるように、 そして必要なリンクをクリックしやすくなるような工夫をしなければなりません。
また、使用感としてネイティブ・モバイル・アプリに近く実装できれば、ネイティブアプリの開発ではなく HTML によるアプリケーションの開発にフォーカスするのもよいかもしれません。
ここでは jQuery Mobile を利用して簡単なウェブサイトを作成する事を通して、jQuery Mobile の基本的な利用方法を学びましょう。
尚、この記事では jQuery Mobile 1.1.0 を利用することを想定しています。
jQuery Mobile の基本的な使い方
ではさっそく、コードから見てみましょう。
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<title>jQuery Mobile デモ 1</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header"><h1>jQuery Mobile デモ</h1></div>
<div data-role="content">
<p>Page 1</p>
</div>
<div data-role="footer">© keicode.com</div>
</div>
</body>
</html>
この結果、次のように表示されます。スクリーンショットは Android 2.3.3 上の標準ブラウザで表示しています。
横向きだと次のようになります。
まだ有用なところは見えていないと思いますが、とりあえずここまでのコードを説明します。
jQuery Mobile の取り込み
ヘッダー部で jQuery Mobile 1.1.0 の CSS と必要な JavaScript を取り込んでいます。
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
ダウンロードしてあなたのウェブサイトから配信することも可能です。
これを書いている時点 2012年5月では jQuery Mobile の安定版の最新バージョンは 1.1.0。上の取り込み方法は jQuery Mobile サイトで紹介されている推奨方法です。
実際に利用する場合は jQuery Mobile のサイトを確認して、推奨方法で取り込むとよいでしょう。
尚、本記事はバージョン 1.1.0 を利用するものとして記述していますから、異なるバージョンを利用すれば違う方法で利用する可能性があります。
Viewport と Charset の指定
Viewport についてはデバイス幅を指定しています。
<meta name="viewport" content="width=device-width">
詳細は次の記事を参考にしてください。
文字コードについては、HTML5 式の方法で指定しています。
<meta charset="UTF-8">
これだけなので簡単ですね。
ページの内容
以上で、ページを記述する土台ができました。この上で body 部内にページを記述していけば OK です。
ページを表しているのは次の部分です。
<div id="page1" data-role="page">
<div data-role="header"><h1>jQuery Mobile デモ</h1></div><div data-role="content">
<p>Page 1</p>
</div><div data-role="footer">© keicode.com</div></div>
data-role="page" という属性付きの div タグでページを作ります。
その中に div 要素でそれぞれ「ヘッダー部」「コンテンツ」「フッター部」を作っていますが、 ポイントは data-role の指定です。
それぞれ data-role を header、content、footer と指定します。
このようにページを作ると、勝手に上で見ていただいたような "モバイル向けページ" になります。
... といっても、「なんでこれがモバイル向けなんだ？」と思う人も多いと思います。 jQuery Mobile の強みはもう少し使ってみないと分からないと思いますので、ぜひ関連記事もお読みくださいませ。