knznymmmy · @knznymmmy
9th May 2015 from TwitLonger
猫でも分かる。猫猫ブログ保存の方法
ズドラーストヴィチェ。吾輩だ、世界皇帝・ガチKGBことプー閣下だ。
今日はイポンスキーの諸君にFC２ブログ保存の仕方を教えてやろうと思う。
見本として猫猫ブログ http://yomenainickname.blog.fc2.com/ を保存する方法だ
まずHPはhtmlその他の集合体なのでhtmlを落とす。
猫猫ブログの場合は"all archives"が出ているからここに入れば記事一覧が出てくる。
ここでリンクを右クリック → save link as... でもいいが
ctrl + f で「記事を読む」を検索すると81個
そして
最上段のリンク先が http://yomenainickname.blog.fc2.com/blog-entry-81.html
最下段のリンク先が http://yomenainickname.blog.fc2.com/blog-entry-1.html
つまり連番だとわかる
（実は大帝ブログの場合は記事のエントリー番号に途中欠番があった）
ここで「右クリック → save link as... 」は封印してwgetを使う。
wgetを使ええばall archivesが無いブログでも保存がやりやすい。
例えば大帝ブログにはall archivesが無い。
これは、大帝が罰金ガム宮殿に酸っぱい工作に行った時に、落としてきたらしい。
そういう場合でも一個一個記事を開いて
alt押す → 左上のfile → save page as を繰り返せば
all archivesが無くても保存はできる。
だが一度やってみれば、ターミナルの方が早いと分かるはずだ。
猫猫ブログのようにall archivesが表示されていても
実は表示されている以上にもっともっとhtmlが欲しくなるので
（もっともっとhtmlを落とさないと機能しないリンクが大量に出てくる）
結局はwget使う方が早い。
では、早速ターミナルでwgetで全81個のhtmlを落とす
例： wget http://yomenainickname.blog.fc2.com/blog-entry-81.html
で、このall archivesのページ（html）も落とす
wget http://yomenainickname.blog.fc2.com/?all
名前が index.html?all だが、「?」が入るところが気に食わない。
これダメ文字だろ？ だからリネーム。all-archives.htmlにしてみた。
で、ブログのトップを開いた時に最下段までスクロールすると
nextというリンクがあり、投稿された順に記事を閲覧できる。
ちなみにトップページにおけるnextのリンク先は
http://yomenainickname.blog.fc2.com/page-1.html
こういうリンクも機能するようにしたいからやはりwget
んで、以降、page-2、page-3と数が増えるが最後はpage-16
じゃ、16個落とせばいいかというと実はそうではない。
トップからnext押すじゃん？そしたらpage-1.html行くじゃん？
んでprevで戻るじゃん？そしたらトップに戻ると思うじゃん？
それが違うんだなwwww 実はpage-0.htmlに戻る。中身はトップと同じなんだけどw
んじゃ、なんで同じもの二個も用意するんだよ？ってのは知らない。
FC２にでも電話してバイトの姉ちゃんに泣きつけば？
吾輩はこういうFC2ブログの仕様は大帝ブログいじってる時に既に気付いている。
だから17個wget
次は月別アーカイブ
http://yomenainickname.blog.fc2.com/blog-date-201505.html
から・・・
http://yomenainickname.blog.fc2.com/blog-date-201404.html
・・・まで全14個 wget
次はカテゴリ
http://yomenainickname.blog.fc2.com/blog-category-0.html
から・・・
http://yomenainickname.blog.fc2.com/blog-category-23.html
・・・まで全24個 wget
ただしカテゴリは１ページで表示しきれない場合に限って最下段にnextが表示される。
（大帝ブログの場合は月別アーカイブでも同じ事だった。
猫猫ブログの場合は月別アーカイブでは、こういう仕様にはなっていない）
だから単純に24個じゃ済まない。しかもトップページの
nextとprevの時みたいに、行って戻ったら違うページに戻されちゃうという仕様。
そこで・・・
http://yomenainickname.blog.fc2.com/category0-0.html
から・・・
http://yomenainickname.blog.fc2.com/category0-5.html
・・・まで連番。そして・・・
http://yomenainickname.blog.fc2.com/category5-1.html
http://yomenainickname.blog.fc2.com/category5-0.html
http://yomenainickname.blog.fc2.com/category22-1.html
http://yomenainickname.blog.fc2.com/category22-0.html
このへんもwget
で、HPの上段、青空画像の下に数字が並んでいるがこれはカレンダーになっている。
記事投稿をした日付が青くなってクリック可能になっている
翌月、前月へのリンクもあるから、
どうせならこういうのもダウソして機能するようにしたい。
そこで・・・
http://yomenainickname.blog.fc2.com/blog-date-20150501.html
から・・・
http://yomenainickname.blog.fc2.com/blog-date-20140406.html
・・・までwget
トップページもindex.htmlで落としてもいいんだが
私は今回最新記事へ飛ばされるように書き換える事にする。
だからトップはいらない。
（参考：トップページ開いてもアドレス欄にindex.htmlとは出てこないが
なぜトップページがindex.htmlであると分かるかっつーと単純にhtmlの仕様）
次。CSSがファイル。これはどれでもいいからhtml開けば絶対に置き場所が書いてある。
FC2の場合はCSSは二個と大帝ブログの時に確認済みだが
テンプレートが違えばひょっとしたら個数が違うのか？と念の為に確認。
試しにいくつかのhtml開いてctrl + f で「.css」したら以下の二個。
http://blog-imgs-65.fc2.com/y/o/m/yomenainickname/css/78344.css
http://static.fc2.com/css_cn/common/headbar/120710style.css
サクっとwget
んでここまでの保存できれば文章内容はもう完全保存されている。
あとは画像、動画その他。とりあえずhtmlとcssを新規フォルダに隔離。
これから参照先とかバカスカ書き換えるから
テケトーなフォルダーで行き当りばったりにいじってたら
誤爆で無関係なファイルの中身すら一緒に書き換えしちまう事になる。
では画像をバカスカ拾っていこう。本当はCLIでまとめて拾いたかったが
エラーが出やがった。頑張れば何かやり方があるのかもしれないが
元々画像がてんこ盛りなブログではないので調べるより手作業で拾う方が早い。
CLIでまとめて拾えたとしても、まさかの漏れが無いかチェックしたいんで
結局は各記事覗く事になるし。
まずはタイトルの青空。
右クリックで「save image as...」しようと思ったら出てこないじゃないかwww
しかし炎狐だと「view background image」→ 画像が出る → 右クリックで「save image as...」
はい。保存おｋ。
QRコード、ブロともの大帝アイコン、左上隅のfc2ロゴ、
このへんは全部単純に右クリック → 「save image as...」
拍手ボタンの画像は大帝ブログの時に保存したものがあるからコピってくる。
んじゃ、大帝ブログ保存の時はどうやって拍手画像を拾ったかというと
「拍手画像」を右クリックして「inspect element」すれば画像の所在が出てくる。
んで、いくつか検証すると連番だとすぐに分かるのでwgetするというだけの事。
これ以降は各記事の個別の画像の保存。
画像保存をしながらどこに何の動画が埋め込んであるかもチェックしておく。
======================================
では、以下、参照先をまとめて書き換え。
ターミナル様でfindとsedをぶん回しまくりんぐ、という事だ。
基本は
find ./ -type f | xargs sed -i "s%aaaa%bbbb%g"
これでaaaaをbbbbに置き換える。
まっきんとっしゅもsedはインストールが必要みたいだけど
多分同じような作業はできるはず。
ういんどーずゆーざーは臭いから家に帰ってくださいwwww
で、ひとつのコツがある。
ぐぐったら普通は「%」じゃなくて「/」で説明してあるはずなんだが
今回はURLも書き換えるから「/」が使えない。だから「%」を使う。
んじゃまずはCSSの場所を書き換えよう
これはCSS拾う時にもう確認済み。
find ./ -type f | xargs sed -i "s%http://static.fc2.com/css_cn/common/headbar/120710style.css%./120710style.css%g"
find ./ -type f | xargs sed -i "s%http://blog-imgs-65.fc2.com/y/o/m/yomenainickname/css/78344.css%./78344.css%g"
タイトルの背景画像の青空。これの参照先を書き換えようと思ったら
htmlの中には無かった。探してみたらCSSの中に発見。
なんでそんな所にあるのに気付いたかってのは単純な話で
ファイル名が「fb03-title.jpg」なんだからctrl + f すればバカでも見つけられるって事。
全部の記事において青空は表示されている
↓
じゃ、全htmlに参照先が書いてあるのか？
↓
ひとつHTML開いてみたがctrl + fで出てこない
↓
じゃあ、他のHTMLは開くだけ無駄
↓
残された可能性はCSSしかねえよ
↓
CSS開いてctrl + f
↓
はい、発見
・・・というこれだけの話。
「HTMLって結局何なのさ？」「CSSって結局何なのさ？」「webページって結局何なのさ？」
こういう事が分かってれば当たり前でしか無い話。
HTMLの本を一冊読めば嫌でも分かる。
で、CSS直接書き換え。いちいちfindもsedも使わない。使いたきゃ使ってもいいけど。
んじゃ次はカテゴリが機能するように書き直し
ダウンロードするときにカテゴリは34パターンと確認済みなので
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/blog-category-0.html%./blog-category-0.html%g"
から・・・
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/blog-category-23.html%./blog-category-23.html%g"
・・・までとりあえず連番。
そして
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category0-0.html%./category0-0.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category0-1.html%./category0-1.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category0-2.html%./category0-2.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category0-3.html%./category0-3.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category0-4.html%./category0-4.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category0-5.html%./category0-5.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category5-1.html%./category5-1.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category5-0.html%./category5-0.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category22-1.html%./category22-1.html%g"
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/category22-0.html%./category22-0.html%g"
このへんも忘れちゃいけない。
んじゃ次は月別アーカイブが機能するように書き直し
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/blog-date-201506.html%./blog-date-201506.html%g"
から・・・
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/blog-date-201403.html%./blog-date-201403.html%g"
・・・まで連番。
次は最下段のnext prevを書き換える
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/page-16.html%./page-16.html%g"
から・・・
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/page-0.html%./page-0.html%g"
・・・まで連番。
さて、これでほとんどのリンクは機能するようになった。
次は画像が表示されるように書き換えたい。
画像の参照先はどうなってるか一個右クリックして「inspect element」で見ると
たとえば
<img src="http://blog-imgs-71.fc2.com/y/o/m/yomenainickname/WS000037.jpg" alt="WS000037.jpg" border="0" width="133" height="151">
こういう情報が出てくる。
では、さっそく書き換え。
find ./ -type f | xargs sed -i "s%http://blog-imgs-71.fc2.com/y/o/m/yomenainickname/%./img/%g"
ただし、これも大帝ブログいじり回している時に気付いたのだが
blog-imgs-71.fc2.com ← ここの数字部分（今回は71）の所がランダムに変わってうざい。
つまり今のfindとsedだけで全ての画像の参照先が訂正できた訳ではない。
そこでオフライン状態にしてキャッシュクリアして記事をダラダラ見ていくと
さっそく非表示になっている画像発見。
同じく右クリック→「inspect element」→違う番号発見
その結果
find ./ -type f | xargs sed -i "s%http://blog-imgs-55.fc2.com/y/o/m/yomenainickname/%./img/%g"
find ./ -type f | xargs sed -i "s%http://blog-imgs-65.fc2.com/y/o/m/yomenainickname/%./img/%g"
次は左上隅のFC2ロゴを「inspect element」
<img src="http://static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ">
拍手ゼロの時の画像を「inspect element」
<img src="http://admin.blog.fc2.com/image/w-white.gif" style="cursor: pointer; border: 0px; vertical-align: top; margin: 0px; padding: 0px;">
拍手１の時の画像を「inspect element」
<img src="http://static.fc2.com/image/clap/number/white/1.gif" style="cursor: pointer; border: 0px; vertical-align: top; margin: 0px; padding: 0px;">
拍手４の時の画像を「inspect element」
<img src="http://static.fc2.com/image/clap/number/white/4.gif" style="cursor: pointer; border: 0px; vertical-align: top; margin: 0px; padding: 0px;">
ふむふむ。拍手は連番ですな。（いや、大帝ブログいじった時に気付いてたけどね）
だから以下の3つで書き換え
find ./ -type f | xargs sed -i "s%http://static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png%./img/sh_fc2blogheadbar_logo.png%g"
find ./ -type f | xargs sed -i "s%http://static.fc2.com/image/clap/number/white/%./img/hakushu-%g"
find ./ -type f | xargs sed -i "s%http://admin.blog.fc2.com/image/w-white.gif%./img/hakushu-0.gif%g"
ブロともの大帝アイコンを「inspect element」
<img src="http://blog-imgs-52.fc2.com/f/e/i/feidempire/20131128021916ce6.jpg" width="79.7872340426" height="100" title="フェイド大帝" border="0">
よって
find ./ -type f | xargs sed -i "s%http://blog-imgs-52.fc2.com/f/e/i/feidempire/%./img/%g"
画面上部のall archivesを「inspect element」
<a href="http://yomenainickname.blog.fc2.com/?all" target="_self" title="全記事一覧">All archives</a>
よって
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/?all%./all-archives.html%g"
↑
リネームしたんだから、これを書きなおす必要がある
んでそのall archivesの各記事へのリンクを「inspect element」
<a href="http://yomenainickname.blog.fc2.com/blog-entry-81.html">記事を読む</a>
よって
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/blog-entry-%./blog-entry-%g"
おっとこれをしたらブログ記事内のリンクも変わったが まあいいか
ちなみに「./」ってのは「カレントディレクトリ」の意味
PCいじるんならディレクトリ構造ぐらい覚えておけと小一時間(ry
んで画面上部のカレンダー部分「月」は反応するが「日」が反応しない
<a href="http://yomenainickname.blog.fc2.com/blog-date-20150413.html">13</a>
よって
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/blog-date-201%./blog-date-201%g"
最上段のブログタイトル（読めないニックネーム）をクリックすれば
ブログのトップに飛ぶ。
それから各記事の最下段には「HOME」と書いてあるがこれも同様にブログのトップに飛ぶ。
こういうトップに飛ぶリンクは最新記事つまり「blog-entry-81.html」に飛ぶように書き換えたい。
find ./ -type f | xargs sed -i "s%http://yomenainickname.blog.fc2.com/\"%./blog-entry-81.html\"%g"
ヒントは「\」使っている所。使えない文字を使いたいの。
だからエスケープ処理。エスケープ・シーケンス。
左上隅のFC２のロゴと最下段「Powered by FC2ブログ」を押せば
http://blog.fc2.com/ へ飛ぶようになっている。
しかし今回FC２が死ぬという前提で編集しているので
これはブログのトップに飛ぶように書きなおしてみる。
find ./ -type f | xargs sed -i "s%http://blog.fc2.com/\"%./blog-entry-81.html\"%g"
これもエスケープ・シーケンス使っている。
一応ここで完成としてもよい。
これでFC２が死んでも全記事が閲覧可能で画像も表示されるし、リンクも機能する。
動画は元々ニコニコやyoutubeなのでfc2が死んでも関係ない。
この先はグレーゾーンへ踏み込む事にもなるが
動画をローカル保存してブラウザに表示させる方法もある。
ダウンロードして問題がない動画があったとすれば、ダウンロードしておくと
将来的に削除されたり、youtubeがサービス終了したりする時の備えにはなる。
また、ネット回線不調の場合でも視聴可能などメリットはある。
どうやって動画をダウンロードするかは下手こくと著作権法的にまずいので
まあ、各自勝手に四苦八苦すればいいと思うよ。
で、動画がダウソできた後については
ニコニコはjavascriptで、youtubeは<iframe>だから
そこを書き換えればいい。例えばnanoで開いてctrl + wで探して
書き換えて（repeated keyのスピードを上げておいた方がいい）ctrl + oで保存する。
吾輩はHTML５で書き換えた。
但しHTML５への対応はまだバラつきがあって対応コーデックがどうとか
動画が閲覧不可などのトラブルもありうる。そこで元動画へのリンクも貼りたい。
よってテンプレを作ってURL差し替えながらそれを貼ればいい。
例えばこういうテンプレ
<video src="./img/XXXX.mp4" width="320" height="180" controls> </video><br /><span style="background-color:#d0d0d0">元動画のURLへ</span><A Href="http://XXXX"Target="_blank">GO!</A><br /><br /><br />
わかったかな？わからなかったらもう一回「HTML / XHTML」の本を読みなおすんだ。
最後のvideoタグだけはhtml5だけどwww