昔むかし、あるところでPhantom jsに助けられた話

昔むかし、あるところで PhantomJSに助けられた話倉持友喜 Creators MeetUp#36 LT 2016/01/16

自己紹介

倉持友喜 フロント系エンジニア もち@mochi_Flappe

2015年、やったこと

「現場のプロが教えるWEB

デザイン 新・スタンダードテクニック37」

共著で執筆に参加した！

2016年、やったこと

転職した！

2016年、やったこと

入籍した！

今年もよろしくお願いします！

本題

昔むかし、もちじいいさんと ファントム婆さんが暮らしていました

もちじいいさんはWordPressで構築された

メディアサイトを保守する仕事をしています

そのサイトでは投稿者が

独自にCSSを追加していきました

本文中に記述されたstyleタグ

メディアアップロードから参照されたCSSファイル

コーディング規約は存在せず

投稿された記事は数千ページを超え

更にサイトはn個存在します

もちじいいさんはデプロイのたびに 表示崩れに悩まされました

デプロイのたびに主要ページのスクショを取り 半透明にして過去のものと重ねるという

悪夢の作業が発生しました

そこで助けてくれたのがPhantomJS

PhantomJSとは

簡単にいうと、ターミナルで動き画面を持たないWebKitベースのヘッドレスブラウザ

ログインしたりボタンを押したり スクリーンショットを取ることも出来る

URLを渡して自動でスクショを取ってきてもらう

ImageMagickで過去のスクショと差分を検出

差分があるファイルを特定する

Resemble.jsを利用して詳細に差分を確認

Electronでアプリを作ってみた

画像を2枚ドロップ

変更箇所が一目瞭然

確認工数が莫大に縮小され クオリティも担保されました

めでたしめでたし

まとめ

エンジニアさんは デザイナーさんや、テスターさんの 環境も改善してあげよう！

この話はすべてフィクションです

ご清聴ありがとうございました