【広告ブロッカー】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つに変換する必要がある，さすがに人力ではダルいので[専用ツールサイト](http://www.russellcottrell.com/greek/utilities/SurrogatePairCalculator.htm)の利用を推奨する（例：🍤=>`\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()`](https://kb.adguard.com/en/general/how-to-create-your-own-ad-filters#pseudo-class-matches-attr)と特定のパラメータを用いて検査の対象の`div`を決め打ちし，[`:contains()`](https://kb.adguard.com/en/general/how-to-create-your-own-ad-filters#pseudo-class-contains)と各種のワードで検査して引っかかった`div`を不可視化している
`> div >`はどうやら`div`の階層構造の深さを表すらしい…が，今のところ1個だけの状態が最もパフォーマンスが良い
そしてワンライナーで複数の`div`を選定しているのでリストも1つで済む，フィルタリングがより快適になった

本来なら[`:remove()`](https://kb.adguard.com/en/general/how-to-create-your-own-ad-filters#pseudo-class-remove-and-pseudo-property-remove)して少しでもブラウザを軽くしたかったのだが，非常によくバグる（Something Wrong is ~...の表示）ので断念
他のブラウザ用フィルタの拡張機能では同じ関数が使えないので，ほぼAdGuard専用になっていると考えて良い


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



# 詳細な補足


## 仕様について
本来のコンテンツブロックは，basec ruleとしてドメインごとに挙動を設定できることが出発点であり，その次にCSS上の設定値や[擬似クラス](https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes)を利用して要素を指定して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のユーザールールのリファレンス（最新版）](https://kb.adguard.com/en/general/how-to-create-your-own-ad-filters)に沿いつつ設計することをお勧めします<
~~ただし[`:has()`セレクタ](https://kb.adguard.com/en/general/how-to-create-your-own-ad-filters#pseudo-class-has)はCSS 4.0で実装されると策定されただけなので，現状[どのブラウザでも未実装](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)です，使えないので注意しておきましょう~~なので，公式リファレンスにある通り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個にまとめた<br>
`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とは違うらしいな~~[コンテンツセキュリティポリシー](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)という存在のせいでAdGuardの動作そのものが制限されている可能性がある
解決したらまた追記したい



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