完璧なクローンのためのベストプラクティス

クローンが難しいウェブページがあるのはなぜですか？

モダンなウェブアプリケーション（SPA）は、コンテンツをレンダリングするために JavaScript に大きく依存しています。これは、ページが最初に読み込まれる時点では HTML が空であることが多く、コンテンツが動的に取得されることを意味します。さらに、多くのウェブページではアンチクローラーの仕組み、複雑な CSS 変数システム、Shadow DOM が使用されています。

100% ピクセルパーフェクトなクローン結果を得るために、以下のベストプラクティスに従ってください。

クローン前の準備

1. コンテンツが完全に読み込まれていることを確認

レイジーロード（Lazy Loading） は、クローンが不完全になる最大の原因です。多くの画像、長いリスト、ページ下部のコンテンツは、その位置までスクロールしたときにのみ読み込まれます。

正しいアプローチ：

• ページの上部から下部へゆっくりスクロールし、すべての画像プレースホルダーが実際の画像に置き換わることを確認します。
• 「もっと読み込む」ボタンをクリックし、キャプチャしたいすべてのコンテンツを展開します。
• すべてのフォントファイルの読み込みが完了するまで待ちます（テキストがデフォルトフォントで表示されるのを防ぐため）。

2. 特定の UI 状態をトリガーする

特定のインタラクティブな状態をキャプチャしたい場合：

• ドロップダウンを展開する
• モーダル / ダイアログを開く
• 特定のタブに切り替える
• Hover 状態をトリガーする（Chrome DevTools を使って要素の :hover 状態を強制できます）

これらの状態がアクティブな間に、拡張機能の「クローン開始」ボタンをクリックします。

3. マルチメディアコンテンツの処理

• 動画：デフォルトでは、拡張機能は <video> タグとその src 属性を保持しようとしますが、巨大な動画ファイルはダウンロードしません。動画には poster（カバー画像）属性を持たせ、オフライン時にプレースホルダーが表示されるようにしてください。
• Canvas / WebGL：このように動的にレンダリングされる要素は、従来の DOM シリアライゼーションではキャプチャできません。拡張機能は自動的に Canvas を静的な Base64 画像に変換しようとしますが、複雑な WebGL シーンは完璧に復元されない場合があります。
• Iframe：クロスオリジンの Iframe（例：埋め込まれた YouTube 動画、サードパーティのコメントシステム）は、セキュリティ上の理由から深くクローンすることはできません。これらは元の src リンクを保持します。

高度な設定のヒント

拡張機能の設定パネルには、クローン品質に影響を与えるいくつかの主要なオプションがあります：

スクリプトの削除 vs スクリプトの保持

• 「すべての JS を削除」を選択（表示専用に推奨）：完全に静的なページを生成します。利点はファイルサイズが小さく、絶対的に安全で、ポップアップ広告やトラッキングコードが実行されないことです。欠点は、カルーセルやアコーディオンなどのインタラクティブ機能が動作しないことです。
• 「コアインタラクションを保持」を選択（ベータ機能）：拡張機能は UI を制御するスクリプトを保持しつつ、分析スクリプト（GA など）をフィルタリングしようとします。注意：JS を保持したまま複雑な SPA ページをローカルで開くと、バックエンド API が見つからず白い画面が表示される場合があります。

リソースパスの変換

「絶対パスを相対パスに変換」 オプションが有効になっていることを確認してください。これにより、生成された ZIP パッケージは、パスの問題でスタイルが失われることなく、ローカルハードドライブで直接（file:// プロトコル経由で）開くことができます。

極端なケースの処理

Shadow DOM を含むページ

一部のモダンなコンポーネントライブラリは Shadow DOM を使用しており、デフォルトでは内部構造が見えません。 解決策：CloneWebsite コアエンジンには実験的な shadow-dom-flattener が含まれており、すべての shadow root を走査してコンテンツとスタイルをメインの DOM ツリーに抽出しようとします。コンポーネントが欠けている場合は、設定で「Shadow DOM を強制的にフラット化」を有効にしてください。

CSP（Content Security Policy）によるブロック

非常に厳格なウェブサイト（銀行、大企業のイントラネットなど）では、コンソールに次のようなエラーが表示されることがあります： Refused to execute inline script because it violates the following Content Security Policy directive...

解決策： 現在、これはブラウザの厳しいセキュリティ制限です。Chrome ストアで「Disable CSP」の補助プラグインを検索して、クローン中にターゲットウェブサイトの CSP を一時的に無効にしてみてください。

最終チェックリスト

1. ページの最後までスクロールしましたか？ ✅
2. モーダルとメニューは展開しましたか？ ✅
3. 拡張機能の設定はニーズに合っていますか？ ✅
4. クローンをクリックして完了を待ちましょう！ 🚀