XPath を指定すると、リンクに Pathtraq のスコアを付加する関数

はじめに

Pathtraq API を使ってもっといろいろできないかなあと思って、 XPath で指定したリンクに Pathtraq のスコアを付加する JavaScript の関数を作ってみました。
Greasemonkey や Bookmarklet から使うことができます。

たとえば

関数を読み込んだ状態のはてなブックマークのページで以下のようなコードを叩くだけで

appendPtScore('//a[@class="bookmark"]');

以下のように XPath で選択した a 要素にパストラックのスコアを付加してくれます。

コード

function appendPtScore(xpath) {
  var self = arguments.callee;
  var obj = new self.PtObject(xpath);
  obj.timeout();
}
appendPtScore.PtObject = function(xpath) {
  var self = this;
  this.id = appendPtScore.PtObject.count++;
  this.xpath = xpath;
  var result = document.evaluate(xpath, document, null, 7, null);
  this.elms = [];
  for (var i = 0; i < result.snapshotLength; i ++) {
    this.elms.push(result.snapshotItem(i));
  }
  this.elmsLength = result.snapshotLength;
  this.elmsIndex  = 0;
  this.script     = null;
  appendPtScore['callback_' + this.id] = function(data) {
    self.callback(data)
  };
};
appendPtScore.PtObject.count = 0;
appendPtScore.PtObject.prototype = {
  callback: function(data) {
    var self = this;
    document.body.removeChild(this.script);
    this.script = null;
    var a = this.elms[this.elmsIndex++];
    var a2 = document.createElement('a');
    a2.href = 'http://pathtraq.com/page/' + a.href;
    var img = document.createElement('img');
    img.src = 'http://pathtraq.com/favicon.ico';
    a2.appendChild(img);
    var span = document.createElement('span');
    span.appendChild(document.createTextNode('(' + data.count + ')'));
    span.style.fontSize = '0.8em';
    span.style.color = '#88CCFF';
    span.style.fontWeight = 'bold';
    a2.style.textDecoration = 'none';
    a2.appendChild(span);
    a.parentNode.insertBefore(a2, a.nextSibling);
    setTimeout(function() { self.timeout() }, 1000);
  },
  timeout: function() {
    if (this.elmsLength <= this.elmIndex) return;
    if (this.elms[this.elmsIndex].tagName.toLowerCase() == 'a') {
      this.script = document.createElement('script')
      this.script.src = 'http://api.pathtraq.com/page_counter?m=popular&callback=appendPtScore.callback_' + this.id + '&api=json&url=' + encodeURIComponent(this.elms[this.elmsIndex].href);
      document.body.appendChild(this.script);
    }
    else {
      this.elmsIndex++;
      this.timeout();
    }
  }
};

ライセンス

Public Domain です。改変、再配布、商用なんでもどうぞ。
Greasemonkey や Bookmarklet などにご自由にお使いください

まとめ

もっともっと Pathtraq API を使ったおもしろいアイデアもありそうですね！