アサブロのバックアップ【その４】 ― 2026/05/21 05:30
一通りの材料が揃ったので、その配置とHTMLに書かれているリンクの書き変えについて説明します。
ここからは個人的な設定の説明なので、配置についても書き変えについても各人の環境にあわせてください。
HTMLをテキストベースで触ったことがある方は、ここから先は読まなくても自力で出来ると思います。
■８．ダウンロードした大きな画像の配置について
ダウンロードしたHTMLの階層に合わせるためには、ダウンロードした大きな画像を1日ごとのフォルダに振り分けなければなりません。
この作業は現実的ではないので、
・画像ファイルは年ごとのフォルダ下に一年分を置くことにしました。
・大きな画像と一緒にダウンロードした小さな画像も一緒に置くことにしました。
これなら、画像の配置が簡単に出来ます。
小さな画像は2か所に配置されることになりますが、気になる場合は整理してください。
小さな画像のリンクをどちらに張るかは好き好きですが、既に1日ごとのフォルダにリンクが張られていますから、そのままでもいけます。
私の場合は、後々の管理を考えて大きな画像と同じ場所を見るようにしましたが。
■９．HTMLファイルのリンクの書き換えについて
リンクの書き換えについては、
・配置した画像に対応するリンクの書き換え
・活かしたい機能（例えば『<<前 次>>』）のリンクの書き換え
が必要になります。
書き換える場所は数千カ所になると思いますので、これは一括で処理する必要があります。
この一括置換については、テキストエディタの機能である『Grep置換』『グローバル複数置換』などと呼ばれる機能を使います。
このような置換機能は正規表現が使えると思いますので、『正規表現を使ったフォルダ指定での一括置換』が正解です。
このとき、正規表現では後方参照を使って一発で全ファイルを書き換えることが出来ます。
『テキストエディタなんてメモ帳しか使ったことない』と言う方もいると思いますが、･･･AIに聞いたら、テキストエディタを使わない方法があるかも。
HTMLファイル内の書き変えた部分は以下のとおりです。
大きな画像の書き換え
赤字の部分が大きな画像です。
緑字は小さな画像で、既にダウンロードした画像にリンクが張られているので、そのままで大丈夫です。
expandimage部分の置換の指定は、
置換前：(expandimage\(.+?)http:\/\/xxxxx\.asablo\.jp\/blog\/img\/(.+?)\/(.+?)\/(.+?)\/
置換後：\1../../../img/\2/
かな？。（私の場合は少し違うので 「かな？」 となりました。また後方参照の\は$の場合も。）
『<<前 次>>』の書き換え
例えは、『<<前』の置換指定は
置換前：class="navi-prev" href="https:\/\/xxxxx.asablo.jp\/blog\/(.+?)"
置換後：class="navi-prev" href="../../../\1.html"
になります。
と、言う具合です。
これを置換が必要な部分に行なうわけです。
ここが一番めんどくさいところです。
以上で、インターネットにつなぐことなく、自分のPC上でアサブロが見れるようになります。
めんどくさいですけど、これが終わればローカル環境での表示が可能になり、名実ともにバックアップになります。
HTMLやスクリプト、テキストエディタや正規表現に関する知識は必要になりますが、とりあえず自力でバックアップすることが出来ます。
次回は最終回、『そんな説明されたって・・・』です。
今までの記事はこちら
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※なお、送られたコメントはブログの管理者が確認するまで公開されません。
※投稿には管理者が設定した質問に答える必要があります。