17HackersLT20180119.pdf

Transcript

1. PhantomJSで 快適スクレイピング生活 株式会社オールアバウト 鹿島真人 1
2. 自己紹介 名前 鹿島 真人（カシマ マコト） 仕事 2017～ マークアップエンジニア・UXデザイン 2018～ 広告配信システムの運用 趣味 筋トレ 推し 黒澤ルビィ 2
3. Agenda PhantomJSとは PhantomJSを使った理由 PhantomJSでできること PhatomJSのDos&Don'ts 3
4. PhantomJSとは 4
5. PhantomJSとは コマンドラインから動くWebブラウザ(ヘッドレスブラウザ)。 $ phantomjs example.js // example.js var page = require('webpage').create(); // おまじない page.open('http://google.com', function (status) { // Page Opened! }); 上記のようなコードを介してスクレイピング（Webサイトに外部 からアクセスして情報収集）できるツール。 5
6. PhantomJSを使った理由 6
7. PhantomJSを使った理由 データを分析して商品紹介サイトのCTR改善施策を打ちたい 仮説 → データ出し → 仮説検証 → フィードバック → 仮説 → … 仮説 紹介商品数が多い方が良いのでは？ 商品情報欄の文字数が多い方が良いのでは？ 最初の購買ボタンまでの冒頭の長さとCTRが関係あるのでは？ etc... 7
8. PhantomJSを使った理由 必要な情報の例 記事ID CTR 商品数 商品情報の文字数 最初の商品までの距離 1 15% 12個 528文字 1280px 自サイトのDBでも集計ツールでも取れないデータがある DBで取れても、毎回エンジニアに依頼するとスピード感を損 なう 8
9. PhantomJSを使った理由 他サイトの情報もとってみたい 競合サイトはどんなコンテンツを作っている？ 競合サイトの見出しやタイトルでのSEO対策はどうなっている？ → スクレイピングしよう！！ 9
10. PhantomJSでできること 10
11. PhantomJSでできること 基本のつかいかた require('webpage') でWebページのオブジェクトを作成。 var page = require('webpage').create(); open(url, callback()) Webページを開く。 page.open('http://google.com', function (status) { }); 11
12. PhantomJSでできること render() でスクリーンショットがとれる。 var page = require('webpage').create(); page.open('http://google.com', function (status) { page.viewportSize = {width:'800px', height:'600px'}; page.render('output.png'); }); 12
13. PhantomJSでできること settings.userAgent でUserAgent偽装 var page = require('webpage').create(); page.open('http://google.com', function (status) { page.viewportSize = {width:'800px', height:'600px'}; page.settings.userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'; // iOS11 の Safari に偽装 page.render('output.png'); }); 実演 13
14. PhantomJSでできること evaluate() ページ内でJSを走らせる。 includeJS() 外部ライブラリの読み込み。 page.open('http://google.com', function (status) { page.includeJs('../lib/jquery.min.js', function() { // JQueryを読み込み page.evaluate(function() { // アクセスしたページで実行 console.log($('.foo').text()); }); }); }); DOM要素の中身を取ってきたりするのに使える。 ex) 記事の小見出しを全取得、特定のクラスを持つ要素のテキストを全取得 実演 14
15. PhantomJSでできること POST通信もできる open() に引数としてメソッド、データ、ヘッダーを渡す var data = {"kurosawa": "ruby", "kunikida": "hanamaru"}; var headers = {"Content-Type": "application/json"}; var server = "http://posttestserver.com/post.php?dump"; page.open(server, 'POST', data, headers, function (status) { // POST 通信 }); 15
16. PhantomJSでできること そのほか addCookie() でCookie追加/削除 deleteCookie() で特定Cookie削除 . ファイルシステムのモジュールも用意 var fs = require('fs'); fs.read('input.csv'); fs.write('output.csv', data); 16
17. PhantomJS の Dos&Dont's 17
18. Dos&Dont's DOMの情報を取得したい // DONT var foo; page.evaluate(function () { foo = $('.bar').text(); }); // evaluateの外側にアクセスできない！ // DO var getFoo = page.evaluate(function () { var foo = $('.bar').text(); return foo; }); // 関数の返り値として受け取る。 18
19. Dos&Dont's evaluate() 中に、コマンドラインにconsoleを出したい // DONT page.evaluate(function () { console.log('evaluateなう'); }); // コマンドラインには表示されない！ // DO page.onConsoleMessage = function(msg, lineNum, sourceId) { console.log(msg); }; page.evaluate(function () { console.log('evaluateなう'); }); // onConsoleMessage() を使う。 19
20. Dos&Dont's for文で複数URLまわしたい // DONT for (var i = 0; i < urls.length; i++) { page.open(urls[i], function (status) { }); } // page.openは非同期のため、for文が先に回ってしまう！ // DO function process() { page.open(urls[0], function (status) { urls.shift(); process(); }); } // 順番に実行される。 20
21. まとめ 21
22. まとめ PhantomJSはコマンドラインから実行するヘッドレスブラウ ザ。 Webスクレイピングに使える。 . webpage モジュールに用意されてるメソッドを使って、色々で きる。 とくに evaluate() はページ内でJSを実行できるので、ページ 上でJSでできることはなんでもできる。 . Web上の情報を快適に自動収集できる。 22
23. 注意 23
24. NOTICE! Webスクレイピングは一部で法律関係の議論があります アクセスが攻撃にならないように注意 Librahack事件 音声や動画のダウンロードには注意 違法コンテンツダウンロード刑罰化 24
25. さいごに 25
26. 専門家が選ぶお買い物情報メディア 26