実際にこれらのイベントを使用して、動作を確認するサンプルを作成してみる。

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で表示する。

Safariで表示。特定の場所でマウスジェスチャやフリック操作をおこなうと、履歴が追加されていく|M@iPadで表示。特定の場所でタッチジェスチャやフリック操作をおこなうと、履歴が追加されていく

コンフィグオプションを指定することで、さらに細かい制御が可能だ。

マウス用とタッチ用のイベントは別に用意されている。これまでPC/タッチデバイスに対応するアプリケーションを実装するには、これらのイベントの違いをJavaScript内で吸収してやる必要があった。YUI 3.2.0ではジェスチャ用のイベントが用意されたことで、より簡単にクロスプラットフォーム向けWebアプリの実装が可能になったと言えよう。

また、これらジェスチャイベントを活用して、左方向のスワイプジェスチャをクロスプラットフォーム上で可能にしたサンプルがEvent: Supporting A Swipe Left Gestureとして公開されている。実際に動作するデモとソースコードともに簡単にアクセスできるので、手持ちのモバイルデバイスで動作を確認しつつ、どのような書き方をしているのか参考にしてみよう。

Safariで表示。iPhoneネイティブアプリのように、行をマウスでフリックすると削除ボタンが表示される|M@iPhoneで表示。こちらも行をフリックすると削除ボタンが表示される