jQuery Mobileのイベント処理 (3/6)
作成:2011-06-13 07:47
更新:2012-03-29 10:24
更新:2012-03-29 10:24
■スワイプ操作
スマートフォンの操作といえば、タップよりもこちらのほうが重要でしょう。それは「スワイプ」です。画面を指先でさっとなでる、あれですね。これのイベントも、ちゃんとjQuery Mobileには用意されています。
タップはマウスのクリックとほとんど同じ感覚ですからあまり便利さを感じないかも知れませんが、スワイプに相当するHTMLのイベントは存在しません。たとえパソコンでも、マウスで画面上をさっとドラッグすると動くイベント、なんて聞いたことがありませんね。このスワイプに関するjQuery Mobileのイベントは、全部で３種類あります。
swipe――画面をスワイプしたときのイベント
swiperight――画面を左から右へとスワイプしたときのイベント
swipeleft――画面を右から左へとスワイプしたときのイベント
swipeは、とにかくどの方向でもいいからスワイプすれば発生します。これに対し、swiperight/swipeleftは「どの向きにスワイプしたか」が重要になります。例えば表示の切り替えなどのように、スワイプの向きによって異なる動作をするような時に用いられます。「左右だけで、上下のスワイプはないのか？」というと、実はないのです。これは、スマートフォンのWebブラウザでは、上下のスワイプによって画面をスクロールするためでしょう。Webでは、基本的に「スワイプは横方向のみ」と考えておきましょう。
では、下のリスト欄に簡単な利用例を挙げておきます。ここでは２枚のページを用意し、スワイプによって行ったり来たりと移動できます。$(document).readyで、２つのページ内に用意してある<div>タグにswipeleftとswiperightのイベントをバインドしていることがわかりますね。
スワイプを利用する場合、考慮しなければならないのは「どこをスワイプするか」でしょう。普通は、画面全体をスワイプして操作するでしょうから、「それじゃあ、ページの表示の土台となっている<div id="home" data-role="page">にスワイプのイベントをバインドすればいいだろう」と考えがちです。が、そうすると画面をいくらスワイプしても動きません。
ページというのは、土台となる<div data-role="page">内に、ヘッダー、コンテンツ、フッターといったタグが組み込まれています。従って、その上をスワイプしても、土台となる<div data-role="page">ではなく、その中に表示されているコンテンツなどのタグをスワイプしていることになります。このため、<div data-role="page">タグではイベントは発生しないのです。
「そのスワイプ操作は、どのタグ上で行われているのか」を考えてスワイプ・イベントをバインドするよう留意しましょう。
タップはマウスのクリックとほとんど同じ感覚ですからあまり便利さを感じないかも知れませんが、スワイプに相当するHTMLのイベントは存在しません。たとえパソコンでも、マウスで画面上をさっとドラッグすると動くイベント、なんて聞いたことがありませんね。このスワイプに関するjQuery Mobileのイベントは、全部で３種類あります。
swipe――画面をスワイプしたときのイベント
swiperight――画面を左から右へとスワイプしたときのイベント
swipeleft――画面を右から左へとスワイプしたときのイベント
swipeは、とにかくどの方向でもいいからスワイプすれば発生します。これに対し、swiperight/swipeleftは「どの向きにスワイプしたか」が重要になります。例えば表示の切り替えなどのように、スワイプの向きによって異なる動作をするような時に用いられます。「左右だけで、上下のスワイプはないのか？」というと、実はないのです。これは、スマートフォンのWebブラウザでは、上下のスワイプによって画面をスクロールするためでしょう。Webでは、基本的に「スワイプは横方向のみ」と考えておきましょう。
では、下のリスト欄に簡単な利用例を挙げておきます。ここでは２枚のページを用意し、スワイプによって行ったり来たりと移動できます。$(document).readyで、２つのページ内に用意してある<div>タグにswipeleftとswiperightのイベントをバインドしていることがわかりますね。
スワイプを利用する場合、考慮しなければならないのは「どこをスワイプするか」でしょう。普通は、画面全体をスワイプして操作するでしょうから、「それじゃあ、ページの表示の土台となっている<div id="home" data-role="page">にスワイプのイベントをバインドすればいいだろう」と考えがちです。が、そうすると画面をいくらスワイプしても動きません。
ページというのは、土台となる<div data-role="page">内に、ヘッダー、コンテンツ、フッターといったタグが組み込まれています。従って、その上をスワイプしても、土台となる<div data-role="page">ではなく、その中に表示されているコンテンツなどのタグをスワイプしていることになります。このため、<div data-role="page">タグではイベントは発生しないのです。
「そのスワイプ操作は、どのタグ上で行われているのか」を考えてスワイプ・イベントをバインドするよう留意しましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>Sample</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$('#home').live('pagecreate',function(){
$('#homeswipe').live('swipeleft',doAction);
$('#nextswipe').live('swiperight',doAction2);
});
function doAction(){
$.mobile.changePage('#next','slide',false,true);
}
function doAction2(){
$.mobile.changePage('#home','slide',true,true);
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Hello</h1>
</div>
<div data-role="content">
<p id="msg">※サンプル。</p>
<div id="homeswipe" style="height:200px;background-color:#FFDDDD;"></div>
</div>
</div>
<!-- next page -->
<div id="next" data-role="page">
<div data-role="header">
<h1>Next</h1>
</div>
<div data-role="content">
<p id="msg">※次のページ。</p>
<div id="nextswipe" style="height:200px;background-color:#DDFFDD;"></div>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る