Google Reader に Livedoor Reader 風ピンを追加してみるグリモン機能追加

Google Reader に Livedoor Reader 風ピンを追加してみるグリモンに、JavaScript 多少そらでも書けるようになったか調査を兼ねて、はてなブックマークの件数を取得する機能を追加してみました。エントリ上で b を押すとタイトルの後ろに件数が表示されます。

こんな感じ。

googlereaderpin20070116.png

以下追加したコード。

PLAIN TEXT
JavaScript:
  1. } else if (event.keyCode == 66) { // b
  2.     var href = title.getElementsByTagName('a')[0].href;
  3.     if (document.getElementById('hateb:' + href) != undefined) {
  4.         // retrieved data already
  5.         return;
  6.     }
  7.     var content = '<?xml version="1.0" encoding="UTF-8"?><methodCall><methodName>bookmark.getCount</methodName><params><param><value><string>' + href + '</string>\
  8. </value></param></params></methodCall>';
  9.     GM_xmlhttpRequest({
  10.         method: 'POST',
  11.         url: 'http://b.hatena.ne.jp/xmlrpc',
  12.         headers: {
  13.             'User-Agent': 'Mozilla/4.0 (compatible) Greasemonkey',
  14.             'Accept': 'application/atom+xml,application/xml,text/xml',
  15.             'Content-type': 'application/x-www-form-urlencoded',
  16.         },
  17.         data: content,
  18.         onload: function(responseDetails) {
  19.             var parser = new DOMParser();
  20.             var dom = parser.parseFromString(responseDetails.responseText, "application/xml");
  21.             var entries = dom.getElementsByTagName('member');
  22.             if (entries.length != 1) {
  23.                 return;
  24.             }
  25.             count = entries[0].getElementsByTagName('int')[0].textContent;
  26.             // hateb link
  27.             var hatebLink = document.createElement('a');
  28.             hatebLink.setAttribute('href', 'http://b.hatena.ne.jp/entry/' + href);
  29.             hatebLink.setAttribute('target', '_blank');
  30.             // hateb icon
  31.             var hatebLinkA = hatebLink;
  32.             var hatebImg = document.createElement('img');
  33.             hatebImg.setAttribute('src', 'http://d.hatena.ne.jp/images/b_entry.gif');
  34.             hatebImg.setAttribute('width', 16);
  35.             hatebImg.setAttribute('height', 12);
  36.             hatebImg.setAttribute('style', 'margin-left: 2px; border: none');
  37.             hatebLinkA.appendChild(hatebImg);
  38.             // hateb count
  39.             var hatebLinkB = hatebLink;
  40.             if (count == 0) {
  41.                 // not bookmarked yet
  42.             } else {
  43.                 var hatebCount = document.createElement('img');
  44.                 hatebCount.setAttribute('src', 'http://b.hatena.ne.jp/entry/image/' + href);
  45.                 hatebCount.setAttribute('style', 'margin-left: 2px; border: none');
  46.                 hatebLinkB.appendChild(hatebCount);
  47.             }
  48.             // hateb span
  49.             var hatebBlock = document.createElement('span');
  50.             hatebBlock.setAttribute('id', 'hateb:' + href);
  51.             hatebBlock.appendChild(hatebLinkA);
  52.             hatebBlock.appendChild(hatebLinkB);
  53.             title.appendChild(hatebBlock);
  54.         }
  55.     });
  56. }

b を押すとはてなブックマークの Atom API で件数を取得して、1 件以上あれば件数の画像をはてなから取ってきてタイトルの後ろの追加しています。0 件の場合も空白の 0 件な画像が返ってくるのでそれでいいんじゃんって感じもしますが、何となくそこにリンク貼るのがイヤだったのでこうしてみました。使い方をもう一度簡単にまとめると、てか簡単な機能しかないですが、

  • i でエントリにピンを立てる
  • o でピンを立てたエントリを開く
  • b でフォーカスのあるエントリのはてなブックマーク件数を表示する

って感じです。

Livedoor に続きはてなも直接画像を使わせていただいております。ごめんなさい。

ファイルは Google Code か userscripts.org からどうぞ。

Google Code
http://code.google.com/p/googlereaderpin/

userscripts.org
http://userscripts.org/scripts/show/17714

About this entry

You’re currently reading “ Google Reader に Livedoor Reader 風ピンを追加してみるグリモン機能追加 ,” an entry on forever 5 years old blog

Published:
6pm on 2008/01/16
Category:
Javascript, Greasemonkey, Firefox, プログラミング
Related Posts: