フリックでの移動
前のページまでの解説でスライドパネルの機能が一通り完成しましたが、今度はスマートフォンならではの操作として、フリック操作でも戻れるようにします。次のようなスクリプトを追加します。
/** * フリックでの戻る */ document.addEventListener("touchstart", start, false); document.addEventListener("touchmove", move, false); document.addEventListener("touchend", end, false); var startX, endX; function start() { startX = event.touches[0].pageX; } function move(e) { endX = event.touches[0].pageX; } function end(e) { if (endX - startX > 100) { goIndex(); } }
先ほどclick()イベントを紹介しましたが、スマートフォンには特有のイベントとして「タッチした」「（タッチしたまま）指を動かした」「指を離した」というイベントが用意されています。
本来は「フリックした」というイベントがあれば簡単なのですが、用意されていないので、複数のイベントを組み合わせて疑似的に「フリックイベント」を作ります。フリック操作を分解すると、次のようなイベントになります。
- 画面をタッチする
- そのまま指を右（または左）に動かす
- 指を離す
実際のプログラムを分解して見ていきましょう。
タッチイベントが発生すると、タッチされた地点のX座標を記録します。
function start() { startX = event.touches[0].pageX; }
プログラムでは指が動くたびにX座標を記録し続けます。
function move(e) { endX = event.touches[0].pageX; }
指が画面から離れると、最後の位置と最初の位置を比較し、100px以上離れていると「フリックした」とみなします。
function end(e) { if (endX - startX > 100) { goIndex(); } }
呼び出しているgoIndex()は自作のファンクション（関数）で、前に解説した「目次に戻る」という動作を定義しています。
/** * 戻る */ function goIndex() { if ($('div.active').attr('id') == 'index') return false; $('div.active').animate({ left: winWidth + 'px' }, 500, function() { $(this).removeClass('active'); }); $('#index').css('left', (winWidth * -1) + 'px').addClass('active').animate({ left: 0 }, 500); }
なお、ここで「100px」としている数字は特に決まった数値ではありません。小さな値にすれば敏感に反応するようになり、大きな数字にすれば反応しづらくなります。実際に試しながら最適な数値にチューニングしたり、ユーザーが自由に設定できるようにしたりするとよいでしょう。
今回紹介したサンプルコードは以下からダウンロードできます。一覧と詳細ページに分かれているニュースやブログ、カタログなど、さまざまなサイトで活用できますので、ぜひ組み込んで試してみてください。
- 今回作成したサンプルファイル
- デモを見る
- ダウンロードする（ZIPファイル）
著者：たにぐちまこと
東京世田谷でWeb制作を営む、H2O Space. 代表。PHPを中心としたWebシステムの開発などを主に手がける。 Adobe Dreamweaverで、iPhoneサイトを制作しやすくする拡張機能「iPhone site extension」を配布し、スマートフォンのサイト制作にも積極的に取り組んでいる。主な著書に「Dreamweaver PHPスターティングガイド」（毎日コミュニケーションズ）、「ホームページ担当者が知らないと困るHTMLの仕組みとWeb技術の常識」（ソシム）など。
