アドブロッカーに対抗してアドチェッカーを作ってみた


iOS9のSafariでコンテンツブロック機能が登場し、サイト上の広告を非表示にするアドブロックの存在が世に広まりました。
これを機にCrystalを始めとする数々のアドブロッカーアプリが登場しています。

PCブラウザでもAdblock Plusを始め、ブラウザの拡張機能で広告を非表示にして表示速度を上げるツールが出ています。

しかしユーザーにとっては広告は消したいものかもしれませんが、私の仕事柄、逆に広告を強調してくれるツールの方が調査の時どこに広告があるのかパッとわかって嬉しいです。

そこで私は考えました。

広告を特定して隠せるなら、逆に目立たせる事もできるのでは?

ということで広告の場所がわかるツールが作れたらかなり運用が楽になるだろうと思い、Chrome拡張機能でアドブロッカーに対抗してアドチェッカーを作ってみました!

今回は弊社のアドサーバF1Eで配信された広告がわかる拡張機能を作りました。
(今後弊社アドサーバF1シリーズ全てを確認できるよう対応予定なので「F1 Checker」と名付けました。)

 

Chrome拡張機能の開発ってどうやるの?

今回私も初めてChromeの拡張機能に挑戦してみましたが、とても簡単です。
なぜなら、Chromeの拡張機能はHTML、CSS、JSを入れた単なる圧縮フォルダだからです。
自分のローカルにあるフォルダをChrome拡張機能のページにアップロードすればすぐに使えます。

Chrome拡張機能開発で必ず必要な manifest.json という設定ファイルがあります。
このファイルには、

  • アイコンはどのファイルを参照するか
  • アイコンをクリックした時に参照するhtmlはどれか
  • どのサイトにアクセスした時に発動させるか
  • バックグラウンドで動かすjs
  • ページ読み込み完了後に動かすjs

などの設定をJSON形式で書きます。

manifest.jsonを見てみよう

まず今回私が作ったF1 Checkerのフォルダ構成は以下です。

F1Checker
├── css
│   └── f1Check.css
├── images
│   └── icon
│     └── icon_16.png
│     └── icon_48.png
│     └── icon_128.png
├── js
│   ├── background.js
│   ├── configcheck.js
│   └── f1Check.js
├── manifest.json
└── popup.html

ではmanifest.jsonの中身を見てみましょう。

{
  "manifest_version": 2,
  "name": "F1 Checker",
  "description" : "This extension find the AD delivery from F1.",
  "version":"1.0",
  "icons": {
    "16": "images/icon/icon_16.png",
    "48": "images/icon/icon_48.png",
    "128": "images/icon/icon_128.png"
  },

  "permissions":[
    "http://*/*",
    "https://*/*"
  ],

  "background": {
    "scripts": ["js/background.js"]
  },

  "browser_action": {
    "default_icon": "images/icon/icon_16.png",
    "default_title": "F1 Checker",
    "default_popup": "popup.html"
  },

  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "css": ["css/F1Check.css"],
      "js": ["js/F1Check.js"]
    }
  ]
}

2〜10行目

“manifest_version”はマニフェストファイルのバージョンを示しています。現在は2です。
続いてChrome拡張機能ページに表示するツール名、説明、この拡張機能のバージョン、アイコンを指定しています。

12〜15行目

“permissions”は使用するchrome.APIや適用範囲を書きます。
ここでは全ページ対象なので”http:///“、”https:///“を書いています。

17〜19行目

“background”では、バックグラウンドで動作させるjsファイルを指定します。

21〜25行目

“browser_action”はブラウザ右上に表示させるアイコンの設定です。
アイコンとなるファイルの場所、ホバーした時に出る説明、押した時に表示させるhtmlファイルを指定します。

27〜36行目

“content_scripts”は開いたページに対するアクションを書きます。
“matches”には適用範囲、”css”は開いているページに追加挿入するcss、”js”にはページ読み込み完了後に実行させる処理を書きます。

F1 Checkerの仕様

①F1 CheckerをONにする

まずはアイコンのポップアップでこのツールのON/OFF設定を保存します。
f1_icon

保存先はローカルストレージを使い、ユーザーのローカルにON/OFF設定を保存します。
ローカルストレージは基本的に見ているページのドメイン単位で保存されますが、
popup.htmlでの保存先はchrome-extensionという名前の付いたファイルに保存されます。
※下から3行目のファイル

-rw-r--r-- 1 taisuke staff        0  1 20 12:38 https_www.google.co.jp_0.localstorage-journal
-rw-r--r-- 1 taisuke staff     6144  1 20 12:38 https_www.google.co.jp_0.localstorage
-rw-r--r-- 1 taisuke staff        0  1 20 12:38 https_plus.google.com_0.localstorage-journal
-rw-r--r-- 1 taisuke staff     4096  1 20 12:38 https_plus.google.com_0.localstorage
-rw-r--r-- 1 taisuke staff        0  1 20 12:43 chrome-extension_jahdbkdfljhpifdemlokhdmggdalkdmd_0.localstorage-journal
-rw-r--r-- 1 taisuke staff     3072  1 20 12:43 chrome-extension_jahdbkdfljhpifdemlokhdmggdalkdmd_0.localstorage
-rw-r--r-- 1 taisuke staff        0  1 20 12:45 https_www.youtube.com_0.localstorage-journal
-rw-r--r-- 1 taisuke staff     5120  1 20 12:45 https_www.youtube.com_0.localstorage

これは”browser_action”や”background”に指定したjs内で使うことができます。

②F1配信の広告枠があるページへ行く

以下のようなデモページを作ってみました。

iPSChecker発動前
F1 Checkerは読み込み完了後に発動しますが、これは発動前です。
読み込みが完了するとcontent_scriptsに書いた”F1Check.js”が発動します。

③ON/OFF設定の確認

F1Check.jsからはchrome-extensionのローカルストレージを参照できないので、background.jsにローカルストレージの内容取得を依頼して返却してもらう必要があります。
つまり
F1Check.js→background.jsへメッセージを送信
background.jsでchrome-extensionのローカルストレージからデータ取得
background.js→F1Check.jsへデータ返却
というやり取りが必要ですが、これを実現するのがchrome.runtimeというバックグラウンドとのメッセージ通信ができるAPIです。

F1Check.js
chrome.runtime.sendMessage({method: "getLocalStorage", key: "config"}, function(response) {
  if (response.data == "ON") {
    F1Check();
  }
});

 

background.js
</pre>
<pre>chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 if (request.method == "getLocalStorage") {
 sendResponse({data: localStorage[request.key]});
 }
});</pre>
<pre>

これによりON/OFF設定をbackground.jsを使って取得します。

④ドメインが一致したら広告枠の上にdivタグを挿入

F1配信の広告枠がどこにあるかはaタグのドメインで判断できます。
設定がONだったら、以下の関数を実行します。
ページ内の全てのaタグを取得(開いているページのDOMにアクセスできます)

aタグを1つずつ評価してhrefに書かれたurlにF1Eドメインがあるか確認

もしドメインがあればaタグの前に”F1E配信 広告枠”と書かれたdivタグ挿入。

関数実行後は以下のようになります。
f1_1

わかりやすいようにcssのanimationを使って青→白→青と点滅するようにしてみました。

f1_2

作った拡張機能を共有する

作った拡張機能は圧縮して他の人に共有する事ができます。
拡張機能のページから、「拡張機能のパッケージ化」を選択します。

f1package0
作ったフォルダを選択します。
f1package1
1回目のパッケージ化では秘密鍵ファイルは空欄で大丈夫です。
「拡張機能のパッケージ化」をクリックすると、デスクトップに以下2つのファイルが作成されます。
f1package2

この内、.crxの方のファイルを誰かに共有すれば、その人は拡張機能ページに.crxファイルをドラッグ&ドロップするだけで使えるようになります。

もう一つの.pemファイルは、秘密鍵です。これは作成者のみが持ち、2回目以降のパッケージ化の際に、先ほど空欄にした箇所に指定することで、作成者以外が変更できないようになっています。

まとめ

思った以上に簡単に理想が叶えられてChrome拡張機能の便利さに驚きました!

そして目的だった調査時間は短縮できるようになりましたし、F1Eをご利用頂いているお客様のサイトの広告を隅々まで把握できるようになり、普通にネットサーフィンしてる途中に、あっここにもF1E使ってるんだ、と気づきを得ることもできました。

チームの皆さんにも共有して評判がよかったので、更にバージョンアップしていきたいと思います。


DACエンジニア採用情報

  関連記事

iab-vast-logo
「初めての動画広告~①VAST編~」

2015年新卒入社の池田です。 「TVで動画コンテンツをみる時代」から「ネットで動画コンテンツをみる」時代になった今日このごろです。 「私もいっちょまえに動画広告を扱ってみたい・・・!!」と生意気にも思うようになりまして。 しかし、つい2か月前までド文系大学生だった池田は果たして動画広告を扱えるよう …

20140922035644
アドテク問題(広告表示編)

アドテクエンジニア向けの問題を考えました。 お題は「広告表示」です。 以下お題に沿った「アドタグ」を作成し、広告を表示してみてください。 全部で9問あるので、興味のある人はやってみてください。 難易度は、ちょうどいいくらいです。 全部できた人は、採用担当までご連絡ください。 Q1.バナー広告を表示し …

no image
【動画広告】VASTって何?

こんにちは、FlexOne推進部の近江です。 私は新卒入社2年目でアドサーバーや動画ソリューション(OVP)のサポート、開発を担当しています。 今回は動画広告のプロトコル「VAST」について書かせて頂きます。   ここ数年動画のくるくる詐欺がありましたが、昨年はHulu、ユーチューバー、見 …

Apple-Releases-Safari-10-Developer-Beta-3-for-OS-X-Yosemite-and-El-Capitan
Safari10(iOS10)のインライン動画再生についてまとめてみた

はじめに Safari10からvideoタグを用いたインライン動画再生ができるようになったので、挙動を調べてみました。 Safari 10.0 検証環境 項目 詳細 開発環境 Xcode8.0 検証端末 iPhone7 Simulator ブラウザ iOS Safari / UIWebView / …

videojs
video.jsを使ったインバナー動画広告のHTMLタグを作ってみた

こんにちは、プラットフォームワンのyamakenです。久しぶりの投稿です。 今回は、 インバナー動画広告 のHTMLタグを作ってみます。 「今年は動画広告元年!」という声が私の入社以来毎年聞こえており、私の担当するMarketOneDSPでも年始にインストリーム動画RTB対応をリリースするなど、市場 …

no image
SafeFrameでリッチ広告をセキュアに実現

アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更 …

IMASDK
Google IMA SDK で動画アプリに広告を入れてみた〜iOS編〜

新卒のjotakaです。 スマホアプリに動画広告を出すためのSDKを導入してみたいと思います。 ここでのSDKはアプリへ簡単に機能追加するためのframeworkやlibraryと言う方がわかりやすいかもしれません。 アプリ開発者が動画広告用のSDKを使用するメリットとして、例えば動画広告の仕様であ …

IMG_4673
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた②~

はい、テクノロジー戦略部の田畑です。 アドテク系イベントに行ってきた②ということで、前回書ききれなかったところを書きます。   ~前回のおさらい~ 1.11月にNYのアドテク系イベント3つに行ってみた。 2.Fraud、Viewability、Programatic Directがキーワー …

gtm
【タグマネジメント】GoogleTagManagerでイベントリスナーを使う

タグマネジメントとは タグマネジメントとは、広告効果測定ツールや、サイト解析ツールなどで利用している『HTMLタグ』の管理を行うことをいいます。 タグマネジメントツールでは、Webサイトの全ページに各タグマネジメントツールが発行する1つのタグを設置するだけで、あらゆるHTMLタグを管理画面上で登録す …

IAB
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた~

こんにちは、田畑です。   前回のエントリから早一か月、どのように書こうかなぁと考えているうちに時間が経ってしまいました。前回はそもそも自分の部署が何をしているのかといったところを書いたので、今回は実際に情報収集の場として利用している各種カンファレンスの様子について書いてみました。 &nb …