【広告ブロッカー】Twitterが無条件にステマしてくるゴミみたいなメディアや目障りなクソ情報をブラウザ上で無視するフィルタ

再配布不可能・私的利用可能

やり方

PCブラウザ版のTwitterに限る
まずは拡張機能でブラウザ用のadguardを入手する
次に以下をユーザールールにコピペする

twitter.com##div:matches-attr("/aria-label|role|data-testid|class/"="/タイムライン:.*|listbox|listitem|presentation|userCell|article|option|link|tablist|tab|region|button/") > div > div:contains(/朝日新聞|週刊朝日|朝日ウイークリー|asahi\.com|BuzzFeed|リテラ|lite-ra\.com|ハフポスト|huffingtonpost\.jp|東京新聞|毎日新聞|琉球新報|文春|ミモレ|CREA|business\sinsider\sjapan|テレビ朝日|テレ朝|日本テレビ|日テレ|フジテレビ|フジ|TBS|報道ステーション|報ステ|時事ドットコム|時事通信|時事メディカル|共同通信|現代ビジネス|Number|news zero|FNN|ママデイズ|BLOGS|ORICON|フラウ|モデルプレス|新R25編集部|東洋経済|Tasty\sJapan|ゲキサカ|Plum|BLOGOS|bizble|Kstyle|FRIDAY|就職四季報|DIGIDAY|ライフハッカー|DELISH KITCHEN|VOCE|マネー現代|Huawei|ファーウェイ|華為|COVID-19|COVID19|COVID_19|新型コロナ|コロナウイルス|反ワクチン|フェミニズム|フェミニスト|インセル|lgbt|lgbt|ジェンダー|マイノリティ|女性.*権利|権利.*女性|イエ制度|家制度|家長制|人権|男尊女卑|男女共同参画|男女平等|MeToo|KuToo|勝部元気|石川優実|伊是名|新垣結衣|ガッキー|大坂なおみ|K-POP|BTS|GOT7|EXO|TWICE|韓国人|エンターテインメント · トレンド|エンターテイメント · トレンド|俳優 · トレンド|このトピックは今後おすすめとして表示されません。|若者.*重症|重症.*若者|医師会|リベラリズム|リベラル|リベラリティ|学問.*自由|自由.*学問|文化.*芸術|芸術.*文化|学術会議|障害者|従軍慰安婦|南京大虐殺|ナチス|共産|菅直人|鳩山|民主党|りっけん|立憲|立民|生理|月経|妊娠|出産|退陣を求めます|辞職を求めます|ニュース|アベ政権|アベやめろ|スガ政権|スガやめろ|献金|過去最多|過去最大|過去最低|ぢゃな|([\uAC00-\uD7AF]|[\u1100-\u11FF]|[\u3130-\u318F]|[\uA960-\uA97F]|[\uD7B0-\uD7FF]|[\uFFA0-\uFFDF])+|\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08/imsu)
twitter.com##div:matches-attr("/aria-label|role|data-testid|class/"="/タイムライン:.*|listbox|listitem|presentation|userCell|article|option|link|tablist|tab|region|button/") > div > div:has(img:matches-attr("/src/"="/https:\/\/abs-0\.twimg\.com\/emoji\/v2\/svg\/1f3f3-fe0f-200d-1f308\.svg|https:\/\/abs-0\.twimg\.com\/emoji\/v2\/svg\/1f364\.svg/"))
twitter.com##div[data-testid="card.layoutLarge.detail"]:remove()
twitter.com##div[data-testid="card.layoutSmall.detail"]:remove()
twitter.com##a:contains(/まず記事を読んでみませんか?/):remove()
twitter.com##div:matches-attr("/aria-label|role|data-testid|class/"="/presentation/"):contains(/COVID-19|エンターテイメント|スポーツ/):remove()
twitter.com#@#div:matches-attr("/aria-label|role|data-testid|class/"="/テキストをツイート|検索クエリ/")

大まかな解説

使い方

ミュートしたい言葉をdiv:contains(/AAA|BBB|CCC/)AAABBB`CCC正規表現として入れる
それを含むツイートやユーザーは全て非表示になる(ユーザーページではユーザーの情報だけは見えてしまうけど)
正規表現検索を利用しているので公式クライアントより正確に安全に条件を絞れるミュート機能としての使い方が出来る
正規表現を用いた検索にはフラグとして/imusを使っているが,コレ以外の設定だと思うように動作しないので変更しない方が良い

絵文字の絞り込みには絵文字用の.svgイメージのソースURLを用いている,単独でUnicodeポイントが与えられる絵文字(例:🍤)ならば前後に.*を加えて入れれば良い(例:.*1f364.*)し,複数の絵文字の合成によって表示される絵文字(例:🏳️‍🌈)は指示に沿った複数のUnicodeポイントを半角ハイフンで連結し前後に.*を加えて入れれば良い(例:.*1f3f3-fe0f-200d-1f308.*
ちなみに正規表現を利用した検索において用いるUnicodeポイントがhex4桁までしか認められていない,サロゲートペアを利用してhex5桁1つをhex4桁2つに変換する必要がある,さすがに人力ではダルいので専用ツールサイトの利用を推奨する(例:🍤=>\uD83C\uDF64)(例:🏳️‍🌈=>\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08

|([\uAC00-\uD7AF]|[\u1100-\u11FF]|[\u3130-\u318F]|[\uA960-\uA97F]|[\uD7B0-\uD7FF]|[\uFFA0-\uFFDF])+はなにかって?これだけでハングルを全ブロックできる韓流トレンドのゴリ押しが悪い

またツイートクエリおよびサーチクエリはバグ動作回避のために対象外に設定することで保護した
Twitter Cardの説明文はバグ回避のため削除した,ちなみにLargeとSmallの2種類が存在する
さらに「まず記事を読んでみませんか?」を削除,「話題を検索」から「COVID-19」と「エンターテイメント」「スポーツ」を削除,「おすすめ」「トレンド」からジャンルで削除するにはエンターテインメント · トレンド|エンターテイメント · トレンド(なぜか2種類ある)を最初の正規表現のミュートリストに正確に追加する

仕組み

:matched-attr()と特定のパラメータを用いて検査の対象のdivを決め打ちし,:contains()と各種のワードで検査して引っかかったdivを不可視化している
> div >はどうやらdivの階層構造の深さを表すらしい…が,今のところ1個だけの状態が最もパフォーマンスが良い
そしてワンライナーで複数のdivを選定しているのでリストも1つで済む,フィルタリングがより快適になった

本来なら:remove()して少しでもブラウザを軽くしたかったのだが,非常によくバグる(Something Wrong is ~...の表示)ので断念
他のブラウザ用フィルタの拡張機能では同じ関数が使えないので,ほぼAdGuard専用になっていると考えて良い

注意

"/タイムライン:.*|listbox|listitem|presentation|userCell|article|option|link|tablist|tab|region/")の部分に"tweet"を加えると入力欄がバグるのでやらないこと
正規表現を間違えると想定外の動作を起こすので注意して入力すること

詳細な補足

仕様について

本来のコンテンツブロックは,basec ruleとしてドメインごとに挙動を設定できることが出発点であり,その次にCSS上の設定値や擬似クラスを利用して要素を指定してhideやremoveが可能になるnon-basic ruleがあり,その次にようやくextended css selectorがAdGuardに用意されているほか,さらにHTMLやScriptに対してのフィルタリングが実装されています
今回はextended css selectorを主に利用しており,matches-attrcontainsはどちらもDOMの変更を監視し,変化が発生する都度に評価を行いそれに則って動作します,なのでタイムラインの更新にも対応しています

ネット上の他の記事だとdiv[xxx="yyy"]div:has-text(/xxx|yyy/)のような解説が多いですが,前者は拡張性と管理性が低い・後者は使用する関数が古い問題があります,AdGuardのユーザールールのリファレンス(最新版)に沿いつつ設計することをお勧めします
ただし:has()セレクタCSS 4.0で実装されると策定されただけなので,現状どのブラウザでも未実装です,使えないので注意しておきましょうなので,公式リファレンスにある通りAdGuard内で関数が先行して実装されているので,使っても大丈夫です
aa.jp##div:matches-attr("/bb/"="/cc/"):contains(/xyz/):remove()みたいに関数を連結することが可能です,特定要素を丸ごと消したかったらこうした方が手っ取り早いです(効果範囲には気をつけましょう)

ユーザーが細かに挙動を制御できることで有名なuBLock Originと比較しましたが.正規表現が使えるAdGuardの方が今回は便利だと判断しました,あくまで他のブラウザ拡張機能では今回の構文が使えません

「エンターテイメント」と「エンターテインメント」

Twitterにはなぜか表記揺れがあります,両方消しましょう.

divの中身について

"/aria-label|role|data-testid|class/"

divタグのパラメータで明確に区別がつくのはおそらくはこの4つだけです
ちなみにTwitterはreactで動いているらしいです(react-rootがある)

タイムライン:.*

ユーザー発のアクティビティに関するもの,正規表現で以下を1個にまとめました
いずれもaria-label=で与えられます

タイムライン: ホームタイムライン

ホームに流れるタイムライン

タイムライン: トレンド

今どうしてる?

タイムライン:

最近でてきた「おすすめトピック」 後で名前が変わりそうなので注視

タイムライン: 話題を検索

検索ページのトップ

タイムライン: Carousel

検索ページでの横並びのサジェスト

タイムライン: タイムラインを検索

検索した結果

タイムライン: 会話

各ツイートのスレッド

タイムライン: 通知

通知

タイムライン: メッセージ

DM

タイムライン: リツイートされました

通知をクリックした画面

タイムライン: いいねしました

通知をクリックした画面

タイムライン: リツイートしたユーザー

ツイートから見れるやつ

タイムライン: いいねしたユーザー

ツイートから見れるやつ

listboxlistitem

role=で与えられます
検索窓のサジェスト欄と履歴欄がコレです,トレンド名とアカウント名を両方とも潰すには2つとも必要です

tablisttab

role=で与えられます
上と同じようなものです

userCell

data-testidで与えられます
色んな所に並んで表示される時にユーザーを非表示にします

articleregion

role=で与えられます
全てのツイートはコレに入っているので,念の為に対象にします

option

role=で与えられます
サジェストとか設定ボタンの枠です

link

role=で与えられます
Twitterが用意してくるリンクは大抵はこの中にあります

regionbutton

role=で与えられます
でっかい組み分けの箱と要素はこれです

card.layoutLarge.detailcard.layoutSmall.detail

data-testidで与えられます
説明文がバグを起こすので削除しました

スマホ対応について

例えばiPhoneSafariだと現時点ではうまく動作していません
ちょっとよくわからん,ユーザールールの動作条件がPCとは違うらしいですコンテンツセキュリティポリシーという存在のせいでAdGuardの動作そのものが制限されている可能性がありますね…
解決したらまた追記したいです

最後に

この記事は改善していくので,告知があれば最新版のルールを使った方がいいです
あとTwitterは無●