【ネイティブアドを支えるPhantomJS】

Hitokuse Inc.©
ネイティブアドを支えるPhantomJS
株式会社ヒトクセフルスタックエンジニア島田賢悟
1

Hitokuse Inc.© 2
第１部リッチメディア広告とJavaScript（長尾・25分）
- ヒトクセの紹介
- 第３者配信とは？3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第２部 JavaScriptで実現するインバナー動画広告（長尾・10分）
- インバナー動画広告とは？
- 実践テクニック④ CSSスプライト
第3部ネイティブアドを支えるPhantomJS（島田・20分）
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部クリエイティブ最適化アルゴリズム（濁沼・15分）

Hitokuse Inc.© 3
自己紹介
【名前】島田賢悟
【出身】東京
【趣味】最近はジャニーズコンサートによく
行きます。
【経歴】2011年東京大学教養学部卒業
2013年東京大学大学院総合文化研究科卒業
2013年某システム会社にシステムコンサルとして入社
2014年9月株式会社ヒトクセにフルスタックエンジニア
として入社

Hitokuse Inc.© 4
ネイティブアドとは（弊社の定義）
ユーザーが使用しているメディア、もしくはサービスに、

自然になじむデザインで表示される広告です。
300x250
のバナーをネイティブ化 320x50
のバナーをネイティブ化

Hitokuse Inc.© 5
ネイティブアドの効果
ユーザーにとっては親密さを感じられるデザインで、自然にメッセージが
届きます。結果として、高い効果が得られます。

Hitokuse Inc.© 6
カメレオンによる自動最適化
PhantomJS(CasperJS)
弊社ではPantomJSを利用することで、広告表示のされるWebサイトを解析
し、汎用的にレイアウトをネイティブアド化することに成功しています。
(特許申請中)

Hitokuse Inc.©
PhantomJSとは？
Webブラウザを使わずに、コンソール上からブラウザ操作できるツー
ルです。
【特徴】
・Webページ内のDOMの取得ができる。
・Webページ内でイベントを発火させることができる。
・UserAgentやCookieなどの設定ができ、実利用とほぼ同じ環境
でのブラウザ操作ができる。
・WebKitブラウザを前提としたブラウザ
操作である。
7

Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
ここでは一般的な利用方法(Webサイトのスクリーンショットを撮影
するPhantomJS)に則って、PhantomJSの仕組みを説明します。
8
var webpage = require("webpage").create();
webpage.open('http://smartcanvas.net', function() {
webpage.render('test.png');
phantom.exit();
});
screen_shot.js
test.png

Hitokuse Inc.©
○ PhantomJSは公式サイトにて配布されています。
○ PhantomJSはコンソール上で以下の様に起動します。
9
$ phantomjs screen_shot.js
http://phantomjs.org/

Hitokuse Inc.©
○ PhantomJSでは、主に以下の2つのオブジェクトを利用して、Web
ページ操作等を行なっていきます。
・Web Pageオブジェクト
…対象の1つのWebページに対応するオブジェクト
・Phantomオブジェクト
…起動しているプロセスに対応するオブジェクト
10

Hitokuse Inc.©
① Web Pageオブジェクトを利用する際には、最初にWeb Page
モジュールを読み込む必要があります。
その後、.create()によって、1つのWeb Pageオブジェクトを
生成させます。
11
phantom.exit();
});
screen_shot.js

Hitokuse Inc.©
② Web Pageオブジェクトの.open()によって、対象のWebページ
の情報を抽出します。
その後の処理内容に関しては、Callback関数の中に定義します。
12
phantom.exit();
});
screen_shot.js

Hitokuse Inc.©
③ .render()は対象のWebページをレンダリングし、Imageファイ
ルにする関数です。
引数にパスとファイル名を指定することで、指定したパスにファイ
ルが保存されます。
13
phantom.exit();
});
screen_shot.js

Hitokuse Inc.©
④ 最後にPhantomオブジェクトの.exit()により、全体のプロセスを
終了させます。
14
phantom.exit();
});
screen_shot.js

Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
少し応用した使い方として、対象サイトにログインしてスクレイピン
グする(文字情報をすべて取得しカウントする)PhantomJSを元に、詳
細な使い方について説明したいと思います。
15
$ phantomjs --ssl-protocol=tlsv1 facebook_scrape.js
-————【result】—————-
いいね！:14
モバイル:13
島田賢悟:11
削除:8
…

Hitokuse Inc.©
実際のコードは以下のようになります。
16
1 var page = require('webpage').create();
2 page.settings.UserAgent = 'Mozilla/5.0 (Windows NT 6.1) …'
3 page.settings.loadImages = false;
4 page.onConsoleMessage = function (msg){ console.log(msg); };
5 page.includeJQuery = function (callback) { this.includeJs('//ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js', callback)};
6 page.open('http://www.facebook.com/', function() {
7 page.includeJQuery(function() {
8 page.evaluate(function() { //フォームを埋めてログイン
9 $('#email').val('***');
10 $('#pass').val('***');
11 $('#login_form').submit();
12 });
13 page.onLoadFinished = function(){
15 page.evaluate(function() { //ページ遷移
16 location.href = $('._2dpe._1ayn').prop('href');
17 });
20 var result = page.evaluate( //text解析処理 );
21 console.log(result); //解析結果を表示
22 phantom.exit();
23 };
24 });
25 });

Hitokuse Inc.©
Web Pageオブジェクトのプロパティ一覧
17
objectName:WebPage
title:
frameTitle:
content:<html><head></head><body></body></html>
frameContent:<html><head></head><body></body></html>
url:about:blank
frameUrl:about:blank
loading:false
loadingProgress:0
canGoBack:false
canGoForward:false
plainText:
framePlainText:
libraryPath:/Users/KengoShimada/work/phantomjs
offlineStoragePath:/Users/KengoShimada/Library/Application Support/Ofi
Labs/PhantomJS
offlineStorageQuota:5242880
viewportSize:[object Object]
…

Hitokuse Inc.©
Web Pageオブジェクトの主要プロパティ(関数)①
⚪ title
⚪ content
- WebページのHTML。
⚪ frame…(ex. frameContent)
- Activeなframeのみの情報。
⚪ paperSize
- PDF形式でファイル出力する際のサイズ。
⚪ oﬄineStoragePath, oﬄineStorageQuota
- localで利用する際のストレージのパスと利用上限容量。
18

Hitokuse Inc.©
Web Pageオブジェクトの主要プロパティ(関数)②
⚪ settings
- 基礎情報系の設定されているプロパティ。
・UserAgent
・loadImages
- 画像を読み込むかどうかのBoolean値。
⚪ viewportSize
⚪ onLoadFinished
- ページ遷移後の動作を関数で定義するプロパティ。
⚪ onConsoleMessage
19

Hitokuse Inc.©
Web Pageオブジェクトの主要プロパティ(関数)③
⚪ .injectJs(QString, function() { });
- 他のjsファイルを読み込む関数。
⚪ .evaluate(function() { })
- Callback関数内で、Webページ上のDOMを扱うことができる関数。
⚪ .sendEvent(Event,…)
- DOMの位置を直接指定して、イベントを発生させる関数。
20

Hitokuse Inc.©
Phantomオブジェクトの主要プロパティ(関数)
⚪ args
⚪ outputEncoding
- ファイル出力に利用する文字コード。
⚪ cookies
⚪ .addCookies()
- cookiesプロパティに値を設定する関数。
21

Hitokuse Inc.©
22
5 page.includeJQuery = function (callback) { this.includeJs(
'//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
callback)};
6 page.open('https://www.facebook.com/', function() {
9 $('#email').val('***');
10 $('#pass').val('***');
12 });
15 page.evaluate(function() {
16 location.href = $('._2dpe._1ayn').prop('href'); //ページ遷移
17 });
まずUserAgentをPC用に設定します。

また今回はText解析のみなので、処理速度向上の
ためにImageの読み込みはしないように
loadImagesを設定します。

Hitokuse Inc.©
23
callback)};
6 page.open('http://www.facebook.com/', function() {
9 $('#email’).val(‘***’);
10 $('#pass’).val('***');
12 });
17 });
今回は、コンソール上で文字解析の結果を確認します。

page.evaluate(func;on()
{…});の「…」内ではpage内のDOMのconsoleオブ
ジェクトを参照してしまうので、コンソール上には出力されません。

そのため最初に

page.onConsoleMessage
=
func;on
(msg){console.log(msg);
};

の様に、参照するconsoleオブジェクトを指定する必要があります。

Hitokuse Inc.©
24
callback)};
9 $('#email').val(‘***’);
10 $('#pass').val('***');
12 });
16 location.href = $('._2dpe._1ayn’).prop('href'); //ページ遷移
17 });
facebookページ内では、jQueryが読み込まれていま
せん。今回はjQueryを利用したいので、includeJs()

によって、jQueryを読み込みます。

今回はページ遷移の度に読み込む必要があるので、
コード簡略化のためにincludeJQuery()という関数を
pageオブジェクト内に予め定義します。

Hitokuse Inc.©
25
callback)};
9 $('#email').val('***');
10 $('#pass').val('***');
12 });
16 location.href = $('._2dpe._1ayn’).prop('href'); //ページ遷移
17 });
pageをopenし、jQueryを読み込んだ後に.evaluate()
によってWebページのDOMにアクセスします。

callback関数の中で「Emailアドレス」「パスワー
ド」を入力しsubmitします。

Hitokuse Inc.©
26
callback)};
9 $('#email').val('***');
10 $('#pass’).val('***');
12 });
16 location.href = $(‘._2dpe._1ayn’).prop('href'); //ページ遷移
17 });
ログインに関してはログイン情報をCookieに埋め込む方法で
もできます。

この場合、例えば

phantom.addCookie({
'act':’***','c_user':'***','locale':'ja_JP',…});

のように記述することでcookieを埋め込むことができます。

Hitokuse Inc.©
27
$ phantomjs --ssl-protocol=tlsv1 facebook_scrape.js
.d8888b. 888 888
d88P Y88b 888 888
Y88b. 888 888
"Y888b. 888888 .d88b. 88888b. 888
"Y88b. 888 d88""88b 888 "88b 888 これは開発者向けのブラウザ機能です。Facebook機能を
有効にするためまたは誰かのアカウントをハッキングするために、ここに何かをコピー・貼り付けするように言われ
た場合、それは第三者があなたのFacebookアカウントへのアクセスを得るための詐欺・不正行為です。
"888 888 888 888 888 888 Y8P
Y88b d88P Y88b. Y88..88P 888 d88P
"Y8888P" "Y888 "Y88P" 88888P" 888
888
888
888
詳細はhttps://www.facebook.com/selfxssをご覧ください。
PhantomJSでfacebookにログインすると、上記のよ
うな警告メッセージが表示されます。
※コンソール上で起動した際の表示

Hitokuse Inc.©
28
9 $('#email').val('***');
10 $('#pass’).val('***');
12 });
17 });
22 phantom.exit();
23 });
24 };
25 });
26 };
27 });
ページ遷移が完了すると、OnLoadFinishedに定義し
た関数が実行されます。

Hitokuse Inc.©
29
17 });
22 phantom.exit();
23 });
24 };
25 });
26 };
27 });
28 });
今回対象となるページまで遷移するためには、メニュー
を選択して、もう一度遷移する必要があります。

その際には、先ほど同様にevaluate()のCallback関数に
遷移するまでの処理を定義し、onLoadFinishedに遷移
後の処理を再定義することで可能です。

Hitokuse Inc.©
CasperJSについて
CasperJSはPhantomJSから拡張したユーティリティです。
カメレオンではCasperJSを利用して、メディア解析を行っています。
【特徴】
・WebKitだけでなく、Geckoにも対応している。
(通常だと、Geckoでのブラウザ操作はSlimerJSを利用する必要がある。)
・CoﬀeeScriptでの記述ができる。
・イベント系の処理が記述しやすい。
30

Hitokuse Inc.©
最後に
弊社では、PhantomJS(CasperJS)をWebサイト解析に利用していますが、
PhantomJSのユーティリティを考えれば、今後、様々なサービスが生まれてく
ると思います。
本講演が、少しでも皆様の技術習得の参考になっていただけたら幸いです。
内容的に、話しきれない部分も多かったのですし、
私自身も今後、技術者問わず、多くの方々と触れて成長していきたいと考えてお
りますので、交流会では是非話しかけていただければと思います。
株式会社ヒトクセフルスタックエンジニア島田
31

【ネイティブアドを支えるPhantomJS】

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 【ネイティブアドを支えるPhantomJS】

Ähnlich wie 【ネイティブアドを支えるPhantomJS】 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

【ネイティブアドを支えるPhantomJS】