スポナビのニュース一覧から特定のメディアを非表示にした

概要

サッカーワールドカップロスが激しいのでスポナビでざっくりサッカー関連のニュース（今の時期だとワールドカップの振り返りや新シーズンに向けての移籍の噂とかが多いかも）を流し見することが多いが・・・
メディアによってはちょっと見出しの時点で眉をひそめたくなるような記事をいくつも上げているようなものもある。記事単位で多少品位の上下があるのは目をつぶるとしても、メディアによっては毎回残念な見出し、記事を連発しているのでもうこの際こういったメディアの記事は目に入らないようにしようと思った。

Tampermonkeyの導入

記事一覧に出てるメディア名はただのテキストなのでブラウザ拡張機能のStylebotを使って特定の要素を非表示みたな手段だと実現が厳しそう。ということでちょっと調べたらカスタムのjavaScriptを実行してくれるような拡張機能もあるらしい。

今回はブラウザ拡張機能としてTampermonkeyを導入。

対象のページを開いている状態で拡張機能からTampermonkeyのメニューを開き、新規スクリプトを追加からスクリプトの編集画面に進められる。

非表示用スクリプトの記述

事前にデベロッパーツールなどでメディア名が記載されている部分のCSS要素などを確認しておいて、そこのテキスト内容とスクリプトで定義したブロックリストを突き合わせて合致すれば親要素ごと非表示にするというこがざっくりな流れ。

(function () {
    'use strict';

    // 非表示にしたい配信メディア名リスト
    const blockList = [
        "メディア名1",
        "メディア名2"
    ];

    function hideArticles() {
        document.querySelectorAll("li.sn-timeLine__item").forEach(item => {
            const credit = item.querySelector(".sn-timeLine__itemCredit");
            if (!credit) return;

            const source = credit.textContent.trim();

            // ブロックリストと合致したら親要素ごと非表示
            if (blockList.includes(source)) {
                item.style.display = "none";
            }
        });
    }

    hideArticles();
})();

なんとなく思いついて書いてみた感じではこんな感じ。
あとは設定タブで実行するサイトを正規表現などで指定して保存。

試しに動かしてみた感じではブロックリストで指定したメディアがごっそり非表示になったのでうまく動いてそう。

StylebotのようにCSSをカスタマイズしてくれるような拡張機能があるのでスクリプト周りのカスタマイズも出来るものがさすがにありそうと思ったけど実際あったので使ってみた。

この２つがあればなんか色々出来そう・・・細かい条件の設定とかはAIにサイト読んでもらえれば教えてくれそうだし、自分がよく使ってるようなサイトでもちょっと役に立ちそう。