PhantomJS
centos7

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)

参考