Macで完全なWebページをダウンロードしたい

Question

質問

Macで完全なWebページのダウンロードをしたいです。
できれば簡単なやり方があればいいですが、無理であればスクリプトを書いたりできるので、方法やヒントを教えていただければと思います。

やってみたこと

調べてみると、シングルHTMLダウンローダというChromeの拡張があるようですが私のPCのChromeでは動作しませんでした。
また、ChromeとFireFoxで[Command]+Sでコンテンツの保存をしたのですが、部分的には保存されるものの、完全なWebページは保存されませんでした。たぶんsvgやcanvasは保存されないのかな、と思います。
Safariの[Command]+Sはそこそこいい線をいっていて、一応Safariではほぼ完全なコンテンツのダウンロードができました。(画像のカルーセル部分は動きませんでしたが)
しかしながら、ファイルの中身をみてみるとバイナリ形式で、これってSafariでしか読めないのでは?と思います。できればhtml/css/jsの形式で保存したいです。(Mac以外でも閲覧するため)
また、Firefoxの拡張でScrapBookという名前のものもありましたが、こちらも自身の最新のFirefoxと互換性がありませんでした。
PDF化も調べて来ている時に出て来ましたが、なるべくアニメーションを残したいので、スクリーンショット的なPDFも違う、ということでやめました。

ご存知の方、何卒よろしくお願いします。

Answer 1

一般的なWEBブラウザではWEBページを保存する際にその範囲を指定できます. 例えばChromeではWEBページの保存ダイアログにおいて「ウェブページ, HTMLのみ」の部分を「ウェブページ, 完全」に変更することで, 現在のWEBページが読み込んでいるリソースファイル群を含めたダウンロードが可能となります.

NOTE:
とは言え, スクリプトにより自動生成されたコンテンツ(canvasグラフィックなど)がそのままダウンロード可能かというと, これはケースバイケースと言わざるを得ません.

---

またChromeではWEBページをMHTML(mht)形式で一つのファイルとしてダウンロードすることが可能です.

• Chromeを開きchrome:flagsにアクセスする.
• 検索窓に「MHTML」と入力し, 表示された「Save Page as MHTML」フラグをEnabledに設定します.
• Chromeを再起動します.

するとWEBページの保存時に「WEBページ, 一つのファイル」が選べるようになります. なおMHTML形式のドキュメントはChrome及びIE系ブラウザでのみ閲覧することが可能です.

Comments

[gamushiro]

ありがとうございます。
やってみたのですが、アニメーションが残せないんですよね…。

例ですが
http://nodefest.jp/2014/
みたいなサイトを残す時にどうしても色々なやり方をしてもダメでした…。

[defghi1977]

WEBページを完璧に再現するにはその背後で動いているもの全てを用意する必要があり, 究極的にはWEBサーバーそのものを用意する必要があります. これをファイル保存だけで済ますのですから，ある程度の妥協が必要となります.

一方ファイルのローカル保存にこだわらない（WEBページの閲覧が出来なくなるのが困る）のであれば
https://web.archive.org/web/20140824103556/http://nodefest.jp/2014/
といったように, アーカイブサイトでWEBサイトを忠実に再現して保管してくれているので, こちらの内容を元にコードを心ゆくまで調査・分析することは可能です.

[gamushiro]

やっぱりそうですよね…。
XHR等の非同期での通信が発生するようなものは初めから無理だなと妥協というか、わかってはいたのですが、サーバー側でのレンダリングされた結果さえあればいけるだろうな、と思ったのでちょっと試みたので、これは諦めますかね…。

できればいただいたURLのようなアーカイブサイトを自前で立てたい、みたいな気持ちでした。
(これがどうやっているのか気になる)

wgetを使ったのですがおそらくUAで判定されて、アクセスできません、みたいなページしか返ってこないので、いよいよ為すすべなしです…。

しかしいろいろ参考になったのでありがとうございます。

Answer 2

http://ricks-apps.com/index.html
「SiteSucker」
¥600 です。これは App Store で。「Bookmarklet」という無料の機能が良さげ。
私は無知で、詳しくありませんが、質問者さまのサイト、試しにDLしてみよかな？
あくまで勉強の為に。

英語のサイトの使い方を見てるとね、「非同期もいけるよ」みたいに書かれてるんです、自動翻訳させるとね…。設定も細かくできるし、最新は v-up 2018,03,29。個人の優しそうなプログラマーさんのアプリ。私にはまだ使いこなせないけど、ココの他の回答者さんなら、詳しいんじゃないかな〜？

Comments

[gamushiro]

ありがとうございます！自分でも調べてみます！

[Otama_Clever]

質問者様、コメントありがとうございます。

質問者様も含め、コレを見ている詳しそうな方、私の曖昧な回答には、率直にツッコミを入れて頂けると、それだけで公益になりますから、遠慮なく『指摘』= to point out, を是非おねがい致します。『指摘』とは to attack, to criticize [非難する] ではありませんし、もし「少し助けてやろうか…」と思った場合に限り…是非に…。もちろん粘着的に絡まない事も大事な社会性だと個人的には思っています。

If it's all right with you, whould you please point out my mistakes?
Thank you for reading. ^ ^

[gamushiro]

別に回答は曖昧ではないです！回答をいただけて私はすごく嬉しいです！
ただ、誰かしらこういう機能のアプリケーションは無料で配布しているだろうから、それを使えばいいかなー、と思っていたのですが、なかったのでここで質問をしてみました。
ご回答をいただいたものは有料でしたが、有料なら自分でつくるかな〜、と思っただけです！

Thanks a lot !!