エンジニアの呉です。
今回紹介したいのはコマンドラインから使えるWebブラウザーであるphantomjsです。そもそも、なんでphantomjsを使うのか？それはWebサイトのキャプチャーをとるために、最初wkhtmltoimageを使ったけど、スマホ版はうまく撮れなかったため、いろいろを調べた結果はphantomjsを決めました。
phantomjsについて
phantomjsはコマンドラインから使えるブラウザーです。レンダリングエンジンには「WebKit」が採用されています。phantomjsを利用すると、コマンドラインから、Webブラウザーを操作して、ブラウザー内に表示されるデータを取得したり、スクリーンショットを撮ったりすることができます。Webサイトからデータを取り出すスクレイピングにも使えます。
phantomsのインストール方法（centos 6.7）
ハードウェアのスペック
- RAM: at least 4 GB
- Disk space: at least 3 GB
- CPU: 1.8 GHz, 4 cores or more
ビルド方法
- sudo yum -y install gcc gcc-c++ make flex bison gperf ruby openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel libpng-devel libjpeg-devel python-argparse
- cd /usr/local/
- git clone git://github.com/ariya/phantomjs.git
- cd phantoms
- git checkout 2.1.1
- git submodule init
- git submodule update
- python build.py
- ln -sf /usr/local/phantomjs/bin/phantomjs /usr/local/bin/phantomjs
phantomsの使ってスクリーンショットを撮ってみましょう
まず一般的な撮り方は非常にシンプルです
var page = require('webpage').create();
var system = require('system');
if (system.args[3] !== undefined) {
page.settings.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1";
}
var url = system.args[1];
var file = system.args[2];
page.open(url, function (status) {
setTimeout(function(){
page.render(file);
phantom.exit();
},2000);
});
simple.jsと名前をつけて保存し、PC版のキャプチャーを撮ってみる。
phantomjs simple.js http://www.yahoo.co.jp yahoo.png
続き、SP版のキャプチャーも撮ってみる。
phantomjs simple.js http://www.yahoo.co.jp yahoo.png sp
画像のサイズは以下のコードで調整できます
var width = 1000;
var height = 800;
page.viewportSize = {
width:width,
height:height
};
page.clipRect = {
left:0,
right:0,
width:width,
height:height
};
サイズを調整した後PC版
サイズを調整した後SP版
今回このブログで一番ご紹介したいので広告遷移ページがあるサイトのキャプチャーの撮り方。
まず上のソースコードを使って、以下のサイトを撮ってみます。
phantomjs simple.js http://www.nikkeibp.co.jp/atcl/news/16/03/29/09164/ test.png
結果としては広告があるページのキャプチャーしか取れていない、期待ハズレとなります。
ソースを書き直してsimple_2.jsとして保存します。
var page = require('webpage').create();
var system = require('system');
if (system.args[3] !== undefined) {
page.settings.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1";
}
var url = system.args[1];
var file = system.args[2];
var width = 1280;
var height = 1000;
page.viewportSize = {
width:width,
height:height
};
page.clipRect = {
left:0,
right:0,
width:width,
height:height
};
page.open(url, function (status) {
page.onLoadFinished = function () {
page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', function () {
var a = page.evaluate(function () {
$('a').each(function () {
var tmp = $(this).text();
if (tmp == "このページをスキップする") {
$(this).click();
}
});
});
window.setTimeout(function () {
page.render(file);
phantom.exit();
}, 3000);
});
}
});
もう一回実行してみます。
phantomjs simple_2.js http://www.nikkeibp.co.jp/atcl/news/16/03/29/09164/ test1.png
今回はうまく撮れました。
phantomsは他にもいろいろなことができます。詳しくはサイトを参考してください。
API | PhantomJS