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

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

ただいまの
回答率

90.52%

  • JavaScript

    16421questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,395

chapter

score 26

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

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

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

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

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

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/01/24 19:09

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

    キャンセル

  • Lhankor_Mhy

    2017/01/24 19:22

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

    キャンセル

  • chapter

    2017/01/25 01:33

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

    キャンセル

回答 2

checkベストアンサー

+3

うーん。リキッドデザイン上を想定しているのでしょうが、
であったとしても、

  • クリックされた要素(event.target / event.srcElement)
  • クリックされた要素の位置/サイズ(getBoundingClientRect())
  • クリックされた位置(event.offsetX, event.offsetY)
  • ページ上でのクリックされた位置(event.pageX, event.pageY)
  • スクロールオフセット(window.pageXOffset, window.pageYOffset)
    で事足りると思うのですが。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/25 01:58 編集

    turbgraphics200さん、こんばんは。

    アドバイスいただき、ありがとうございます。

    具体的な4つの情報について、紙に書いて検討したところ、
    実装できそうな形が浮かび上がってきました。

    クリックされた要素とサイズ、その要素の基点からの
    オフセット量を記録しておけば、

    自分で確認する時点での該当要素の位置との差異から、
    差分を取った上で、要素の基点からのオフセット量を
    復元すればいけそうです。

    要素自体が変形する場合は、単純なオフセットではなく、
    要素のサイズの割合から大体の位置を割り出す必要が
    あるのと、一意に識別できる要素でないと復元できないので、
    そこのトレードオフが難しそうですが。

    クリックされた箇所を囲む一番小さい要素から順に広げていって、
    IDなどで一意に識別できる要素が見つかった時点で、
    それを基準の要素にする感じがよさそうですね。

    自分で確認する画面でリアルタイムで追従させるのは
    処理が重そうなので、普段見ている画面サイズで
    ページのキャプチャ画像を撮って、その画像にマッピング
    していく感じで実装できそうな感じがしてきました。

    まだまだ問題はいろいろと残っていそうですが、
    お陰さまでかなり具体的な方向性が定まりました。

    キャンセル

  • 2017/01/25 12:47

    一意に識別できる要素として、IDが割り振られている要素と考えていましたが、
    タグ名と同タグの何番目かというデータでも一意に識別できますね。

    クリックされた要素の範囲が狭い方がより正確に復元できそうなのと、
    範囲を広げる処理が省けるので、こちらにしようかと思います。

    ページのソースコードが変わった時に、IDよりズレが出やすいので、
    ページの修正毎にログを残しておいて、座標を記録したタイミング
    との紐付けができるようにすればよさそうです。

    キャンセル

  • 2017/01/25 12:57 編集

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

    キャンセル

  • 2017/01/25 13:57

    turbgraphics200さん、こんにちは。

    オフセットの計算に関しましては、要素のサイズが同じであれば、
    その要素を基点にして記録時のオフセット量をそのまま復元すれば
    いいかと思いますが、確認時に要素のサイズが変形している場合、
    記録時のサイズと確認時のサイズの比率に合わせて、擬似的に
    復元する必要があるのかなと思っています。

    ただ、クリックされた箇所の一番小さい要素を基点に考えることに
    しましたので、そこまで考慮しなくてもいい気はしてきました。

    キャンセル

  • 2017/01/25 14:07 編集

    最初にこちらに返信させていただいた時から多少考え方が
    変わりましたが、以下を記録すればいいかと思っています。

    1. クリックされた要素のタグ名、表示順
    2. 上記要素のサイズ
    3. 上記要素内のクリックされた位置(要素の基点からのオフセット量)
    4. 記録時点でのソースコード (ソースを修正毎に記録)

    確認する際は、4のソースコードを元に1の要素を特定してから、
    2のサイズの比率に合わせて、3のオフセット量でクリックされた
    位置を復元するイメージになります。

    インラインフレームとかを考慮するともっと複雑になりそうですが、
    自分で利用する目的の範囲ではそこまでやらなくてもいいかなと
    思っています。

    キャンセル

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/25 01:36

    koronatailさん、こんばんは。

    アドバイスいただき、ありがとうございます。

    画面サイズに対する割合の考え方で、何となく方向性が見えてきました。

    ライブラリがあると非常に嬉しいのですが、自分で探した限りでは
    発見できませんでした。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16421questions

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