サイト開発をしていると、画面のスクリーンショットをそのまま資料として印刷したいことがあります。
ただ、縦長のスクリーンショットをそのまま複数ページに分割すると、ページ境界で文章やUIが切れてしまい、少し読みにくくなることがあります。
スクリーンショットの複数ページ印刷自体は珍しくありませんが、ページ境界を少し重ねて前後関係を残す方法は、意外と見かけません。
そこで、スクリーンショットを印刷用に整える簡単なサイトを作りました。
訪れるだけで使用できます。ログインやインストールは不要で、GitHub にコードが公開 されています。
👇サイトはこちら
👇出力サンプルはこちら
PNGを読み込むと、A4の1ページに収まるように自動で分割します。
このとき、完全に続きから表示するのではなく、前のページの末尾を80pxだけ次のページにも重ねて表示します。
これにより、
- 文章の途中でページが変わっても前後関係を把握しやすい
- UIの途中で切れても、次ページですぐ位置を確認できる
- 縦長スクリーンショットを普通の資料として読みやすくなる
というメリットがあります。
スクリーンショットを単純に分割するだけでも印刷できますが、少し重複させるだけで資料としてかなり読みやすくなるため、サイト開発時の画面共有や確認資料を作る際には意外と便利な方法だと思います。
これ以降は、特にセキュリティを重視する方に向けた内容です。
コードを確認したい方・セキュリティを重視する方
👇 GitHub
GitHubのURLは、悪意のあるコードが含まれていないか、ご自身で目視確認したい方向けに公開しています。
網羅的な確認はできませんが、ChatGPTなどにコードを添付して、悪意のある処理や不審な通信が含まれていないか確認して貰ってから、ローカルで使う方法もあります。
ご自身が使いやすいように、ChatGPTなどを活用してチューニングしてから利用することも可能です。
チューニングの有無にかかわらず、ご自身のGitHub Pagesやサーバーにアップロードして運用する方法も選択肢の一つです。
より使いやすいサイトを作成できた場合は、私も利用してみたいので、公開していただけるとうれしいです。
なお、全面的に作り直したものではなく、本リポジトリを改造して作成したものを公開する場合は、MITライセンスの条件に従って公開してください。