Screenshot Stitching

スクリーンショットの結合は、複数のスクリーンショットを1枚の画像にまとめます。最も一般的な場合は縦方向です。ページやリストをスクロールしながら1画面ずつ撮影し、各部分を順番につなぎます。横方向の結合では、撮影結果を左右に並べます。たとえば、2つのアプリの状態や、横に広い表を配置します。

結合は、スクロールして撮影できるすべてのコンテンツに使えます。ネイティブアプリ、チャットの履歴、文書ビューアーも含まれます。結果は1枚の縦長または横長の画像になり、そのまま確認、注釈付け、または1つのファイルとしてPDFにできます。

結合の仕組み

1. 最初の画面を撮影します。
2. 1画面の高さより少ない量だけスクロールし、隣り合う撮影結果が重なるようにします。
3. コンテンツの最後まで繰り返します。
4. 両方の隣接する画像に現れるピクセルの行を見つけ、その位置で画像をつなぎます。

単純な結合は、位置を合わせずに画像を端同士で並べます。重なりを考慮した結合では、行の重複や欠落を避けます。

結合とネイティブのフルページ撮影の比較

ブラウザは、PlaywrightやPuppeteerのフルページのオプションを使うように、スクロールせずにWebページ全体を1枚の画像として描画できます。この方法では継ぎ目が生じませんが、Webページでしか使えず、ビューポートの高さに依存するレイアウトが崩れることがあります。結合はどの画面でも使えますが、きれいな重なりと安定したコンテンツに依存します。

スクリーンショットの結合の用途

• 長いWebページ、チャット、フィード。
• 画面より幅の広いスプレッドシートと表。
• 多数のセクションを含む設定パネルとフォーム。
• 並べて比較する前後の画像。

よくある間違い

• 固定ヘッダーやフローティングボタンが、すべての区間に繰り返し写り込む。
• 撮影の間にアニメーションや遅延読み込みの画像が変わり、重なりが崩れる。
• 1画面より多くスクロールし、すき間ができる。
• 画像が大きすぎて、一部のビューアーが大幅に縮小する。

同じスクリーンショットを繰り返し撮りますか？

Chromeのウェブページでは、Temposhotの Chrome拡張機能 が表示中のページをスクロールし、ビューポートをお使いのコンピューター上でRetinaの解像度で結合して、1枚のPNGをダウンロードします。Website Captureの Full page は、手動のスクロールなしでURLのリストを撮影します。

よくある質問

すでに持っているスクリーンショットを結合するには？

Stitch Screenshots で開き、順序を設定して、1枚の画像をダウンロードしてください。

結合した画像は画質が下がりますか？

下がりません。ピクセルは元の撮影結果から来ています。画質が下がるのは、結果を縮小したり、低品質のJPEGで保存したりした場合だけです。

出典

• Image stitching（Wikipedia）

関連リソース

• スクリーンショットを結合: ブラウザで画像を結合します。
• 画像を分割: 縦長の画像をページに分割します。
• Website Captureのオプション: ViewportとFull pageの範囲。