Posted at

Google Font で PhantomJS / Poltergeist の綺麗なスクリーンショットを撮影する

More than 1 year has passed since last update.

日本語フォントがインストールされていない環境で PhantomJS / Poltergeist のスクリーンショットを撮影すると、日本語部分が空白になったり、文字化けしたり、いろいろと辛いです。

せっかくなので Google の Noto フォントを利用して綺麗なスクリーンショットを撮影する方法を説明します。


環境

確認には次の環境を利用しています。


  • 環境: CentOS7 (CentOS6でも同様の手順でいけると思います)


    • Minimal ISO をインストールした環境



  • PhantomJS 2.1.1 (1.9.8 でも同様の手順でいけると思います)


インストール方法



  1. https://www.google.com/get/noto/ から Noto Sans CJK JP をダウンロード
    Google Not Fonts へアクセスしダウンロードします。
    次のコマンドを実行することでもダウンロードすることができます。

  $ wget -S -O "NotoSansCJKjp-hinted.zip" "https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip"


  1. ダウンロードしたファイルを /usr/share/fonts/noto/ へ展開

  $ sudo mkdir /usr/share/fonts/noto

$ mkdir $$ && cd $$
$ unzip NotoSansCJKjp-hinted.zip
$ sudo cp -p *.otf /usr/share/fonts/noto/
$ sudo chmod 644 /usr/share/fonts/noto/*.otf
$ sudo chown root:root /usr/share/fonts/noto/*.otf


  1. フォントキャッシュ更新

  $ sudo fc-cache -fv


確認

次のようなファイルを作成


test.js

var page = require('webpage').create();

page.open('https://www.google.co.jp/intl/ja/about/', function() {
window.setTimeout(function() {
page.render('test.png');
phantom.exit();
}, 200);
});



このテストスクリプトは CentOSからPhantomJSを実行すると画面キャプチャの日本語が表示されなくなる問題を、改変なく利用しています。


次のコマンドを実行してスクリーンショットを撮影。

$ phantomjs test.js

Before
日本語フォントがない場合
After
日本語フォントがある場合

before.png
after.png


補足

rspec で次のようにすると任意のスクリーンショットを取れるでしょう。

page.save_screenshot('screenshot.png', full: true)


参考