AdBlockで決まり!」という対策を紹介しました。今回は更に発展させてWordPressのプラグインを使わずに、FuckAdBlockというスクリプトを利用して自前の対策をする方法を紹介します。解説の都合上WordPressの例で紹介しますが、それ以外のサイトでもJavaScriptとPHPが動作すれば問題なく動作します。Killer対策と雑感FuckAdBlockのダウンロードとWordPressへの導入まずgithubにあるFuckAdBlockのページからzipファイルをダウンロードします。WordPressのテーマフォルダに「js」というディレクトリを作成します。(この解説ではtwentytenの子テーマとしてtwentyten-childを利用している例で進めます)その「\wp-content\themes\twentyten-child\js\」の中に解凍した「fuckadblock.js」を保存します。続いて「functions.php」を開き、wp_enqueue_scriptsというアクションフックを利用してJavaScriptを登録します。'my_scripts_method');wp_enqueue_scriptsにmy_scripts_methodという関数で追加するというよくある例です。これでWordPressのheaderに「fuckadblock.js」が追加できました。FuckAdBlockの使い方githubにサンプルと解説がありますが、わりと控えめな解説なので補足を加えつつ解説します。以下がFuckAdBlockの最も簡単な使用例です。{fuckAdBlock.onDetected(adBlockDetected);fuckAdBlock.onNotDetected(adBlockNotDetected);}</script>13行目から18行目がAdblockを検知するコードです。‘undefined’)はfuckAdBlockという変数が存在するかを調べています。広告ブロックソフトがインストールされている場合はfuckAdBlockという文字列を無視するように設定されていることが多いので、フラグにしています。fuckAdBlock.onDetected()はAdblock検出時に実行される関数を指定します。fuckAdBlock.onNotDetected()は逆で、検出されない時に実行される関数を指定します。これが基本形ですが、githubのサンプルではfuckAdBlock.on()を使った例も紹介されています。fuckAdBlock.on()は第1引数にtureを指定するとAdblockが有効な場合に第2引数の関数を実行します。第1引数にfalseを指定するとAdblockが無効な場合に関数を実行します。adBlockDetected)はfuckAdBlock.onDetected(adBlockDetected)と同じ。adBlockNotDetected)はfuckAdBlock.onNotDetected(adBlockNotDetected)と同じ動作をします。他にも繋げた例も紹介されていますが、上のどちらかを使うのがわかりやすいと思います。FuckAdBlockのオプションFuckAdBlockは予め適切なデフォルト値が設定されています。そのため、あまり使用することはありませんが、オプションで細かく動作を制御することができます。デバックモードデバックモードを有効にする。出力はconsoleに流れます。trueチェックメソッドの実行trueで広告ブロックソフトの動作をチェックするためのループ(後述する)を実行する。falseにするとチェックするためのループを実行しない。trueこのオプションをfalseにしても、広告ブロックソフトをキャッチする仕組みは別にもあるので、正常にキャッチする可能性もある。検証処理終了時にイベントをリセットする具体的にはdetectedやnotDetectedイベントの開放。デフォルトはfalse。メモリ解放対策でしょうか、特別重い関数を登録する場合を除き、神経質になる必要はないと思います。trueループの時間を指定ループの1回あたりの時間をミリ秒単位で指定(解説は下参照)。50ループの回数を指定ループを実行する回数を指定。5デフォルトは以下のとおりです。default)これは、FuckAdBlockがAdBlockは無効と判定するためのループです。試しにデバックモードを有効にして、以下の設定で実行してみます。5});するとconsoleに以下のように出力されます。clearedこのように最初の1回目は即時に実行され、残りの4回が5秒間隔で実行されます。最終的には約20秒経過後にAdblockが無効と判定し、無効時の関数を実行しました。デフォルトでは5回のループで200ms後に無効時の関数を実行しています。ページの読み込み順序や広告ブロックソフトのタイムラグ対策としてこのような仕組みになっているようです。この時間を応用して関数にディレイをかけることも可能ですね。特定のクラスとスタイルを餌に広告ブロックソフトを動作させる。この動作をループで指定した回数実行する。(広告ブロックソフトはこの設定を広告と勘違いしてブロックする)スタイルを見てもらえば分かる通り、餌を設置する場所はブラウザで閲覧できる領域の遥か外なので、表示されることはありません。value);複数ある場合は以下のようにする。5});ループを停止するデフォルトはtureなのでfalseにする。loop」に変わり、ループは実行されない。手動でAdblockが有効な状態をテストするfuckAdBlock.emitEvent(true);tureにするとAdblockが無効でも有効な状態の時に呼ばれる関数を実行できる。反対にfalseにすれば無効な状態の関数が呼び出される。強制的に有効・無効をシミュレートして関数が実行される。全てのイベントを無効にするfuckAdBlock.clearEvent();引数はない。onDetectedやonNotDetectedで実行されるイベントを無効にできる。例外ページを実装するには良いかも。Adblock等を使った時のように、白のオーバーレイでサイトを見えなくして、メッセージを表示してみます。半透明のオーバーレイを実装する方法は沢山ありますが、今回はjQueryと組み合わせて使用するBlockUIを利用します。BlockUIはGitHubのページで配布されています。BlockUIの使い方は詳細に解説しませんが、ものすごく親切なデモページで詳しく解説されているので参考にしてください。FuckAdBlockの時と同じように「functions.php」にて登録します。fuckadblock.jsとjquery.blockUI.jsは子テーマのjsディレクトリに保存しました。jQueryはGoogleのCDNのものを利用します。'my_scripts_method');続いて「header.php」に以下のコードを追加します。'<ul><li>このサイトは広告費により運営されています。</li><li>広告ブロックを無効にしてください。adBlockNotDetected);}</script>adBlockDetected()にBlockUIを追加しました。「css:」はメッセージ用のCSS設定、「overlayCSS:」はオーバーレイ用のCSS設定になってます。この設定でAdblockを有効にすると以下のように表示されます。基本は上の例と同じです。表示する画像は子テーマに「images」ディレクトリを作成して「neko.png」という名前で保存しました。画像のパスを渡す必要があるので、get_stylesheet_directory_uri()を使って変数templatePathに代入しています。bodyの子要素としてdisplayBoxという要素を追加し、そこにBlockUIで画像を埋め込んでいます。‘px’の「382」を変更します。600の方は幅を指定します。以上の設定でAdblockが有効時に以下のように表示されます。猫画像を使いたいという方は「前回の投稿」でいくつかのパターンを紹介しているので、自由に使ってください。Adblockユーザーと、一般ユーザーのカウントを取得する方法どれくらい広告をブロックしているユーザーがいるのか把握したいという需要もあると思います。Analyticsのイベント機能を使うのが最適なのですが、Adblockは何の意図があるのかわかりませんが、Analyticsのコードもブロックするのでイベントは使えません。そこで、独自にカウントする仕組みを実装する必要があります。今回はできるだけ処理を軽く、汎用性を保たせるために、JSON形式のファイルにカウントを書き込む形式にしました。WordPressを利用しているのでデータベースへ書き込むというのも一つの方法です。カウント用のJSONファイルを作成まず以下の内容のカウント用のファイル「fab_count.json」を作成します。{"Detected":0,"NotDetected":0}作成したら子テーマのディレクトリへ保存します。JSONファイルを更新するためのPHPファイルを作成JavaScriptではJSONファイルを上書きできないのでカウントを書き込むPHPファイル「fab_count.php」を作成します。LOCK_EX);上のファイルと同じように子テーマのディレクトリへ保存します。「header.php」を開いて、上の画像表示用のコードを残しつつ、カウント用のコードを追加します。adBlockNotDetected);}</script>$.getJSONでJSONファイルを取得して、$.ajaxでfab_count.phpにカウントを渡しています。これでAdblockが有効な場合はDetectedがカウントされ、一般ユーザーはNotDetectedとしてカウントされます。大量のアクセスがあるサイトで負荷を軽減する方法これだと全てのアクセスをカウントするので、大規模サイトの場合問題が発生するかもしれません。そんな時はインクリメントの部分をサンプリングして書き込むようにすると負荷対策ができます。}});}1~10の値をランダムで取得して、1の場合だけカウントを10増やして書き込むという処理です。この対策をするとカウントは10人単位になります。規模や許容する負荷を加味して数字は変えてください。今回はFuckAdBlockを利用しましたが、同じく有名な対策としてAnti-Adblockがあります。Killerなるスクリプトが開発されています。ブラウザに導入するにはTampermonkeyをインストールして読み込むことで、Anti-Adblockを導入したサイトでも閲覧することができます。それはFuckAdBlockでも同じです。指摘するまでもなく、イタチごっこです。Killerのソースを見てみたところ「FuckAdBlock」という文字列をフラグに阻止しているだけのようです。Killerを無効化できました。テキストエディタで置換処理をすれば簡単に回避できます。プラグインにして配布する場合でも、名前にソルトを付ければ回避することはできます。「そこまでして広告を非表示で閲覧したいユーザーを排除する意味があるのか」という根本的な疑問も出てきます。Adblockユーザーには真っ白のオーバーレイを表示することで、「Adblockを入れると見たいWebサイトが正常に見られないからAdblockをやめよう」という、非暴力不服従の態度を示すのが一番の気がします。ちなみに、すでに骨格はできているのでWordPress用のプラグインを作ることは可能です。需要があるようなら作成します。コンテンツブロック対策について調べていたら、こちらのブログに行き着きました。素晴らしい対策方法で是非当方のブログでも導入してみたいと思いました。_)mよろしくお願いいたします。PMコメントありがとうございます。制作の依頼もありがとうございます。いつとお約束はできませんが、制作してみようと思います。気長にお待ちください。コメントをキャンセルコメントは認証制のため、すぐには反映されません。sukegra」をご利用ください。Share)Linuxの基本の基本。Share)他に運営しているサイトGOいけん世間を騒がせている、あの話題について言いたい。そんなあなたの「ご意見」を世に問うサイト。SUKEGRA「スケグラ」は日本語でプログラミングの悩みを解決するQ&Aサイトです。アクアリウムWikiアクアリウムに関することをみんなでまとめるWikiです。