jQuery mobile使ってみた

スマホサイト

スマホ増加に伴って、
サイト制作にスマホ対応を求められることが増えてきた。
いろいろなフレームワークがあるけど有名なのでjQuery mobileを使ってみた。
実は公式サイトをちゃんと見るのは初めて。
ドキュメントを見ながら少し触っただけでその手軽さにびっくり。
あと驚いたのはドラッグ&ドロップでさくっとUIを作ってダウンロードできる仕組みがあること。
これはすごいな！

どんな仕組み？

ページ遷移はhashchangeイベントで実装してて、
必要なときだけAjaxでページを読み込んで表示してるみたい。

By default all navigation within jQuery Mobile is based on changes and updates to location.hash. Whenever possible, page changes will use a smooth transition between the current "page" and the next, whether it is either already present in the DOM, or is automatically loaded via Ajax.

なんだか今時のフレームワークって感じ。

使ってみた印象

気になったのは1ファイルに必要なviewを全部書けること。
ページ内リンクの感覚でid属性のついたdivを各viewとして扱える。
あとはhtml5から追加されたdata属性というのを使ってる。
サンプルコードを見ればわかるけど、
ページ内の各パーツがすべて何かしらのdata属性を持っていて、
機能ごとにわけられている。
これはPC版のサイト構造を変更せずにスマホ対応するために考えられたやり方だと思う。
必要なところだけdata属性を変えてスマホに合わせるイメージ。
よくできてるなー。

ドキュメントを見ながら書いてみた。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
</head>
<body>

<!-- Start of first page -->
<div data-role="page" id="first">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>ようこそ！jQuery Mobileのサンプルです</p>
		<p><a href="#second">次のページへ</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="second">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<h2>ボタンのサンプル</h2>
		<a href="#" data-role="button">ボタン1</a>
		<a href="#" data-role="button" data-icon="arrow-l">ボタン2</a>
		<a href="#" data-role="button" data-icon="delete">ボタン3</a>
		<h2>パネルのサンプル</h2>
		<div data-role="collapsible">
		      <h3>開くかな？</h3>
		      <p>開きました</p>
	</div><!-- /content -->

	<h2>リストのサンプル</h2>
	<ul data-role="listview" data-inset="true">
		<li><a href="#">リスト1</a></li>
		<li><a href="#">リスト2</a></li>
		<li><a href="#">リスト3</a></li>
	</ul>

	<h2>スライダーのサンプル</h2>
	<div data-role="fieldcontain">
	  <input id="basic_per" name="basic_per" type="range" min="0" max="100" step="5" value="0" />
	</div>

	<h2>オプションのサンプル</h2>
	<div data-role="fieldcontain">
	  <select name="basic_book">
	    <option value="Welcome!">Welcome!</option>
	    <option value="ようこそ!">ようこそ!</option>
	    <option value="熱烈歓迎!">熱烈歓迎!</option>
	  </select>
	</div>


	<h2>スイッチのサンプル</h2>
	<div data-role="fieldcontain">
	  <label for="basic_mail">メール送付：</label>
	  <select name="basic_mail" data-role="slider">
	    <option value="no">不要</option>
	    <option value="yes" selected>必要</option>
	  </select>
	</div>

	<p><a href="#first">最初のページに戻る</a></p>

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

サンプルまるパクリだけど大体の感じはつかめた気がする。
いろいろ機能はあるのでこれから調べていこうっと。
お手軽にスマホ向けのUIが構築できることはわかった！