クリックされた位置を保存してサーモグラフィっぽく表示するツール

WEBデザイナーのための超便利リンク集:phpspot開発日誌
→「For Web Designers - Website Design Resources
→「miniajax.com - 
→「ClickHeat
と参照して、ClickHeatっていうツールに辿り着いて、面白そうだったので、試してみました。

$ wget "http://downloads.sourceforge.net/clickheat/clickheat-1.6.tar.gz?modtime=1192184447&big_mirror=0"
  • 落としたファイルをサーバ上で展開。
$ tar xzvf clickheat-1.6.tar.gz
  • ブラウザで展開されたディレクトリ(clickheat)配下のindex.phpにアクセス。
  • パーミッションとGDライブラリのチェックが行われて、OKなら次へ進める。
  • 設定画面で色々と設定して保存する。(ほとんどデフォルトにしましたが、保存日数は多めにしたかったので、365日にしました。)
  • ログイン画面になるので、設定画面で設定した管理ユーザでログイン。(最初は保存データが無いので、"No logs for the selected period (first think removing filters: browser, screensize). Did you correctly installed Javascript code on your webpages?"と言われる。)
  • メニューに"JavaScript"というのがあるので、そこでHTMLに貼り付けるJavaScriptコードを生成する。
  • 生成されたJavaScriptコードを貼り付ければ完了。
  • クリックされるとログに書き出され、index.phpにアクセスするとページの画像に重なってサーモグラフィっぽくクリック頻度が出力される。
  • 早速、"http://www.roomtom.com/blog/"に使ってみた。

プロフィール画面で1回だけクリックしてみたところです。イメージ画像にしているMR2のところをクリックしてみたので、何だか愛車が打ち抜かれたみたいになってしまった…。

  • きちんと画面毎にデータを集計するには、画面毎にJavaScript内のclickHeatSiteとclickHeatGroupが一意になるように設定する必要がある。(これで結構ハマってしまって、時間が掛かってしまった…。ブログとかに使う場合は、記事IDなんかを使って、JavaScript内のclickHeatGroupの値を動的に生成するようにすると良いと思います。)

そんな訳で、SEOに利用するとかなり有効かと。
参考にした"miniajax.com - "で、最初に見てみたClickHeatにハマってしまって他にどんなのがあるのか見てないんですが(^^;、割と面白いのが多そうなので、他のも見て試してみようと思います。