実際にこれらのイベントを使用して、動作を確認するサンプルを作成してみる。
gesture.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cross-Device Gesture test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table>
<tr>
<td align="center" id="gestureTest" style="width:200px; height:200px; background:#eee">
gesture me
</td>
<td align="center" id="flickTest" style="width:200px; height:200px; background:#eee">
flick me
</td>
</tr>
<tr>
<td valign="top">
<table id="gestureResult" border="1">
<thead>
<tr>
<th>event</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
<td valign="top">
<table id="flickResult" border="1">
<thead>
<tr>
<th>event</th>
<th>velocity</th>
<th>distance</th>
<th>axis</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
<script type="text/javascript" charset="utf-8">
<!--
YUI().use('node-base', 'event-move', 'event-flick', function(Y) {
Y.Node.one('#gestureTest').on
(
'gesturemovestart',
function(e)
{
gestureLog('gesturemovestart',e);
}
);
Y.Node.one('#gestureTest').on
(
'gesturemove',
function(e)
{
gestureLog('gesturemove',e);
}
);
Y.Node.one('#gestureTest').on
(
'gesturemoveend',
function(e)
{
gestureLog('gesturemoveend',e);
}
);
Y.Node.one('#flickTest').on
(
'flick',
function(e)
{
flickLog('flick',e);
}
);
function gestureLog(eventName,e)
{
Y.Node.one('#gestureResult tbody').append
(
'<tr>\n\
<td>' + eventName + '</td>\n\
<td>' + e.pageX + '</td>\n\
<td>' + e.pageY + '</td>\n\
</tr>'
);
}
function flickLog(eventName,e)
{
Y.Node.one('#flickResult tbody').append
(
'<tr>\n\
<td>' + eventName + '</td>\n\
<td>' + e.flick.velocity + '</td>\n\
<td>' + e.flick.distance + '</td>\n\
<td>' + e.flick.axis + '</td>\n\
<td>' + e.flick.start.pageX + '</td>\n\
<td>' + e.flick.start.pageY + '</td>\n\
</tr>'
);
}
});
-->
</script>
</body>
</html>
特定の場所でマウス/タッチジェスチャやフリックをおこなうと、その履歴が追加されていくという仕組みだ。これをWebブラウザとiPadで表示する。
コンフィグオプションを指定することで、さらに細かい制御が可能だ。
マウス用とタッチ用のイベントは別に用意されている。これまでPC/タッチデバイスに対応するアプリケーションを実装するには、これらのイベントの違いをJavaScript内で吸収してやる必要があった。YUI 3.2.0ではジェスチャ用のイベントが用意されたことで、より簡単にクロスプラットフォーム向けWebアプリの実装が可能になったと言えよう。
また、これらジェスチャイベントを活用して、左方向のスワイプジェスチャをクロスプラットフォーム上で可能にしたサンプルがEvent: Supporting A Swipe Left Gestureとして公開されている。実際に動作するデモとソースコードともに簡単にアクセスできるので、手持ちのモバイルデバイスで動作を確認しつつ、どのような書き方をしているのか参考にしてみよう。