記憶する部屋

はてブ関連の自作Greasemonkey/Bookmarklet/ユーザースタイルシート

1年ぶりに更新したので、テコ入れ的に更新するでござるの巻……の第二弾です（第一弾は 昨日の日記）。

私がこれまでに作ったりした、Greasemonkey、Bookmarklet、ユーザースタイルシートなんかの紹介。個人的には便利なものもあったり、作ったもののごくたまにしか使わないものもあったり。まァ色々ですがどうぞご利用ください。

Bookmarkletを貼りつける Google Gadget は id:asannouさん のものを利用させていただきました。

この Google Gadget で表示させた Bookmarklet を登録する方法についてはこちらでまとめたので、参考にして下さい

• Bookmarkletの登録のしかた

■ はてブのIDコール先を見やすくするGreasemonkey/Bookmarklet

よく、はてなブックマークのエントリーページで

↓id:sampleさんのコメントがウケる！

などと、他のユーザーのidを挙げてコメントを指示することがあるわけですが、少ないブックマーク数ならまだしもこれが数百もあるブックマークだと該当するコメントを探すのにいちいちスクロールをしなくてはならなかったり、目当てのコメントをしたユーザーが見つからなかったりとメンドイですよね。

というわけで、それを見つけやすくする Greasemonkeyがあったら便利だなと思って作ってみました。

インストールはこちらから

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

動作のイメージとしてはこういう感じです。

機能は大きく4つ

• IDコールの対象となるユーザーへのリンク先を変更する
• IDコールにカーソルを重ねると、対象のユーザーのコメントをハイライト
• IDコール先のコメントを取得しポップアップで表示する

となります。

後者2つは見て分かりやすいのですが、1つ目の補足説明すると

はてなブックマークのコメントにはそれぞれIDが割り振ってあります。この Greasemonkey では IDコールのリンク先をその ID に変更しています。

つまり本来

• http://b.hatena.ne.jp/hoge/

であるリンク先が

• ブックマークのURL#bookmark-user-hoge

へと変更されるわけです、そのためそのユーザーのブックマークへ行きたい場合は、一旦そのページ内リンクをクリックしてから日付の隣のID表記の部分をクリックして下さい。

そしてもう1つの特徴としては、

• はてなユーザーへのIDコールのような文字列を自動的に検出する

というもの、具体的には 「id:hogeさん」ではなく「hogeさん」であっても IDコールと見なして動作します。

この場合、処理が行われたか分かりやすいように単語の始めに アイコンがつきます。

この機能が必要ではない場合

var AutoUserLink = true ;

を false にして下さい。初期設定では true になっています。

追加機能（2008/11/30）

IDコール、ないしIDコールと見なされた呼びかけを送られたユーザーのブックマークの末尾に Reply をつける機能を追加しました。アイデアの着想元はこちらです。

僕が「あったら良いな」と思うはてなブックマークの機能のまとめ ：ekken

idコールしたコメントは、コールした側からは分かりやすいけど、コールされた側からは分かりにくい。idコールをメール通知設定にしているユーザーはともかくも、そうではないユーザーや当事者以外には分かりにくいので、ブックマークコメント一覧に「コールされたことが分かりやすくなる何か」があると良いなぁ。

僕が「あったら良いな」と思うはてなブックマークの機能のまとめ ：ekken

この機能が必要ではない場合

var AutoReplyLink = true ;

を false にして下さい。初期設定では true になっています。

更新履歴

2008/08/31：コメント一覧非表示機能の実装に伴い該当ページでは適用しないよう修正

2008/11/18：文字コードを間違えて保存していたので、修正いたしました

2008/11/26：はてなブックマークリニューアルに対応

2008/11/30：Reply機能の追加

2009/01/16：パフォーマンスの改善

またもう1つ重要なポイントなのですが、IDコールであっても、そのブックマークをブックマークしてないユーザーの場合はこれらの処理を行いません。

要は IDコールで「id:hatenacinnamonさん」と書かれていても、id:hatenacinnamonさんがブックマークしていなければ、ポップアップやハイライト、リンク先の変更などの処理はされません。もう1つ付け加えると、はてなユーザーIDは大文字小文字が区別されるので、「Hogeさん」では id:hogeさんにはリンクされないようにもなっています。

Bookmarklet版

ただそうは言っても、そうそう毎度毎度必要な機能でもないですよね。

多くの場合わざわざポップアップで探すことなく、目当てのコメントを見つけることができますから、常に Greasemonkey を動かす必要はないです。

というわけで、たまにしか使わないのであれば、Bookmarklet でもいいじゃね？っていう。

こちらの場合は、使える文字数の限度もあるので機能が簡略化されています。上のGreasemonkey に比べ

• リンク先を変更
• カーソルを合わせると、言及先のみハイライト

しかできません、その点ご了承ください。

更新履歴

2008/11/26：はてなブックマークリニューアルに対応

■ はてなブックマークのコメント率を円グラフで表示するGreasemonkey

こちらは文字通り、はてなブックマークのブックマーク数のうち、

• コメントがある
• コメントがない
• プライベート

の割合を、円グラフで表示するGreasemonkeyです。グラフの表示には Google Chart API を利用しています。

インストールはこちらから

http://furukawa.rikuo.googlepages.com/HB_comment_Pie_chart.user.js

当初はタグの多い順に円グラフで表示したら面白いんじゃね？という着想だったのですが、Google Chart API はまだ日本語（漢字・カタカナ・半角カナ）の表示に対応してないので、まぁ仕方なくブックマークのコメントの割合を円グラフに。

こちらは特にそれ以上の説明はないですね。ブックマークに応じて割合の違いを見ると面白いのではないかと。

プライベートユーザーの割合を円グラフに表示しない場合は

var private_user = true ;

を false にして下さい。初期設定では true になっています。

更新履歴

2008/08/31：コメント一覧非表示機能の実装に伴い該当ページでは適用しないよう修正

参考リンク

• Google Charts — Google Developers

また、はてなブックマークのタグの割合を円グラフ化するサービスではこちらがあります

• はてなブックマークのタグ一覧をGoogle Chart APIを使って円グラフにしてみる - Liner Note

追記：関連リンク

ブックマーク数を日毎に折れ線グラフするGreasemonkeyは既にあります

• System.Exit - hatebu_chart.js

■ はてなブックマークのコメントを昇順・降順に並べ替え、コメントの無いものを非表示・表示できるGreasemonkey

これは、はてなブックマークのエントリーページでブックマークコメントを昇順、または降順に並べ換えるGreasemonkeyです。

デフォルトでは昇順（古いコメントが上）になります。

そして [▲] または [▽] をクリックすると、昇順・降順に入れ替えることができます。

あとついでにコメントが無い、ブックマークを非表示にする機能もつけました。

[][]これをクリックすると、コメントの無いものを非表示または表示に切り換えます。[+9]などの数字は非表示にしたブックマークの数です。

初期設定ではオフ。

var ReverseHatenaBookmarkComment = true;

var HatenaBookmark_NoComment = true;

前者が、まず始めに昇順に並び換えるかの設定、後者がコメントの無いものを非表示にするかの設定です。どちらも、初期設定はさておきボタンクリックで切り換えることができます。

というのも自分で使ってみて、普通の並びのである降順（新しいコメントが上）が慣れているせいか読みやすかったのです。ただブックマーク数が多い場合では昇順であった方が流れを把握しやすかったのと、その場合 コメントが無いものが非表示であるとより読みやすいと感じたので。

インストールはこちらから

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

余談ですが

え～っと、こちらは 以前にはてな匿名ダイアリーに投稿したものを修正したものです。

• はてなブックマークのコメントを昇順に並べ替えるGreasemonkey

匿名で投稿したものをあとから「実は私でした」とやるのは格好悪いとは思いつつ、作り直したりもしたので記名でやった方が良いかなと、思ったり。ま、言い訳してもカッコ悪いのは変わらないですね……。

なんかスミマセン。

単純に昇順・降順に切り換えるだけの軽量版はそちらに置いてあります。

参考にしたものなど

• はてなダイアリーの過去ログを日附昇順に竝べ替へるユーザスクリプト - HM weblog
• はてブからネットイナゴを駆除(?)する「Hatebu Tag Killer」 (ひぐまのひまグ)

更新履歴

2008/07/15：はてなブックマークに関連エントリー機能がついたのでそれに合わせて修正

2008/08/31：コメント一覧非表示機能の実装に伴い該当ページでは適用しないよう修正

2008/11/29：はてなブックマークのリニューアルに対応

■ はてブのURLを短縮する＆キーワードのブックマークを見やすくするBookmarklet

追記:こちらははてなブックマークのリニューアルに伴い現在使えなくなっています。修正を行う予定ですが、一部の機能は使えなくなりそうです

はてなブックマークは通常

http://b.hatena.ne.jp/entry/ブックマークされたURL

となっています。

具体的には

http://b.hatena.ne.jp/entry/http://chronicle.g.hatena.ne.jp/

こういう感じですね。

しかしこれを Twitter などに書こうとすると、URL によっては文字数が多過ぎて困ることもしばしば。こんなときに便利なのがこの Bookmarklet。上の URL を

http://b.hatena.ne.jp/entry/3150218

ここまで短くすることができます。

これはブックマークにそれぞれ固有のIDがついているからで、そのIDを調べることで簡略表記ができる、という技です。

もう1つ。

• はてなダイアリーアワード2007とは - はてなダイアリー
• はてなダイアリーアワード2007とは - はてなダイアリー

えーっと、例えばこういう、はてなダイアリーキーワードをブックマークしたページがありますよね。で、説明はあとでするとしてそれぞれのブックマークページを見てみて下さい。

両方とも同じページが表示されませんか？

これは、はてなブックマークのエンコードの仕様で同じページのはずがブックマークが分かれたり、また片方のブックマークしか見れないという現象になります。これの回避策としても、短縮したブックマークのURLは便利です。

つまり、上のブックマークはそれぞれ

http://b.hatena.ne.jp/entry/6327140

http://b.hatena.ne.jp/entry/6326957

こちらになるわけですね、こちらにアクセスすると両方のブックマークを見ることができるかと。

Bookmarkletの使い方

こちらは IE6 以外用

ブックマークのエントリーページ

http://b.hatena.ne.jp/entry/ブックマークされたURL

では、

http://b.hatena.ne.jp/entry/ブックマークエントリーID

に遷移します。

またさらにこのBookmarkletは注目エントリー、人気エントリーなどでは、リンク先を 短縮URLに変更します。変更したのが分かりやすいよう色をつけました。

各ユーザーのブックマーク/お気に入りページでも使えます

なにが便利？

えーっと、前述の通りキーワードのブックマークなんかでは便利でしょうか。

IE6だと、文字数が足りなかったので2つに分割。

ブックマークのエントリーページを短縮するもの

http://b.hatena.ne.jp/entry/ブックマークされたURL

こちらでのみ使えるBookmarklet

また、注目・人気エントリー、各ユーザーのブックマーク/お気に入りページなどで使えるBookmarklet

■ はてなブックマークカウンターを表示するBookmarklet

注目エントリー・人気エントリー、またブックマークのエントリーページなどで、そのブログがこれまでに獲得したはてなブックマーク数総計を示すはてなブックマークカウンターを表示するBookmarklet

こちらは、はてなダイアリー・はてなグループのタイトル脇にはてなブックマークカウンターを表示するBookmarklet

それぞれ Greasemonkey にしても良かったのですが、常にあると正直ウザいですし、でもたま～にちょっと気になることがあるので Bookmarklet にしました。

■ 特定のユーザーのはてなスターを目立たせるユーザースタイルシート

これは別にはてなブックマークに限らないのですが、こちらの着想はこのエントリー

ひろみちゅ星祭り? と思ったら… - 児童小銃

はてなユーザーIDは英数字であるため、一見混同しやすいIDというのがあります。例えば私の場合

• id:rikuo
• id:rikoさん
• id:nkozさん

と字面が似ていますね。

はてなブックマークなどではユーザーアイコンが表示されるのでまだいいとして、問題は はてなスター。そこで区別がつくように目立たせるユーザースクリプトを考えてみました

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(hatena.ne.jp) {
  a[href^="http://s.hatena.ne.jp/rikuo/"] img.hatena-star-star{
  width: 0;
  height: 0;
  padding: 13px 11px 0 0 !important;
  background: url("http://d.hatena.ne.jp/images/diary/r/rikuo/2008-04-07.gif") no-repeat left center;
}

通常のはてなスター を こちらに変更するので、こういう感じになります。

ユーザーを追加する場合は

  a[href^="http://s.hatena.ne.jp/hoge/"] img.hatena-star-star,
  a[href^="http://s.hatena.ne.jp/foo/"] img.hatena-star-star,
  a[href^="http://s.hatena.ne.jp/bar/"] img.hatena-star-star{
  width: 0;
  (略)
  }

という具合に付け足していってください。

冒頭に書いた通り、はてなブックマーク以外、はてなハイクやダイアリー、フォトライフなどでも使えるユーザースタイルシートです、気になるユーザーがいるとか、うっかり過去に一度スターをつけたエントリー・ハイクに再度スターをつけるのを防止したりなどにご利用ください。

■ まとめと反省とか

とにかく、なげー。

なんとなくこれでもか、と詰めこまないといけないような妙な気負いがあったりなかったり。長いとそれだけ読む方も大変だとは分かっているのですが、過剰なサービス精神というか、無駄に張り切るのだけは得意科目というか。ま、毎回こんな更新ができるわけではないので、テコ入れはこれくらいで次回以降は割と軽めに更新することにします。

[たぶん1ヶ月後くらい][早速サボる気まんまんだ]