「UIが変わってもボタン一発でドキュメントを更新」などスクリーンショットを自動生成するメリットとは？

ソフトウェアのヘルプページやドキュメントに掲載されるスクリーンショットは、UIが変更されるたびに撮り直して差し替える必要があり、開発現場では見過ごされがちな負担になっています。この問題に対して、メールアプリ「Jelly」などを開発しているエンジニアのジェームズ・アダム氏が「スクリーンショットを手作業で用意するものではなく、自動生成される成果物として扱う」というアプローチを提案しています。

interblah.net - Self-updating screenshots
https://interblah.net/self-updating-screenshots

アダム氏が提案しているのは「ドキュメントをマークダウンで記述し、その中にスクリーンショット生成のための記述をコメントとして埋め込む」というもの。その上で「埋め込まれた指示に基づいて特定の画面を開き、必要な操作を実行した上でスクリーンショットを撮影し、ドキュメントに自動的に反映する」というスクリーンショット撮影プログラムを作成します。あとはアプリが更新されるたびにスクリーンショット撮影プログラムを実行すれば自動で最新のアプリに対応したスクリーンショットが生成されるというわけ。

アダム氏は、画面を表示せずに動作するヘッドレスブラウザを使用しています。ヘッドレスブラウザは通常のブラウザと同じ機能を持ちながら、プログラムから操作できるもので、ページの読み込みやボタンのクリック、一定時間の待機といった一連の操作をスクリプトとして実行可能。マークダウンに埋め込まれた記述を元にプログラムがヘッドレスブラウザを操作し、結果として得られた状態をスクリーンショットとして保存しています。

ヘッドレスブラウザを使用してスクリーンショットを撮影する場合、ページ全体を取得するだけでなく、特定の要素だけを切り出したり、現在の表示領域だけを対象にしたりといった指定も可能とのこと。また、クリック操作や待機時間の指定、特定領域のクロッピングなども行えるため、ボタンを押した後に出現するポップオーバーを撮影したり、映ってほしくない開発者UIなどを範囲外にして撮影したりすることもできます。

アプリの更新時にドキュメントのスクリーンショットを個別に画面を開いて撮影し直すのは手間がかかっていましたが、自動撮影プログラムで手間を大きく軽減できます。特に変更の頻度が高いアプリほどメリットが大きくなります。

手間が軽減できるだけでなく、アプリケーションのコード、ドキュメント、そしてスクリーンショット生成のロジックを同一のリポジトリで管理できる点も重要です。これにより、UIの変更とドキュメントの更新を同一のコミットで扱うことができ、情報の不整合や古いスクリーンショットが残る問題を防ぐことができます。

アダム氏は「手間がかかりそうだな」と思ってスクリーンショット撮影プログラムの開発を後回しにしていたものの、いざスクリーンショット撮影プログラムを作成してみると、「なんでもっと早くやらなかったんだろう」と思ったとのこと。「確かにプログラムの作成は手間がかかりましたが、煩わしさがほとんどなくなった」と感想を述べています。