2006-08-25

getComputedStyle()を利用した既読チェック

COLLECTION & COPYのそのリソースを訪問済みか判定するやHatebu Addictionなどで使われている既読チェック。これらとは違う、getComputedStyle()メソッドを利用して文字色を取得し訪問済みリンクの文字色かどうかをチェックという手法で既読チェックを実現している、Jeremiah Grossman: I know where you've beenというページを見つけた。FirefoxやSafariなどではこれで既読チェックが可能。

getComputedStyle()メソッドはstyle属性やJavaScriptで設定されたスタイル以外のスタイル情報をまとめて取得するメソッドで、ComputedCSSStyleDeclarationオブジェクトを返す。そして、ComputedCSSStyleDeclarationオブジェクトのgetPropertyValue()メソッドで各スタイル情報を文字列で取得できる。既読チェックではcolorをチェックすれば良い。

というわけで簡単なサンプル・ページを作ってみた。リンクのリスト(はてなブックマークのホッテントリから拝借した)を調べて、既読の場合は「既」という文字列を前に付け、何件のリンクが既読か表示するというだけのもの。ソースを見てもらえばわかる通り、

var links = $('linklist').getElementsByTagName('a');
var i = 0;

$A(links).each(function (link) {
  var color = document.defaultView.getComputedStyle(link, null).getPropertyValue("color");

  if (color == "rgb(128, 0, 0)") {
    new Insertion.Before(link, '既 ');
    i++;
  }
});

new Insertion.Before('linklist', '<p>全 50 件のリンク中 ' + i + ' 件のリンクが既読です。</p>');

と簡単に書ける(半分以上prototype.jsのおかげだけど)。a要素を動的に生成するのに比べ、拾って比較するだけなので動作自体も軽いと思う。Greasemonkeyなんかではこっちを使った方が効率的な気がする。コード的にもわかりやすいし。

getComputedStyle()はいろいろと遊べそうな気がする。