プロトタイプから画面設計書に必要なキャプチャをスムーズに更新したい話

こんにちは、SEの斉藤です。
明けましておめでとうございます。
2023年も良い年になるといいですね。

はじめに：画面設計書の更新が大変

普段、設計に関わっていると、プロトタイプを作って画面設計を進めたいことがあります。
最近では Figma, Adobe XDなど便利なサービスがあるので、それらを使って作成するのが主流かと思いますが、それらがないときはHTMLを使って作る方もいらっしゃるかと思います。

私もそれらのサービスが使えない時はHTMLで書いていくタイプで、そのプロトタイプを使ってそのまま画面設計書などを書き起こしていきたいことがあります。
そういったときに、プロトタイプを修正するたびに、画面キャプチャを取り直して画面設計書を更新していくのは大変です。

今回は設計書という形で人に見せたい時がある、というときに素早くキャプチャを更新する方法を紹介します。
紹介するのは、以下のようなワークフローをある程度自動化する方法です。

  • HTML, CSS, JavaScriptを使ってプロトタイプを作成する
  • プロトタイプの各画面を自動で切り替える
  • プロトタイプの各画面のキャプチャを撮る
  • （おまけ）キャプチャを設計書に反映する

なおブログ作成時点の環境は以下の通りです。

  • macOS Monterey
  • Safari 15.6.1
  • VSCode 1.74.2
  • Markdown Preview Enhanced 0.6.6

HTML, CSS, JavaScriptを使ってプロトタイプを作成する

まずいつも通り、プロトタイプをコーディングしていきます。
ログイン画面と、トップ画面、お知らせ画面と三つのページを作成したとします。
このあと、以下のようなJavaScriptを使って画面遷移できるようにしておきます。

location.href = "login.html"
location.href = "top.html"
location.href = "info.html"

このようにバニラJSでもできますし、私の場合はVue.jsを使って、変数を更新すると画面が切り替わるリアクティブなコーディングをやっています。

プロトタイプの各画面を自動で切り替える

次に以下のようなコマンドを用意します。

osascript -e "tell app \"Safari\" to open location \"file:///xxxxxx/login.html\""
osascript -e "tell app \"Safari\" to do JavaScript \"location.href = 'login.html'\" in document 1"
osascript -e "tell app \"Safari\" to do JavaScript \"location.href = 'top.html'\" in document 1"
osascript -e "tell app \"Safari\" to do JavaScript \"location.href = 'info.html'\" in document 1"

osascriptコマンドとは、macOSに標準で入っているAppleScriptを実行できるコマンドです。
AppleSciriptを使うと、Safariブラウザ上で特定のページを開いたり、外からJavaScriptを実行することができるようです。
このコマンドを実行するとAppleScriptを通して、Safariで開いているページを切り替えることができます。

これでプロトタイプ上の各画面をコマンドで切り替えることができるようになりました。

プロトタイプの各画面のキャプチャを撮る

次に以下のようなコマンドを用意します。

screencapture -o -l$(osascript -e 'tell app "Safari" to id of window 1') img/login.png
screencapture -o -l$(osascript -e 'tell app "Safari" to id of window 1') img/top.png
screencapture -o -l$(osascript -e 'tell app "Safari" to id of window 1') img/info.png

macOSに入っているscreencaptureコマンドを使うと、GUI操作なしで画面キャプチャを取ることができます。

このコマンドでSafariの画面キャプチャを撮っています。

コマンドのまとめと結果

紹介したコマンドをまとめると、以下のようなシェルスクリプト（capture.sh）になります。

#!/bin/bash

osascript -e "tell app \"Safari\" to open location \"file:///xxxxxx/<meta charset="utf-8">login.html\""

osascript -e "tell app \"Safari\" to do JavaScript \"location.href = 'login.html'\" in document 1"
screencapture -o -l$(osascript -e 'tell app "Safari" to id of window 1') img/login.png

osascript -e "tell app \"Safari\" to do JavaScript \"location.href = 'top.html'\" in document 1"
screencapture -o -l$(osascript -e 'tell app "Safari" to id of window 1') img/top.png

osascript -e "tell app \"Safari\" to do JavaScript \"location.href = 'info.html'\" in document 1"
screencapture -o -l$(osascript -e 'tell app "Safari" to id of window 1') img/info.png

このコマンドを実行してキャプチャしている様子と、キャプチャした画像は以下のようになります。

キャプチャされていき画像が出力されているのが伝わるかと思います。

キャプチャをしている様子
login.png
top.png
info.png

おまけ（キャプチャを設計書に反映する）

Markdownで設計書を作ります。
VSCodeと Markdown Preview Enhancedというプラグインを使うと、Markdownをpdfで出力することができます。
（余談ですが、このプラグインでシーケンス図を書くこともできるので、Markdownで設計書を作成するのは相性が良いと感じています。）

シェルスクリプトの画像出力先をMarkdownファイルから参照できる場所にしておくと、画像を以下のような記法で自動で差し込むことができます。

@import "img/login.png"
@import "img/top.png"
@import "img/info.png"

あとはプラグインの機能でpdf出力するだけです。

終わり

今回はプロトタイプを作成、コマンドラインでキャプチャを更新する方法を紹介しました。
キャプチャを撮る、設計書に貼り付けるなどの雑多な作業を省き、プロトタイプの作成に集中できると精度も良くなりますね。
実行するJavaScript次第で、同じページでも何らかの入力がされた状態、エラー状態のキャプチャなども作れるかと思います。

本当はよく使っているChromeでできればいいのですが、今回はAppleScriptが利用できるブラウザということで、Safariを利用しました。
HTMLでプロトタイプを作る、JavaScriptでページを切り替えるようにしておくなど条件は必要ですが、それらが揃うときはお試しください！