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

Archives Details

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

スマートフォン

2012.02.18

この記事は最終更新日から1年以上が経過しています。

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

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

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

このタッチやフリックを操作する際、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 「ボールを投げる」

Comment

Related Article

「Band’s」スマートフォン版リリースしました!

2015.06.24

スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について

2014.06.01

ドラクエモンスターズ スーパーライト ジェム 50,000円分 無料GET!! と謳っている【manekin】(マネキン)をやってみた!

2014.05.24

HTML5 WebビューApp ソーシャルゲーム制作時のまとめ

2013.08.17

スマートフォン タッチイベント、距離、速さ等確認ページ

2013.03.07

weinreでiPhone/Androidをリモートデバック

2013.01.27

translateプロパティでAndroid,iPhone端末で画像がちらつく件

2012.09.13

CSS3 アイコン作成 背景指定1つ 光彩グラデーションの表現

2012.05.19

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

2012.02.18

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

2012.02.18

CATEGORY LIST

LATEST NEWS

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US