RaspberryPiにPhantomJSをインストールする

昔作ったPhantomJSのプログラムをRaspberryPiでも実行したいと思ったのですが、RaspberryPiのパッケージがなく、ビルドにも数時間かかるということだったので諦めていました。そろそろ時間もできたのでインストールすることにしました。

PhantomJS | PhantomJS

ネットを探すと既にビルドしているものを公開している方がいらっしゃったので、そちらを使うことにしました。自分でビルドするつもりでしたが、さすがに5時間とかかかると言われると厳しいです。

以下のサイトを参考にさせていただきました。ビルドしたバイナリも公開していただいているので大変ありがたいです。（バージョンは2.1.1なので新しいです！）

https://mecrazy.net/ja/2016/06/06/raspberry-pi%E7%94%A8%E3%81%ABphantomjs-2-1-1%E3%82%92%E3%83%93%E3%83%AB%E3%83%89%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F/

他にも

www.miyakawa.link

github.com

こちらのサイトもあるんですが、少しバージョンが古かったので前者にしています。

インストールする

ビルドされたバイナリは以下にありますのでgitを使って取得します。

github.com

ビルド時に必要なパッケージも事前にインストールしていますが念のためということで。

$ sudo apt-get install build-essential g++ flex bison gperf ruby perl libsqlite3-dev libfontconfig1-dev libicu-dev libfreetype6 libssl-dev libpng-dev libjpeg-dev
$ git clone https://github.com/mecrazy/phantomjs-binaries.git
$ chmod 755 phantomjs-2.1.1-linux-armhf
$ sudo apt-get install fonts-ipafont
$ sudo ln -sf `pwd`/bin/phantomjs-2.1.1-linux-armhf /usr/local/bin/phantomjs

cloneしたディレクトリにあるbinディレクトリにバイナリがあります。phantomjsもあります（多分x86なバイナリのリンク？）が、今回使用するのはarm版のphantomjs-2.1.1-linux-armhfになります。これを/usr/local/bin/シンボリックリンクを作成します。これで準備完了です。

以下のようにコマンドを実行するとバージョン出ます。これでOKです。

$ phantomjs --version
2.1.1

サンプルっぽいものを実行してみる

PhantomJSはWebkitベースのHeadlessブラウザなので、googleのトップページにアクセスしてスクリーンキャプチャをしてみます。

//sample.js
var page = require('webpage').create();
page.open('https://google.com', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    //screen capture
    page.render('google.png');
  }
  phantom.exit();
});

実行すると、画面上にURLアクセスしたステータスを表示して終了します。実行ディレクトリにgoogle.pngができていれば成功です。

$ phantomjs sample.js
Status: success
$ ls
google.png  sample.js

google.pngは以下のような画像になります。（フォントをインストールしてないと文字化けしますので注意です。）

f:id:ueponx:20170316133617p:plain

簡単な説明

ソースの一行目でブラウザオブジェクトを作成し

var page = require('webpage').create(); // オブジェクト生成

指定されたURL（https://google.com）にアクセスし、アクセスに成功したら画面イメージをキャプチャします。

page.open('https://google.com', function(status) { // URLへアクセス
  console.log("Status: " + status); // 実行のステータスをコンソール上に表示
  if(status === "success") { //アクセスに成功したら
    //screen capture
    page.render('google.png'); //スクリーンキャプチャする
  }
  phantom.exit(); //実行終了
});