広告ブロッカーで干渉要素を隠す：一般的な考え方と文法の紹介 ｜ 少数派会員 π+Prime#
#Omnivore
ウェブページ上の干渉要素を遮断するニーズに応じて、この記事では広告ブロッカーにおける「修飾ルール」の基本原理と、その要素セレクター部分の一般的な制作思考を紹介します。
はじめに#
現在の混沌としたネットコンテンツエコシステムにおいて、広告ブロッカーはほぼ選択肢から必需品に変わりました。広告ブロックなしのブラウジング体験はほぼ受け入れられません。
しかし、単に広告ブロッカーをインストールするだけでは、満足のいく効果を得ることはできません。広告ブロッカーが依存するルールセット —— 本質的には遮断または隠すべき要素のリスト —— はコミュニティによって維持されており、品質はまちまちです。人気のあるルールでさえ、時間が経つにつれて多くの冗長性やエラーが蓄積されます。全てを網羅しようとすると、パフォーマンスが低下したり、誤って他の要素を遮断してしまうことがあります。
何を遮断すべきかは非常に主観的な判断です。視覚的な干渉が少なく、出現頻度が低く、プライバシートラッキングに関与しない広告は、実際には受け入れられるものであり、独立した小規模なウェブサイトに対して支援を提供する一つの方法です。（これは Better Ads や Acceptable Ads などのプロジェクトの主張でもありますが、両者は広告主との利益関係のために批判されています。）
逆に、厳密には「広告」でない要素も、リソースを浪費し、注意を奪う危険性があります。例えば、サイドバーに目立つ推薦パネルや、記事の中に強制的に挿入された自動再生動画、メール購読リクエストなどです。
したがって、自分の要求に完全に合致するルールセットを見つけることは非常に難しいです。たとえ Fanboy’s Annoyance List や AdGuard Annoyances Filter などの「迷惑」要素に対するルールセットであっても、一定のトラフィックと人気のあるウェブサイトの一部の干渉要素しかカバーしていません。理想的な効果を得るためには、自分で手を動かすことが避けられません。
ただし、広告ブロッカーの公式ドキュメント（例えば uBlock Origin や AdGuard）の説明は一般的に難解で、初めて触れるときには少しハードルが高く感じるかもしれません。そこで、この記事では初心者向けに、いくつかの一般的な考え方と対応する文法を紹介し、読者が自分の必要なルールを書く手助けができればと思います。
（注： 市場には多くの広告ブロッカーがあり、品質はまちまちで、ルールの文法もそれぞれ異なります。特に指定がない限り、以下の例は総合的に評価の高い uBlock Origin を基準とします。使用するブラウザがサポートされていない場合、AdGuard も使用可能で、両者の文法は大体において互換性があります。）
基礎知識#
ルールを書く前に、広告ブロッカーが使用するルールは主に二つのカテゴリに分かれることを理解する必要があります：
- 基本ルール（basic rules）、または遮断ルール（blocking rules）。このルールは特定のファイルアドレスに対して設定され、広告表示に必要なデータが読み込まれないようにすることを目的としています。したがって、URL の特徴が明確な（例えばファイル名やパスに固定のパターンがある）広告リソースファイルやトラッキングスクリプトを遮断するのに適しています。このルールだけがプライバシーを保護する役割を果たします。
- 修飾ルール（cosmetic rules）、または隠蔽ルール（hiding rules）。このルールは特定のページ要素に対して設定され、ページ上の広告がある部分を隠すことを目的としています。したがって、URL の特徴で区別しにくいが、ページ上の出現位置に規則性がある要素を遮断するのに適しています。また、通常のルールの補足として、読み込まれない広告部分がページ上に残す空白を隠すためにも使用されます。
（カスタム CSS スタイルや JavaScript スクリプトを注入するような、より複雑なルールは一部の広告ブロッカーが独自に実装しているもので、汎用性が不足しているため、この記事では触れません。）
この記事で扱う干渉要素の遮断シーンにおいては、この種の要素は大抵、テキストとメディアファイルの両方を含み、位置的にも主なコンテンツと交互に配置されているため、遮断ルールを使って遮断するのは便利でも現実的でもありません。したがって、主に修飾ルールが使用され、「目に見えないことで心が煩わされない」ことを追求します。したがって、以下では修飾ルールを重点的に紹介します。
修飾ルールの一般的な形式は次の通りです：
example.org##selector
ここで、区切り記号 ## の前がルールが対象とするドメイン名で、後の部分が遮断する要素の表現です。
どの要素を遮断するかを指定するには、主に CSS セレクタ（CSS selector）を使用します。
挿話：CSS セレクタの概要
もし CSS とは何か やその動作メカニズムに不慣れであれば、簡単な説明をします：ウェブページの外観は「コンテンツ」と「スタイル」の二つの部分によって決まります。例えば、ウェブページ上の「どんな文字があるか」はコンテンツの問題で、「どのフォントを使うか」はスタイルの問題です。「何の画像を表示するか」はコンテンツの問題で、「画像のサイズや動き」はスタイルの問題です。など。
CSS は、スタイルをコンテンツに適用するための一連の文法ルールです。セレクタはこのルールの一部であり、「どのコンテンツを装飾するか」を決定する機能を持っています。選択の基準は次のようになります ——
- 要素の種類、例えば一級見出し
h1、画像imgなど； - class（クラス）、関連する要素のグループを分類するためのカスタム「タグ」と理解できます；
- id（識別子）、特定の要素を識別するための専用のカスタム名と理解できます；
- 要素の任意の属性、例えば特定の URL を指すリンク
a[href="https://example.com"]； - 要素の特定の状態、例えばマウスがその上にある要素
:hover、最初の子要素:first-child； - ページ上で認識可能な特徴を持つが、コードレベルで対応する要素がない部分、例えば特定の要素の直後の位置
::after、段落内の最初の文字（::first-letter）；または - 上記の組み合わせ。
このように、CSS セレクタはウェブページ上の要素を指定するための十分なツールを提供します。また、すべてのブラウザがサポートする汎用文法であるため、CSS セレクタを使用して遮断する範囲を指定することは非常に合理的な選択です。
したがって、特定の干渉要素を遮断する修飾ルールを書くためには、関連する要素を選択できる CSS セレクタを見つけることが本質的です。実際、修飾ルールの基本的な動作原理は、現在のページに選択された要素に対してスタイル display: none !important を注入することです。これは「その要素を表示しないようにし、すべての反対の規定を無視する」という意味です。
どうやって見つけるのでしょうか？ユーザーが修飾ルールをカスタマイズしやすくするために、ほとんどの広告ブロッカーは「選択して遮断する」機能を提供しています。例えば、以下の画像は uBlock Origin の「要素セレクタ」モードで、ページ上で右クリックして Block element を選択するか、プラグインウィンドウでスポイト形のボタンをクリックして開くことができます。
要素セレクタモードでは、マウスでページ上の遮断したい部分をクリックすると、uBlock Origin が自動的にその対応する CSS セレクタを記録し、ルールリストに追加します。（左右のスライダーはそれぞれ選択範囲の「深さ」と「広さ」を微調整するためのもので、これらをクレーンゲームのアームの高さと開閉幅を制御するものとして想像できます。）
これは便利に見えますが、現在では満足のいく結果を得ることがますます難しくなっています。明らかに、修飾ルールが十分に効果を発揮するためには、そのセレクタの書き方が「代表的」でなければなりません。現在のページにのみ有効なルールはあまり意味がありません。これが要素セレクタの欠点です：それはしばしば選択された要素の属性を機械的にコピーするだけで、その結果はしばしば上の画像のような難解で冗長なルールになります。
これらの「無駄なルール」の原因と問題は後で具体的に説明しますが、直感的にそれらが範囲を「具体的」にしすぎて、代表性を失っていることがわかります。
広告ブロッカーの機械的な要素選択ツールに依存する代わりに、この記事ではブラウザに内蔵されている DevTools（開発者ツール）の検査機能を使用することをお勧めします。ウェブページの空白部分を右クリックして Inspect（または Inspect Element、要素を検査などの類似メニュー項目）を選択するか、F12 を押して開くことができます（Safari では先に手動で有効にする必要があります）。
検査器のインターフェースの主体は、現在のページ内のすべての要素のツリー構造（DOM）です。左上の矢印ボタン（Safari では右上のターゲット形ボタン）をクリックすると、ページから要素をハイライト選択し、DOM 内でその位置を特定できます。
これらの前提を踏まえて、以下では一般的な干渉要素の遮断ルールのカスタマイズ思考をいくつか紹介します。
class、id、または他の属性の値に基づいて要素を遮断する#
前述のように、class と id はそれぞれウェブ要素の「分類タグ」と「専用名称」に似ているため、ウェブ要素を識別し、位置を特定する上で重要です。干渉要素の遮断の文脈において、class と id をマッチさせることは通常、遮断ルールを書く最も効率的な方法です。
class と id の値に基づいて要素を遮断する文法はそれぞれ次の通りです：
.value
#value
ここで value は class または id の値です。
どの値を選択してマッチさせるかについては、一般的に ad（広告）、promo（プロモーション）、popup（ポップアップ）、cta（call to action、操作ガイド）などの機能に関連するキーワードや、video（動画）、banner（バナー）、carousel（カルーセル画像）などの形態や形式に関連するキーワードに注目できます。
逆に、row-span-2（「グリッドレイアウトの 2 行分を占める」）や、col-md-6（「中程度以上のサイズのデバイスでグリッドの 6 列分を占める」）のような名称は一般的に考慮しない方が良いです。これらの名称は、Tailwind や Bootstrap などの CSS フレームワークを使用して生成されたもので、要素のページ内でのレイアウトを指定するためのものであり、これらを使用して要素を特定することは十分にターゲットを絞ったものではなく、サイトのレイアウトが微調整されると簡単に無効になる可能性があります。
以下に例を挙げます。下の画像に示されている 9to5Mac ページでは、文末に埋め込まれた「関連動画」は、非常に自己中心的なデザインの一例であり、単にトラフィックを引き寄せるために大量のウェブスペースを占有し、ユーザーには何の価値もありません。検査器を使用すると、この動画は div 要素内にあり、その class 名は非常に明確な article__youtube-video であることがわかります。
したがって、対応する遮断ルールは次のようになります：
9to5mac.com##.article__youtube-video
同様に、以下のルールを使用してコメントセクションを遮断できます：
9to5mac.com###comments
（ここでは 3 つの # に注意してください。最初の 2 つは区切り記号で、3 つ目は id セレクタのマークです。）
しかし、これは最も単純なケースに過ぎません。多くの場合、見える class 名は次のようなものかもしれません：
ここでは、クラス名に「offer」という単語が含まれているため、これが広告バナーに対応するクラスであることがわかりますが、完全なクラス名をそのままルールに書くと、すぐに無効になる可能性があります。
これは、上記のクラス名の末尾にある __LvD17 がウェブ開発フレームワークによって生成されたランダムな文字列であり、サイトのバージョンが更新されるたびに変わるためです。しかし、これを行う目的は、ユーザーと「かくれんぼ」をするためではなく、手動でクラスを命名することによる操作の煩雑さや名称の衝突を避けるためであり、大規模なサイト開発では主流の手法です。当然、その副作用として、ウェブコードの可読性が低下し、要素を遮断する難易度が上がることになります。
しかし、方法はあります。CSS セレクタは属性値の部分（サブストリング）をマッチさせることができるため、具体的には次のようになります：
| 文法 | 意味 |
|---|---|
| [class^=value] | クラス名の先頭が value の要素を選択 |
| [class$=value] | クラス名の末尾が value の要素を選択 |
| [class*=value] | クラス名の任意の位置に value が含まれる要素を選択 |
（上記の文法の括弧の前に i を追加すると、例えば [class^=value i] など、マッチが大文字小文字を区別しなくなります。）
したがって、[class^=inlineoffer]（先頭をマッチ）や [class*=inline-img-offer-container]（中間部分をマッチ）を使用することで、上記の広告バナーを選択できます。どちらがより良いかについては標準的な答えはなく、試行結果に基づいてケースバイケースで判断する必要があります。一般的に、長い名称はより具体的であることを意味し、誤って他の要素を遮断するのを避ける利点がありますが、ルールを書く作業量が増え、同類を「一網打尽」にできるはずのものに対して多くのルールが必要になる可能性があります。
ここでは、短い inlineoffer（文字通り「行内広告」）が干渉要素であることは明らかであり、誤って他の要素を遮断することを心配する必要はありません。テストして確かに効果があることがわかれば、選択できます。
また、前述のように、class と id は特別な地位を持つ HTML 要素の属性に過ぎず、本節で言及したセレクタ文法は他の任意の属性にも適用できます。例えば、下の画像に示されている The Economist ページでは、右側の広告要素はカスタム属性 data-test-id の値によって識別できます。
したがって、次のようなルールを使用して遮断できます：
www.economist.com##[data-test-id="right-hand-rail-ads"]
経験上、干渉要素を識別するのに役立つ他の属性には data-ad-type、data-ad-zone、role、src、aria-label などがあり、注意深く観察すれば一般的な規則を見つけることができます。
位置の特徴に基づいて要素を遮断する#
class、id、属性セレクタを使用することで多くの遮断ニーズに効果的に対応できますが、これらのセレクタは属性値のパターンを見つけることに依存しており、常に可能であるとは限りません。場合によっては、干渉要素の属性特徴が明確でないが、出現位置が比較的固定されていることがあります。この場合、関係セレクタ（combinators）—— 階層と位置関係に基づいて要素を選択する —— がより良い選択肢です。
情報を読む
全文字数 5451 字
この記事を読むのにかかる時間は 9 分です
フォントサイズの選択
小
中
大