【広告ブロッカー】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(/AAA|BBB|CCC|([\uAC00-\uD7AF]|[\u1100-\u11FF]|[\u3130-\u318F]|[\uA960-\uA97F]|[\uD7B0-\uD7FF]|[\uFFA0-\uFFDF])+|\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08|\uD83C\uDF64/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/"="/.*1f3f3-fe0f-200d-1f308.*|.*1f364.*/"))
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/)のAAAやBBBや``CCCに正規表現として入れる それを含むツイートやユーザーは全て非表示になる(ユーザーページではユーザーの情報だけは見えてしまうけど) 正規表現検索を利用しているので**公式クライアントより正確に安全に条件を絞れるミュート機能**としての使い方が出来る 正規表現を用いた検索には[フラグ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags)として/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-attrとcontainsはどちらも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

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

通知をクリックした画面

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

通知をクリックした画面

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

ツイートから見れるやつ

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

ツイートから見れるやつ

listboxとlistitem

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

tablistとtab

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

userCell

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

articleとregion

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

option

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

link

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

regionとbutton

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

card.layoutLarge.detailとcard.layoutSmall.detail

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

スマホ対応について

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

最後に

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