uBlock OriginでWebページの不要な要素をブロックする方法【CSSセレクタ・XPath活用】

ブラウザの拡張機能を使えば、Webページ上の見たくない部分を自由に非表示にできます。広告やポップアップ、余計な情報を取り除くことで、インターネット上の情報収集に集中でき、作業効率も大きく向上します。

このような機能を持つ拡張機能は数多くありますが、本記事では多くのユーザーがすでに導入している「uBlock Origin」を取り上げます。まだインストールしていない方は、この機会にぜひ導入を検討してみてください。

uBlock Originとは?

uBlock Originは、主要なすべてのブラウザで利用できる無料・オープンソースの広告ブロッカーです。さらに、ページ上の任意の要素を削除できる「要素ピッカー(element picker)」ツールを備えており、本記事ではこの機能を中心に解説します。

CSSセレクタやXPathの知識があると理解しやすいですが、必須ではありません。uBlock Originには、技術的な知識がなくても要素を選択できるビジュアルツールが用意されています。ただし、セレクタを手動で記述したほうが、より確実に意図どおりに動作する傾向があります。

要素をブロックすると何が良いのか

私たちは日々インターネット上で大量の情報を目にしていますが、その多くは自分にとって無関係なものです。

特定のサイトを頻繁に利用しているなら、不要だと分かっている情報をあらかじめ除外しておくことで、生産性を大きく高められます。そもそも目に入らないようにすれば、余計な情報を処理する時間と労力を省けるからです。

具体的には、次のような使い方が考えられます。

• アクティビティフィードやSNSのタイムラインから、特定の種類のイベントを消す
• 意図しない操作を促すポップアップを消す
• YouTubeやSNSで、特定の投稿者の投稿を消す
• 注意を引いてしまう動的な要素や気を散らす要素を消す

HTML要素をフィルタリングする方法

まず、ブラウザ上部にあるuBlock Originのアイコンをクリックし、スポイト(ピペット)アイコンの「要素ピッカー」を選択します。

削除したいコンテンツを選択するところから始めます。最初の選択範囲が完璧でなくても問題ありません。あくまで出発点にすぎません。

右下にパネルが表示されたら、「Pick」ボタンやスライダーなどのビジュアルツールを使うか、セレクタを手動で直接指定します。

赤くハイライトされた部分が、「Create」ボタンを押したときに削除される対象です。設定は保存されるため、ページを再読み込みしても、後日同じページを訪れたときにも反映され続けます。それでは、実際の使い方を見ていきましょう。

CSSセレクタ

静的なコンテンツの削除であれば、ほとんどの場合、CSSセレクタだけで簡単に対応できます。

XPath

XPathを使いたくなる場面は、主に次の2つです。

• 要素の値(テキスト内容)を条件として判定したいとき
• 子要素の属性をもとに、親要素を選択したいとき

これは、動的コンテンツやユーザー生成コンテンツの削除に特に役立ちます。削除したいのは要素全体なのに、条件に一致するのはその内部の一部だけ、というケースですね。

フィルタがうまく機能しないときの対処法

Webサイトはメンテナンスや更新など、さまざまな理由で常に変化しています。そのため、作成したセレクタはいつ壊れてもおかしくありません。

とはいえ、それを理由に諦める必要はありません。「いつか修正が必要になるかもしれない」と心に留めておくだけで十分です。

セレクタを設計する際のポイントは、削除したい対象に限定しつつ、ページ上の他の要素を誤って選択しない程度に厳密にすることです。

また、クライアントサイドの改変を嫌うサイトの中には、HTMLの属性値を恣意的に変更したり難読化したりして、対策を妨げてくるものもあります。

そのような場合は、CSSの属性セレクタを使うか、XPathで属性値を部分一致させるのが有効です。

フィルタを削除する方法

ブロックする必要がなくなった場合や、サイト側の変更で古いフィルタが邪魔になっている場合は、設定画面から該当するフィルタを削除してから、新しいフィルタを作り直しましょう。

カスタムフィルタを削除する手順は次のとおりです。

1. uBlock Originの設定画面を開く
2. 「My filters(マイフィルター)」タブを選択
3. 削除したいフィルタの行を削除
4. 上部の「Apply changes(変更を適用)」をクリック
5. 対象のページを再読み込み

その他の便利な拡張機能

特定の種類のコンテンツをまとめて除去したい場合は、以下のような拡張機能も役立ちます。

検索エンジンの結果をハイライト・非表示にする

Highlight or Hide Search Engine Results(HOHSER)は、DuckDuckGoやGoogleなど、主要な検索エンジンに対応した拡張機能です。

ドメイン単位のブラックリスト機能は本来、検索エンジン側の標準設定として提供されるべきだと筆者は考えていますが、それが実現するまでの間は、この拡張機能を使えば好みでないドメインの検索結果を非表示にできます。

たとえば、次のようなサイトを除外できます。

• 再配布型や怪しいダウンロードリンクを掲載するサイト
• 偽クーポンサイトなど、SEO最適化されたジャンクサイト
• EU圏のユーザーをブロックするサイト

I don't care about cookies

I don't care about cookiesは、多くのWebサイトに表示されるCookie同意バナーを自動的に除去してくれる拡張機能です。これにより、面倒なCookie通知を自分で処理する必要がなくなります。

この拡張機能はCookie通知を隠そうとし、本当に必要な場合にのみCookieを受け入れます。

ただし、望ましくないCookieが保存されるのを防ぐため、uBlock OriginやPrivacy Badgerといった拡張機能との併用を強くおすすめします。

別の方法として、この拡張機能のフィルタリストをuBlock Originに追加することも可能です。ただしこの場合、Cookie通知のフィルタと広告ブロックのフィルタが一体化してしまう点に注意してください。この方法では、uBlock Originを無効化しているサイトでは、引き続きCookie通知が表示されてしまいます。

uBlock Originにカスタムフィルタリストを追加する手順は次のとおりです。

1. uBlock Originの設定画面を開く
2. 「Filter lists(フィルターリスト)」タブを選択
3. 一番下の「Custom(カスタム)」セクションまでスクロール
4. 「Import...(インポート)」を選択
5. https://www.i-dont-care-about-cookies.eu/abp/ を追加
6. ページ上部の「Apply changes(変更を適用)」を選択

まとめ

読み込むページのかなりの部分をブロックしなければならない状況に陥っている方にとっては、少し息苦しい時代だと言わざるを得ません。

それでも、どうしても必要だと感じているのであれば、本記事で紹介したテクニックが、あなたのネットサーフィンを少しだけ快適にする助けとなれば幸いです。