PhantomJSでスクリーンキャプチャをとろう!

PhantomJSでスクリーンキャプチャをとろう!

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

WEBページのスクリーンキャプチャをとりたい!しかも自動で「パシャパシャ」ととりたい!
というニーズは結構あります。

特定のWEBページのトップページを定期的に巡回して、スクリーンキャプチャをとってサムネイルを作成したり、サービスの正常稼働確認に使ったりと利用シーンも豊富です。

ということで、Linuxを使ってスクリーンキャプチャを取得してみたいと思います。

環境

debian 7
PhantomJS

以前、macではbrewで簡単に構築できましたが、今回はPATHの設定で少し手こずりました・・・

PhantomJSとは

PhantomJSとはwebkitベースのヘッドレスブラウザです。一般的なブラウザを使わずにエミュレートすることができます。
JSという名がついているので、javascriptのライブラリか何か?と思われがちですが、全然違います。

何ができるの?

普通のブラウザができることはだいたいできます。
javascriptも実行できるので、WEBサイトの自動検証などにもよく使われます。

PhantomJS公式サイト

http://phantomjs.org/

さっそく環境構築

システムソフトウェアの更新や必要モジュールのインストール

build-essential
C/C++コンパイラやMake等の標準開発ツール一式を一括でインストールするためのパッケージです。

chrpath
ELF バイナリの rpath 編集用ツールです。

libssl-dev
開発用SSLライブラリです。

libxft-dev
FreeType ベースのフォント描画ライブラリです。

PhantomJSを動かすために必要なパッケージをインストール

libfreetype6
FreeType 2 フォントエンジン共有ライブラリファイルです。

libfreetype6-dev
FreeType 2 フォントエンジン開発用ファイルです。

libfontconfig1
汎用フォント設定ライブラリ

libfontconfig1-dev
汎用フォント設定ライブラリ開発用ファイルです。

環境変数の設定

適宜最新バージョンに読み替えて下さい。

PhantomJSのインストール

シンボリックリンクの作成

ここまで正常にできればインストール完了ですので、バージョンを確認します。

バージョン確認

PATHを通す

どこからでも起動できるようにPATHを通しておきます。

javascriptを実装

非常にシンプルなjavascriptで実装できます。

capture.jsと名前をつけて保存し、実行してみます。

文字化けしてしまっていますが、スクリーンキャプチャがとれました。

image05

文字化けを解消しよう

さすがに文字化けしてると使えないシーンが多いので解消しておきたいと思います。

フォント設定用のライブラリをインストール

現在のフォントをみてみます。

DejaVuSans.ttf: “DejaVu Sans” “Book”

DejaVu Sans が設定されています。

日本語フォントをインストール

標準的な日本語フォントをインストールします。

フォントリストをみてみます。

IPAフォントがインストールされました。

フォントキャッシュをクリアします。

もう一度スクリーンキャプチャを取得

文字化けが解消したかどうか、もう一度キャプチャをとってみます。

image05

はいダメでした。

色々やってみた結論

font設定ファイルで優先順位を変えてみたり、他のフォントを入れてみたりと色々試しましたが、何をやっても文字化けが解消しませんでした。

どうやら「DejaVu」フォントがインストールされている環境では、こいつが優先されてしまうようなので、こいつを移動してみました。

念のためキャッシュをクリアして再度キャプチャを取得してみます。

image07

今度は文字化けも解消して綺麗なキャプチャがとれました。

まとめ

文字化け対応に手間取りましたが、非常にシンプルな方法でスクリーンキャプチャが取れるようになりました。

次回は自動で様々なページをスクリーンキャプチャできるように改良していこうと思います。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...