uBlockでYahoo!ニュースをフィルタしてみよう

2024年6月3日ソフトウェア

Yahoo!のトップページに表示されるニュース記事、サジェストされているとはいえ見たくない記事も多いですよね。という訳で、タイトルにNGワードを含む記事を表示させないようにしてみます。

この手の機能はChrome拡張機能の Y!News Excluder が有名ですが正常に動作しない事が多々ありますので、今回は uBlock Origin を使います。(恐れ入りますがインストール方法はご自身でご確認ください。当ページでは設定方法のみ記します)

設定方法

とても簡単。[マイフィルタ] に以下を追記するだけです。

yahoo.co.jp##a:has-text(NGワード)

複数ある場合は1行ずつ追加してください。これでトップページだけでなく、Yahoo!内のあらゆる箇所のNGワードを含むリンクが表示されなくなるでしょう。その記事を提供したメディア名(〇〇新聞、週刊〇〇など)を指定してもOKです。

※ただし上記設定はYahooすべてのリンクテキストが対象ですので、例えばYahooショッピングの商品名にNGワードを含む場合はその商品も見えなくなります。トップとニュースページのみを対象としたい場合は以下のように記載します。

www.yahoo.co.jp,news.yahoo.co.jp##a:has-text(NGワード)

少し技術的な話

Yahoo!トップページのニュースは上図のとおりarticleタグで囲われ、そのclassはランダムな文字列です(赤線部分)。通常、広告ブロッカーのオブジェクト要素に対するフィルタはclassを指定しますので、これではすぐに効果がなくなる事が予想できます。

yahoo.co.jp##article._3S2Q2j3wAQxbug02Q7t3dO:has-text(NGワード)
 → 「_3S2Q2j~」の部分が変わると効果がなくなる

ですのでhas-textはclassではなくタグにかけざるを得ないのですが、articleにかけるとNGワードを含まない記事もすべて消えますので、articleの子要素であるaタグにかける事となります。結果的にフィルタが簡単になるのはありがたいですね、この先コードがどう変わるかわかりませんので。

yahoo.co.jp##:xpath(//article[contains(./a ,"NGワード")])
 → 管理が面倒ではございませんか

他のサイトで応用してみよう

上記はもちろん応用が可能です。

YouTube

! NGワードを含むチャンネルを非表示
youtube.com##ytd-video-renderer:has-text(NGワード)

! ホームタブの「おすすめ」「動画」枠からNGワードを含む動画を非表示
youtube.com##ytd-grid-video-renderer:has-text(NGワード)

! ホームタブの「ショート」枠からNGワードを含む動画を非表示
youtube.com##ytd-reel-item-renderer:has-text(NGワード)

! 動画タブ、ショートタブからNGワードを含む動画を非表示
youtube.com##ytd-rich-item-renderer:has-text(NGワード)

その他

! X[twitter.com]から特定アカウントのNGワードを含むポストを非表示
twitter.com##[data-testid="cellInnerDiv"]:has-text(/@アカウント名[\s\S]*NGワード/)

! Yahooニュースのフィルタをあえてxpathで書く
yahoo.co.jp##:xpath(//article[contains(./a ,"NGワード1") or contains(./a ,"NGワード2")])

! Yahooトップページの「あなたにおすすめの商品」を非表示
www.yahoo.co.jp##.ult__mods:has-text(あなたにおすすめの商品)

! ニコニコ動画のチケットセンターからガチャのバナーを消す
nicovideo.jp#@#img.banner-image[href^="https://koken.nicovideo.jp/campaign"]
nicovideo.jp##img[alt*="ガチャ"],img[alt*="ガチャ"]

! ITmediaの偽アンケート記事を非表示
itmedia.co.jp##li:has-text(1位は)

! えび通[http://ebitsu.net/]からNGワードを含むサムネイルを非表示
! ・トップページ(上はPC、下はスマホ)
ebitsu.net##article.article-area:has-text(NGワード)
ebitsu.net#li.box-border:has-text(NGワード)
! ・画面左「今週の人気記事」
ebitsu.net##li.popularArticleWithImage:has-text(NGワード)

! やらおん、各記事の「この記事へのコメント」からNGワードを含むコメントを非表示
!・PC用
yaraon-blog.com##div.comment_area > ol > li:has-text(NGワード)
!・スマホ用
yaraon-blog.com##ol.commets-list > li:has-text(NGワード)

! やらおん、NGワードを含む記事を非表示
!・PC用
yaraon-blog.com###topHeadline > dl > dd:has-text(NGワード)
yaraon-blog.com##div.entrylist:has-text(NGワード)
!・スマホ用
yaraon-blog.com##li:has-text(NGワード)
yaraon-blog.com##div.latest:has-text(NGワード)

皆さまのネット生活が少しでも快適になれば幸いです。