質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3940閲覧

ウェブページでクリックされた位置の取得について

chapter

総合スコア36

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2017/01/24 09:50

編集2017/01/24 10:03

いつもお世話になっております。

ウェブページの閲覧者によってクリックされた位置について
記録したいと思っております。

JavaScriptでマウスのクリックイベントが発生した時に、
マウス位置のX, Y座標を取得することはできますが、

ページの構成(幅固定・変動、左・右・中央寄せ etc.)と
閲覧者の画面サイズによって、前述の座標の情報のみでは
実際にどこのポイントがクリックされたのか、
割り出すことができないと思われます。

閲覧者の画面サイズを取得することもできますが、
前述のマウス位置のX, Y座標と画面サイズを元に
ページの構成に依存しないで、汎用的に実際に
どこがクリックされたか割り出す方法は
ございますでしょうか?

目的としましては、クリックされた座標を保持しておいて、
ページのどの部分がクリックされたかを自分が見ている
環境上に復元して表示させたいといった感じになります。

最終的にはクリックされた座標をデータベースに取り溜めて、
ヒートマップのライブラリを使ってたくさんクリック
されている場所を視覚化させたいと思っております。

いろいろと試行錯誤してみましたが、実装できるアイデアが
出てこなかったので、何かヒントになるようなアドバイスが
いただけたら幸いでございます。

それでは、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/01/24 09:55

「クリックされた要素」が知りたいということでしょうか。
chapter

2017/01/24 10:01

kei344さん、こんばんは。 目的としましては、クリックされた座標を保持しておいて、ページのどの部分がクリックされたかを自分が見ている環境上に復元して表示させたいといった感じになります。 最終的にはクリックされた座標をデータベースに取り溜めて、ヒートマップのライブラリを使ってたくさんクリックされている場所を視覚化させたいと思っております。
Lhankor_Mhy

2017/01/24 10:09

それはクリック座標ではダメなんでしょうか? どのような情報が不足していると考えていますか?
Lhankor_Mhy

2017/01/24 10:22

あ、すいません、わかりました。リキッドなデザインなんですね。
chapter

2017/01/24 16:33

Lhankor_Mhyさん、こんばんは。 ご推察の通り、リキッドデザイン時のレイアウトの変動に対応したいと考えております。
guest

回答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
turbgraphics200

総合スコア4269

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chapter

2017/01/24 17:09 編集

turbgraphics200さん、こんばんは。 アドバイスいただき、ありがとうございます。 具体的な4つの情報について、紙に書いて検討したところ、 実装できそうな形が浮かび上がってきました。 クリックされた要素とサイズ、その要素の基点からの オフセット量を記録しておけば、 自分で確認する時点での該当要素の位置との差異から、 差分を取った上で、要素の基点からのオフセット量を 復元すればいけそうです。 要素自体が変形する場合は、単純なオフセットではなく、 要素のサイズの割合から大体の位置を割り出す必要が あるのと、一意に識別できる要素でないと復元できないので、 そこのトレードオフが難しそうですが。 クリックされた箇所を囲む一番小さい要素から順に広げていって、 IDなどで一意に識別できる要素が見つかった時点で、 それを基準の要素にする感じがよさそうですね。 自分で確認する画面でリアルタイムで追従させるのは 処理が重そうなので、普段見ている画面サイズで ページのキャプチャ画像を撮って、その画像にマッピング していく感じで実装できそうな感じがしてきました。 まだまだ問題はいろいろと残っていそうですが、 お陰さまでかなり具体的な方向性が定まりました。
chapter

2017/01/25 03:47

一意に識別できる要素として、IDが割り振られている要素と考えていましたが、 タグ名と同タグの何番目かというデータでも一意に識別できますね。 クリックされた要素の範囲が狭い方がより正確に復元できそうなのと、 範囲を広げる処理が省けるので、こちらにしようかと思います。 ページのソースコードが変わった時に、IDよりズレが出やすいので、 ページの修正毎にログを残しておいて、座標を記録したタイミング との紐付けができるようにすればよさそうです。
turbgraphics200

2017/01/25 03:57 編集

そのオフセットを計算しなければならないというところが引っ掛かるのですが。 スクロールのオフセットは考慮する必要がありますが、それ以外のオフセットは不要かと。getBoundingClientRect()は、その要素のgetBoundingClientRect()を実行した時点の画面上での絶対位置とサイズを取得するので不要だと思うのですが、私が勘違いしてるのでしょうか?
chapter

2017/01/25 04:57

turbgraphics200さん、こんにちは。 オフセットの計算に関しましては、要素のサイズが同じであれば、 その要素を基点にして記録時のオフセット量をそのまま復元すれば いいかと思いますが、確認時に要素のサイズが変形している場合、 記録時のサイズと確認時のサイズの比率に合わせて、擬似的に 復元する必要があるのかなと思っています。 ただ、クリックされた箇所の一番小さい要素を基点に考えることに しましたので、そこまで考慮しなくてもいい気はしてきました。
chapter

2017/01/25 05:09 編集

最初にこちらに返信させていただいた時から多少考え方が 変わりましたが、以下を記録すればいいかと思っています。 1. クリックされた要素のタグ名、表示順 2. 上記要素のサイズ 3. 上記要素内のクリックされた位置(要素の基点からのオフセット量) 4. 記録時点でのソースコード (ソースを修正毎に記録) 確認する際は、4のソースコードを元に1の要素を特定してから、 2のサイズの比率に合わせて、3のオフセット量でクリックされた 位置を復元するイメージになります。 インラインフレームとかを考慮するともっと複雑になりそうですが、 自分で利用する目的の範囲ではそこまでやらなくてもいいかなと 思っています。
guest

0

いい方法か分かりませんが、今ぱっと思いついたので・・・。
画面のクリック位置と、クリックされた時点での画面の縦横の大きさから相対的なクリック位置を割り出せるのではないでしょうか。

画面サイズW:500px×H:1000pxの状況でX:100px×Y:500pxの位置がクリックされた場合、
クリック位置はXが画面左から20%の位置、Yが画面上から50%の位置。
画面サイズがW:200px×H:500pxに変更されたら
クリック位置はXが画面左から20%の位置だから40、Yが画面上から50%の位置だから250・・・

(書いててほどよい位置情報をわりだしてくれそうなライブラリとかありそうとか思ったけどどうなんでしょ。)

投稿2017/01/24 10:18

koronatail

総合スコア433

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chapter

2017/01/24 16:36

koronatailさん、こんばんは。 アドバイスいただき、ありがとうございます。 画面サイズに対する割合の考え方で、何となく方向性が見えてきました。 ライブラリがあると非常に嬉しいのですが、自分で探した限りでは 発見できませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問