某広告ブロックアプリを弄ぶ

何度か書いてるかもだけど個人的にはブラウザでウェブサイト閲覧の際に広告ブロック機能/アプリを使うこと自体は閲覧者の自由だと思っている。ただ気に喰わないのはその広告ブロックアプリで儲けようという奴ら。広告ブロックアプリを作って利用者に売りつけるだけならそれは正当だと思うけど、広告表示できるようにしてやるから金を出せ(金を出さなきゃ広告表示できなくしてやる)と広告出稿側を脅すのは誘拐犯のやり口。金を払った業者の広告は表示するというのでは結局はアプリ利用者も裏切っている。
あのアプリのことだけど。

今回はそういう話は置いといて、その某広告ブロックアプリを弄ぶ。

この「がとらぼ」は上に書いた某広告プロックアプリを有効にしていると一応表示できないことになっているので姉妹サイトの「悪いインターネット」の方にお遊びページを作ってみた。サンプルなので1ファイル完結。ソースは下。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>悪いインターネット adblockで遊ぶ</title>
</head>
<body style="margin:5%;">
<h1>adblockで遊ぶ</h1>
<div id="contentA" style="margin-top:30px;">
<span class="ads-area">昨日、近所の吉野家行ったんです。吉野家。 
そしたらなんか人がめちゃくちゃいっぱいで座れないんです。 
で、よく見たらなんか垂れ幕下がってて、１５０円引き、とか書いてあるんです。 
もうね、アホかと。馬鹿かと。 
お前らな、１５０円引き如きで普段来てない吉野家に来てんじゃねーよ、ボケが。 
１５０円だよ、１５０円。 
なんか親子連れとかもいるし。一家４人で吉野家か。おめでてーな。 
よーしパパ特盛頼んじゃう</span>ぞー<span class="ads-area">、とか言ってるの。もう見てらんない。 
お前らな、１５０円やるからその席空けろと。 
吉野家ってのはな、もっと殺伐としてるべ</span>き<span class="ads-area">な</span>ん<span class="ads-area">だよ。 
Ｕの字テーブルの向かいに座った奴といつ喧嘩が始まってもおかしくない、 
刺すか刺されるか、そんな雰囲気がいいんじゃねーか。女子供は、すっこんでろ。 
で、やっと座れたかと思ったら、隣の奴が、</span>大盛つゆだく<span class="ads-area">で、とか言ってるんです。 
そこでまたぶち切れですよ。 </span></div>

<div id="contentB" class="ads-area" style="margin-bottom:30px;">
あのな、つゆだくなんてきょうび流行んねーんだよ。ボケが。 
得意げな顔して何が、つゆだくで、だ。 
お前は本当につゆだくを食いたいのかと問いたい。問い詰めたい。小１時間問い詰めたい。 
お前、つゆだくって言いたいだけちゃうんかと。 
吉野家通の俺から言わせてもらえば今、吉野家通の間での最新流行はやっぱり、ねぎだく、これだね。
大盛りねぎだくギョク。これが通の頼み方。 
ねぎだくってのはねぎが多めに入ってる。そん代わり肉が少なめ。これ。 
で、それに大盛りギョク（玉子）。これ最強。 
しかしこれを頼むと次から店員にマークされるという危険も伴う、諸刃の剣。 
素人にはお薦め出来ない。 
まあお前らド素人は、牛鮭定食でも食ってなさいってこった。</div>
<br /><br />
<script type="text/javascript">
<!--
  if (document.getElementById('contentB').style.display == 'none' ||
      document.getElementById('contentB').style.visibility == 'hidden' ||
      document.getElementById('contentB').clientWidth < 10 ||
      document.getElementById('contentB').clientHeight < 5
      )
  {
  document.write("<div style=\"margin-left:15%;\">まあお前らド素人は、雑巾でも食ってなさいってこった。</div>");
  }
// -->
</script>
<p>adblockをオン/オフしてブラウザの更新アイコンか[F5]を押してみましょう。</p>
<p><br /></p>
<p>このページはサンプルです。元の話は「がとらぼ」の「<a href="https://gato.intaa.net/archives/5931">某広告ブロックアプリを弄ぶ</a>」を参照のこと。</p>
</body>
</html>

コンテンツ自体は昔ネット界を一世風靡した吉野家コピペ。
某広告プロックアプリはadsとかads-areaといった文字列がclass名に指定されているのがお嫌いという有名な特性だけを利用した作りとなっている。

サンプルページのhttp://warui.intaa.net/contents/adblock/を開く。

adblock
某広告ブロックアプリが無効なら思わず牛丼屋に行きたくなるあの伝説のコピペが表示される。

adblock
某広告ブロックアプリを有効にする。
ページをリロードする。

adblock
コピペが消えて意味不明な文字列と、某広告ブロックアプリが無効な時には表示されていなかった「雑巾食え」という文が表示されている。

仕組み

コピペ前半部分はidがcontentAなdivタグが囲われていてこの中のspanタグで囲われている部分は広告ブロックオンだとclass名がads-areaなせいで広告部分だと判断されて表示されなくなる。囲われていない部分は消えずに残る。(なお、今回のcontentAというidは説明の為だけの無意味指定)
コピペ後半部分はidがcontentBなdivタグで囲われているがこのcontentBな部分は広告ブロックオンだとclassがads-areaなせいで全て消える。
最後のjavascript部分はidがcontentBなコピペ後半部分が非表示あるいは極端に小さく表示されていればメッセージを表示するというもの。

非常に簡単なものだけどページ表示に影響を与えない軽さ。簡易アンチ広告ブロックとしても使える。~~ちなみに現在「がとらぼ」ではこの方法を使っている。~~(以前使ってみたAntiblockは現在は使っていない)
もちろん、某広告ブロックアプリと同じ仕組みの広告ブロックにしか効かないので全然万能ではない。

真面目に「広告ブロックが有効になっているとコンテンツは閲覧できません。広告ブロックを無効にして下さい」みたいなメッセージを表示するというのでも良いが、広告ブロックを有効にしている人には一見普通に表示できるようでいながら全く内容や意味が違うコンテンツを表示するという遊びもできるのでどうぞ。