Q&A
「クリックされた要素」が知りたいということでしょうか。
いつもお世話になっております。
ウェブページの閲覧者によってクリックされた位置について
記録したいと思っております。
JavaScriptでマウスのクリックイベントが発生した時に、
マウス位置のX, Y座標を取得することはできますが、
ページの構成(幅固定・変動、左・右・中央寄せ etc.)と
閲覧者の画面サイズによって、前述の座標の情報のみでは
実際にどこのポイントがクリックされたのか、
割り出すことができないと思われます。
閲覧者の画面サイズを取得することもできますが、
前述のマウス位置のX, Y座標と画面サイズを元に
ページの構成に依存しないで、汎用的に実際に
どこがクリックされたか割り出す方法は
ございますでしょうか？
目的としましては、クリックされた座標を保持しておいて、
ページのどの部分がクリックされたかを自分が見ている
環境上に復元して表示させたいといった感じになります。
最終的にはクリックされた座標をデータベースに取り溜めて、
ヒートマップのライブラリを使ってたくさんクリック
されている場所を視覚化させたいと思っております。
いろいろと試行錯誤してみましたが、実装できるアイデアが
出てこなかったので、何かヒントになるようなアドバイスが
いただけたら幸いでございます。
それでは、よろしくお願いいたします。
kei344さん、こんばんは。 目的としましては、クリックされた座標を保持しておいて、ページのどの部分がクリックされたかを自分が見ている環境上に復元して表示させたいといった感じになります。 最終的にはクリックされた座標をデータベースに取り溜めて、ヒートマップのライブラリを使ってたくさんクリックされている場所を視覚化させたいと思っております。
それはクリック座標ではダメなんでしょうか？ どのような情報が不足していると考えていますか？
あ、すいません、わかりました。リキッドなデザインなんですね。
Lhankor_Mhyさん、こんばんは。 ご推察の通り、リキッドデザイン時のレイアウトの変動に対応したいと考えております。
回答2件
0
ベストアンサー
うーん。リキッドデザイン上を想定しているのでしょうが、
であったとしても、
- クリックされた要素(event.target / event.srcElement)
- クリックされた要素の位置/サイズ(getBoundingClientRect())
- クリックされた位置(event.offsetX, event.offsetY)
- ページ上でのクリックされた位置(event.pageX, event.pageY)
- スクロールオフセット(window.pageXOffset, window.pageYOffset)
で事足りると思うのですが。
投稿2017/01/24 10:34
編集2017/01/25 03:59
総合スコア4267
turbgraphics200さん、こんばんは。
アドバイスいただき、ありがとうございます。
具体的な４つの情報について、紙に書いて検討したところ、
実装できそうな形が浮かび上がってきました。
クリックされた要素とサイズ、その要素の基点からの
オフセット量を記録しておけば、
自分で確認する時点での該当要素の位置との差異から、
差分を取った上で、要素の基点からのオフセット量を
復元すればいけそうです。
要素自体が変形する場合は、単純なオフセットではなく、
要素のサイズの割合から大体の位置を割り出す必要が
あるのと、一意に識別できる要素でないと復元できないので、
そこのトレードオフが難しそうですが。
クリックされた箇所を囲む一番小さい要素から順に広げていって、
IDなどで一意に識別できる要素が見つかった時点で、
それを基準の要素にする感じがよさそうですね。
自分で確認する画面でリアルタイムで追従させるのは
処理が重そうなので、普段見ている画面サイズで
ページのキャプチャ画像を撮って、その画像にマッピング
していく感じで実装できそうな感じがしてきました。
まだまだ問題はいろいろと残っていそうですが、
お陰さまでかなり具体的な方向性が定まりました。
一意に識別できる要素として、IDが割り振られている要素と考えていましたが、
タグ名と同タグの何番目かというデータでも一意に識別できますね。
クリックされた要素の範囲が狭い方がより正確に復元できそうなのと、
範囲を広げる処理が省けるので、こちらにしようかと思います。
ページのソースコードが変わった時に、IDよりズレが出やすいので、
ページの修正毎にログを残しておいて、座標を記録したタイミング
との紐付けができるようにすればよさそうです。
そのオフセットを計算しなければならないというところが引っ掛かるのですが。
スクロールのオフセットは考慮する必要がありますが、それ以外のオフセットは不要かと。getBoundingClientRect()は、その要素のgetBoundingClientRect()を実行した時点の画面上での絶対位置とサイズを取得するので不要だと思うのですが、私が勘違いしてるのでしょうか？
turbgraphics200さん、こんにちは。
オフセットの計算に関しましては、要素のサイズが同じであれば、
その要素を基点にして記録時のオフセット量をそのまま復元すれば
いいかと思いますが、確認時に要素のサイズが変形している場合、
記録時のサイズと確認時のサイズの比率に合わせて、擬似的に
復元する必要があるのかなと思っています。
ただ、クリックされた箇所の一番小さい要素を基点に考えることに
しましたので、そこまで考慮しなくてもいい気はしてきました。
最初にこちらに返信させていただいた時から多少考え方が
変わりましたが、以下を記録すればいいかと思っています。
1. クリックされた要素のタグ名、表示順
2. 上記要素のサイズ
3. 上記要素内のクリックされた位置(要素の基点からのオフセット量)
4. 記録時点でのソースコード (ソースを修正毎に記録)
確認する際は、4のソースコードを元に1の要素を特定してから、
2のサイズの比率に合わせて、3のオフセット量でクリックされた
位置を復元するイメージになります。
インラインフレームとかを考慮するともっと複雑になりそうですが、
自分で利用する目的の範囲ではそこまでやらなくてもいいかなと
思っています。
0
いい方法か分かりませんが、今ぱっと思いついたので・・・。
画面のクリック位置と、クリックされた時点での画面の縦横の大きさから相対的なクリック位置を割り出せるのではないでしょうか。
画面サイズW:500px×H:1000pxの状況でX:100px×Y:500pxの位置がクリックされた場合、
クリック位置はXが画面左から２０％の位置、Yが画面上から５０％の位置。
画面サイズがW:200px×H:500pxに変更されたら
クリック位置はXが画面左から２０％の位置だから40、Yが画面上から５０％の位置だから250・・・
（書いててほどよい位置情報をわりだしてくれそうなライブラリとかありそうとか思ったけどどうなんでしょ。）
投稿2017/01/24 10:18
総合スコア433
koronatailさん、こんばんは。
アドバイスいただき、ありがとうございます。
画面サイズに対する割合の考え方で、何となく方向性が見えてきました。
ライブラリがあると非常に嬉しいのですが、自分で探した限りでは
発見できませんでした。
あなたの回答
tips
プレビュー
