質問: いつもお世話になっております。 ウェブページの閲覧者によってクリックされた位置について 記録したいと思っております。 JavaScriptでマウスのクリックイベントが発生した時に、 マウス位置のX, Y座標を取得することはできますが、 ページの構成(幅固定・変動、左・右・中央寄せ etc.)と 閲覧者の画面サイズによって、前述の座標の情報のみでは 実際にどこのポイントがクリックされたのか、 割り出すことができないと思われます。 閲覧者の画面サイズを取得することもできますが、 前述のマウス位置のX, Y座標と画面サイズを元に ページの構成に依存しないで、汎用的に実際に どこがクリックされたか割り出す方法は ございますでしょうか? 目的としましては、クリックされた座標を保持しておいて、 ページのどの部分がクリックされたかを自分が見ている 環境上に復元して表示させたいといった感じになります。 最終的にはクリックされた座標をデータベースに取り溜めて、 ヒートマップのライブラリを使ってたくさんクリック されている場所を視覚化させたいと思っております。 いろいろと試行錯誤してみましたが、実装できるアイデアが 出てこなかったので、何かヒントになるようなアドバイスが いただけたら幸いでございます。 それでは、よろしくお願いいたします。
回答: いい方法か分かりませんが、今ぱっと思いついたので・・・。 画面のクリック位置と、クリックされた時点での画面の縦横の大きさから相対的なクリック位置を割り出せるのではないでしょうか。 画面サイズW:500px×H:1000pxの状況でX:100px×Y:500pxの位置がクリックされた場合、 クリック位置はXが画面左から20%の位置、Yが画面上から50%の位置。 画面サイズがW:200px×H:500pxに変更されたら クリック位置はXが画面左から20%の位置だから40、Yが画面上から50%の位置だから250・・・ (書いててほどよい位置情報をわりだしてくれそうなライブラリとかありそうとか思ったけどどうなんでしょ。)