皆さまいかがお過ごしでしょうか?私はマスクとメガネの日々を過ごしております。́・ω・`)...さて、今回はjQueryで座標を取得してみようの巻です。マウスカーソル(タッチデバイスでは指)を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。このような物を作ってみます。目次1.座標を取得するには〜offsetとclientX、clientY2.変数を定義する3.clone関数で要素にappendToする4.setTimeout関数とは5.タッチイベントとマウスイベント6.まとめ7.ソースまず簡単なhtmlファイルを用意しました。id=”count”(中にXとYそれぞれの座標をカウントするためのdivが二つ)という構成です。</body></html>1.座標を取得するには〜offsetとclientX、clientY座標を取得する、とざっくり言ってもどこが基準のどの部分の?と最初は悩んでしまうと思います。座標は取得したい場所によってプロパティも使い分けなくてはなりません。id=”box2′′)。●ブラウザのウィンドウ内での座標を取得するにはclientX、clientYというプロパティを使います。座標の位置と取得方法についてはこちらを参考にさせて頂きました!図解でとてもわかりやすく説明されております。イベントが発生した時のマウス情報を取得するには?jQueryでのサイズ、座標の取得方法まとめ2.変数を定義するそれでは、スクリプトを書いていきましょう。src="https://code.jquery.com/jquery-2.1.4.min.js"></script>その下にもう一つscriptタグを作り、その中にスクリプトを書いていきます。0;最初に変数を定義します。maxYまでのところでid=”box2′′のキャンバスの範囲を取得します。id=”box”の中に一つだけあります。id=”box”をクローンで増やしてあげましょう。}ここで、traceFuncという関数を作り、座標の位置を数値で表示するための#x-pos、#y-posに.text関数でx、yの値を書き出す命令を出しています。maxYを使って、もしxとyの値が#box2の枠の範囲にある場合、#boxをクローンしてcssを{}内のように書き換え、bodyに追加するように、としています。#boxの★は#box2の枠の範囲内であればcloneされるということになります。4.setTimeout関数とは先ほど作ったtraceFuncという関数の中にsetTimeout関数がしれっと書かれておりますが、こいつはなんぞや?といいますと、繰り返し(タイマー)処理の関数であります。処理が終了してから一定時間後に処理を繰り返すというもので、似たような関数でsetIntervalというものもありますが、こちらは処理の開始時点から一定時間後に処理を繰り返すという違いがあります。処理の開始時点から一定時間後に処理を繰り返すここでは関数traceFuncの処理を、100(0.1秒)ごとに繰り返す、という風に指定しました。><;)タイマー処理についてはこちらに詳しいですJavaScriptでsetTimeoutを使う方法5.タッチイベントとマウスイベント最近のネットの最新動向では「モバイルファースト」どころか、「モバイルオンリー」になりつつあるとのことですから、マウスとタッチと両方のアクションを考慮することは必須となりました。そこでタッチイベントとマウスイベントをif文で分けてイベント発生時の処理を書いていきます。};ここでのポイントは、タッチデバイスでは指を滑らせると画面が動いてしまうため、それを防止するためにevent.preventDefault();という記述を足して画面が動かないようにしています。タッチデバイスではタッチする指の本数も考慮するため、座標の取得もマウスの時の記述よりひとつ増えてchangedTouches[0]([0]は1本の指)を加えます。あとは、それぞれの動きを下記のように対応させました。mousemove(マウスを動かしている時)この他にも、タッチ・マウスイベントはありますので、皆さんもいろいろ試してみてくださいね。こちらではタッチベントとマウスイベントがわかりやすくまとめられていてとても参考になります。書くタッチイベント6.まとめ完成〜!(★が出ない時は一度リロードしてみてください。)今回はどこを基準として、どのプロパティを使って座標を取得すれば良いのか?でかなり悩みました。完全に理解していないので説明も未熟なところが多々ございますが、一応、タッチデバイスとPCと両方対応出来たので良しとしますか(笑)コードももっとサクサクと効率の良い書き方が出来るようになるといいなと願いつつ、次回は今日少し触れたsetTimeout関数を使って何か作ってみようと思います。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。