スマートフォン用サイトを簡単に構築できるライブラリ「jQuery Mobile」

スマートフォン2011年9月3日

はじめてのjQueryでもご紹介させて頂いていますが、PCサイトではJavascript開発を簡単に行うためにjQueryが広く使われています。
このライブラリのプラグインとしてjQuery Mobileが開発されました。jQuery Mobileを使用することで、非常に容易にスマートフォンサイトを構築する事が可能になります。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no" />
<title>独学Webデザイナーの覚書</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.css">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
<h1>独学Webデザイナーの覚書</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">コンテンツ</li>
<li><a href="#products"><h3>製品情報</h3></a></li>
<li><a href="#company"><h3>会社情報</h3></a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 独学Webデザイナーの覚書</h4>
</div>
</div>
<div data-role="page" id="products" data-theme="b">
<div data-role="header">
<h1>独学Webデザイナーの覚書</h1>
</div>
<div data-role="content">
<h3>製品情報</h3>
<p>製品情報</p>
</div>
<div data-role="footer">
<h4>&copy; 独学Webデザイナーの覚書</h4>
</div>
</div>
<div data-role="page" id="company" data-theme="b">
<div data-role="header">
<h1>独学Webデザイナーの覚書</h1>
</div>
<div data-role="content">
<h3>会社情報</h3>
<p>会社情報</p>
</div>
<div data-role="footer">
<h4>&copy; 独学Webデザイナーの覚書</h4>
</div>
</div>
</body>
</html>

※上記コードではオンライン上のライブラリへの絶対パスで読み込んでいますが、ローカルにダウンロードして使用してもどちらでもかまいません

jQuery Mobileにおけるページ概念

通常のWebサイト制作ではページ毎にHTMLを分けますが、jQueryモバイルでは「複数のページ」をひとつのHTML内に記述します。
jQuery Mobileではカスタムデータ属性「data-role="page"」を持つdiv要素が1ページとなり、上記コード例の場合は、「id="index"」内のソースがトップページ、「id="products"」「id="company"」の中身がそれぞれの下層ページとなります。

ページの遷移

jQuery Mobileでは複数ページのコンテンツをひとつのHTMLに記述し、ページ遷移はペー以内リンク（アンカーリンク）で行います。

jQuery Mobileを使用したテクニック

スマートフォンサイトでは、トップページやカテゴリインデックスなどで、リスト表示のリンクが頻繁に使われます。
jQuery Mobileではそういった使用頻度の高いUIをHTMLの記述のみで実装することが可能です。
コンテンツを括っているdiv（data-role="content"）内のul要素に対してカスタムデータ属性「data-role="listview"」付加することで可能になります。

jQuery Mobileの欠点

jQuery MobileはHTMLのみの工夫で非常に使い勝手のいいスマートフォンサイトを構築する事が可能です。iPhone、Androidのどちらもサポートされています。
しかしながら、これを実際の案件で使用し、かつデザインや機能をカスタマイズすることが必要になってくると、非常に大変です。下手をするとゼロベースでコーディングするよりも時間がかかる可能性があります。

まとめ

非常に機能としては優れており、本当に気軽にクオリティの高いスマートフォンサイトが短時間で作れるので、そういった意味ではものすごく積極的に使いたいです。ただページ分割の概念やマークアップの特殊性などもあるので、しつこいようですがおおがかりなカスタマイズをする必要性が出てくれば、使わないべきだとも思います。逆に自由に作れる場合はどんどん積極的に使っていきたいなと個人的には思いました。

WordPressを簡単にスマートフォンサイトに最適化するプラグイン「WPtouch」「MobilePress」

この記事を読んでいる方にオススメの記事

「スマートフォン」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。