■スターの多い順にブコメを並び替える

FANZAの検索結果から熟女を除外するブックマークレット がうまく動いたので、気を良くしてはてなブックマークのコメント欄をスター数順にソートするブックマークレットを作りました。

作った動機は、「注目コメントに入りきれなかったちょっといいコメント」をサクサク探したいから。結果として建設的コメント順位付けモデルを無効化していますが、あのアルゴリズムには特に不満は特にありません。

ブックマークレット

javascript: (async () => {
    const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
    document.querySelector('.js-bookmarks-sort-tab[data-sort="recent"]').click();
    window.scrollTo(0, document.body.scrollHeight);
    await wait(1000);
    window.scrollTo(0, 0);
    await wait(1000);
    const p = document.querySelector('.js-bookmarks-recent');
    let l = Array.from(p.querySelectorAll('.entry-comment-contents'));
    const g = e => {
        let n = e.querySelectorAll('.hatena-star-star').length;
        const c = e.querySelector('.hatena-star-inner-count');
        return c ? n + Number(c.textContent) : n
    };
    l = l.filter(e => g(e) > 0);
    l.sort((a, b) => g(b) - g(a));
    p.replaceChildren(...l);
})();

ミニファイしたもの ※コードに一部誤りがありましたので訂正しました（2024-08-16 11:47）

javascript:(async()=>{const wait=ms=>new Promise(resolve=>setTimeout(resolve,ms));document.querySelector('.js-bookmarks-sort-tab[data-sort="recent"]').click();window.scrollTo(0,document.body.scrollHeight);await wait(1000);window.scrollTo(0,0);await wait(1000);const p=document.querySelector('.js-bookmarks-recent');let l=Array.from(p.querySelectorAll('.entry-comment-contents'));const g=e=>{let n=e.querySelectorAll('.hatena-star-star').length;const c=e.querySelector('.hatena-star-inner-count');return c?n+Number(c.textContent):n};l=l.filter(e=>g(e)>0);l.sort((a,b)=>g(b)-g(a));p.replaceChildren(...l)})()

使い方

FANZAの検索結果から熟女を除外するブックマークレット 参照

コード解説

コードや説明にダサイところがあったら厳しく指摘して下さい。

javascript:

ブックマークレットに必要な、URLの種類を示すスキーム名です。

(async () => {
    // 処理
})();

ページに元々ある変数たちとバッティングしないように、まず無名関数でラップします。処理の中で await を使いたいので async 宣言しています。

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

処理の途中で待ち時間を設けるための関数です。便利。

document.querySelector('.js-bookmarks-sort-tab[data-sort="recent"]').click();
window.scrollTo(0, document.body.scrollHeight);
await wait(1000);

「新着コメント」タブをクリックし、ページの一番下までスクロールダウンしてから少し待つ動作です。新着コメントの後半部分（スクロールきっかけの遅延読み込みになっているところ）の読み込みをうながしています。

window.scrollTo(0, 0);
await wait(1000);

ページの先頭に戻ってまた少し待ちます。合計2秒の待ち時間は雰囲気で決めていますので、これでなければならない・これで過不足ないという値ではありません。単にコメントの読み込み完了を判定する処理を書くのがめんどうだっただけです。

const p = document.querySelector('.js-bookmarks-recent');

新着ブコメの親要素です。繰り返し呼び出すので名前をつけています。

let l = Array.from(p.querySelectorAll('.entry-comment-contents'));

コメントをすべて配列に格納します。

const g = e => {
    let n = e.querySelectorAll('.hatena-star-star').length;
    const c = e.querySelector('.hatena-star-inner-count');
    return c ? n + Number(c.textContent) : n
};

コメントのはてなスター数をカウントして返す関数です。たくさんスターがついてる ★256★ みたいなやつの数字も足します。

l = l.filter(e => g(e) > 0);

ソートする前に、無スターのコメントを消去しています。してもしなくてもいいことですが。

l.sort((a, b) => g(b) - g(a));

残ったコメントをスター数で降順ソートします。.querySelectorAll() で収集した要素を配列に入れ直したのは、この .sort() メソッドを使いたいからです（.querySelectorAll() が返す配列風の NodeList オブジェクトは、配列と共通のメソッドもいくつかあるものの、大半は使えないのです）。

p.replaceChildren(...l);

親要素の内容を、並び替えの終わったコメントでそっくり入れ替えて、処理完了です。画面を見ると新着コメントの中身が「スターのついたコメントのみ・スターの多い順」に並んでいます。元に戻す方法はないので、原状回復にはリロードします。ソート状態を示すフラグを立てておいてスター数ソート⇔日付ソートをかわりばんこに行うようにすればできそうだなと思ったけど実装はしません。連打スターを省く処理を追加してＵＵ数でソートできればもっと厳正なランキングになるなーと今思いつきましたがそれも実装はしません。

Permalink | 記事への反応(0) | 21:55

ツイートシェア