Webサイトの作成はゼロから形になるものを作っていく、作品としての一面を持っています。いきなり完成品ができあがる訳ではなく、色々試行錯誤しながら、再読込を繰り返しつつできあがっていきます。 そんなWebサイトのできあがっていく様を残し続けてくれるのがtlapseです。

tlapseの使い方

tlapseは以下のように利用します。

tlapse --every 5m --directory ./screens -- localhost:3000

そうするとlocalhost:3000に5分ごとにアクセスして、スクリーンショットを残し続けてくれます。PNG画像でできあがるので、後はImageMagickなりを使うとアニメーションGIF化もできます。

何も作業していない時はスクリーンショットが重複するので、その場合は画像は保存されません。固定のURLを指定するので、別なページのスクリーンショットを撮りたい場合は別で立ち上げる必要があります。デザインのできあがっていく過程を残しておくのは、後で振り返った時にとても面白いコンテンツになるでしょう。

tlapseはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

typicode/tlapse: Create a timelapse of your web development… or just automatically take screenshots of your hard work ;)