PhantomJS入門 スクリーンキャプチャを撮るまで
PhantomJSとは
PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
http://phantomjs.org/
PhantomJSはJavaScript APIで動くヘッドレスWebKitです。
PhantomJSはDOMハンドリング、CSSセレクタ、Canvas、SVGなどネイティブにサポートしており、高速に動作します。
ものすごく簡単にいうと、ターミナルで動く画面をもたないブラウザですね。
主な利用シーンは以下のとおりです。
- Webテスト
- ページオートメーション
- スクリーンキャプチャ
- ネットワークモニタリング
インストール
Macの人は
brew install phantomjs
それ以外の人はバイナリをダウンロードできます。環境変数PATHを設定すれば動作します。
http://phantomjs.org/download.html
Hello World
テキストエディタを開いて次のようにコーディングします。hello.jsというファイル名で保存します。
console.log('Hello, world!');
phantom.exit();
ターミナルで次のように実行します。
phantomjs hello.js Hello, world!
1行目のコードはターミナルへの出力です。
2行目のコードはphantom.exit()は処理の終了を意味します。このコードを呼ばないと処理は終了しません。
Page Loading
Web Pageオブジェクトによって、ロード、解析、レンダリングすることが可能です。
次のコードは、Googleホームページをロードして、画像ファイル(google.png)として出力します。
var page = require('webpage').create(); page.open('http://google.com', function () { window.setTimeout(function () { page.render('google.png'); phantom.exit(); }, 200); });
上記のコードをcapture.jsというファイル名で保存します。
ターミナルから実行します。
phantomjs capture.js
すると、次のようなgoogle.pngファイルが生成されます。
次のコードloadspeed.jsは、URLのロードかかった時間を計測します。
var page = require('webpage').create(), system = require('system'), t, address; if (system.args.length === 1) { console.log('Usage: loadspeed.js <some URL>'); phantom.exit(); } t = Date.now(); address = system.args[1]; page.open(address, function (status) { if (status !== 'success') { console.log('FAIL to load the address'); } else { t = Date.now() - t; console.log('Loading time ' + t + ' msec'); } phantom.exit(); });
実行すると次のようになります。
phantomjs loadspeed.js http://www.google.com Loading http://www.google.com Loading time 719 msec
元ネタ
https://github.com/ariya/phantomjs/wiki/Quick-Start
本家のサイトのQuick-Startを参考にしました。
一部、内容が古いのか、私の環境が古いのか、そのままでは動きませんでした。
#スクリーンキャプチャ撮るときにsetTimeoutがいるところなど
次回
PhantomJSを使って、何か作ってみます。