Anatomy

ANATOMY BLOG

マクロ視点のアクセス解析と品質管理ツール「ANATOMY(アナトミー)」のブログです

2015年9月14日月曜日

Webページを完全保存し、JavaScriptを動作させる方法


閲覧中のWEBコンテンツをローカルに保存するには、通常ブラウザの保存機能を使ったりフリーのダウンローダーを使ったりします。

ブラウザの保存機能には、HTMLだけを保存するものと、リソースも含めた全てを保存する2種類があります。
HTMLだけを保存する場合は、文字通りHTMLだけがそのまま保存されます。リソースは一切保存されません。
これでは意味が無いので全てを保存すると、確かに大体全てが保存されるのですが、ファイルパスが変更され、その影響でスクリプトが動作しなくなる等でコンテンツが表示されません。
また、JavaScriptが生成している動的なコンテンツ内のリソースは保存されません。




JavaScriptで表示しているカルーセルが表示されない

ソース中のパスが変更され、リソースが1つのディレクトリに押し込まれてしまう



ダウンローダーは、HTMLやCSSを解析した結果、関連するリソース等をダウンロードします。
リソースのファイルパスなどは基本的にそのままで、HTML、CSSから読めるものは保存されていますが、やはりスクリプトの実行結果、出現するリソースなどは保存されません。


また、FirefoxにはScrapbookというアドオンがあり、これもブラウザの保存と同じかそれ以上に綺麗に保存されているように見えます。JS実行後の状態で見えるなど再現率も高く、純粋に今見たままの状態でコンテンツを保存するという意味では、このアドオンはとても良くできていると思います。
https://addons.mozilla.org/ja/firefox/addon/scrapbook/


ただ、実際にはこのアドオンは、JavaScriptの実行結果を含めたDOMツリーをシリアライズして保存しているため、JavaScriptが動作しているわけではありません。
実際に保存されたHTMLからはscriptタグも消えています。



サイトクローンではこの問題を解決し、HTMLの内容を変えずにJavaScriptも動作させ、画像やCSS、Ajaxも動作させ、動きのあるWEBコンテンツをローカル環境で再現する事ができます。

また、取得方法も簡単で、サイトクローンをインストールしてアイコンをクリックしてモードを「クローン」にして、あとはサイトを見るだけです。コンテンツの内容は自動で取得されるので、保存したいページを見て回るだけでローカルPCに保存されます。
その後はツールバー上のアイコンをクリックして、モードをリプレイにし、アイコンをクリックしてサイドバーを表示させ、再現したいリンクをクリックすれば以前見たコンテンツが完全に表示されます。

JavaScriptが動的に生成したコンテンツも再現!


複雑な手順や設定は無いので、ぜひ一度お試しください。

https://www.site-clone.com/webarchive/


Related Posts Plugin for WordPress, Blogger...