このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2012.02.18

スマートフォン JavaScript タッチ、フリックイベント実装

スマートフォンを操作する際、タッチや、フリック等、色々な操作方法があります。

タッチはご存知のとおり、スマートフォンのディスプレイにタッチすることです。

フリックとは、画面にタッチし指やペン等をスライドされる動作となります。

このタッチやフリックを操作する際、JavaScriptで取得出来、扱えるイベントは以下の通りとなっています。

touchstart

touchmove

touchend

touchcancel

gesturestart

gesturechange

gestureend

これらのイベントを使い、操作していきましょう。

タッチされた場合のイベント

まずは、タッチ出来るエリアの作成です。スマフォン用にviewportを設定します。

HTML

<meta name="viewport" content="width=device-width, maximum-scale=1,user-scalable=0" />

タッチするエリアdiv#touchBoxを設置。

<body>
  <div id="touchBox"></div>
</body>

CSSは任意で設定してください。タッチエリアが把握しやすいようにボーダーをつけました。

CSS

#touchBox {
  border:#999999 1px solid;
  height:200px;
  width:100%;
}

記述省略の為、JavaScriptライブラリjQueryを使用します。

JavaScript

$(function() {
  var box = $("#touchBox")[0];
  box.addEventListener("touchstart", touchHandler, false);
});

$(“#touchBox”)[0];で touchBoxの配列0番目を取得。(配列で取得しないと動作しません。)

変数boxに代入、addEventListenerでイベントリスナーの追加します。

今回は、タッチされた時なのでtouchstartを使います。イベントハンドラー名 touchHandlerに設定。

これで設定完了!

タッチされるとアラートが出るように記述。

function touchHandler(e){
  alert("タッチしました。");
}

イベントハンドラー呼び出し、アラートを実行させております。

では、スマートフォンで確認。

成功ぅ!確認は以下のページで出来ます。(スマートフォンで確認してください。)

確認ページ

http://webcyou.com/demo/js/flick/flick001.html

タッチ、フリックイベントの条件分岐

それでは、タッチ、フリックなどの動作によって条件分岐させて関数を実行させましょう。

JavaScript

function touchHandler(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(e.type == "touchstart"){
     $("#txt").text("タッチされました");
  }
}

先ほどのタッチイベントハンドラー関数に追加していきます。

まず、e.preventDefault();でデフォルトのイベントをキャンセルしております。

これはタッチにより、safariの画面自体が動くのを防いでおります。

続いて、e.touches[0];でタッチされた情報を変数touchに格納しております。

これは、iPhoneなどはマルチタッチな為、複数のタッチ情報が取得出来るのですが、今回は必要の無い為ひとつの情報を取得しております。

(e.type == “touchstart”)でイベントハンドラーがタッチスタートならば実行。となります。

では確認!

はい来た!確認は以下のページで出来ます。(スマートフォンで確認してください。)

確認ページ

http://webcyou.com/demo/js/flick/flick002.html

フリックイベント追加

タッチされた時だけだとつまらないので、フリックされたとき、フリック終了した時のイベントを追加しましょう。

イベントハンドラーを追加します。

JavaScript

$(function(){
  var box = $("#touchBox")[0];
  box.addEventListener("touchstart", touchHandler, false);
  box.addEventListener("touchmove", touchHandler, false);
  box.addEventListener("touchend", touchHandler, false);
});

先ほどの“touchstart”と別に新たにフリックされてるとき“touchmove”とフリック終了(タッチ終了)のイベント“touchend”を追加します。

それぞれのイベント事に関数を実行させましょう。

JavaScript

function touchHandler(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(e.type == "touchstart"){
    $("#txt").text("そのまま横にフリックしてください。");
    }
  if(e.type == "touchmove"){
    $("#txt").text("あ、いい感じです。"); 
    }
  if(e.type == "touchend"){
    $("#txt").text("フリック終了ぅ〜!");  
    }
}

先ほどの(e.type == “touchstart”)の条件分岐判別に、フリックを促すテキストを、更にフリック中、終了後にそれぞれのテキストを出現させます。

では確認。

なーいい感じです。確認は以下のページで出来ます。(スマートフォンで確認してください。)

確認ページ

http://webcyou.com/demo/js/flick/flick003.html

続いて、タッチされている座標を取得しましょう。

座標取得

JavaScriptで座標取得ためのプロパティ、pageX,pageYを使用します。

イベント名.pageX

で座標を取得出来ます。x座標の際はpageX,Y座標の際はpageY,を使用します。

先ほどのタッチイベントハンドラー関数を若干変更します。

function touchHandler(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(e.type == "touchstart"){
    $("#txt").text(touch.pageX);
    }
  if(e.type == "touchmove"){
    $("#txt").text(touch.pageX); 
    }
  if(e.type == "touchend"){
    $("#txt").text("フリック終了ぅ〜!");  
    }
}

テキストをtouch.pageXに変更したぐらいです。

では確認。

ぬー。しっかり取得出来ています。

フリックしている時の座標も変化します。

確認は以下のページで出来ます。(スマートフォンで確認してください。)

確認ページ

http://webcyou.com/demo/js/flick/flick004.html

とりあえずここまでで、タッチされた時、フリックされた時、タッチ終了した時とそれぞれの関数を実行出来ていると思います。

次回は、上下左右の分岐、CSS3を絡ませたアニメーションを実装していこうと思います。

プラスどーでもいい話ですが、「いいねボタン」がリセットされ0になっていますが、これってなおるのでしょうか??w

ほっとけばなおると、何かに書いていたのですが、不安の日々です。w

誰かご存知でしたら教えてくださいー。w

では次回ー。

続きは以下のリンクから。

スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。