Subscribed unsubscribe Subscribe Subscribe

Googleの検索結果にはてブのお気に入りユーザーのアイコンを表示するユーザースクリプトを書いた

Googleの検索結果にはてブのお気に入りユーザーが表示されれば、どのページを開くかの参考になって便利かなと思い、作ってみました。
Googleの検索結果にはてなのお気に入りユーザーのアイコンを表示 — Gist


はてブのトップページみたく、アイコンにカーソルを乗せるとツールチップが表示されるようになってます。
最初の使用時にはお気に入りユーザー一覧を取得してくる重い処理をするのでアイコン表示まで時間がかかりますが、二回目以降はキャッシュしたデータを使い回すのでこのストレスはなくなります。

インストール

https://gist.github.com/662523

Firefox Greasemonkeyとしてどうぞ。
Chrome/Safari NinjaKitという拡張をここからインストールして、NinjaKitのオプションから、上のGithubのコードを新規スクリプトとしてコピペしてください。

メモ

はてブのトップページで表示されるツールチップを再現するにあたり、いちいちHTMLをJS用に

var div = document.createElement('div');
div.className = 'tooltip';
var innerText = document.createTextNode('foo');
div.appendChild(innerText);
// ...
// ...以下延々と ...
// ...

と書き換えるのはしんどいので、cho45さんのcreateElementFromStringを使用させていただきました。
これなら

var tooltip = createElementFromString([
    '<div class="tooltip"> ',
    '  <div class="bookmark-entry-tooltip-header">',
    '    <img src="#{iconURL}" class="profile-image"/>',
    '    <span class="username">#{username}</span>',
    '  </div>',
    '  <span class="timestamp">#{timestamp}</span>',
    '</div>'
].join(''), {
    data: {
        iconURL: this.getIconURL(this.user.id),
        username: this.user.id,
        timestamp: this.user.timestamp
    }
});

とHTMLのまま書ける。HTMLの構造がパッと見で分かるのも素晴らしい。
Firefox用ならヒアドキュメントが使えるけれど、ChromeSafariで動かなくなるので愚直に文字列を連結させた。

以下自分用メモ

  • はてなお気に入りAPIにはブックマークのお気に入り取得だけ実装されてないのは何故なんだぜ。。。
    • これが無かったのでお気に入り一覧はb.hatena.ne.jp/username/faviriteからスクレイピングしてくる方法を取りました。
  • あとGreasemonkeyの@requireによる外部ファイルの取り込みが失敗する。。。
    • 自分の環境(Firefox3.6、Mac)だけかもしれない。
    • NinjaKitだと@requireはちゃんと機能する。
    • このため、本来外部ファイルにする予定だった情報まで全部ユーザースクリプトファイルに突っ込んだから、コードがえらく長くなった…。
追記

キャッシュが切れた際にスクリプトが動かなくなるバグを修正しました。