はてなブックマークの「トピック」にAutoPagerizeとLDRizeを適用する

2015-02-13

はてなブックマークで盛り上がった話題をピックアップして、関連記事を提示してくれる機能がベータリリースされた。すでに10年分のトピックがあるので、AutoPagerizeとLDRizeでテンポよく読んでいきたい。

AutoPagerize

アイテム: はてなブックマーク - トピック - データベース: AutoPagerize - wedata

SITEINFOは追加したが、いくつかのAutoPagerize系の拡張はhttp://b.hatena.ne.jp/*では動作しないように設定されている（Firefox版AutoPagerizeとuAutoPagerizeで確認）ので、トピックリスト関連のページを無効化の対象から外すように書き換える必要がある（Firefox版AutoPagerizeの書き換え例）。はてなブックマークのユーザーのブックマーク一覧には無限スクロールが実装されているから、そのうちトピック機能にも実装されるのではないか、ということでプルリクエストは送っていない。

右側の日付リストについては、継ぎ足したら日付リストも伸ばしていくというユーザースクリプトを書いてみたが、ページ側のスクリプトでDOMをキャッシュしているので、これだけではスクロールしてもハイライトが変化しない。継ぎ足した時にunsafeWindowなどを経由してキャッシュを消してやれば動きそうだが、数回継ぎ足しただけでリストが溢れるという問題もある。日付をカレンダーのように並べるとか、表示していない月は折りたたむなどという対策を考えたが、実装が面倒なわりにメリットが少ないのでそのままにしている。

「あとで読む」ボタンはそのままでは有効にならない。ユーザースクリプトなどを使って、AutoPagerize_DOMNodeInsertedの発火時にb_hatena_topiclist-expand_topic.user.js/main.user.js#L60-61のような処理を走らせれば動くようになるはず。

LDRize

トピックを展開するユーザースクリプトとの連携

省略されたタイトルとサムネイルだけではトピックの内容が分からないことがある。その場で内容を確認できると便利かもしれない、と思ってb_hatena_topiclist-expand_topic.user.jsというユーザースクリプトを書いた。トピックにマウスカーソルを当てると、右下にボタンが表示されて、クリックするとトピックが展開される。

LDRizeと書いたけど実際にはLDRizeではなくてmooz/keysnail · GitHubのLDRnailというプラグインを使っている。サイトローカル・キーマップというプラグインと組み合わせると、手軽にLDRnailにキーバインドを追加するようなことができる。

以下のコードをKeySnailの設定ファイルに追加すると、LDRnailで選択中のトピックをiキーで展開できるようになる。

local["^http://b.hatena.ne.jp/topiclist"] = [
  ['i', function (){
    var open = plugins.ldrnail.currentItem.querySelector('.__expand-button');
    if(open){
      open.click();
    }
  }],
];

ただ、手元の環境だとiを押してから概要を開くのに数秒かかる。普通に開いてタブを切り替えながら読んだほうがいいような気がしてきた。

SITEINFO雑感

CSS selectorの.class-nameに相当するXPathは、厳密に書くと*[contains(concat(" ", normalize-space(@class), " "), " class-name ")]となる（参考: SITEINFO中のnormalize-space()削除について - 枕を欹てて聴く）のだが、他のSITEINFOを見てみると//a[@class='class-name']という感じで簡便に指定しているものが多い。厳密な書き方だと視認性が下がるし、SITEINFOファイルが肥大化するのを避けるという意味もあるのかもしれない。

トピック機能はまだベータ版なので、class属性を完全一致で指定するよりもCSSのclass selector相当の記法を使って変更に強くしたほうがいいのでは、と思ったけど、YAGNIという気もする。