アラタナエンジニアブログ

aratana Engineer's Blog

gulpのプラグインgulp-webshotでスクショを自動で取得しよう!ってのを軽い気持ちで試したらドハマりした件

どうもこんばんわ、バックエンド開発チームに所属する非JSerの親指と申します。

いつの間にか桜も盛りを過ぎ、ウキウキワクワクのゴールデンウィークを目前にして、
非JSerの皆様いかがお過ごしでしょうか。

日頃はもっぱらバックエンド側の開発をしてますが、やっぱ自動化といったらgulpでしょ!

と、バックエンドエンジニアだってフロントエンドの自動化に興味があるんだぜー と

さらにそのgulpの中でもかなり非JSer心をくすぐられる、


「gulp-webshot」


なるスクリーンキャプチャ取得のプラグインがあったので
これって便利じゃない?と取り上げてみます。


(この時はまだ来るドハマリを知る由もなくスイスイ文章を書いてる最中です。
 この時の自分に声を大にして言ってやりたい、、、この内容でブログ書くのはやめとけ
 隣席にJSerがいなければ徹夜してたぞおまえ、と



そもそも、gulpって?

f:id:aratana-Thumbelina:20150420182144p:plain
gulpはNode.jsのStreamAPIを利用したビルドシステムで、
一連の処理を事前に設定ファイルに記述することで、コマンド一撃っでそれをササっとやれるという代物です。
(細かい説明はよそにたくさんありますので、あえて稚拙な感じでお送りしました。あえて

で、gulpのサイトトップには
f:id:aratana-Thumbelina:20150420182320p:plain
自分勝手に訳すと、
自動化して、ワークフローを強化する
という感じでしょうか。なにやらゴールデンウィークはきっぱり休暇するために、
機械でやれることは機械にやってもらいましょう!というツールということにしておきましょう!!

今回はgulp-webshotを使ってスクショをとりたい、というのが主目的なので
よくある活用例についての詳細は割愛させて頂きますが、
簡単に触れておくと、SCSSを

  • コンパイル
  • ベンダープレフィックス付与
  • 圧縮
  • cssファイル吐き出し

までをササっとやっちゃう、というのが一例のようです。

さら〜に、ファイルの変更を監視させておき、変更があったら自動でそれらをやるように仕掛けとく
ってことまで出来るようです。

自動化ってすばらしい。ということで、ドハマりタイムに向けて前置きはここまでにしておきます。

プラグインのgulp-webshotなるものでスクリーンショット取得を自動化!

世の中は便利になったものでスクリーンショットを自動で取得できるようになっています。
今回はgulpでそれをやります。
(前述した活用例に加えて、その時点のサイトの見た目を取得しておく、なんて使い方ができるかなと勝手に思っています)

環境作ってさっそくやってみる!

今回はLinux(CentOS7)でやります。Mac/Windowsの方は適宜それにあった方法をお試し下さい。

1. Node.jsのインストール

なにはともあれ、gulpはNode.jsで動きますのでNode.jsを導入します。

$ sudo yum install epel-release
$ sudo yum install nodejs
$ node -v
v0.10.33


2. Node.jsのパッケージ管理ツールnpmも

$ sudo yum install npm
$ npm -v
1.3.6


この間にまったく手順が足りていなかったので後ほどドハマりタイム突入となります。


3. gulpを導入!

まずはグローバルに

$ npm install -g gulp
$ gulp -v
[20:59:37] CLI version 3.8.11

ローカルにも入れます。(ドキュメントルートに入れました)

$ cd [ドキュメントルート]
$ npm install gulp —save-dev


4. gulp-webshotプラグインを導入!!(ドキュメントルートに)

$ npm install gulp-webshot —save-dev


5. gulpfile.jsを書きます(ドキュメントルートに)

var gulp = require('gulp'),
    webshot=require('gulp-webshot');

gulp.task('webshot', function() {
  return gulp.src('test_gulp/index.html')
        .pipe(webshot({ dest:'build/',root:'test_gulp'}));
})


gulp.task('shot', ['webshot']);


6. スクショ取得!!!

$ gulp shot

今回は/test_gulp/index.htmlを対象にスクリーンショットを取得する予定です
ちなみに画面は単純に、
f:id:aratana-Thumbelina:20150420191553p:plain
これです。



そしてここで、お待ちかねの1ハマり目です。
gulpはいい感じに動いているようですが、スクショがとられている気配がありません。
実際ファイルも出力されていません。。。(; ゚Д゚)

実はまったく準備が足りていませんでした。

困った僕はいとも簡単に隣のJSerに泣きつきました。すると、もう、すぐですよ、
Jser:「あー、これ系ってヘッドレスブラウザ使う系のやつですよねー」
自分:「(; ・д・)」
Jser:「あ、やっぱりサイトにPhantomJS使うって書いてますねー、あとnodeのwebshotも必要なんですねー」
自分:「( ゚Д゚)ヘーソーナンダー」


いやー、ちゃんと読めと
英語だからってさらっと書いてあることをすっとばしていいわけねぇヽ(^。^)ノ ・・・と。


ということで、足りないものを導入します!

足りないもの1. PhantomJSを導入

cd /usr/local/src
git clone https://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 1.9 # ←エラーへの対策(実際なったので)1.9にチェックアウトするといける
./build.sh # ←かなーーり時間がかかる。地味にここも2ハマり目だったりします。長くて大丈夫かこれ?と一回止めて違う方法試したりしました。(弊方の環境では1.5時間ぐらいだったかと)
bin/phantomjs -v
ln -sf `pwd`/bin/phantomjs /usr/local/bin/phantomjs


足りないもの2. webshotを導入

npm install -g webshot


さー!!!やってみましょう!!!!!!!

再来

$ gulp shot

お、お、、、おおおーー!!ファイルが吐き出されていますよ!

$ ls build/
index.png

いやー、、やっとこのブログも終焉をむかえ・・・、え??

【index.png

□□□□□□□□□□□□□□□□

中身が豆腐の羅列?「Hello World!!」て英語ですけど????え?


ここで3ハマり目っす。というかこれがラストハマりなんですが、
なぜか文字化けしてしまってるわけですよ。。



結果として、CentOSIPAフォントを導入することで解決しました。。。
なぜ必要だかは深く追っていませんが、そこに行き着くまでにかなりかかりました。
隣のJSerに相談してもポカーンですもんだって。(忙しそうだったからなんですけど)


ということで

足りないもの3. IPAフォントを導入

$ yum install ipa-gothic-fonts.noarch
$ yum install ipa-mincho-fonts.noarch
$ cd /usr/share/fonts
$ mkdir ipa
$ cp -p ipa-*/*ttf ipa/.
$ cd /etc/fonts/
$ cp -p fonts.conf fonts.conf.bak # バックアップ

/etc/fonts/fonts.confを以下にする

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/usr/share/fonts/ipa</dir>
  <cachedir>/var/cache/fontconfig</cachedir>
  <cachedir>~/.fontconfig</cachedir>
  <alias>
    <family>serif</family>
    <prefer>
      <family>IPAP Mincho</family>
    </prefer>
  </alias>
  <alias>
    <family>sans serif</family>
    <prefer>
      <family>IPAP Gothic</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>IPA Gothic</family>
    </prefer>
  </alias>
</fontconfig>

キャッシュ更新

$ fc-cache -vf

そしてー!!!!
再々来

$ gulp shot

このときは受験結果を見る前の学生並にドキドキしてました。祈りました。

なんと!
【index.png
f:id:aratana-Thumbelina:20150420200245p:plain



出ーーーーーたーーーー(;▽;)ーーーーーー!!!!




いやー、長い道のりでした。GW休めないんじゃないの・・・?とちょっとだけ思いました。


ということで、手順を整理しておきます。
1. Node.jsのインストール
2. Node.jsのパッケージ管理ツールnpmも
足りないもの1. PhantomJSを導入
足りないもの2. webshotを導入
足りないもの3. IPAフォントを導入
3. gulpを導入!
4. gulp-webshotプラグインを導入!!
5. gulpfile.jsを書きます
6. スクショ取得!!!


終わりに

今回は、linuxの環境の導入例でこれだ!って参考があまりなくて困ったことと、
gulp-webshotの導入をいい感じに解説してくれてるサイトがなくて困りました。。。
こんなにはまらなければ、なんかgulpの合わせ技みたいなこともやってみたかったんですが・・・。

このドハマりがどなたかのお役に立てたなら幸いです。

いやー、GWはゆっくり休みたいと思います。

それでは