公開されているWEBサイトを丸ごと保存するときに、FirefoxでScrapboookというアドオンを利用していたのですが現在のFirefoxには対応していなくて困った経験はありませんか？

私も、困った人のひとりです。。。

WEBサイトエクスプローラーでも似たことができるのですが、cssで外部参照されているファイルはダウンロードできていないのです。これでは、ローカル上でサイトの確認はできるのですが、WEBサイトの修正・更新ができなくて困ったことになります。

そこで、静的なページ(たとえばランディングページ)程度のサイトであれば、ローカル上で完全にファイル一式を収集する方法がないか自分なりに考えてみました。

目次

対象となる人

  • コマンドラインでスクリプト回してファイル収集なんて楽勝！…ではない人
  • なんとか手元にあるソフトでファイル一式をそろえたい人
  • 公開されているWEBサイトの手法を学ぼうとする研究熱心な人

    • どんなときに役に立つの？

  • 手元に制作ファイルがない状態で再度クライアントから公開されたWEBサイトの修正を求められた人(静的なページに限る)
  • FTPアカウントがわからない、または物理的な理由(IP制限など)で直接FTPソフトでダウンロードできない人
  • エクセルの関数の勉強になる
  • 正規表現の勉強になる
  • WEB制作向けのPCがなくてもファイル一式をそろえることができる

    • 必要なもの

  • WEBサイトエクスプローラー
  • エクセル
  • テキストエディター(「Merry」がおすすめ)

    • では、さっそく手順をまとめたいと思います。

    作業手順

    １．WEBサイトエクスプローラーでファイル一式を保存

    WEBサイトエクスプローラーの詳しい使い方は省略しますが、
    アドレスバーにスタートアドレスを入力または選択し、「開始」をクリックするとデータを収集開始します。
    ダウンロード完了したら左側にあるメニューにある「ドメイン」で右クリックして「フォルダダウンロード」をすればファイル保存できます。

    ２．cssを整形ツールを使って整形する

    以下のサイトにアクセスし、cssファイルを見やすく改行された状態に整形します。
    ※整形しておかないと、次のステップのエクセルでの作業がうまくいきません。
    CSSのコード整形ツール
    https://lab.syncer.jp/Tool/CSS-PrettyPrint/

    左側にcssの中身を貼りつけると右側に整形された状態のcssが表示されます。
    コピーして既存のcssに上書きしてください。

    ３．エクセルのA1セルにコピーしたcssを貼りつける。

    ４．エクセルのB1セルに以下の関数を貼りつける

    =MID(A1,FIND("url(",A1)+4, FIND(")",A1) - FIND("url(",A1) -4)

    ※urlと(の間に半角スペースがある場合は以下の関数になります。

    =MID(A1,FIND("url (",A1)+5, FIND(")",A1) - FIND("url (",A1) -5)

    ５．B1セルのセルの右下にマウスカーソルを合わせて黒い「＋」マークの状態からcssの最終行までドラッグ(連続データの作成)

    ６．B列のセルに「#VALUE!」と書かれた行と「http://～～～.jpg」など外部から読みだしたURLが抽出される

    ７．抽出されたテキストを正規表現で置換できるテキストエディターに貼りつける

    ※「Merry」「terapad」「サクラエディター」「秀丸」など
    Ctrl+Rで置換ウィンドウを表示したら、置換する文字列に「#VALUE!\n」を指定。
    置換後の文字列は空白にする。この時、「正規表現を使用する」にチェックを入れる。
    置換すると、抽出されたURLリストができます。
    URLリストをまとめたテキストを適当な名前を付けて新規保存(テキストファイル)しておきます。

    ８．抽出されたURLリストをコピーしたらダウンロード支援ソフトを利用

    ※「Irvine」などがおすすめ。
    以下、Irvineを利用した場合のファイルダウンロード方法になります。

    インストールしたらまず、画面左のツリービュー内にある「デフォルト」を右クリックし、「フォルダ設定」を選択します。
    そして「フォルダ設定 – デフォルト」という画面が表示します。

    この画面内の「ファイル」タブを開き、「保存フォルダ」欄でデフォルトの保存先とするフォルダを指定します。
    右端の … ボタンをクリックし、フォルダを指定します。
    ※この時、「URL 構造を再現する」にチェックを入れておく。

    ツール右側の状態ウィンドウの上にある、ファイル一覧ウィンドウに先ほど保存したURLリストのテキストファイルをドラッグアンドドロップします。

    すると、URL一覧がファイル一覧に流し込まれます。
    この状態になったらメニュータブの下にある再生ボタン「▶」をクリックするとダウンロードが開始されます。
    ※保存先に指定した場所にファイルが保存されます。

    ９．参考サイト

    CSSのコード整形ツール
    https://lab.syncer.jp/Tool/CSS-PrettyPrint/

    エクセルで文字列を抽出する色々な方法【初心者のためのExcel入門】
    http://proengineer.internous.co.jp/content/columnfeature/7286#section302

    １０．備考

    cssのURL部分を上記で保存したファイルを読むように書き換えておきます。
    適当なURLに書き換えるか、相対パスに書き換えることで指定のファイルを読み込ませることが可能です。

    ここまで書いておきながら手っ取り早くWEBサイトをまるごと保存するソフトとしては
    「HTTracks」が最強かもしれません。。。
    参考サイト：Webサイトを丸ごとダウンロードし保存できる「HTTracks」
    https://www.yuu-diaryblog.com/2017/12/27/download-website/

    お役に立てれば幸いです。