Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hitokuse Inc.©
ネイティブアドを支えるPhantomJS
株式会社ヒトクセ フルスタックエンジニア 島田賢悟
1
Hitokuse Inc.© 2
第1部 リッチメディア広告とJavaScript(長尾・25分)
 - ヒトクセの紹介
 - 第3者配信とは?3rd Party JavaScriptについて
 - 実践テクニック① パッケージ化
 - 実践テ...
Hitokuse Inc.© 3
自己紹介
【名前】島田 賢悟
【出身】東京
【趣味】最近はジャニーズコンサートによく
    行きます。
【経歴】2011年   東京大学 教養学部 卒業
    2013年   東京大学大学院 総合文化研究科...
Hitokuse Inc.© 4
ネイティブアドとは(弊社の定義)
ユーザーが使用しているメディア、もしくはサービスに、	
  
自然になじむデザインで表示される広告です。
300x250	
  のバナーをネイティブ化 320x50	
  のバ...
Hitokuse Inc.© 5
ネイティブアドの効果
ユーザーにとっては親密さを感じられるデザインで、自然にメッセージが
届きます。結果として、高い効果が得られます。
Hitokuse Inc.© 6
カメレオンによる自動最適化
PhantomJS(CasperJS)
弊社ではPantomJSを利用することで、広告表示のされるWebサイトを解析
し、汎用的にレイアウトをネイティブアド化することに成功しています...
Hitokuse Inc.©
PhantomJSとは?
Webブラウザを使わずに、コンソール上からブラウザ操作できるツー
ルです。
【特徴】
・Webページ内のDOMの取得ができる。
・Webページ内でイベントを発火させることができる。
・Us...
Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
ここでは一般的な利用方法(Webサイトのスクリーンショットを撮影
するPhantomJS)に則って、PhantomJSの仕組みを説明します。
8
var webpage = r...
Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
○ PhantomJSは公式サイトにて配布されています。
○ PhantomJSはコンソール上で以下の様に起動します。
9
$ phantomjs screen_shot.js...
Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
○ PhantomJSでは、主に以下の2つのオブジェクトを利用して、Web
ページ操作等を行なっていきます。
・Web Pageオブジェクト
 …対象の1つのWebページに対応...
Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
① Web Pageオブジェクトを利用する際には、最初にWeb Page
  モジュールを読み込む必要があります。
  その後、.create()によって、1つのWeb Pag...
Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
② Web Pageオブジェクトの.open()によって、対象のWebページ
  の情報を抽出します。
  その後の処理内容に関しては、Callback関数の中に定義します。
...
Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
③ .render()は対象のWebページをレンダリングし、Imageファイ
  ルにする関数です。
  引数にパスとファイル名を指定することで、指定したパスにファイ
  ルが...
Hitokuse Inc.©
PhantomJSの仕組み(基礎編)
④ 最後にPhantomオブジェクトの.exit()により、全体のプロセスを
  終了させます。
14
var webpage = require("webpage").cre...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
少し応用した使い方として、対象サイトにログインしてスクレイピン
グする(文字情報をすべて取得しカウントする)PhantomJSを元に、詳
細な使い方について説明したい...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
実際のコードは以下のようになります。
16
1 var page = require('webpage').create();
2 page.settings.Use...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
Web Pageオブジェクトのプロパティ一覧
17
objectName:WebPage
title:
frameTitle:
content:<html><head...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
Web Pageオブジェクトの主要プロパティ(関数)①
⚪ title
⚪ content
 - WebページのHTML。
⚪ frame…(ex. frameCon...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
Web Pageオブジェクトの主要プロパティ(関数)②
⚪ settings
 - 基礎情報系の設定されているプロパティ。
 ・UserAgent
 ・loadIma...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
Web Pageオブジェクトの主要プロパティ(関数)③
⚪ .injectJs(QString, function() { });
 - 他のjsファイルを読み込む関...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
Phantomオブジェクトの主要プロパティ(関数)
⚪ args
⚪ outputEncoding
 - ファイル出力に利用する文字コード。
⚪ cookies
⚪ ...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
22
1 var page = require('webpage').create();
2 page.settings.UserAgent = 'Mozilla/5...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
23
1 var page = require('webpage').create();
2 page.settings.UserAgent = 'Mozilla/5...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
24
1 var page = require('webpage').create();
2 page.settings.UserAgent = 'Mozilla/5...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
25
5 page.includeJQuery = function (callback) { this.includeJs(
'//ajax.googleapis....
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
26
5 page.includeJQuery = function (callback) { this.includeJs(
'//ajax.googleapis....
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
27
$ phantomjs --ssl-protocol=tlsv1 facebook_scrape.js
.d8888b. 888 888
d88P Y88b 8...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
28
8 page.evaluate(function() { //フォームを埋めてログイン
9 $('#email').val('***');
10 $('#pas...
Hitokuse Inc.©
PhantomJSの仕組み(スクレイピング編)
29
13 page.onLoadFinished = function(){
14 page.includeJQuery(function() {
15 page....
Hitokuse Inc.©
CasperJSについて
CasperJSはPhantomJSから拡張したユーティリティです。
カメレオンではCasperJSを利用して、メディア解析を行っています。
【特徴】
・WebKitだけでなく、Gecko...
Hitokuse Inc.©
最後に
弊社では、PhantomJS(CasperJS)をWebサイト解析に利用していますが、
PhantomJSのユーティリティを考えれば、今後、様々なサービスが生まれてく
ると思います。
本講演が、少しでも皆様...
Upcoming SlideShare
Loading in …5
×

【ネイティブアドを支えるPhantomJS】

4,163 views

Published on

ネイティブアドを支えるPhantomJS

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

【ネイティブアドを支えるPhantomJS】

  1. 1. Hitokuse Inc.© ネイティブアドを支えるPhantomJS 株式会社ヒトクセ フルスタックエンジニア 島田賢悟 1
  2. 2. Hitokuse Inc.© 2 第1部 リッチメディア広告とJavaScript(長尾・25分)  - ヒトクセの紹介  - 第3者配信とは?3rd Party JavaScriptについて  - 実践テクニック① パッケージ化  - 実践テクニック② クロスドメイン対策  - 実践テクニック③ デバイス対応ケーススタディ 第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)  - インバナー動画広告とは?  - 実践テクニック④ CSSスプライト 第3部 ネイティブアドを支えるPhantomJS(島田・20分)  - ネイティブアドとデザイン自動最適化について  - PhantomJSの仕組み(基礎編)  - PhantomJSの仕組み(スクレイピング編)  - CasperJSについて 第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
  3. 3. Hitokuse Inc.© 3 自己紹介 【名前】島田 賢悟 【出身】東京 【趣味】最近はジャニーズコンサートによく     行きます。 【経歴】2011年   東京大学 教養学部 卒業     2013年   東京大学大学院 総合文化研究科 卒業     2013年   某システム会社にシステムコンサルとして入社     2014年9月 株式会社ヒトクセにフルスタックエンジニア            として入社
  4. 4. Hitokuse Inc.© 4 ネイティブアドとは(弊社の定義) ユーザーが使用しているメディア、もしくはサービスに、   自然になじむデザインで表示される広告です。 300x250  のバナーをネイティブ化 320x50  のバナーをネイティブ化
  5. 5. Hitokuse Inc.© 5 ネイティブアドの効果 ユーザーにとっては親密さを感じられるデザインで、自然にメッセージが 届きます。結果として、高い効果が得られます。
  6. 6. Hitokuse Inc.© 6 カメレオンによる自動最適化 PhantomJS(CasperJS) 弊社ではPantomJSを利用することで、広告表示のされるWebサイトを解析 し、汎用的にレイアウトをネイティブアド化することに成功しています。 (特許申請中)
  7. 7. Hitokuse Inc.© PhantomJSとは? Webブラウザを使わずに、コンソール上からブラウザ操作できるツー ルです。 【特徴】 ・Webページ内のDOMの取得ができる。 ・Webページ内でイベントを発火させることができる。 ・UserAgentやCookieなどの設定ができ、実利用とほぼ同じ環境  でのブラウザ操作ができる。 ・WebKitブラウザを前提としたブラウザ  操作である。 7
  8. 8. 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
  9. 9. Hitokuse Inc.© PhantomJSの仕組み(基礎編) ○ PhantomJSは公式サイトにて配布されています。 ○ PhantomJSはコンソール上で以下の様に起動します。 9 $ phantomjs screen_shot.js http://phantomjs.org/
  10. 10. Hitokuse Inc.© PhantomJSの仕組み(基礎編) ○ PhantomJSでは、主に以下の2つのオブジェクトを利用して、Web ページ操作等を行なっていきます。 ・Web Pageオブジェクト  …対象の1つのWebページに対応するオブジェクト ・Phantomオブジェクト  …起動しているプロセスに対応するオブジェクト 10
  11. 11. Hitokuse Inc.© PhantomJSの仕組み(基礎編) ① Web Pageオブジェクトを利用する際には、最初にWeb Page   モジュールを読み込む必要があります。   その後、.create()によって、1つのWeb Pageオブジェクトを   生成させます。 11 var webpage = require("webpage").create(); webpage.open('http://smartcanvas.net', function() { webpage.render('test.png'); phantom.exit(); }); screen_shot.js
  12. 12. Hitokuse Inc.© PhantomJSの仕組み(基礎編) ② Web Pageオブジェクトの.open()によって、対象のWebページ   の情報を抽出します。   その後の処理内容に関しては、Callback関数の中に定義します。 12 var webpage = require("webpage").create(); webpage.open('http://smartcanvas.net', function() { webpage.render('test.png'); phantom.exit(); }); screen_shot.js
  13. 13. Hitokuse Inc.© PhantomJSの仕組み(基礎編) ③ .render()は対象のWebページをレンダリングし、Imageファイ   ルにする関数です。   引数にパスとファイル名を指定することで、指定したパスにファイ   ルが保存されます。 13 var webpage = require("webpage").create(); webpage.open('http://smartcanvas.net', function() { webpage.render('test.png'); phantom.exit(); }); screen_shot.js
  14. 14. Hitokuse Inc.© PhantomJSの仕組み(基礎編) ④ 最後にPhantomオブジェクトの.exit()により、全体のプロセスを   終了させます。 14 var webpage = require("webpage").create(); webpage.open('http://smartcanvas.net', function() { webpage.render('test.png'); phantom.exit(); }); screen_shot.js
  15. 15. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 少し応用した使い方として、対象サイトにログインしてスクレイピン グする(文字情報をすべて取得しカウントする)PhantomJSを元に、詳 細な使い方について説明したいと思います。 15 $ phantomjs --ssl-protocol=tlsv1 facebook_scrape.js -————【result】—————- いいね!:14 モバイル:13 島田 賢悟:11 削除:8 …
  16. 16. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 実際のコードは以下のようになります。 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(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { //ページ遷移 16 location.href = $('._2dpe._1ayn').prop('href'); 17 }); 18 page.onLoadFinished = function(){ 19 page.includeJQuery(function() { 20 var result = page.evaluate( //text解析処理 ); 21 console.log(result); //解析結果を表示 22 phantom.exit(); 23 }; 24 }); 25 });
  17. 17. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 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] …
  18. 18. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) Web Pageオブジェクトの主要プロパティ(関数)① ⚪ title ⚪ content  - WebページのHTML。 ⚪ frame…(ex. frameContent)  - Activeなframeのみの情報。 ⚪ paperSize  - PDF形式でファイル出力する際のサイズ。 ⚪ offlineStoragePath, offlineStorageQuota  - localで利用する際のストレージのパスと利用上限容量。 18
  19. 19. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) Web Pageオブジェクトの主要プロパティ(関数)② ⚪ settings  - 基礎情報系の設定されているプロパティ。  ・UserAgent  ・loadImages   - 画像を読み込むかどうかのBoolean値。 ⚪ viewportSize ⚪ onLoadFinished  - ページ遷移後の動作を関数で定義するプロパティ。 ⚪ onConsoleMessage 19
  20. 20. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) Web Pageオブジェクトの主要プロパティ(関数)③ ⚪ .injectJs(QString, function() { });  - 他のjsファイルを読み込む関数。 ⚪ .evaluate(function() { })  - Callback関数内で、Webページ上のDOMを扱うことができる関数。 ⚪ .sendEvent(Event,…)  - DOMの位置を直接指定して、イベントを発生させる関数。 20
  21. 21. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) Phantomオブジェクトの主要プロパティ(関数) ⚪ args ⚪ outputEncoding  - ファイル出力に利用する文字コード。 ⚪ cookies ⚪ .addCookies()  - cookiesプロパティに値を設定する関数。 21
  22. 22. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 22 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('https://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(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { 16 location.href = $('._2dpe._1ayn').prop('href'); //ページ遷移 17 }); 18 page.onLoadFinished = function(){ まずUserAgentをPC用に設定します。   また今回はText解析のみなので、処理速度向上の ためにImageの読み込みはしないように loadImagesを設定します。
  23. 23. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 23 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(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { 16 location.href = $('._2dpe._1ayn').prop('href'); //ページ遷移 17 }); 18 page.onLoadFinished = function(){ 今回は、コンソール上で文字解析の結果を確認します。   page.evaluate(func;on()  {…});の「…」内ではpage内のDOMのconsoleオブ ジェクトを参照してしまうので、コンソール上には出力されません。   そのため最初に   page.onConsoleMessage  =  func;on  (msg){console.log(msg);  };   の様に、参照するconsoleオブジェクトを指定する必要があります。
  24. 24. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 24 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('https://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(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { 16 location.href = $('._2dpe._1ayn’).prop('href'); //ページ遷移 17 }); 18 page.onLoadFinished = function(){ facebookページ内では、jQueryが読み込まれていま せん。今回はjQueryを利用したいので、includeJs()   によって、jQueryを読み込みます。   今回はページ遷移の度に読み込む必要があるので、 コード簡略化のためにincludeJQuery()という関数を pageオブジェクト内に予め定義します。
  25. 25. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 25 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() { 7 page.includeJQuery(function() { 8 page.evaluate(function() { //フォームを埋めてログイン 9 $('#email').val('***'); 10 $('#pass').val('***'); 11 $('#login_form').submit(); 12 }); 13 page.onLoadFinished = function(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { 16 location.href = $('._2dpe._1ayn’).prop('href'); //ページ遷移 17 }); 18 page.onLoadFinished = function(){ 19 page.includeJQuery(function() { 20 var result = page.evaluate( //text解析処理 ); 21 console.log(result); //解析結果を表示 pageをopenし、jQueryを読み込んだ後に.evaluate() によってWebページのDOMにアクセスします。   callback関数の中で「Emailアドレス」「パスワー ド」を入力しsubmitします。
  26. 26. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 26 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() { 7 page.includeJQuery(function() { 8 page.evaluate(function() { //フォームを埋めてログイン 9 $('#email').val('***'); 10 $('#pass’).val('***'); 11 $('#login_form').submit(); 12 }); 13 page.onLoadFinished = function(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { 16 location.href = $(‘._2dpe._1ayn’).prop('href'); //ページ遷移 17 }); 18 page.onLoadFinished = function(){ 19 page.includeJQuery(function() { 20 var result = page.evaluate( //text解析処理 ); 21 console.log(result); //解析結果を表示 ログインに関してはログイン情報をCookieに埋め込む方法で もできます。   この場合、例えば   phantom.addCookie({  'act':’***','c_user':'***','locale':'ja_JP',…});   のように記述することでcookieを埋め込むことができます。  
  27. 27. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 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にログインすると、上記のよ うな警告メッセージが表示されます。 ※コンソール上で起動した際の表示
  28. 28. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 28 8 page.evaluate(function() { //フォームを埋めてログイン 9 $('#email').val('***'); 10 $('#pass’).val('***'); 11 $('#login_form').submit(); 12 }); 13 page.onLoadFinished = function(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { 16 location.href = $('._2dpe._1ayn').prop('href'); //ページ遷移 17 }); 18 page.onLoadFinished = function(){ 19 page.includeJQuery(function() { 20 var result = page.evaluate( //text解析処理 ); 21 console.log(result); //解析結果を表示 22 phantom.exit(); 23 }); 24 }; 25 }); 26 }; 27 }); ページ遷移が完了すると、OnLoadFinishedに定義し た関数が実行されます。
  29. 29. Hitokuse Inc.© PhantomJSの仕組み(スクレイピング編) 29 13 page.onLoadFinished = function(){ 14 page.includeJQuery(function() { 15 page.evaluate(function() { 16 location.href = $('._2dpe._1ayn').prop('href'); //ページ遷移 17 }); 18 page.onLoadFinished = function(){ 19 page.includeJQuery(function() { 20 var result = page.evaluate( //text解析処理 ); 21 console.log(result); //解析結果を表示 22 phantom.exit(); 23 }); 24 }; 25 }); 26 }; 27 }); 28 }); 今回対象となるページまで遷移するためには、メニュー を選択して、もう一度遷移する必要があります。   その際には、先ほど同様にevaluate()のCallback関数に 遷移するまでの処理を定義し、onLoadFinishedに遷移 後の処理を再定義することで可能です。
  30. 30. Hitokuse Inc.© CasperJSについて CasperJSはPhantomJSから拡張したユーティリティです。 カメレオンではCasperJSを利用して、メディア解析を行っています。 【特徴】 ・WebKitだけでなく、Geckoにも対応している。  (通常だと、Geckoでのブラウザ操作はSlimerJSを利用する必要がある。) ・CoffeeScriptでの記述ができる。 ・イベント系の処理が記述しやすい。 30
  31. 31. Hitokuse Inc.© 最後に 弊社では、PhantomJS(CasperJS)をWebサイト解析に利用していますが、 PhantomJSのユーティリティを考えれば、今後、様々なサービスが生まれてく ると思います。 本講演が、少しでも皆様の技術習得の参考になっていただけたら幸いです。 内容的に、話しきれない部分も多かったのですし、 私自身も今後、技術者問わず、多くの方々と触れて成長していきたいと考えてお りますので、交流会では是非話しかけていただければと思います。 株式会社ヒトクセ フルスタックエンジニア 島田 31

×