stitched-full-page-capture

連結式フルページキャプチャ

概要

ブラウザーの fullPage による一括キャプチャを信頼するのではなく、描画が落ち着いたビューポートのスクリーンショットを使用します。これは、MP4 では正しく見えるのに、縦長のスクリーンショットがほぼ空白になる Framer ページや、その他の遅延読み込み・スクロールアニメーションを使うサイトで特に重要です。

このスキルを使う場面

• 遅延読み込み、スクロールアニメーション、Framer、WebGL／canvas、または多くの要素をスクロールに応じて表示するページのフルページスクリーンショットが、空白、灰色、白、内容が少ない状態で返されたり、ごく小さなコンテンツ部分しか表示されなかったりする場合。
• 一括のフルページスクリーンショットと、ページが正しく描画される様子を示すスクロール録画 MP4 の内容が一致しない場合。
• 信頼性の低いネイティブの fullPage キャプチャではなく、信頼できるフルページ画像から記事の証拠画像やセクションの切り抜きを作成する必要がある場合。
• manifest.json に対して、同梱の stitch_full_page_capture.mjs スクリプトを使用し、日次の UI インスピレーション記事のキャプチャを修復または再生成する場合。
• 寸法、空白／灰色の帯、および代表的な静止画、MP4、モーションフレームとの一致を確認し、連結したキャプチャを検証する場合。
• 遅延読み込み、スクロールアニメーション、表示アニメーションに問題がなく、ネイティブの fullPage スクリーンショットで正しく描画されるページには使用しません。その場合は通常の一括キャプチャで十分です。

基本的なワークフロー

1. マーケットプレイスのサムネイル、カバー画像、リミックスページ、アセット URL ではなく、実際のページ URL を開きます。
2. ページを上から下まで一度スクロールして、遅延読み込みメディアや表示アニメーションのあるセクションを読み込みます。
3. ページの先頭に戻ります。
4. ビューポートと同じ幅、または少し重なる間隔で下にスクロールします。
5. スクロールを止めるたびに、約 2 秒待ちます。
6. 描画が落ち着いたビューポートをキャプチャします。
7. ビューポートのキャプチャを縦につなぎ、1 枚のフルページ画像にします。
8. セクションの切り抜きには、ネイティブのブラウザー fullPage スクリーンショットではなく、つないだ画像を使用します。
9. つないだ画像を、代表的な静止画、MP4、モーションフレームと照合して検証します。

空白／灰色／白の帯がある、視覚的な内容が極端に少ない、遅延読み込みされたセクションが欠けている、コンテンツ列が極端に狭い、またはスクロール動画と明らかに一致しないフルページ画像は候補から除外します。

スクリプト

日次の UI インスピレーション記事では、使用可能な場合、このスキルディレクトリにあるヘルパースクリプトを使用します。

node <skills-root>/stitched-full-page-capture/scripts/stitch_full_page_capture.mjs \
  --manifest articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json

このスクリプトは次の処理を行います。

• items[].pageUrl、fullPageImage、sectionImages を読み取ります。
• Playwright Chromium で各ライブページを開きます。
• 一度スクロールして遅延読み込みコンテンツを読み込みます。
• 描画が落ち着いたビューポートの画像を取得します。
• 画像をつないで fullPageImage を作成します。
• 既存の各セクションの切り抜きを、つないだ画像から再生成します。
• fullPageCaptureMethod: "stitchedViewportScreenshots"、ビューポート、ステップ、セグメント数、修正後の切り抜き座標を指定して manifest.json を更新します。

便利なオプション：

--item 4              # repair only item 4, 1-based
--viewport 1440x1100 # default
--step 950           # default; use less than viewport height for overlap
--wait 2000          # ms to wait after each scroll stop
--quality 3          # ffmpeg JPEG quality, lower is better

検証

キャプチャまたは修復の後に、次を行います。

• 以前、目に見えて問題があったページを少なくとも 1 つ確認します。
• sips -g pixelWidth -g pixelHeight full-page/*.jpg が、想定どおりの横幅と縦幅を報告することを確認します。
• フルページ画像がほぼ空白ではなく、ページ下部のコンテンツも含んでいることを確認します。
• セクションの切り抜き座標が途切れずに連続し、フルページ画像の高さで終わっていることを確認します。
• たとえば、プロジェクトで通常実行するチェックを行います。

git diff --check -- articles/YYYY-MM-DD-ui-inspiration-capture/content.md articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json
node scripts/check-ui-inspiration-duplicates.mjs articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json
for f in articles/YYYY-MM-DD-ui-inspiration-capture/videos/*.mp4; do ffprobe -v error "$f" >/dev/null; done

注意事項

• スクロール動画は、実際のスクロール中にページが描画されることを示す証拠ですが、フルページの静止画の証拠の代わりにはなりません。
• ネイティブの fullPage スクリーンショットは比較候補として保存できますが、つないだキャプチャと視覚的に一致しない限り、信頼できる基準画像として使用しないでください。
• 日次の UI 記事では、マニフェストを更新し、修復した記事のアセットとメタデータのみをコミットします。

参考資料

• 上流のソース：https://github.com/MengTo/Skills/tree/main/agent-skills/codex/stitched-full-page-capture
• スクリプト：scripts/stitch_full_page_capture.mjs
• エージェント設定：agents/openai.yaml