ウェブプログラミングの知識があるとできること（その１）

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。
ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。

きっかけ
調査
- 1. プログラムの書かれたファイルを入手する
- 2. プログラムを読む
まとめ

きっかけ

先日、最新の記事だけが以下のように表示されてしまうブログに出会いました。（※ これは実際に見た画面ではありません）

一瞬何が起きているのだろうと戸惑いましたが、そこに書いてある文章を読むと、どうやらブラウザが広告の表示をブロックしていると最新のコンテンツが見られないようです。

その時 Chromeブラウザでそのブログを見ていたのですが、私は Adblock Plus という Chromeの拡張機能を入れているので、これが原因なんだなと納得しました。

しかし、どうやって広告ブロック機能を検出して表示を切り替えているのかが気になったので調べてみることにしました。

調査

1. プログラムの書かれたファイルを入手する

まず、先程の画面に表示されていた「Sorry, AdBlocker!」という文字列で、Google検索したところ、「Sorry AdBlocker – 広告ブロックツール対策プラグイン – at will」（2021年現在リンク切れになりました）というページが見つかりました。どうやら、WordPress のプラグインのようです。ということであれば、プログラムのソースコードを見ることができそうです。
ちょうど、そのページ上に「WordPress公式ディレクトリ」へのリンクがありましたのでクリックします。

WordPressプラグインのページが開きました。

Downloadのボタンを押して、プラグインをダウンロードします。

2. プログラムを読む

ダウンロードした zipファイルを解凍します。

2-1. まずは `readme.txt` を読む

このプラグインが動作するには、記事周辺部分のHTMLタグが持つべき属性がいくつかあるようで、サポートされているWordPressのテーマが書いてあります。

2-2. `sorry-adblocker.php` を読む

これは PHPというプログラミング言語で記述されたファイルです。
いくつか関数が定義されており、WordPress 側のイベントに登録しているようです。
「最新記事の投稿IDを変数にセットする」を行うJavaScriptコードが記述された scriptタグや、プラグイン独自のスタイルシートのクラスが記述された styleタグを headタグ内に出力する関数があります。
- 例えば wp_head という文字列を Googleで検索してヒットする以下のページを読むと、ここに関数を登録すれば、headタグ内に任意の文字列を出力することができると分かります。
  - プラグイン API/アクションフック一覧/wp head – WordPress Codex 日本語版
  - 関数リファレンス/wp head – WordPress Codex 日本語版
このプラグインが用意した独自の JavaScriptファイルを読み込ませる関数があります。
広告ブロック機能を検出した場合に表示するHTML文字列をフッターに出力（非表示の状態で）する関数もあります。
あとは、WordPressの管理画面でいくつか設定（非表示にしたコンテンツの代わりに表示する内容が設定できる）するための関数があります。

2-3. `js`フォルダ内の `sab.js` を読む

この JavaScriptファイルはブラウザに読み込まれます（先程のPHPファイルに記述されていました）。
最初の部分は「FuckAdBlock 3.2.0」と書いてあり、これはそういう名前のプログラムを他所から拝借しているようです。
- これです → GitHub – sitexw/FuckAdBlock: Detects ad blockers (AdBlock, …)
- ざっとこのページを読みますと、これはブラウザが AdBlockのような広告ブロック拡張機能を導入しているかどうかをチェックするプログラムのようです。
後半の `Sorry, AdBlocker’ とコメントされている部分がこのプラグインの独自コードです。
ここでは、FuckAdBlock を利用して広告ブロック機能が存在しているか判断しています。
「広告ブロック機能が存在している」且つ「最新記事が画面上に存在している」のであれば、フッター部分に非表示で用意しておいた代替HTML文字列で最新記事に上書きします。

2-2 と 2-3 から、広告ブロック機能を検知した後、最新記事を書き換えている仕組みがだいたい分かりました。

2-4. FuckAdBlock について調べる

改めて FuckAdBlock について調べます。

GitHub – sitexw/FuckAdBlock: Detects ad blockers (AdBlock, …) の ‘Install via’ を見ると、

Download "fuckadblock.js" and add it to your website.

と書いてありますので、実際に必要なファイルは fuckadblock.js のみであり、このファイルを読めばやっている処理が分かるはずです。

また、sab.js 内には “FuckAdBlock 3.2.0” という記述がありますので、GitHub – sitexw/FuckAdBlock: Detects ad blockers (AdBlock, …) の Tag のところで v3.2.0 を選択します。そうして表示された fuckadblock.js ファイルの中身を見てみますと、sab.js に記述されているのとだいたい同じだなというのが分かります。このページには使い方のサンプルコードが書いてありますが、この部分も sab.js 内のプラグイン独自コードで使われていることが分かります。

その上で、このコードを読みますと、どうやら以下の動作をしているようです。

AdBlock などが検知する divタグを生成する（餌をまく）。
- HTMLでできた広告がよく使う CSSの設定や CSSのクラス名をセットした divタグを window.document.body に追加する。
少し待ってから、1で作った div要素のプロパティ（幅サイズなど）が 0 になっているか等をチェックする。
- AdBlockなどが広告を見えなくするためにやることをチェックしている。
- チェック処理はループしている（最大ループ回数も指定できる）。
チェックの結果が真(true)なら AdBlock などが存在していると判断し、以下を実行する。
- 1で作った divタグを削除する（真にならなくてもこれは行われる）。
- チェックのループを止める。
- 登録されている関数を実行する（利用者が予め登録しておく関数）。

これで、広告ブロックの検知方法がだいたい分かりました。

まとめ

以上、知りたかった仕組みをほぼ理解することができました。

今回の作業は、HTML/CSS/JavaScript/PHP/WordPress/GitHub/HTTP/ウェブ検索スキルといった知識（多いですね^^;）があれば、1時間以内でできますし、いろいろなウェブサイトの他の仕組みも同じように調べることができます。ウェブに関するソースコードはオープンソースになっていることが多いですので、やる気さえあれば読んで理解することができるのです。

この調査で広告ブロック機能検知の方法が分かりましたので、更にこれを回避する処理をブラウザの拡張機能として開発することができないか？…など夢が広がります（かなり面倒そうですが）。

ウェブプログラミングができることのメリット・楽しさが少しでも伝わりましたでしょうか？また、面白い例がありましたら紹介したいと思います。

※ 今回調べさせて頂いた「Sorry AdBlocker – 広告ブロックツール対策プラグイン – at will」（2021年現在リンクが切れています）ですが、WordPressを使っている方で、ちゃんと広告も見て欲しい方は一度導入を検討されてはいかがでしょうか。