jQueyMobileを使ってスマホサイトを作ったよ

これまた連休中にお勉強しようと、「jQuery Mobile」を使って弊社のスマートフォン対応サイトを作ってみました。
実感は…「すごく簡単！スゴイや！」「けど、奥が深い！」。
不具合？や出来ないこともあるけれど、凄く完成されたスクリプトだと感動しました。

株式会社メディアプロスマートフォン対応サイト
（実際はPCとスマホ振り分けています）

以前仕事で、HTML5+CSS3でスマホサイトを作ったことがありましたが、巷で評判だった「jQuery Moble」を使ってみたいと思い、どうせなら弊社サイトを。
これが意外と簡単。
基本は、1つのhtmlにリンクさせる複数のサイトのソースを書きます。
あとはアンカー(#)の要領でリンクを張るだけ。
ページ切り替えのエフェクトも<a>タグの中にdata_transitionの属性を書くだけ。
そう、「…だけ…だけ」の世界でサイトが作れちゃう。
同時進行で「Facebookページ」を作っていたので、素材・原稿はバッチリ。
ホント作業だけでしたので、約1日で出来ちゃいました。

基本のhtml構造はこれ。（SyntaxHighlighter使ってみたかったぁ〜(^^)）

<!DOCTYPE html>
<html>
<head>
	<title>ページタイトル</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 

<body>
	<!-- ホームページ -->
	<div data-role="page"  id="foo">
		<div data-role="header">
			<a href="#company">会社概要へ</a>
			<a href="#products">商品紹介へ</a>
		</div>
		<div data-role="content">コンテンツ</div>
		<div data-role="footer">フッター</div>
	</div>

	<!-- 会社概要 -->
	<div data-role="page" id="company">
		<div data-role="header">会社概要</div>
		<div data-role="content">コンテンツ</div>
		<div data-role="footer"><a href="#foo" data-direction="reverse">戻る</a></div>
	</div>

	<!-- 商品紹介 -->
	<div data-role="page" id="products">
		<div data-role="header">商品紹介</div>
		<div data-role="content">コンテンツ</div>
		<div data-role="footer"><a href="#foo" data-direction="reverse">戻る</a></div>
	</div>

</body>
</html>

この後、<div>タグや<a>タグにエフェクトやテンプレート（色など）を書き加えていけば完成。
テンプレートは決まっていますが、変えたい部分のCSS部分を上書きすればカスタマイズ可能。
実際、ボタンの角が丸すぎたので、少しゆるめに書き換え。
問題は、エフェクト…。「data-direction=“reverse”」ページ遷移を逆方向にできるのですが、ひとつのページにボタンを多くすると、エフェクトがぐちゃぐちゃになってしまいます。
とりあえず、トップページにのみメインメニューを表示し、他ページからは「戻るボタン」にしました。

また、上記HTMLのようにフッターにボタンを入れると、横スクロールの隙間が出ちゃいます。
さらにフッター部分のボタンをグループ化したら、ボタン表示できなくなっていました。バグ？
仕方なくコンテンツ部分に「戻るボタン」を設置して回避。
注意事項は、このような複数ページを含んだページにリンクする場合、リンクに rel=“external” か data-ajax=“false” を追加する必要があるということで。（詳しくは下記参考サイトにて…）

そして残念なことに「jQuery Mobile」と「GoogleMapAPI」は同時に利用できない！
最近、かちびと.netさんの投稿記事「jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた」では共存できるようなのですが、サイトが重たくなりそうなので止めました。
で、Mapページだけは「jQuery Mobile」を使わない「map.html」を制作。
ちなみにFacebookのいいね！ボタンやコメントなども配置できました。

今回使いませんでしたが、各種イベントも使えます。
タッチイベントやスクロールイベントなど…フリック機能も使えそうです。
また、アイコンやサムネイル画像を入れたリストボタンの制作も可能ですので、WordPressのテーマとしてカスタマイズすればもっと面白いものができそうです。
ちょっとしたアイデアとして、レイヤーを絶対配置した地球儀を置いてみました。
いろんな工夫でサイトが作れそうです。なによりIEを気にしなくていいのがイイ！（本音）