h2ospace

iPhone + Spry + jQueryで、スライドできるパネルを作る

2010-06-17 09:36:43

iPhone特有の操作としては、指で左右に弾くことで次のページ・前のページを表示できる操作があります。

前回のJavaScriptによるイベント取得と、jQueryおよび、Spry framework for Ajaxを組み合わせるとWebアプリでもこの操作が可能です。方法を紹介しましょう。

まずは、iPhone用のページテンプレートを作ります。iPhone site extensionを使うと便利です(笑

<!DOCTYPE HTML>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>iPhoneでスライドを作るサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  </head>
  <body>
  </body>
  </html>

続いて、Spryをダウンロードして「/wdiget/slidingpanels/」フォルダをコピーします。さらに、必要なファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="slidingpanels/SprySlidingPanels.css"/>
<script type="text/javascript" src="slidingpanels/SprySlidingPanels.js"></script>

必要なHTMLもサンプルファイルなどからコピーします

<div id="slideDemo" class="SlidingPanels">
  <div class="SlidingPanelsContentGroup">
    <div id="p1" class="SlidingPanelsContent">パネル1</div>
    <div id="p2" class="SlidingPanelsContent">
    <p>パネル2</p>
    </div>
    <div id="p3" class="SlidingPanelsContent">
    <p>パネル3</p>
    </div>
  </div>
</div>

通常、スライドパネルは縦にスライドするため、これを横にスライドするように CSSを調整します。

<style type="text/css">
#p1 {
	background-color: #6FC;
}
#p2 {
	background-color: #0CF;
}
#slideDemo.SlidingPanels {
	float: left;
}
#slideDemo .SlidingPanelsContentGroup {
	float: left;
	width: 10000px;
}
#slideDemo .SlidingPanelsContent {
	float: left;
	width: 320px;
	min-height: 480px;
}
</style>

さらに、jQueryを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

そしたら、プログラミングです。

<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("slideDemo");

document.addEventListener("touchstart", touchStart, false);
document.addEventListener("touchmove", touchMove, false);
document.addEventListener("touchend", touchEnd, false);

$('.SlidingPanelsContent')
	.css('width', $(window).width())
	.css('min-height', $(window).height());

window.onorientationchange = function() {
	$('.SlidingPanelsContent')
		.css('width', $(window).width())
		.css('min-height', $(window).height());
}

var startX;
var endX;

function touchStart(e) {
	startX = e.touches[0].pageX;
}

function touchMove(e) {
	endX = e.touches[0].pageX;
}

function touchEnd(e) {
	if (startX - endX > 100) {
		sp1.showNextPanel();
	} else if (endX - startX > 100) {
		sp1.showPreviousPanel();
	}
}
</script>

ここでは、touchstartイベントを捕まえてその時のX座標を取得します。そして、touchend時のX座標と比べます。こうすることで、これは画面をタッチしただけで反応してしまうのを防ぐため、一定距離以上指を動かさないと反応しないようにするためです。

touchendイベント時の座標というのは、そのままでは取得することができないため、別途touchmoveイベント時にX座標と取りつづけて、touchend時のX座標を「指を離した時のX座標」と見なすわけです。

あとは、この距離が左右どちらであるかを判定してSpryのスライディングパネルを動かします。

また、画面が回転したときに幅と高さを画面に合わせて変更しています。イベントについて詳しくは、前回の記事を参照してください。

Spryは、Widgetの作りが非常に秀逸で美しいアニメーションが簡単にできますので、jQueryなどと組み合わせて使うには最適なライブラリです。是非、使ってみるとよいでしょう。

 

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ