昔むかし、あるところで PhantomJSに助けられた話倉持友喜 Creators MeetUp#36 LT 2016/01/16
倉持友喜 フロント系エンジニア もち@mochi_Flappe
2015年、やったこと
「現場のプロが教えるWEB
デザイン 新・スタンダードテクニック37」
共著で執筆に参加した!
昔むかし、もちじいいさんと ファントム婆さんが暮らしていました
もちじいいさんはWordPressで構築された
メディアサイトを保守する仕事をしています
そのサイトでは投稿者が
独自にCSSを追加していきました
メディアアップロードから参照されたCSSファイル
もちじいいさんはデプロイのたびに 表示崩れに悩まされました
デプロイのたびに主要ページのスクショを取り 半透明にして過去のものと重ねるという
悪夢の作業が発生しました
そこで助けてくれたのがPhantomJS
PhantomJSとは
簡単にいうと、ターミナルで動き画面を持たないWebKitベースのヘッドレスブラウザ
ログインしたりボタンを押したり スクリーンショットを取ることも出来る
URLを渡して自動でスクショを取ってきてもらう
ImageMagickで過去のスクショと差分を検出
Resemble.jsを利用して詳細に差分を確認
Electronでアプリを作ってみた
確認工数が莫大に縮小され クオリティも担保されました
エンジニアさんは デザイナーさんや、テスターさんの 環境も改善してあげよう!