CapybaraとSeleniumを使った自動スクリーンショット撮影の実践ガイド

前回のAppSignalアップデートでは、全画面にわたるインターフェースデザインの刷新が行われました。これに伴い、トップページに掲載しているすべてのスクリーンショットを最新のアプリの状態に合わせて更新する必要がありました。膨大な手作業を減らすため、私たちはこのプロセスの自動化を決断しました。

Seleniumでのスクリーンショット自動化

幸いなことに、Seleniumにはスクリーンショットを撮影する機能があることを思い出しました。私たちはもともと、フィーチャーテストにおいてCapybara経由でSeleniumを多用していたため、新たな仕組みを導入することなく、既存のスタックだけでこのタスクを自動化できるのではないかと考えました。いくつか試行錯誤した結果、この計画は十分に実現可能であることがわかりました。

スクリーンショット撮影の基本API

スクリーンショットを撮るためのAPIは非常にシンプルです。ブラウザウィンドウを希望のサイズに設定し、対象のページにアクセスして、スクリーンショットを保存するだけです。

require 'capybara'
 
Capybara.default_driver = :selenium
page.driver.browser.manage.window.resize_to(1600, 1200)
visit 'https://appsignal.com'
page.save_screenshot(file)

これで、指定した場所にPNGファイルが生成されます。

Retina対応の課題

ただし、Retina（高解像度）のスクリーンショットを撮りたい場合には注意点があります。ChromeドライバーはRetina解像度のスクリーンショットを作成できますが、撮影範囲は画面の可視領域のみです。一方、Firefoxドライバーはページ全体を撮影できますが、Retina解像度ではありません。さらに、チーム全員がRetinaディスプレイを使用しているわけではないため、環境によって結果が変わってしまう問題もありました。

CSSのtransformでページ全体を2倍に拡大

調査の結果、chrism氏によるGistでこの問題の解決策を見つけました。この巧妙なハックを使えば、スクリーンショットを撮影する直前に、CSSのtransformでページ全体を通常の2倍のサイズに拡大できます。

page.driver.execute_script('
   body = document.getElementsByTagName("body")[0];
   body.style["transform-origin"] = "top left";
   body.style["transform"] = "scale(2)";
')

ImageMagickで画像をトリミング

ページ全体のRetinaスクリーンショットが完成したら、次はImageMagickに付属するconvertコマンドラインツールを使って、目的のサイズにトリミングします。

`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0  #{to_file}`

サイズを2倍に指定しているのは、ImageMagickがその画像をRetina画像だと認識しないためです。ImageMagickから見れば、単なる3200px×1600pxの画像にすぎません。to_fileには、アセットフォルダ内の出力先ファイルを直接指定します。

pngquantによるファイルサイズの最適化

最後に、pngquantを使ってファイルを最適化します。典型的なスクリーンショットのサイズは220kB〜250kB程度になるため、Web表示速度への影響を考えると、確実に圧縮しておくべきです。

`pngquant --force --output #{to_file} #{to_file}`

Rakeタスクとして再利用可能に

以上の手順をもとにRakefileを作成すれば、デザインを変更するたびに同じコマンドを実行するだけで、いつでもスクリーンショットを再生成できるようになります。完全なコードはGistで公開しています。

この自動化は早くも効果を実感できており、今後のデザイン変更のたびにチームの手間を大幅に省いてくれるでしょう。ぜひ、ツアーページなどで美しいRetina画質のスクリーンショットをご覧ください！