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

日本語フォントがインストールされていない環境で 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 日本語フォントがある場合

補足

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

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

参考

• CentOSにGoogle Noto フォントをインストール
• CentOSからPhantomJSを実行すると画面キャプチャの日本語が表示されなくなる問題