様々なブラウザ機能を検知するModernizrは便利で使っている人も多いはず。でも独自テストを追加できるAPIが用意されている事を知らない人も結構いると思う。今日はAdBlockユーザだけにメッセージを表示するデモを使ってModernizrのテスト追加APIを紹介したいと思う。

Modernizr.addTest

独自のテストを追加するにはModernizr.addTestに機能名とテスト関数を渡せばいい。公式のドキュメントに火曜日かどうかを検知するテストが例として出ているので、これを見たらすぐ使い方が分かる。

Modernizr.addTest('itsTuesday', function() {
 var d = new Date();
 return d.getDay() === 2;
});

テストはtrueかfalseを返す関数を渡せばいい。trueならその機能をブラウザが持っていいて、falseならその機能が使えないという事だ。ただ、火曜日かどうかをテストしても面白く無いので、もうちょっと実用的にAdSenseがブロックされているかどうかを判定するテストと書いてみた。

window.addEventListener("load", function(){
  Modernizr.addTest('adsense', function(){
    return typeof adsbygoogle !== "undefined" && adsbygoogle.loaded === true;
  });
}, false);

AdSenseは広告コードを読み込むとadsbygoogle.loadedにtrueを設定するようなので、これをチェックしている。よく、アドブロックソフトを使っている人向けに「お願いメッセージ」？を表示しているサイトがあるが、Modernizrにテストを追加すると簡単に制御できる。uBlock Originをインストールして確認して見たが、とりあえずうまく機能しているようだ。(ここをハードリフレッシュしないと確認できないよ！）

jsbinのデモはこちら

余談だが、アドブロックの解除依頼メッセージは、ほとんど効果が無いというのを何処かで読んだ気がする。わざわざアドオンをインストールするような人は「お願い」程度では心が動かないということなのだろう。