【JavaScript】jQuery Mobileの紹介

jQuery

こんにちは。うら@infiniです。
今回はjQuery MobileというjQueryベースのモバイルフレームワークを紹介します。


jQuery Mobile

jQuery Mobileは、AndroidやiPhoneなどのWebkitベースのスマートフォン向けのページ作成ができます。
HTMLの要素に属性やクラスを指定するだけで、きれいなUIを作ることができます。

jQuery Mobileを使用するには、jQuery MobileとjQueryをダウンロードします。


使ってみる

まずはHTMLファイルを作成し、そのファイルにjQuery Mobileを読み込ませてみましょう。

<html> 
	<head> 
		<title>Sample</title> 
	</head>
	<body>
		<div>
			<div>
				<h1>ヘッダ</h1>
			</div>
			<div>
				<ul>
					<li>リスト01</li>
					<li><a href="#page1">
						<h3>リスト02</h3>
						<p>リスト02リスト02</p>
					</a></li>
					<li>リスト03</li>
					<li><a href="#page2">
						<h3>リスト04</h3>
						<p>リスト04リスト04</p>
					</a></li>
					<li>リスト05</li>
					<li><a href="#page3">
						<h3>リスト06</h3>
						<p>リスト06リスト06</p>
					</a></li>
					<li><a href="#page4">
						<h3>リスト07</h3>
						<p>リスト07リスト07</p>
					</a></li>
				</ul>
			</div>
			<div>
				<h4>フッタ</h4>
			</div>
		</div>
		<div id="page1">
			<div>
				<h1>ヘッダ</h1>
			</div>
			<div>
				<h2>リスト02から飛んできた</h2>
				<p>リスト02から飛んできた</p>
				<p>リスト02から飛んできた</p>
			</div>
			<div>
				<h4>フッタ</h4>
			</div>
		</div>
		<div id="page2">
			<div>
				<h1>ヘッダ</h1>
			</div>
			<div>
				<h2>リスト04から飛んできた</h2>
				<p>リスト04から飛んできた</p>
			</div>
			<div>
				<h4>フッタ</h4>
			</div>
		</div>
		<div id="page3">
			<div>
				<h1>ヘッダ</h1>
			</div>
			<div>
				<h2>リスト06から飛んできた</h2>
				<p>リスト06から飛んできた</p>
			</div>
			<div>
				<h4>フッタ</h4>
			</div>
		</div>
		<div id="page4">
			<div>
				<h1>ヘッダ</h1>
			</div>
			<div>
				<h2>リスト07から飛んできた</h2>
				<p>リスト07から飛んできた</p>
			</div>
			<div>
				<h4>フッタ</h4>
			</div>
		</div>
	</body>
</html>

上記のようなHTMLファイルを作成してブラウザから見た場合、下の画像のようになります。
（最初のdiv要素より下は省いています）

そこに、jQuery MobileとjQUeryを読み込ませると、下の画像のようになります。
（最初のdiv要素より下は省いています）


背景色が変わり、文字に影が付きました。


ページコンテナ

body要素内には、data-role="page" という属性を指定した要素を作成します。
この属性を指定することによって、指定された要素を一つのページとして認識させることができます。
ページdivの直下には、data-role属性で "header", "content", "footer" 要素が入ります。

先ほどのdiv要素にdata-role属性を指定してみましょう。
最初のdiv要素とidが付いたdiv要素にdata-role="page"を追加します。

<div data-role="page">


次に、"header", "content", "footer"を指定します。
headerはページdiv直下の1番目のdiv要素に対して指定します。
footerはページdiv直下の最後のdiv要素に対して指定します。
ヘッダdivとフッタdivの間の要素にcontentを指定します。

<div data-role="page">
	<div data-role="header" data-theme="b">
		<h1>ヘッダ</h1>
	</div>
	<div data-role="content">
		<ul>
			<li>リスト01</li>
			<li><a href="#page1">
				<h3>リスト02</h3>
				<p>リスト02リスト02</p>
			</a></li>
			<li>リスト03</li>
			<li><a href="#page2">
				<h3>リスト04</h3>
				<p>リスト04リスト04</p>
			</a></li>
			<li>リスト05</li>
			<li><a href="#page3">
				<h3>リスト06</h3>
				<p>リスト06リスト06</p>
			</a></li>
			<li><a href="#page4">
				<h3>リスト07</h3>
				<p>リスト07リスト07</p>
			</a></li>
		</ul>
	</div>
	<div data-role="footer" data-theme="b">
		<h4>フッタ</h4>
	</div>
</div>
<div data-role="page" id="page1">
	<div data-role="header" data-theme="b">
		<h1>ヘッダ</h1>
	</div>
	<div data-role="content">
		<h2>リスト02から飛んできた</h2>
		<p>リスト02から飛んできた</p>
		<p>リスト02から飛んできた</p>
	</div>
	<div data-role="footer" data-theme="b">
		<h4>フッタ</h4>
	</div>
</div>
<div data-role="page" id="page2">
	<div data-role="header" data-theme="b">
		<h1>ヘッダ</h1>
	</div>
	<div data-role="content">
		<h2>リスト04から飛んできた</h2>
		<p>リスト04から飛んできた</p>
	</div>
	<div data-role="footer" data-theme="b">
		<h4>フッタ</h4>
	</div>
</div>
<div data-role="page" id="page3">
	<div data-role="header" data-theme="b">
		<h1>ヘッダ</h1>
	</div>
	<div data-role="content">
		<h2>リスト06から飛んできた</h2>
		<p>リスト06から飛んできた</p>
	</div>
	<div data-role="footer" data-theme="b">
		<h4>フッタ</h4>
	</div>
</div>
<div data-role="page" id="page4">
	<div data-role="header" data-theme="b">
		<h1>ヘッダ</h1>
	</div>
	<div data-role="content">
		<h2>リスト07から飛んできた</h2>
		<p>リスト07から飛んできた</p>
	</div>
	<div data-role="footer" data-theme="b">
		<h4>フッタ</h4>
	</div>
</div>
</div>

ページ内の要素にはテーマを設定することができます。
今回はdata-theme="b"を指定しています。

ここまで指定すると、下の画像のようになります。
リンクをクリックすると、対応したページに切り替わるようになっています。
ページ切り替えにはデフォルトで切り替え効果が設定されています。


リストビュー

ul要素にdata-role="listview"を指定することで、リスト部分にもUIをかぶせることができます。

<ul data-role="listview">
	<!-- 省略 //-->
</ul>

このとき、ul要素に data-inset="true"を指定すると、挿し込みリストとして扱われます。
※挿し込みリスト…リスト以外の要素があるページに対して挿し込まれるリスト。リストの周囲に余白がある。


これらの属性を指定すると、下の画像のようになります。


リストに見出しを付けたい場合は、li要素にdata-role="list-divider"を指定します。

<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">リスト01</li>
	<li><a href="#page1">
		<h3>リスト02</h3>
		<p>リスト02リスト02</p>
	</a></li>
	<li data-role="list-divider">リスト03</li>
	<li><a href="#page2">
		<h3>リスト04</h3>
		<p>リスト04リスト04</p>
	</a></li>
	<li data-role="list-divider">リスト05</li>
	<li><a href="#page3">
		<h3>リスト06</h3>
		<p>リスト06リスト06</p>
	</a></li>
	<li><a href="#page4">
		<h3>リスト07</h3>
		<p>リスト07リスト07</p>
	</a></li>
</ul>


この属性を指定すると、見出し部分の色が変わって見やすくなります。
今までの指定を全て反映させたのが以下の画像になります。


jQuery Mobileには、今回紹介した他にも多くの機能があります。
このフレームワークは、CSSやJavaScriptのコードを自分で書かなくてもきれいなUIを実装できるので、
スマートフォンを意識したページを作成する際は是非取り入れてみてください。


以上、うら@infiniでした。