PhantomJS（CasperJSの初歩）
PhantomJSは、コマンドラインから操作できるWebブラウザです。
CasperJSは、そのユーティリティなライブラリです。
Web上のデータを取り出すスクレイピングに活用できます。
ブラウザてことでPhantomJSのレンダリングエンジンはWebkitになりますが、
画面（GUI）がありません。
操作はJavaScriptで行います。
実行はターミナル（Mac）orコマンドプロンプト（Win）を使用します。
まずは、npmを使ってインストール（ターミナルorコマンドプロンプト）
（1）PhantomJSをインストール
$ sudo npm install -g phantoms
（2）CasperJSをインストール
$ sudo npm install -g casperjs
★CasperJSのAPIドキュメント
http://docs.casperjs.org/en/latest/modules/index.html
クラスをみると様々なことができそうです。
ブラウザなので、スクリーンショットをとってローカルに保存させてみます。
ScreenShot.jsとか任意の名前で下記のコードを保存します。
====================
//とりあえず即時関数でラップ。
(function() {
//CasperJSのオブジェクトをつくります。
var casper = require('casper').create();
//用意します。
casper.start();
//スクリーンショットする画面サイズを指定します。（横, 縦）
casper.viewport(1024, 768);
//スクリーンショットしたいサイトをセット
casper.open(‘http://zizo.ne.jp/');
//スクリーンショットさせます。screenshot.jpgで保存。拡張子はなんでも
casper.then(function() {
casper.capture(’screenshot.jpg');
});
//処理を走らせます。
casper.run();
})();
====================
ターミナルから保存先のファイルを実行させます。
以下のコマンドを実行します。
$ casperjs ScreenShot.js
同階層にできてるはずです。
casper.capture(’./img/screenshot.jpg’);
とかにすれば imgディレクトリに格納されます。
ということで
PhantomJSでページレンダリングされた状態を簡単なプログラムでキャプチャできます。
JavaScriptの記述でDOMの要素を付け加えてみたり、削ったりすることも可能ですし、イベントを活用すればページ内のリンク先のスクリーンショットをとることもできます。
ブラウザたちあげるのが面倒くさい場合、ターミナル起動して
別途、JSONファイル用意してURLのキャプチャをまるっととる。
そういうかんじで活用できます。
下記のドキュメントをみればUserAgentを変更すれば、様々な環境をテストできるのでモバイルの確認なんかにもよさそうです。
http://docs.casperjs.org/en/latest/modules/casper.html#useragent
上記のJSコードは、メソッドチェーンでも記述できます。
背景色白とページタイトルを取得した画像名に変更しました。
====================
(function() {
var casper = require('casper').create();
var linkURL = "http://www.zizo.ne.jp/";
var title;
casper.start().viewport(1024, 768).thenOpen(linkURL, function () {
title = this.getTitle();
})
.thenEvaluate(function() {
document.body.bgColor = '#ffffff';
}, 'setBackGround')
.then(function() {
this.echo(title);
this.capture('./screenshot/img/' + title + '.png');
});
casper.run();
})();
====================
ちなみにCoffeeScriptにも対応してます。
http://docs.casperjs.org/en/latest/extending.html#using-coffeescript
PhantomJSのサイト
http://phantomjs.org/
CasperJSのサイト
http://casperjs.org/
小ネタでした。
