はじめに
こんにちは、yutodevです。
今回、Windows向けのスクロールキャプチャツール 「NobiShot（ノビショット）」 を個人開発して公開しました。
長いWebページや設定画面を、手動でスクロールしながら1枚の画像として保存できるツールです。
この記事では、開発した背景や主な機能、実装するうえで工夫した点について紹介します。
GitHub： https://github.com/yutodev-03/NobiShot
1. 開発した背景
長い設定画面やWebページのスクリーンショットを残したいとき、1枚の画像に収まらないことがあります。
特に作業証跡を残す場面では、複数回スクリーンショットを撮影して、画像を保存・整理するのが手間でした。
そこで、次のようなツールを作りたいと考えました。
- 必要な範囲だけ撮影できる
- スクロールした画面を自動でつなげられる
- 固定ヘッダーがあっても自然な画像になる
- 撮影結果を簡単にコピー・保存できる
こうして開発したのがNobiShotです。
2. NobiShotでできること
※動画は操作の流れを分かりやすく示した説明用アニメーションです。
NobiShotには、主に次の機能があります。
| 機能 | 内容 |
|---|---|
| 撮影範囲の指定 | 撮影したい横幅と上下位置を選択 |
| スクロールキャプチャ | 手動スクロールした画面を結合 |
| 固定ヘッダー対応 | 固定ヘッダーを最初の1回だけ保存 |
| 画像コピー | Ctrl+Cでクリップボードへコピー |
| 画像保存 | Ctrl+SでPNG形式で保存 |
| テーマ切り替え | ライト・ダークテーマに対応 |
自動スクロールではなく、ユーザー自身がスクロールする方式を採用しています。
3. 開発で工夫したこと
3-1. スクロールした画像の結合
通常のスクリーンショットは、画面に表示されている範囲しか撮影できません。
そこでNobiShotでは、スクロール前後の画像の重なりを照合して、縦長の画像に結合する仕組みを採用しました。
基本的な考え方は次のとおりです。
- 現在表示されている画面を取得する
- スクロール後の画面を取得する
- 前後の画像で共通する部分を探す
- 新しく表示された部分を結合する
この仕組みでは、スクロール量が大きすぎると前後の画像に共通部分がなくなり、正しく結合できなくなることがあります。
そのため、短い距離ずつスクロールする運用にしています。
また、動的コンテンツや繰り返し模様のある画面では照合が難しくなるため、結合できない場合には警告するようにしています。
3-2. 固定ヘッダーへの対応
開発中に課題となったのが、スクロールしても画面上部に表示され続ける固定ヘッダーです。
通常のスクロールキャプチャと同じ処理をすると、固定ヘッダーが複数回写り込んだり、本文との境目が不自然になったりします。
そこで、固定ヘッダーとスクロールする本文を分けて扱う方式にしました。
- 固定ヘッダーは最初に1回だけ保存する
- 本文はスクロールに合わせて撮影する
- 最終的にヘッダーと本文を1枚の画像に結合する
これにより、固定ヘッダーがある画面にも対応しています。
3-3. PythonアプリのEXE化
NobiShotはPythonを用いて開発しています。
ただし、Pythonファイルをそのまま配布すると、利用者側でPythonや必要なライブラリを準備する必要があります。
そこで、PyInstaller を使用してWindows向けの実行ファイルにまとめました。
利用者はZIPを展開し、NobiShot.exe を実行するだけで使用できます。
また、GitHub Actionsを利用して、テスト・ビルド・配布パッケージ作成を自動化しています。
4. NobiShotの使い方
固定ヘッダーがない画面の場合、基本的な操作は次の流れです。
- NobiShotを起動する
-
F7で撮影操作を開始する - 撮影したい横幅と上端を指定する
- 撮影下端を指定する
- ページを少しずつ手動でスクロールする
-
F7を押して撮影を終了する - プレビュー画面でコピー・保存する
スクロール時には、前後の画像が十分に重なるよう、短めにスクロールするのがポイントです。
5. ダウンロード方法
NobiShotは無料で公開しています。
以下のGitHub Releasesからダウンロードできます。
NobiShot_v1.1.15_Windows.zip をダウンロードし、展開したフォルダ内の NobiShot.exe を起動してください。
Windows 11を主な対象としています。
6. 今後の改善予定
今後は、次のような改善を進めたいと考えています。
- スクロール時の画像結合精度の向上
- 初めて使う人にも分かりやすいUIの改善
- さまざまなWebページ・画面構成への対応
- 利用者から寄せられた改善要望への対応
おわりに
今回、実際に感じた不便さをきっかけに、Windows向けのスクロールキャプチャツールを開発しました。
開発を通じて、画像結合処理だけでなく、UI設計やEXE化、自動ビルドなど、アプリを利用者に届けるまでの一連の工程を経験できました。
NobiShotは無料で利用できるので、興味があればぜひ試してみてください。
不具合報告や改善案はGitHub Issuesで受け付けています。
GitHub： https://github.com/yutodev-03/NobiShot
最後まで読んでいただき、ありがとうございました。