FirefoxでAdblock Plusアドオンを使い出したが中々良い。アフィや広告を見なくて済むし、アクセスしにいかないから読み込み速度も早くなる。
アドオンの場所は ttps://addons.mozilla.org/ja/firefox/addon/adblock-plus/ 。
フィルタ設定（Ctrl-Shift-E）の画面で「控えめな広告を許可」というのがあるが、設定内容を参照すると@@||googleやamazonと書いてあって遮断しない設定になるから、許可を外しておこう。@@は例外ルールという意味。
フィルタ購読で誰かが作ったフィルタを使うこともできるが、自作フィルターを作るのが良い。
フィルターの作り方
「フィルタ設定（Ctrl-Shift-E）＞自作フィルタ＞フィルタを追加」でフィルターを追加すれば有効になる。
英語だけど公式サイトの ttps://adblockplus.org/en/filters にフィルターの書き方が書いてある。分からないことは辞書を片手に解読するか、翻訳サイトを通すかして何とか読もう。（追記）「Writing Adblock Plus filters」で検索すれば日本語訳サイトが見つかるが、websocketが載ってないなど、ほんの少しだけ古い。
| フィルター例 | 解説 |
| ##a[href*="amazon"] | 自作フィルターその１。##aは<a href="http://amazon.co.jp/xxx">があった時の<a>タグに適用するという意味。全体としてhrefがamazonという文字を含む(*=)と遮断するという意味。つまり、amazonへのリンクがあるものが全部遮断される。 |
| @@||amazon.co.jp^$document | 自作フィルターその２。直接amazon.co.jpのページを見た場合に普通に見れるようにする。@@は例外ルールの意味。||はhttp://とhttps://の両方という意味。^はamazon.co.jp.comというサイトが万一あった場合に外すために最後尾に付けた区切り文字。$以下はオプションの意味。documentはページに合致した場合に他の全フィルターを適用しないようにするという意味のようだ。最初よく分からなかったが、このオプションを外して再読み込みをして、ブロック可能項目一覧を開く（Ctrl-Shift-UもしくはCtrl-Shift-V)の結果を見比べたら何となく分かった。自作フィルター１と２を入れるだけで広告が大きく減るのが実感できるはず。 |
| ||shinobi.jp^$third-party | 最初から購読されているフィルタEasyListに入ってる。ホスト名を書くやり方が標準的だと思うので、解説用に取り上げた。shinobi.jpというサイトを遮断するという意味。third-partyオプションは見てるページのURLと別のURLを見に行く場合に遮断するという意味。直接shinobi.jpのURLを開いた場合に適用されない。 |
| ||google-analytics.com^ | 自作フィルターその３。googleに追跡されないようにする（笑）。 |
以下、追加。
| 追加フィルター例 | 解説 |
| syosetu.com##div[id="container"] div.koukoku_728 もしくは syosetu.com##.koukoku_728 もしくは syosetu.com###container div[class="koukoku_728"] | 他作フィルターその１。解説用。小説になろう(syosetu.com)のclass="koukoku_728"の文書要素をフィルター。##以下がjavascriptのquerySelectorAllに対応している。Webコンソール(Ctrl-Shift-K)を開いてdocument.querySelectorAll('div[id="container"] div.koukoku_728')とタイプすれば文書要素が返ってくる。左の３番目の例は#containerがid="container"に対応していることを示す。###に意味がある訳ではない。 要するに##以下はCSSセレクタと同じなので#とか>とか+とか:not()とかも使えて非常に柔軟にフィルターできる。 少し不便ではあるが、##を使う場合、||や$third-partyなどのオプションが一緒に指定できなくなるようだ。 ##は、要素の隠蔽（Element hiding）で非表示にしているだけで、ネットワークリクエストのブロックは行わない為と思われる。 |
Adblock Plus(ABP)では、インラインスクリプトはブロックされない。インラインスクリプトはHTML内のSCRIPTタグ内に直接記述されたjavascriptのことだ。ブラウザのNetworkパネルに出てこない項目はブロックしない方針と思われる。
uBlock Origin(uBO)を使えば、$inline-scriptと記述することによってインラインスクリプトをブロックできる。通常のスクリプトもブロックしたいなら、$inline-script,scriptと両方指定する必要がある。
これを使いこなすにはページのソースを見ないといけない。そのためのショートカットキーと技を紹介。
- Ctrl-Uでページのソースを表示。
- ページの調べたい要素を右クリック＞要素を調査(Q)でその要素が選択された状態で開発ツールが立ち上がる。
- Ctrl-Shift-UもしくはCtrl-Shift-Vでブロック可能項目一覧を出して、アドレスを選択すればその要素の外枠が点滅する。また、ここで赤文字になった要素がフィルターの条件に合致したものと分かる。
- Ctrl-Shift-KでWebコンソールを開いてCtrl-Shift-Rでキャッシュ上書き更新すれば要素ごとの読み込み時間が分かる。
- FirefoxのアドオンのHttpFoxが外部通信の状況を見定めるのに使える。ツール（Alt-T）＞Web開発(W)＞HttpFoxで起動。
フィルター作ったのはいいが、このページはフィルターなしで見たいと思ったら、アドオンバーのアイコンから無効化できる。
以上、レガシー版FirefoxのAdblock Plusの説明。Quantum FirefoxやGoogle Chromeの最新のAdblock Plusは様変わりしている。以下、Google ChromeのAdblock Plusの説明。
Google Chrome版 Adblock Plus におけるフィルター結果の確認方法（2018/12/06追記）
開発ツール(DevTools)のパネルで確認できる。
閲覧中のページからCtrl-Shift-I(もしくはF12)でDevToolsを起動。
フィルター結果は、DevToolsのAdblock Plusパネルで確認できる。Networkパネルでも確認できるが、Adblock Plusパネルには、どの購読フィルターのどのフィルター項目でブロックされたかが表示される。また、Adblock Plusパネルを一度開いてからリロードしないとフィルター結果が表示されない。
左上のShowにblockedを選択すれば、ブロックされた項目だけが表示される。左上のtypeにSCRIPTを選択すれば、SCRIPTの項目だけが表示される。
気づきにくいが、Ctrl-Fを押して最下段に入力した単語で表示結果をフィルターすることができる。
また、Ctrl-Aで全選択してCtrl-Cを押して全部のテキストをコピーすることもできる。
Adblock Plusパネルは、レガシー版Firefoxにあったブロック可能項目一覧の代わりを果たしている。
また、Adblock PlusパネルでCtrl-Shift-Iを押すとDevToolsのDevToolsが開く。iframe内にあるのでdevtools-panel.htmlを選択すれば、Adblock Plusパネルに対してConsole上でjavascriptを動かすことができる。ブロックされていない項目についてホストごとにカウントして表示するjavascriptを作ったが、ブロック漏れを探すのに便利。
{
d={};
f=url=>url.match(/^https?:\/\/(.*?)\//)[1];
a=$x('//tr[not(@data-state="blocked")]//a[@class="url"]').map(a=>a.getAttribute("href")).map(f);
a.forEach(b=>{d[b]=d[b]?d[b]+1:1});
d;
}
感想(2018/12/06追記)
フィルターの分類として、広告フィルターと追跡フィルターがある。別の分類として、日本フィルターと海外フィルターがある。
オススメの豆腐フィルターは広告フィルターかつ日本フィルターだ。豆腐フィルターのみでは、追跡スクリプトや海外サイトをフィルターすることができない。
ABP(Adblock Plus)の「設定＞全般」の「トラッキングの追加ブロック」で有効になるEasyPrivacyが海外のトラッキングフィルターとしてオススメだ。追跡しないことで有名なduckduckgoや、githubにおいて追跡ブロックが見られた。
UBrock Origin内のフィルター一覧が怪しい。プライバシーの「Fanboy’s Enhanced Tracking List」を見ると、「@@/advertisement.js$script,xmlhttprequest」とか広告フィルターを無効化する除外設定が多数含まれており、マルフィルターとしか思えない。
Firefox ESR 52.9で海外の怪しいサイトを完全防衛しようと$script,xmlhttprequest,ping,websocket,object,object-subrequest,webrtc,domain=xxx.comと記述したらAdblock Plus 2.8.2がこの記述に未対応だった。ここからwebrtcを除くと受理された。
このように最新の記述方法と古いバージョンとで少し乖離が見られた。豆腐フィルタは[Adblock Plus 2.0] と書かれており、古いバージョンに従っている。最新のフィルターが使えるので、やはり自作フィルターを作るのが良いと言える。
最近、改めて公式サイトの ttps://adblockplus.org/en/filters のフィルターの書き方を読んだ。グーグル翻訳がとても優秀。HTMLやCSSを学んだこともあり、ローカルホストにウェブサーバーを立てて自分でHTMLを書いてフィルターを試したらとてもよく理解できた。
複数のブラウザを使っている場合、自作フィルターを何度も転記するのが面倒だ。ローカルホストに軽いウェブサーバーを常時立て、ファイアーウォールで外部からのアクセスを遮断し、自作フィルターを購読フィルターにすると捗る。
ローカルウェブサーバーの自作フィルターを購読させる方法(2020/07/06追記)
- URL からフィルターリストを追加をクリック
- 入力欄を右クリック→検証
- <input pattern="^(?:data|https):.*$" >を<input pattern="^(?:data|https|http):.*$" >に修正。
- http://から始まる自作フィルターを購読させられる
Adblock Plus 最強のフィルター(2018/12/12追記)
最強のフィルターを思いついてしまった。
* @@*.css|
たった２行なので、フィルター多すぎ症状で重くならない。
１行目ですべてブロックし、２行目でCSSのみ例外でブロックしない。大抵のサイトをレイアウトを維持したまま安全かつ高速にブラウズできるはずだ。さらに例外で画像の拡張子を入れてもいいかもしれない。
Adblock Plus(ABP)が最初のネットワークリスエストをブロックしないことを利用している。uBlock Origin(uBO)は最初のネットワークリクエストをブロックするので、uBOではこのフィルターを使用できない。
*$domain=asahi.com @@*.css|$domain=asahi.com
特定のサイトだけをこの方法で最強に防御して閲覧したい場合は$domainを付ける。説明のために使っただけで、朝日はよく利用する良サイトです^^
$domain=asahi.comだけではABPパネルでブロック色に変わるのに、実際にはブロックされていない。ABPのバグ。
$domainとホスト名によるフィルターの違い
ホスト名によるフィルターは「||host_name/*.js|」のホスト名のこと。ホスト名は各ネットワークリクエストにおける取得先のホスト名。$domainは閲覧しているページにおけるホスト名のこと。
hostAのページ(ttp://hostA/index.htm)を閲覧している場合、$domain=hostAとすれば、閲覧しているページから発生するすべてのネットワークリクエストに対してそのフィルターが適用される。
Adblock Plus(ABP)でインラインスクリプトをブロックする方法（←知らなかった）
- ABP3.1から$cspフィルターオプションがサポートされた。
- $cspフィルターオプションは、追加のContent Security Policiesを注入することができ、リクエスト、フレーム、画像、スクリプトなどをブロックすることができる。
- フィルター「 ||example.com^$csp=script-src 'none'」 は、ドメイン example.com からロードされたドキュメントで実行されるすべての JavaScript (インラインを含む) をブロックする。
(ttps://adblockplus.org/development-builds/added-support-for-the-csp-filter-option )
ありがとうございます
最終的にこの記述で落ち着きました
”プロモーションする”がいちいち自分のツイートの下部に表示されて鬱陶しい人はABPアドオン(拡張機能)入れて
'twitter.com##a[href*="/quick_promote_web/intro"]'とすればOK