はてブ注目・人気エントリーの省略タイトルを元に戻すGreasemonkey

自分用と検証も兼ねて使ってたのですが、そういや公開してなかったなー、と思ったので。

はじめに


はてなブックマークの注目・人気エントリーでは64バイトまででタイトルが省略されています。なぜこのようなデザインなのか?これについては、リニューアル後のはてな社長id:jkondo氏による開発者インタビューで触れられていますが

id:jkondoが聞く、はてなブックマークリニューアルの舞台裏

//img.f.hatena.ne.jp/images/fotolife/r/rikuo/20090119/20090119104513.gif?1232329675" alt="" height="64" width="64">
naoya:2つ目は、本文が若干左寄せになっていて、タイトルもその本文に合うような形で切れているんですけど、あのデザインも実は偶然発見したものです。最初は全部フルに展開されていたんですが、その状態ではすごく見づらくて。二人で悩んで、例えば本文の行数を2行にしてみたり、タイトルをちょっと切ってみたりしたんですが、全然よくならないんですよ。それが、たまたまid:nagayamaCSSをいじっている時にバグって、そのページをしかもたまたま僕が開発中に見たんです。それで「これ見やすい、これだこれ」と言いながらやり始めたんですね。
//img.f.hatena.ne.jp/images/fotolife/r/rikuo/20090119/20090119104514.gif" alt="" height="64" width="64">
jkondo:検索エンジンだと結構一般的にやっている手法だけど、やっぱりそれだけのことがあるってことですか。
//img.f.hatena.ne.jp/images/fotolife/r/rikuo/20090119/20090119104513.gif?1232329675" alt="" height="64" width="64">
naoya:かなり。視線を移動させないというのが重要ですね。
//img.f.hatena.ne.jp/images/fotolife/r/rikuo/20090119/20090119104514.gif" alt="" height="64" width="64">
jkondo:この前、他のプロダクトを作っている時に、はてなブックマークみたいに本文を切ったら見やすいんじゃないかと誰かに指摘したんですよ。そしたら「切ってましたっけ?」なんて言っていたので、切ってるよ、見てごらんよ、と画面を見せたら、「あ、本当だ、切れてる!」なんて。かなり自然に目に馴染んでるんだろうなと思いました。

こうした意図があるとのこと。
後でも補足しますが、無駄に幅が広くなってしまっても可読性が落ちますから、デザインのコンセプト自体は理解するものの、かと言って64バイトで省略されるのはさすがに短過ぎ、それだけでは文意が分からないことも多く、却って読み辛いためこのようなGreasemonkeyを制作しました。

概略

表題通り、はてなブックマークの注目・人気エントリーでの省略されたタイトルを元通りにします*1

インストールはこちらから
http://userscripts.org/scripts/show/40756


実は同様のGreasemonkeyは既にあり、
超オススメ!はてブの省略された記事タイトルをフルテキストにするGreasemonkeyスクリプト - F.Ko-Jiの「一秒後は未来」
後発としては、それを受けての違いを出すことが必要だと思いました。このGreasemonkeyの特色としては

ですね。
実行速度は上述のGreasemonkeyに比べて高速なのが、大きなアピールポイントです。また、はてなブックマークには画面のスクロールに対して自動でページを継ぎ足しする機能があるのですが、それで新たに追加されたエントリーに対しても省略を元通りにする処理を行います。
その2点が、このGreasemonkeyの特色ですね。


[どうぞご利用ください。]

応用編

ただ、このままですと無駄にタイトルが幅広くなってしまいウィンドウサイズを大きく使っている場合、却って読み難くなってしまうのも事実。そのため、私自身はこの Greasemonkey とは別にユーザースタイルシートを使っています。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("b.hatena.ne.jp") {
  #main ul.hotentry li div.entry-body h3{
    max-width: 50em;
  }
}

max-widthで、最大幅の上限を設けているわけですね、「50em」の部分は幅の長さですから好みで数値を変更してもいいでしょう。
さらに私は

    line-height: 1.8;
    background-position: 0 5px;

も設定しています。行間の高さと、それに応じて favicon の位置を変更。

参考リンク

Firefoxでユーザースタイルシートの設定をするならこちらが便利です。

個人的なメモ

今回、省略されている見出しを探すのに XPath を使いました。
具体的には省略されている場合

<h3><a href=url title=title>エントリーのタイトル...</a></h3>

大まかにはこのようになっています、省略されている場合必ず最後に「...」が付くわけですね、ですのでそれを判定条件にしました。つまり文字列の末尾に特定の語句が含まれる見出しを選択する XPath

h3/a[substring(text(),string-length(text())-2)="..."]

このように書けます。
これで省略されている見出しのみを抽出できるわけです、あとはそれを処理するだけ。
ね、簡単でしょう?

追記

id:pbhhttp://userstyles.org/styles/12485 こゆのもある。

http://b.hatena.ne.jp/pbh/20090119#bookmark-11724965

と、id:pbhさんから
Website Themes & Skins by Stylish | Userstyles.org
ユーザースタイルシートを教えていただきました、ありがとうございます。
なるほど、ユーザースタイルシートだけでもできるんですねー、これだと当然 AutoPagerize にも対応してますし、動作も速いですからこちらで十分かも。


orz

><

*1:はてなブックマークのエントリータイトルに設定できる文字数にも上限(今回の64バイトとは別の)があり、それを超えるものについてはさすがに対応していません。スクリーンショットでも完全に元のエントリーのタイトルではないですね。