/var/www/yatta47.log

やったのログ置場です。スクラップみたいな短編が多いかと。

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

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

 

まとめ

予想以上に簡単にできた。これで必要な部分だけとってスクショを取ることができたのでいろいろできる幅が広がりそうです。

でも・・・・

これをRubyでやりたいんじゃぁ!!

似たようなGemないのかな。探しても見つからない・・・・同じようにRubyもしくはRailsでDOM単位でスクリーンショットが出来るGemがあったら教えてください。

それともこれは、Node.jsを勉強しろってことなのか?

Node.js超入門

Node.js超入門

ではでは。

 

参考にしたサイト

サーバサイドCUIでDOM単位のWebページキャプチャができるpageresの話 | もやし工房

Ubuntu - Fontconfig warning: ignoring UTF-8: not a valid region tag · Issue #13433 · ariya/phantomjs · GitHub

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

Real Time Web Analytics