DOMを指定してWEBページのスクリーンショットをとる。

DOM指定をしてスクリーンショットを取りたいと思って調べたらpageresというものを見つけました。

早速使ってみました。

インストール

Node.jsとPhantomJSが必要なので、それをまず確認。無ければインストールする。

yatta472:~/workspace (master) $ node --version
v6.11.2
yatta472:~/workspace (master) $ npm --version
3.10.10

うむ。Nodeは入っていた。それではPhantomJSをインストール。

yatta472:~/workspace/repos (master) $ sudo npm install --global phantomjs
 :（つらつらとかなり長いログが出るので省略）
yatta472:~/workspace/repos (master) $ phantomjs --version
2.1.1

pathが通っていない場合はパスを通す。

そしてpageres-cliをインストール。

yatta472:~/workspace/repos (master) $ sudo npm install --global pageres-cli
yatta472:~/workspace/repos (master) $ pageres --version
4.1.0

これで準備完了。

使ってみる（Part1 - 失敗）

それでは早速使ってみる。

yatta472:~/workspace/repos (master) $ pageres http://www.lovelive-anime.jp/uranohoshi/sp_uc2.php --filename='hakodate' --selector='.livetext'                                                                                                     
Fontconfig warning: ignoring C.UTF-8: not a valid language tag

あれ・・・・Fontconfig warning: ignoring C.UTF-8: not a valid language tagっていうエラーが出る。そしてファイルもできていない。

ってことで何か失敗しておる。

エラーメッセージからするとlanguageの設定がC.UTF-8は不正だということで、LANGの設定を確認してみる。

yatta472:~/workspace/repos (master) $ export | grep LANG
declare -x LANG="C"
declare -x LANGUAGE="C.UTF-8"

なるほど。確かにC.UTF-8になっているので、環境変数を設定しなおす。

yatta472:~/workspace/repos (master) $ export LANG="en_US.UTF-8"
yatta472:~/workspace/repos (master) $ export LANGUAGE="en_US.UTF-8"

やってみる（Part2 - 失敗）

これで準備が整ったからもう一度やってみる。

yatta472:~/workspace/repos (master) $ pageres www.lovelive-anime.jp/uranohoshi/sp_uc2.php --filename='hakodate' --selector='.livetext'                                                                                                     

✔ Generated 1 screenshot from 1 url and 1 size

成功した！！が！！

出来上がった画像を見ると日本語が表示されていない・・・・orz

ってことで、日本語ファイルをインストールする。

yatta472:~/workspace/repos (master) $ wget -S -O "NotoSansCJKjp-hinted.zip" "https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip"
yatta472:~/workspace/repos (master) $ sudo mkdir /usr/share/fonts/noto
yatta472:~/workspace/repos (master) $ unzip NotoSansCJKjp-hinted.zip 
Archive:  NotoSansCJKjp-hinted.zip
yatta472:~/workspace/repos (master) $ ls
LICENSE_OFL.txt              NotoSansCJKjp-Light.otf    NotoSansCJKjp-hinted.zip       
NotoSansCJKjp-Black.otf      NotoSansCJKjp-Medium.otf   NotoSansMonoCJKjp-Bold.otf  
NotoSansCJKjp-Bold.otf       NotoSansCJKjp-Regular.otf  NotoSansMonoCJKjp-Regular.otf  tmp/
NotoSansCJKjp-DemiLight.otf  NotoSansCJKjp-Thin.otf     README
yatta472:~/workspace/repos (master) $ sudo cp -p *.otf /usr/share/fonts/noto/.
yatta472:~/workspace/repos (master) $ sudo chmod 644 /usr/share/fonts/noto/*.otf
yatta472:~/workspace/repos (master) $ sudo chown root:root /usr/share/fonts/noto/*.otf

そしてフォントのcacheを再構築する。

yatta472:~/workspace/repos (master) $ sudo fc-cache -fv
/usr/share/fonts: caching, new cache contents: 0 fonts, 4 dirs
/usr/share/fonts/cmap: caching, new cache contents: 0 fonts, 5 dirs
/usr/share/fonts/cmap/adobe-cns1: caching, new cache contents: 0 fonts, 0 dirs
/usr/share/fonts/cmap/adobe-gb1: caching, new cache contents: 0 fonts, 0 dirs
/usr/share/fonts/cmap/adobe-japan1: caching, new cache contents: 0 fonts, 0 dirs
/usr/share/fonts/cmap/adobe-japan2: caching, new cache contents: 0 fonts, 0 dirs
/usr/share/fonts/cmap/adobe-korea1: caching, new cache contents: 0 fonts, 0 dirs
/usr/share/fonts/noto: 

caching, new cache contents: 9 fonts, 0 dirs
/usr/share/fonts/truetype: caching, new cache contents: 0 fonts, 2 dirs
/usr/share/fonts/truetype/dejavu: caching, new cache contents: 21 fonts, 0 dirs
/usr/share/fonts/truetype/liberation: caching, new cache contents: 16 fonts, 0 dirs
/usr/share/fonts/type1: caching, new cache contents: 0 fonts, 1 dirs
/usr/share/fonts/type1/gsfonts: caching, new cache contents: 35 fonts, 0 dirs
/usr/local/share/fonts: caching, new cache contents: 0 fonts, 0 dirs
/home/ubuntu/.local/share/fonts: skipping, no such directory
/home/ubuntu/.fonts: skipping, no such directory
/usr/share/fonts: caching, new cache contents: 0 fonts, 4 dirs
/usr/local/share/fonts: caching, new cache contents: 0 fonts, 0 dirs
/home/ubuntu/.local/share/fonts: skipping, no such directory
/home/ubuntu/.fonts: skipping, no such directory
/var/cache/fontconfig: cleaning cache directory
/home/ubuntu/.cache/fontconfig: not cleaning non-existent cache directory
/home/ubuntu/.fontconfig: not cleaning non-existent cache directory
fc-cache: succeeded

やってみる（Part3 - 成功）

そして再度コマンドを実行。

yatta472:~/workspace/repos (master) $ pageres www.lovelive-anime.jp/uranohoshi/sp_uc2.php --filename='hakodate' --selector='.livetext'                                                                                                            

✔ Generated 1 screenshot from 1 url and 1 size

正常に日本語も表示されてうまくいった。やったね。