オールアバウト Advent Calendar 9日目です!!
目的
The Nightmare Before Christmasに触発されて
アドベント・カレンダーのネタとしてNightmare使って遊んでみました～。
参考
nightmare.jsとgmを使ってnode.jsでLIGブログの更新をSlackでゲットだぜ
naoya sushi!!!
I like Sushi
NightmareJSについて
いうてPhantomjsのラッパー
PhantomjsやCasperjsなどの他のヘッドレスブラウザーに比べ、シンプルにコードをかけるのが特徴
環境準備
用意するもの
- 十分に作業できるだけの時間
- アドベント・カレンダーを書いているんだな、という周囲の理解
- CentOS6のはいったサーバー
nodejsいれる
yumでいれても良いがnodeはバージョン多すぎて大変なのでnodebrewでいれる
CentOSにnodebrewをインストールする
wget git.io/nodebrew
perl nodebrew setup
export PATH=$HOME/.nodebrew/current/bin:$PATH
source ~/.bashrc`
※ついでにnpmも入ってくれるので素敵
gccのバージョン低いとnodebrewで落とせないのでバージョンUP
Install g++/gcc 4.8.2 in CentOS 6.6
wget http://people.centos.org/tru/devtools-2/devtools-2.repo -O /etc/yum.repos.d/devtools-2.repo
yum install devtoolset-2-gcc devtoolset-2-binutils
yum install devtoolset-2-gcc-c++ devtoolset-2-gcc-gfortran
/opt/rh/devtoolset-2/root/usr/bin/gcc --version
->gcc (GCC) 4.8.2 20140120 (Red Hat 4.8.2-15)
以上がでればOK
bash設定する(ついでに~/.bashrcにも設定）
scl enable devtoolset-2 bash
source /opt/rh/devtoolset-2/enabl
nodejsの設定
v4,v5などいろいろあるのでお好きに…
nodebrew install stable
→v5.1.0が多分落ちてくる
最近リリースされたばかりで不安。。。なので
適当に古めのを入れてみる
nodebrew install-binary v0.10.40`
nodebrew use v0.10.40`
node -v ってうつとv0.10.40となるはず
＼node.jsの準備終わり／
nightmareの準備
nightmareはphantomのラッパーなのでphantomが必要
npm install -g phantomjs ※-gでグローバルインストール
nightmarejsいれる
npm info nightmare
→落とせるバージョンを確認する。
※v1,v2で大きく変わってた！
v1はphantomベース、v2はelectronベース
v2はスクショ取るときに動作が怪しいので今回はv1を利用
npm install nightmare@1.8.2
※バージョンいろいろありすぎて悩んだので今回はローカルインストール
スクレイピング＆スクリーンショット
var Nightmare = require('nightmare');
new Nightmare()
.goto('http://allabout.co.jp/')
.screenshot('./gmgc1.png')
.run();
とりあえず実行
node demo.js
問題：なんか日本語出てこない…
出てきたスクショがなんか日本語出ないor 文字化けしてる…辛い
原因は日本語フォントが入ってないせい
対策：日本語フォント入れる
面倒なのでグループインストール
yum -y groupinstall "Japanese Support"
ロケール設定変える
vi /etc/sysconfig/i18n
どうもja_JP.utf8だとだめっぽい
LANGをen_US.UTF-8へ
書き換えてターミナル再起動でOK
再度実行して日本語フォントが出てきていることを確認
スクリーンショット結果
おまけ：画像の差分を取る
gm を入れて日時で取った写真の差分を更新してみる
gm いれる
CentOSにGraphicsMagick
※場合によってはRepository追加必要かも？
yum install GraphicsMagick
npmで作業ディレクトリにgm追加
npm install gm
画像の差分を取る
使いかた：https://github.com/aheckmann/gm#compare
※ImageMagickを使いたい人はサブクラス指定
https://github.com/aheckmann/gm#use-imagemagick-instead-of-gm
昨日と今日で画像の差分をとるコード
手抜きなので 同ディレクトリに 画像がある前提
(yyyymmdd.pngで画像は保存されている)
var gm = require('gm');
var date = new Date();
var today = date.getFullYear()+( "0"+( date.getMonth()+1 ) ).slice(-2)+( "0"+date.getDate() ).slice(-2);
// set yesterday
date.setDate(date.getDate() - 1);
var yesterday = date.getFullYear()+( "0"+( date.getMonth()+1 ) ).slice(-2)+( "0"+date.getDate() ).slice(-2);
gm.compare('./'+today+'.png', './'+yesterday+'.png', options, function (err, isEqual) {
if (err) throw err;
})
前日分の画像
当日分の画像
差分
1stRECに差分ができるので赤くなります
#これからやりたいこと
- hubotで日時の差分を通知（これは近々対応予定）
- ある程度画像の差分にしきい値を設定して一定の差が合った時（画面崩れなど）の時に通知したい
- shift-sjisだと文字化けるのでその部分の解消