自動更新スクリーンショット機能をJellyが実装
原題: Self-updating screenshots
なぜ重要か
ドキュメント管理の自動化により開発効率向上とユーザー体験改善を両立する革新的アプローチ
開発者のJames Adam氏が、Webアプリケーション用ヘルプセンターの課題を解決する自動スクリーンショット更新システムをJellyで開発したと発表。UIの変更により古くなったスクリーンショットを自動で更新する仕組みで、Markdownファイル内のコメント指示により動作する。
開発者のJames Adam氏は、WebアプリケーションJellyにおいて、ドキュメンテーションサイトのスクリーンショットを自動更新するシステムを構築したと発表した。
従来、ヘルプセンターやドキュメントサイトでは、UI変更により既存のスクリーンショットが古くなる問題があった。この課題を解決するため、同システムではMarkdownファイル内にHTMLコメント形式で撮影指示を記載する仕組みを採用した。
システムはRakeタスクとしてCapybaraおよびCuprite経由でヘッドレスChromeブラウザーを起動し、Markdownファイル内のSCREENSHOTコメントをスキャンする。撮影モードとして「element」「full_page」「viewport」の3つを提供し、CSS セレクターによる要素指定、クリック操作、待機時間、切り抜き領域の設定が可能。
特筆すべきは、ボタンクリックやポップオーバー表示といったインタラクティブな状態も自動撮影できる点だ。「click」オプションにより、UI操作後の画面状態を自動で捉えることができる。
Markdownファイルはpublic/manual/に保存され、ビルド処理によりapp/views/help/のERBビューに変換される。UIの変更後に「rails manual:build」コマンドを実行するだけで、すべてのスクリーンショットが最新状態に更新される仕組みだ。