PhantomJSでスクリーンショットを撮る＆HTML2PDF

PhantomJSは画面の無いブラウザをJavaScriptで操作できます。タイトルはPhantomJSの一部の機能でしかなく、ブラウザで可能な処理なら何でもできそうです。
PhantomJSを使う準備と、いくつかの使い方をまとめておきます。

インストール

Win/Linux/Mac用にはバイナリが用意されています。
私はMac上のHomeBrewを使いました。

$ brew update && brew install phantomjs
$ which phantomjs
/usr/local/bin/phantomjs
$ phantomjs --version
1.8.1

サンプルを取得

HomeBrewではサンプルがインストールされないっぽいので、GitHubから取得します。

$ git clone git://github.com/ariya/phantomjs.git phantomjs

examplesディレクトリにサンプルが配置されます。
各ファイルの説明はWikiを確認してください。

いくつか実行してみます。

$ phantomjs version.js 
using PhantomJS version 1.8.1
$ phantomjs version.coffee 
using PhantomJS version 1.8.1

Coffee Scriptも動くようです。

スクリーンショットを撮る

ではさっそくスクリーンショットを撮ってみます。サンプルに既にあるので、これを使うだけです。

$ phantomjs rasterize.js http://www.google.co.jp google.png

出力結果です。

HTML2PDF

出力形式は拡張子から判別しているので、PNG/PDF/JPEG/GIFなどが出力できるようです。
PDFの場合、以下の様にオプションを渡す事で、ページ分けする事ができます。

$ phantomjs rasterize.js <ファイル名> <出力ファイル名>.pdf "A4"
$ phantomjs rasterize.js <URI> <出力ファイル名>.pdf "A4"

オプションにサイズなどを指定する事も可能なんですが、毎度指定するのは面倒な場合、以下の様にすればOKです。

// html2pdf.js
var page = new WebPage();
var system = require("system");
// change the paper size to letter, add some borders
// add a footer callback showing page numbers
page.paperSize = {
  format: "A4",
  orientation: "portrait",
  margin: {left:"2.5cm", right:"2.5cm", top:"1cm", bottom:"1cm"},
  footer: {
    height: "0.9cm",
    contents: phantom.callback(function(pageNum, numPages) {
      return "<div style='text-align:center;'><small>" + pageNum +
        " / " + numPages + "</small></div>";
    })
  }
};
page.zoomFactor = 1.5;
// assume the file is local, so we don't handle status errors
page.open(system.args[1], function (status) {
  // export to target (can be PNG, JPG or PDF!)
  page.render(system.args[2]);
  phantom.exit();
});

ただし、UTF-8なページは問題ありませんでしたが、はてなダイアリーはEUC-JPのためか、文字化けしてしまいました。
outputEncoding.coffeeというのがあるので試してみましたが、以下の通り、UTF-8しか出力されず。

$ phantomjs outputEncoding.coffee 
Using default encoding...
UTF-8: こんにちは、世界！

Using other encodings...
UTF-8: こんにちは、世界！
UTF-8: こんにちは、世界！
UTF-8: こんにちは、世界！
System: こんにちは、世界！

Linux上ではフォントの問題を解決する方法がありましたが・・。

次回はnode.jsから扱う方法を調べてみます。

[追記 2013/02/06]
続きを書きました。
node.jsからPhantomJSを使ってPDFを生成する - ZeBeVogue別館