CentOS6でNightmareを触ってみた

オールアバウト Advent Calendar 9日目です!!

# 目的
[The Nightmare Before Christmas](http://allabout.co.jp/gm/gc/429790/)に触発されて
アドベント・カレンダーのネタとして[Nightmare](http://www.nightmarejs.org/)使って遊んでみました～。

## 参考
[nightmare.jsとgmを使ってnode.jsでLIGブログの更新をSlackでゲットだぜ](
http://liginc.co.jp/web/programming/node-js/139045)

naoya sushi!!!
[I like Sushi](https://speakerdeck.com/naoya/i-like-sushi)

# NightmareJSについて
![4920824a-5cbc-aa31-da39-35f8e26ac8a4.png](https://qiita-image-store.s3.amazonaws.com/0/57611/107a6b06-5c72-2c59-4102-af963907be4d.png)


いうてPhantomjsのラッパー
PhantomjsやCasperjsなどの他のヘッドレスブラウザーに比べ、シンプルにコードをかけるのが特徴

# 環境準備
## 用意するもの
+ 十分に作業できるだけの時間
+ アドベント・カレンダーを書いているんだな、という周囲の理解
+ CentOS6のはいったサーバー

## nodejsいれる
yumでいれても良いがnodeはバージョン多すぎて大変なのでnodebrewでいれる
[CentOSにnodebrewをインストールする](http://qiita.com/kentana20/items/05f1a4af9812398863fa)

```
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](http://qiita.com/giwa/items/28c754d8fc2936c0f6d2)


```
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`
→落とせるバージョンを確認する。

<font color="red">※v1,v2で大きく変わってた！ </font>
v1はphantomベース、v2はelectronベース
v2はスクショ取るときに動作が怪しいので今回はv1を利用

` npm install nightmare@1.8.2`
※バージョンいろいろありすぎて悩んだので今回はローカルインストール

# スクレイピング＆スクリーンショット
```js:demo.js
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/
![bd508e44-d65e-a349-084c-6ef2ebe5ec65.png](https://qiita-image-store.s3.amazonaws.com/0/57611/f514fb2b-1dd5-2911-84e9-012eab26655a.png)


# おまけ：画像の差分を取る
gm を入れて日時で取った写真の差分を更新してみる

## gm いれる
CentOSにGraphicsMagick
※場合によってはRepository追加必要かも？

```
 yum install GraphicsMagick
```
npmで作業ディレクトリに[gm](https://github.com/aheckmann/gm)追加

```
npm install gm
```

## 画像の差分を取る
使いかた：https://github.com/aheckmann/gm#compare

※ImageMagickを使いたい人はサブクラス指定
https://github.com/aheckmann/gm#use-imagemagick-instead-of-gm

## 昨日と今日で画像の差分をとるコード
手抜きなので　同ディレクトリに 画像がある前提
(yyyymmdd.pngで画像は保存されている)

```js:demo2.js
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;
})
```

### 前日分の画像
![20151207.png](https://qiita-image-store.s3.amazonaws.com/0/57611/6e695990-e4dc-ee12-018f-fd1c64a36101.png)


### 当日分の画像
![20151208.png](https://qiita-image-store.s3.amazonaws.com/0/57611/c56145f3-3692-d5ba-9ab2-9fcf0cf3bda5.png)


### 差分
1stRECに差分ができるので赤くなります

![diff_20151208.png](https://qiita-image-store.s3.amazonaws.com/0/57611/db0255df-cdd9-7fdd-cee2-91649c2f4602.png)




#これからやりたいこと

+ hubotで日時の差分を通知（これは近々対応予定）
+ ある程度画像の差分にしきい値を設定して一定の差が合った時（画面崩れなど）の時に通知したい
+ shift-sjisだと文字化けるのでその部分の解消