記事本文
はてなのいくつかのサービスにプロフィール画像が出現
この機能追加自体に関しては特に私からはコメントはありません。 今日になってはてなブックマークのエントリページが賑やかになっていて、「何だ何だ !? 」という感想は抱きましたが。
「全てのサイトをはてブ化する」 Greasemonkey スクリプトが使えなくなった
以前 Going My Way: すべてのサイトをはてなブックマークと結びつけるGreasemonkeyスクリプト経由でいぬビーム - 全てのサイトをはてブ化するという Greasemonkey スクリプトを知り、手軽にブックマークコメントをチェックできるということで重宝していました。
のように、本来なら「ブックマークしているユーザ数」を表示して、なおかつブックマークコメントが書かれていればそれを抽出するという動作だったのですが、プロフィール画像設定機能の追加によってユーザ数の取得もブックマークコメントの取得もできなくなってしまいました。
おかしいなと思ってはてなブックマーク - はてなダイアリー日記 - プロフィール画像設定機能の追加についてのソースを確認すると、これまでは
<li><span class="timestamp">2006年01月26日</span> <a href="/ruku/20060126#bookmark-1288979">ruku</a> 『[<a href="/ruku/%e3%81%af%e3%81%a6%e3%81%aa/" class="taganchor">はてな</a>] どれどれ。』</li>
のような形式で記述されていたものが、
<li><span class="timestamp">2006年01月26日</span> <a href="/ruku/"><img src="http://www.hatena.ne.jp/users/ru/ruku/profile_s.gif" class="hatena-id-icon" alt="ruku" title="ruku" width="16" height="16" /></a> <a href="/ruku/20060126#bookmark-1288979">ruku</a> 『[<a href="/ruku/%e3%81%af%e3%81%a6%e3%81%aa/" class="taganchor">はてな</a>] どれどれ。』</li>
といった記述に変更されていました。
まあ、プロフィール画像を表示するんだからマークアップにも何らかの変更が加わるのは当たり前なのですが。
詳しい解説は省略しますが、いぬビーム - 全てのサイトをはてブ化するの Greasemonkey スクリプトの動作を大雑把に解説すると、 xmlhttpRequest を用いて該当ページのはてなブックマークエントリページの内容を取得し、正規表現を用いて、
<li><span class="timestamp">2006年01月26日</span> <a href="/ruku/20060126#bookmark-1288979">ruku</a> 『[<a href="/ruku/%e3%81%af%e3%81%a6%e3%81%aa/" class="taganchor">はてな</a>] どれどれ。』</li>
といった例のような形式にマッチしたら users の値をインクリメントして、かつコメントがあればそれを取得して該当ページの
</body>
の直前に書き出すという動作をしています。
( 私は JavaScript はほとんど触れたことがないので、間違った理解をしているかもしれません、ご容赦願います。 )
「全てのサイトをはてブ化する」 Greasemonkey スクリプトを改造する
しかし、プロフィール画像設定機能の追加によって正規表現によるマッチング規則と実際のエントリページの記述に齟齬が生まれたために、どのページでも 0 users になってしまっているのです。 そこで、スクリプト内のマッチング規則を新しいエントリページの記述に合わせれば良いのでは考えました。 私は正規表現はおろか JavaScript に触れるのも初めてに近いのに !
- いぬビーム - 全てのサイトをはてブ化するを Firefox 上で開きます。
- http://yagi.xrea.jp/2005/12/hb_addict.user.js のリンクアンカーをクリックしてスクリプトを表示し、その記述をエディタにコピーします。
- 59 行目の
while (m = d.match(/<li><span class="timestamp">([^<]*)<\/span> <a href="[^"]*">([^<]*)<\/a>(.*)?<\/li>/)) {という記述を、while (m = d.match(/<li><span class="timestamp">([^<]*)<\/span> <a href="[^"]*"><img src="[^"]*" class="[^"]*" alt="[^"]*" title="[^"]*" width="[^"]*" height="[^"]*" \/><\/a> <a href="[^"]*">([^<]*)<\/a>(.*)?<\/li>/)) {に置き換えます。 - hb_addict.user.js という名前を付けて保存し、 Firefox 上でそれを開きます。サーバに put して開いても構いませんし、ローカルディスク内のものを開いても構いません。
- 「ツール」より「 Install This User Script 」をクリックすればインストール完了です。
なお、これまでにいぬビーム - 全てのサイトをはてブ化するのスクリプトをインストールしていた場合は、前述の作業を行う前に「ツール」より「 Manage User Script 」をクリックし、 hb_addict.user.js を Uninstall しておくようにしてください。
また、 Greasemonkey 自体をこれから導入するという方は、前述の作業を行う前にはてなグリースモンキー(Greasemonkey) - Greasemonkeyの使い方を参考に Greasemonkey を導入してください。 言うまでもありませんが、 Greasemonkey は Firefox の拡張機能ですので Firefox がインストールされている必要があります。
IRC チャンネル「 #順列都市」のみんなに助けられ、 unified 形式による patch で改造部分を示すことができるようになりました。
--- hb_addict.user.js Thu Jan 26 23:04:14 2006
+++ hxxk_hb_addict.user.js Thu Jan 26 21:41:16 2006
@@ -56,7 +56,7 @@
d = response.responseText;
var n = 0
var already_bookmarked = false
- while (m = d.match(/<li><span class="timestamp">([^<]*)<\/span> <a href="[^"]*">([^<]*)<\/a>(.*)?<\/li>/)) {
+ while (m = d.match(/<li><span class="timestamp">([^<]*)<\/span> <a href="[^"]*"><img src="[^"]*" class="[^"]*" alt="[^"]*" title="[^"]*" width="[^"]*" height="[^"]*" \/><\/a> <a href="[^"]*">([^<]*)<\/a>(.*)?<\/li>/)) {
n += 1
d = RegExp.rightContext;
var date = m[1]hb_addict.user.js にこの patch を適用して、 Firefox 上で開いてインストールすると良いでしょう。 patch って何っていう私のような方は Azrael: Tagwire、MT-XSearch、Cygwin導入メモを合わせてどうぞ。
mtymのstderr - 全てのサイトをはてブ化する Greasemonkey スクリプトにてよりスマートな表現が書かれています。
このように、
>
を判定の基準にした方が img 要素内の属性の配置が変わっても修正を加えなくて済むので良いと思います。
おわりに
前項でも述べた通り、私はこれまでに正規表現や JavaScript に触れる機会がほとんどありませんでした。 もしかしたらスクリプトの書き換え方も何かしら遠回りしているかもしれません。 もっとスマートな記述があるよ、という方は遠慮なくダメ出ししていただけると幸いです。
トラックバック送信先
- はてなダイアリー日記 - プロフィール画像設定機能の追加について
-
プロフィール画像設定機能の追加によって動作しなくなった hb_addict.user.js の修正方法を示してみました。
- はてなブックマーク日記 - プロフィール画像設定機能の追加について
-
プロフィール画像設定機能の追加によって動作しなくなった hb_addict.user.js の修正方法を示してみました。
- いぬビーム - 全てのサイトをはてブ化する
-
プロフィール画像設定機能の追加によって動作しなくなった hb_addict.user.js の修正方法を示してみました。
