この作業は Claude(Anthropic の AI)とやりとりしながら進めた。 コマンドとスクリプトはほぼ書いてもらっている。どう残したいかを決めたのと、画面を見て確かめたのは自分。
ブログを作り替えたい
このブログは元々「トンネルポエマー」という名前で、2017 年から 2023 年まで、撮った電車の写真に一言添えるだけのブログだった。全部で 425 記事。サブタイトルは「怪文書」。
しばらく放置していたが、最近電子工作をやるようになって、作ったものの記録を残す場所が欲しくなった。
別のブログを新しく作ってもよかったが、このドメインは手放したくない。使わなくなったドメインは、いずれ期限が切れて誰かに取られ、全然関係ないサイトになってしまうことがある。
かといって、昔の記事を消すのも嫌だった。
- 自分がトンネルポエマーを気に入っていて、今でもときどき見返している
- 当時、気に入ってくれていた人がいた
- コミケで頒布したトンネルポエマー本に、このブログのリンクを載せている
本を手に取った人がいつかリンクを開いたときに、ちゃんとトンネルポエマーにたどり着けるようにしておきたい。
だから同じドメインで新しいブログを始めつつ、昔の記事はデザインも含めてそのまま残すことにした。
URL を壊したくない
一番簡単なのは、今のブログの記事を全部消して書き始めることだ。でもそうすると、昔の記事の URL(/2023/03/ktk.html みたいなもの)が全部 404 になる。どこかに貼られているリンクも、検索結果も、本に載せたリンクの先も死ぬ。
そこでこういう形にした。
www.tunnelpoemer.com → Blogger の新しいブログ(トンネル備忘録) old.tunnelpoemer.com → 旧ブログの静的コピー(GitHub Pages) www の昔の記事 URL に来た人は、old の同じ URL に転送する
旧ブログはただの HTML ファイルの束にして、GitHub Pages に置く。サーバーもデータベースも要らないので、一度置けばほぼ永久に残る。
丸ごと落とす
Blogger には記事を XML で書き出すバックアップ機能がある。最初はそれで済むと思ったが、中身は本文とタイトルと日付だけだった。デザインは入っていないし、画像も URL が書いてあるだけで実体はない。Blogger に読み込み直して初めて記事に戻る形式だ。
「見た目ごと残す」なら、ブラウザで見ている状態をそのまま保存するしかない。wget でサイトをミラーする。
まず記事の URL 一覧を作る。Blogger のフィードから取れるのだが、1 回に 150 件までしか返ってこない。425 件あるので、開始位置をずらして 3 回取る。
for i in $(seq 1 150 601); do curl -s "https://www.tunnelpoemer.com/feeds/posts/summary?alt=json&max-results=150&start-index=$i" \ | jq -r '.feed.entry[]?.link[]|select(.rel=="alternate").href' sleep 1 done | sort -u > urls.txt
サイドバーの年別件数を足すと 425。一致した。
あとはこの一覧を wget に渡す。-p で画像や CSS も一緒に取り、-k でリンクを手元のファイルを指すように書き換え、-H で画像サーバー(blogger.googleusercontent.com)にも取りに行かせる。
作業は Ubuntu の PC に SSH で入ってやっていたのだが、30 分くらいかかる処理の途中でSSH が切れて、wget ごと死んだ。
tmux の中で動かし直した。接続が切れても処理は続くので、長いコマンドはこれで回すのが正解だった。
結果、記事 425 件、画像 851 ファイル(337MB)。サムネイルだけでなく、クリックで開く原寸の画像まで揃った。
手元で見てみる
保存したフォルダで Python の簡易サーバーを立てる。
python3 -m http.server 8000
Ubuntu の PC には Tailscale を入れてあるので、iPhone からそのアドレスを開けば外出先でも確認できる。
本文も写真もちゃんと出た。でも背景の空の写真がない。
原因は自分たちだった。wget のログに壊れた URL が出ていて、それを避けるためにテーマ画像のサーバー(themes.googleusercontent.com)を丸ごと除外していた。背景画像もそこにあった。CSS から URL を拾って取り直したら戻った。
「ホーム」や年別アーカイブのページ(/2019/ など)は Blogger がその場で作っているページなので、静的なコピーでは再現できない。代わりに 425 件全部の目次ページを作った。
スマホ版がない
Blogger はスマホで開くと、同じ URL の後ろに ?m=1 を付けて別のデザインを出している。記事が縦に並んで、スマホだと読みやすかった。
静的なコピーだとこれがなくなって、スマホでも PC 版の小さい画面が出る。
なので、保存した 425 記事から日付・タイトル・サムネイル・本文を抜き出して、スマホ版風のトップページを作り直した。スマホ版の記事ページも別に落として置いてある。
最初はサムネイルを押すと PC 版の記事に飛んでいたので、その場で写真が拡大表示されるように変えた。外部のライブラリは使わず、ページの中に直接書いてある。
Blogger に頼らない
旧ブログは最終的に非公開にするつもりだった。そうなると、コピーの中に Blogger 側の画像を読みに行っているところが残っていたら困る。
調べると、本文の画像は全部手元のファイルを指していた。残っていたのは SNS でリンクを貼ったときに出るプレビュー画像(og:image)の指定だけ。表示には関係ないが、どうせならこれも手元に持つことにした。
プレビュー用の 1200×630 の画像を 424 枚ダウンロードして(66MB)、指定を old.tunnelpoemer.com のものに書き換えた。原寸の写真を指す手もあったが、10MB を超えるものがあって SNS によっては大きすぎて出ない。
これでコピーは完全に自分のファイルだけで完結した。
old.tunnelpoemer.com で公開
GitHub にリポジトリを作って push し、GitHub Pages で公開した。公開リポジトリなら費用はかからない。サイト全体の上限が 1GB で、今回は画像込みで余裕で収まった。
独自ドメインを使うには、DNS に 1 行足す。
種類: CNAME 名前: old データ: (GitHubのユーザー名).github.io
ここで少し迷った。ドメインは昔 Blogger の画面から買ったものだが、DNS の設定は Blogger にはない。Blogger から買ったドメインは Google Domains で登録されていて、今はその事業を引き継いだ Squarespace で管理されている。同じ Google アカウントでログインしたら、ちゃんとあった。
名前の欄は old だけ。old.tunnelpoemer.com と全部書くと二重になる。
既にある www と @ のレコードは今のブログ用なので触らない。
途中で GitHub のユーザー名を変えたくなって変えた。リポジトリの URL は自動で転送されるが、github.io の URL は転送されない。さっきの CNAME も書き換えが必要になる。やるなら公開前にやった方がいい。
ドメインを新ブログへ
Blogger で新しいブログを作って体裁を整えたら、ドメインの付け替え。
- 旧ブログの 設定 → 公開 → カスタムドメイン を削除
- 新ブログの 設定 → 公開 → カスタムドメイン に www.tunnelpoemer.com を入れる
- 「カスタム ドメインにリダイレクトする」をオン
1 と 2 の間はどちらのブログにもドメインが付いていないので、続けてやる。
直後に開いたら、「安全な接続ができませんでした」が出た。
設定の問題ではなく、新ブログ用の HTTPS の証明書がまだ発行されていないだけだった。待っていたら表示された。
次に、昔の記事の URL に来た人を old へ転送する。新ブログのテーマの HTML を編集して、<head> の直後にこれを入れた。
<b:if cond='data:view.isError'>
<script>location.replace('https://old.tunnelpoemer.com' + location.pathname + location.search);</script>
</b:if>
新ブログに存在しないページ、つまり 404 になるページを開いたら、old の同じパスに飛ばす。昔の記事の URL は新ブログには存在しないので、全部 old に流れる。
ドメインを付け替える前に、新ブログの blogspot.com のアドレスで試しておける。(新ブログ).blogspot.com/2023/03/ktk.html を開いて old の記事に飛べば OK。
入口を置く
最後に、新ブログのトップに旧ブログへのリンクを置いた。
HTML/JavaScript のガジェットを置いたら、PC では出たがスマホでは出なかった。このテーマはスマホ用の表示が別になっていて、ガジェットごとに「スマホでも出す」印が付いていないと表示されない。テーマの HTML でガジェットの行を探して、mobile='yes' を書き足した。
<b:widget id='HTML1' ... type='HTML' mobile='yes' version='1' ...>
最初は白い箱で大きく出して浮いていたので、テーマの色に合わせた小さい枠付きのリンクにした。
旧ブログは「投稿者のみ」に切り替えて非公開にする。コピーはもう Blogger 側に何も頼っていないので、閉じても old は壊れない。削除はせずに、元データの保険として置いておく。
完成
旧トンネルポエマーは、デザインそのままで old.tunnelpoemer.com に残った。昔のリンクから来ても、ちゃんとそこに着く。
そしてこのブログ、トンネル備忘録が始まった。
6 年分の写真を 1 枚ずつ見返すことになったのは想定外だった。怪文書は怪文書のまま置いておく。
この記事について
一連の作業は Claude(Anthropic の AI)とやりとりしながら進めた。
wget やフィードのコマンド、目次ページやスマホ版トップの生成、写真の拡大表示、og:image の取り直し、GitHub Pages への公開の段取りは、ほぼ Claude に書いてもらった。フィードが 150 件で切れること、XML のバックアップでは画像もデザインも残らないこと、Blogger から買ったドメインが Squarespace にあることを教えてくれたのも Claude だ。
一方、どう残したいかを決めたのは自分だ。デザインごと残す、URL は壊さない、スマホ版のトップも欲しい、写真は拡大で見たい。iPhone で開いて「背景がない」「画像を押すと PC 版に飛ぶ」「スマホにリンクが出ない」「不恰好」と気付いたのも、DNS や Blogger の設定画面を操作したのも自分。
間違いもあった。背景が抜けたのは、Claude が勧めた wget の除外設定のせいだった。スマホに出ないガジェットを最初に勧めてきたり、新ブログのテーマを取り違えて「HTML に id='main' があるはず」と言ってきたりもした。こちらも、コマンドの見本に書いてあった「リポジトリ名」をそのまま貼り付けて設定したりしている。
結局、画面を見て「ここがおかしい」と言える人間がいないと先に進まない。そういう分担だった。
