ヘッドレスブラウザとは「画面がないWEBブラウザ」の事です。
最近では Headless Chrome が人気です。 参考 : https://goo.gl/NQsFS2
が、npm だけでインストールできる phantomJS を紹介します。
WebKit（Safari） ベースのヘッドレス（画面なし）ブラウザ
npm install phantomjs
以下のパスを手動で追加します
./node_modules/phantomjs/bin/phantomjs
brew install phantomjs
yum -y install freetype
yum -y install fontconfig
npm install -g phantomjs
Gecko（firefox） ベースのヘッドレス（画面なし）ブラウザ
brew install slimerjs
npm install -g slimerjs
ヘッドレスブラウザを簡単に扱うライブラリ（JavaScript）です。 このcasperJSから「phantomJS」または「slimerJS」を操作します。
brew install casperjs
yum -y install freetype
yum -y install fontconfig
npm install -g casperjs
test.js で下記コードを保存
var AnchorArrays = [];
var casper = require('casper').create();
casper.start('http://flatsystems.net/kakunin.php', function() {
});
casper.then(function() {
casper.wait(3000, function() {
// xpath要素の取得
var xpath = "//*[@id='my_id']";
var element = this.evaluate(function(path){
return __utils__.getElementByXPath(path).innerHTML;
},xpath);
console.log( element );
//png
this.capture('kakunin.png');
console.log( 'キャプチャを作成しました。' );
});
});
casper.run();
casperjs test.js
casperjs --engine=slimerjs test.js
slimerJSで起動するときは --engine=slimerjs を追加します。
https://chrome.google.com/webstore/detail/resurrectio/kicncbplfjgjlliddogifpohdhkbjogm
Mac OSX の場合は brew でインストールできます
brew install slimerjs
インストールが完了したらバージョンを確認しておきます
slimerjs -v
```
var page = require("webpage").create();
page.open('http://zozo.jp/')
.then(function(status){
if(status === 'success'){
console.log(page.title);
page.render('test.png');
}
phantom.exit();
});
```
実行します
```
slimerjs test.js
```
# slimerjs をCUI環境で実行させる
slimerjsはGUI環境下でないと動作しません。
CUIで実行すると
```
slimerjs --debug=true XXXXX.js
```
```
Error: no display specified
```
というエラーになります。
そこで CUI でも実行できるように Xvfb( X virtual framebuffer ) をインストールします。
```
yum -y install xorg-x11-server-Xvfb
```
Xvfbの使い方は 実行したい処理の前に ```xvfb-run``` を付け加えます
```
Xvfb slimerjs --debug=true XXXXX.js
```
これでCUI下の環境でも実行できます。
Heroku上でヘッドレスWEBブラウザ phantom.js を使用するにはビルドパックを追加します。 ビルドパックをGithub上で公開してくれている方がいるのでありがたく利用させていただきます。
https://github.com/stomita/heroku-buildpack-phantomjs
ターミナルから以下を実行
cd "アプリのあるディレクトリ"
heroku login
heroku buildpacks:add --index 1 https://github.com/stomita/heroku-buildpack-phantomjs
git push heroku master
heroku run phantomjs -v
バージョンが帰ってくればOK
`phantom_test.js` ファイルを以下の内容で作成します。var page = require('webpage').create();
page.open('http://yahoo.co.jp/', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.render('example.png');
}
phantom.exit();
});
git add .
git commit -m "add buildpack"
git push heroku master
heroku run phantomjs phantom_test.js
「Status: success」が帰ってくればOK
フォントは `./fonts` ディレクトリに .ttf フォントファイルを置いて git push すればOKです。
フォントファイルは著作権に注意して使用しましょう
https://www.google.com/get/noto/#sans-jpan
heroku run fc-match sans:lang=ja