オールアバウト 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 [email protected]
※バージョンいろいろありすぎて悩んだので今回はローカルインストール

スクレイピング＆スクリーンショット

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

再度実行して日本語フォントが出てきていることを確認

スクリーンショット結果

http://allabout.co.jp/

おまけ：画像の差分を取る

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だと文字化けるのでその部分の解消