アサブロをダウンロードする際に気を付けなければならないのは、CSS(Cascading Style Sheets )ファイルである。
アサブロのテンプレートを使っているので、アサブロのCSSを読み込むのだが、このCSSは絶対パスで書かれている。
というわけで、アサブロに直接CSSを取得しに行ってしまうのだが、google driveとアサブロは違うサイトである。違うサイトからCSSファイルを取得することは、セキュリティ的に問題があるので、ほとんどのブラウザでCSSを取得してくれない。XSS(クロスサイトスクリプティング)になってしまうからだ。(解説記事はこちら[柔軟すぎる]IEのCSS解釈で起こるXSS )
で、同じサイトにCSSファイルを移設する必要があるのだが、ここで出てくるのが、絶対パスと相対パスの違いだ。
Website Explorerで、そのままダウンロードすると、CSSファイルのパスは書き換わらないので、http://s.asablo.jp/css/がそのまま書かれている。
アサブロの場合、ブログの記事自体は、http://darkmark.asablo.jp/blog/ といったような、パスなので、Web Explorerは、/blog を基準パスとして文字列の置換をする。
具体的には、http://darkmark.asablo.jp/blog/ が、./blog/に置き換わるわけだ。
そこで、CSSを/blogと並列に、置くようにならべて、http://s.asablo.jp/css/ を、../css/ に置き換えてやる必要がある。
Website Explorerでは、設定で、外部サイトを内部サイトとして置き換える設定があるが、うまく使いこなすことができなかったため、秀丸を使ってgrep置換した。
こうすることで、CSSが./css/から参照されるようになったのだが、大きな問題が出てきた。
アサブロのパスが、日付ごとに下記のようにアーカイブされているのだ。
/blog/2014/07/04/7379927
(この7379927は、記事のIDで、実際にはパスとしてURL上出るのだが、Website Explorerでは、HTMLファイルとして保存してくれている。)
こうなると、この記事からの相対パスは、../../../../css/にしなければならず、/blog/以下を一括置換では対応しきれない。
ま、地道にフォルダ一個ずつたどって置換すればよいのだが・・・・
ダウンロードする前に気づけばよかった。
(追記)
下記の順番で置換すれば、年数x12+αぐらいの回数で置換が終了する。
(私の場合、120回くらいだったが、20秒で1回は終了するので、1時間程度の作業で済む。
したがって、マクロを組んだり、ツールを探したりせず、地道にやりました。)
1./blog/ を対象に置換(サブフォルダは対象にしない) ../css/
2./cat/ を対象に置換(サブフォルダ対象にする) ../../../css/
3./年/月/ フォルダを対象に置換(サブフォルダ対象にしない) ../../../css/
4./blog/を対象に置換(サブフォルダ対象にする) ../../../../css/
3がかなり時間がかかりますが、これで全部変換されます。
あと、/blog/archive.html に関しては、Javascriptを使っているようなので、
<meta http-equiv="content-script-type" content="text/javascript">
<script src="http://s.asablo.jp/js/expandimage.js" type="text/javascript"></script>
<script type="text/javascript" src="http://s.asablo.jp/editor/watermark_min.js?20110407_2"></script>
を削除する必要がありました。
0 件のコメント:
コメントを投稿