Site Screenshot Crawler

サイト内URLを解析し、代表性と特異性から確認対象を選定。PC・スマホ・タブレットの各表示幅でフルページ撮影し、更新前後の表示比較に使える画像を保存します。

Site Screenshot Crawler は、Webサイトの更新前後で表示を確認するためのスクリーンショット収集ツールです。 サイト内URLを収集・解析し、すべてのページを無条件に撮影するのではなく、「代表性」と「特異性」から確認価値の高いページを選定します。 PC・スマホ・タブレットの各表示幅でフルページスクリーンショットを一括撮影し、更新前後の表示比較に利用できるZIPとして保存します。 WordPressのCore・プラグイン更新、テーマやCSSの変更、サイト改修、移行作業、ECサイトなど、Webサイトの表示確認に利用できます。 ■ 主な機能 ・サイト内URLの収集 ・サイトマップを利用したURL収集 ・通常URL収集、総スキャン、WordPress最適化スキャン ・ページ構造を解析し、似たページをグループ化 ・代表性と特異性から最大50件の確認対象を自動選定 ・問い合わせ、予約、ログイン、購入・決済、外部Widgetなどの重要機能を持つページを優先 ・タブ、アコーディオン、スライダー、ギャラリー、動画、地図などを代表ページ選定時に考慮 ・選定理由、未選定理由を表示 ・現在のブラウザ幅、PC、スマホ、タブレットの表示幅でフルページ撮影 ・大量撮影時は容量に応じて複数ZIPへ自動分割保存　※新機能 ・撮影開始時に保存先フォルダを選択　※新機能 ・撮影結果、URL一覧、各種情報をZIP形式で保存 ・撮影全体の状態を記録する run-state.json を保存　※新機能 ・URLごとにPC、スマホ、タブレットの順で撮影 ・保存済みサイトを再利用して、同じURL・同じ条件で再撮影 ・撮影予定枚数から概算撮影時間を表示　※新機能 ・長大ページでのLazy Load画像読み込み確認を改善　※改善 ・BASIC認証が必要なテストサイト、ステージングサイトに対応 ■ ページの選び方 Site Screenshot Crawler は、単純に「同じ構造のページが多い」という理由だけでは選定しません。 ページの構造を表す Structure Fingerprint と、問い合わせ・予約・ログイン・決済などの重要機能を考慮し、 「多くのページを代表するページ」 と 「他のページでは代替できない特徴を持つページ」 の両方を残すように選定します。 例えば、同じ記事レイアウトが100ページ存在する場合は代表ページへまとめますが、その中に1ページだけ問い合わせフォームを持つページがあれば、別の確認対象として残します。 これにより、確認枚数を抑えながら、サイト全体の特徴をできるだけ維持します。 ■ WordPress最適化スキャン URL数の多いWordPressサイトでは、サイトマップを利用してURLを収集し、種類ごとに解析対象を抽出できます。 すべてのHTMLリンクを無制限に巡回しないため、大規模サイトでも効率よく代表ページを選定できます。 利用可能なサイトマップが見つからない場合は、TOPページだけを結果として保存せず、 ・通常URL収集 ・総スキャン ・キャンセル から次の動作を選択できます。 ■ 大量撮影と自動分割保存 v2.1では、大量のスクリーンショットを長時間撮影する場合に、撮影結果を容量に応じて複数のZIPへ自動分割して保存できるようになりました。 小規模な撮影では従来どおり1つのZIPへ保存し、分割が必要な場合のみ、 _part001.zip _part002.zip _part003.zip のように自動保存します。 ユーザーが途中で分割操作を行う必要はありません。 撮影開始時に保存先フォルダを選択し、そのフォルダ内へ撮影結果を保存します。 また、撮影全体の状態を記録する run-state.json を保存し、複数ZIPに分かれた撮影結果でも、URLと表示条件の対応関係を確認しやすくしています。 ■ 長大ページ・Lazy Loadへの対応 長いページでは、画面をスクロールしながらLazy Load画像の読み込みを促してからフルページスクリーンショットを取得します。 v2.1では、Lazy Load用スクロール後に画像の読み込み状態を確認し、必要に応じて追加待機して再確認する処理を追加しました。 これにより、長大ページや画像数の多いページで、未読込画像が残る可能性を低減しています。 ページの長さやサイトの応答状況によっては、Lazy Load確認が完全に完了しない場合があります。その場合でもスクリーンショットは保存し、撮影結果の情報として記録します。 ■ 撮影時間の目安 撮影前に、 「200 URL × 3表示条件 = 600枚を撮影予定」 のように予定撮影枚数を表示します。 v2.1では、予定枚数から概算撮影時間も表示します。 例： 600枚 → 約60～90分 300枚 → 約30～45分 撮影時間は、通信速度、サイトの応答速度、ページの長さなどによって前後します。 ■ BASIC認証対応 BASIC認証が設定されたテストサイトやステージングサイトにも対応しています。 サイトTOPからBASIC認証が必要な環境でも、URL確認、サイトマップ取得、HTML巡回、構造解析、スクリーンショット撮影まで認証情報を利用して処理します。 ■ 基本的な使い方 1. サイトのTOP URLを入力してURLを収集します。 2. ページ構造と特徴を解析します。 3. 自動選定された確認対象を確認します。 4. 必要に応じて撮影対象を調整します。 5. PC・スマホ・タブレットなどの表示幅を選択します。 6. 撮影予定枚数と概算撮影時間を確認します。 7. 保存先フォルダを選択してスクリーンショットを撮影します。 8. URL一覧、撮影結果、画像をZIP形式で保存します。 9. サイト更新後に保存済みサイトを読み込み、同じ条件でもう一度撮影します。 ■ AIを利用した更新前後の表示比較 更新前と更新後に作成したZIPを、画像やZIPを解析できるAIへ渡すことで、表示崩れの確認を補助できます。 大量撮影でZIPが複数に分割された場合は、更新前・更新後それぞれの全partをまとめて比較してください。 例えば次のように指示できます。 「このZIPは、Webサイト更新前後に同じURL・同じ撮影条件で取得したものです。CSS崩れ、配置ずれ、画像欠落、メニュー、フォーム、iframe、外部Widgetなどに表示異常がないか比較してください。」 本拡張機能自体にAI比較機能が内蔵されているわけではありません。 外部AIサービスへZIPをアップロードする場合は、対象サイトの内容やデータの取り扱いをご確認ください。 ■ この拡張機能の目的 Site Screenshot Crawler は、Webサイトを書き換えるツールではありません。 更新前後を同じ条件で記録し、人間が行う表示確認・間違い探しを効率化することを目的としています。 ■ 更新履歴 v2.1.0 ・大量撮影時のZIP自動分割保存に対応 ・撮影開始時に保存先フォルダを選択する方式へ変更 ・撮影全体の状態を記録する run-state.json を追加 ・URLごとにPC、スマホ、タブレットの順で撮影する方式へ整理 ・長大ページでのLazy Load画像読み込み確認を改善 ・撮影予定枚数から概算撮影時間を表示 ・撮影開始前の案内表示を整理 ・長時間・大量撮影時の安定性を改善 ・実サイトで600画面、約1GB超、9分割ZIPの連続撮影を検証 v2.0.0 ・ページ選定アルゴリズムを「代表性＋特異性」方式へ刷新 ・Structure Fingerprintと重要機能を利用した代表ページ選定 ・問い合わせ、予約、ログイン、購入・決済、外部Widgetなどを優先確認 ・WordPress最適化スキャンを追加 ・最大50件の代表ページを自動選定 ・選定理由、未選定理由を表示 ・サイトマップが利用できない場合の収集方法選択を追加 ・サイトTOPからBASIC認証が必要な環境へ対応 ・PC、スマホ、タブレットでの撮影処理を改善 ・実サイトでの検証を行い、各種安定性を改善 v1.0.0 初回公開版。 ・サイト内URL収集 ・ページ構造によるグループ化 ・代表ページ選択 ・BASIC認証対応 ・PC、スマホ、タブレットでのフルページ撮影 ・ZIP形式での保存 ■ 開発について 本拡張機能は平井が企画・設計・実地検証を行い、OpenAI ChatGPT および ChatGPT Work による設計検討・開発支援を活用して制作しています。