古いサイトの素材を引っ越したら、2つ壊した ― Shift_JIS の165ファイルと、横倒しの写真36枚

古いサイトの素材を、今のサイトへ引っ越した日に、2つ壊しました。HTMLの165ファイルが全部文字化けして、写真36枚が全部横を向いたまま公開されました。

2026-09-21、個人の趣味の車（古いホンダの改造）の記録サイトを作っていた日のことです。素材は2種類ありました。昔の個人サイトを保存したHTML。そして、その日の作業をiPhoneで撮った写真。どちらも「置けば動く」と思っていたのが間違いでした。

保存したHTMLは、Shift_JIS（Windowsの古い日本語の文字コード）でした。それをそのままフォルダに置いて、Vercel に出しました。結果は、165ファイルすべてが文字化けです。

原因は、Vercel がHTMLを必ず charset=utf-8 というヘッダ付きで返すことでした。ファイルの中の meta に charset=Shift_JIS と書いてあっても、ブラウザはヘッダの方を優先します。meta は無視されます。

手元で小さく再現しました。「エンジン載せ替え日記」という一文を Shift_JIS で保存したファイルは、UTF-8としては読めません。無理に読むと、中身は ��ւ����L のような記号の列になります。

直すために、フォルダ全体を調べて、UTF-8で読めないHTMLを読み直して保存し直す道具（fix_sjis.py）を作りました。読み直しは cp932、だめなら euc_jp、の順です。ついでに meta の指定も charset=UTF-8 に書き換えます。

ここで失敗しました。meta の書き換えで、閉じ引用符まで消してしまったんです。content="text/html; charset=Shift_JIS" の最後の " ごと置き換えたので、charset=UTF-8> になって、meta タグそのものが無効になりました。ページは表示されるので、すぐには気づけません。

この失敗は、自分の決まり（確認は閉じ引用符込みで charset=UTF-8"> の形になっていること）に書き込みました。

この記事を書くために道具を読み直して、正直なところ、ぎょっとしました。fix_sjis.py の正規表現は、値のあとの引用符を「あってもなくてもいい」で食う書き方のままでした。さっきの1行を通してみると、やはり charset=UTF-8> になります。記事を出す前に、値だけを置き換えて前後の引用符は残す形に直しました。meta の書き方4通りで試すと、直す前は4通り中3通りが壊れ、直した後は4通りとも正しく書き換わりました（2026-10-15）。

実際のフォルダはどうか。HTML 4,858ファイルのうち、UTF-8で読めないものは0件でした。charset=UTF-8> の形は0件で、charset=UTF-8" の形が139件。Shift_JIS や EUC-JP の指定が残っているファイルも0件です。

つまり、いまのフォルダは無事です。ただ、無事なのが「道具が正しいから」なのか、「あとで別の方法で直したから」なのかは、記録が残っていないので分かりません。道具の修正は、まだやっていません。

もう1つは、同じ日に出した写真です。iPhoneで撮った36枚を、HEIC（iPhoneの写真の形式）から webp に変換して、記録のページに並べました。公開してから「画像が横を向いています」と指摘されました。縦に撮った写真が、全部横倒しだったんです。

原因は、変換のやり方でした。iPhoneの縦写真は、画素そのものは横長のまま保存して、「この写真は縦向きで見る」という印（EXIFのOrientation=6）を付けています。sips で変換したあと cwebp に渡すと、その印が落ちて、画素の並びのまま、つまり横倒しで出てきます。

これも小さく再現しました。印だけ付けた400x300の画像を作って通すと、次の結果でした。

直し方は、magick に -auto-orient を付けることです。縦写真が「高さ＞幅」になっているかを、変換のたびに数えて確かめる決まりにしました。

一番こたえたのは、変換したあとに、1枚も目で確かめていなかったことです。同じ種類のミスは、ほかのフォルダにもありました。白い車の昔の写真を入れたフォルダ2つの10枚も、同じ sips 経由で横倒しだったんです。後から点検して直しました。

この日は、成果物を自分の目で見ないまま報告した失敗を、ほかにもしています。横倒しの公開、進捗の読み違い、写真の説明文を見ずに推測で書いたこと、JavaScriptのエラーの見落とし。同じ根っこで、4回です。

サイズも直しました。2400pxで578KBだった1枚を、1000pxで約119KBにしました。スマホの幅390px×3倍＝1170pxなので、1000pxで足ります。1/5です。

2026-10-15 に数えると、9月21日の36枚は、全部が「高さ＞幅」でした（縦36・横0）。ただし、この数え方には限界があります。縦横の数を見るだけでは、横倒しの縦写真と、もともと横長の写真の区別がつきません。確実なのは、変換の前に元の向きの印を読み、印が縦向きの写真は、出てきた画像が「高さ＞幅」になっているかを1枚ずつ確かめるやり方です。

引っ越しの素材が古いサイトや大量の写真の方は、置く前に一度、文字コードと向きを数えてみてください。作品は 制作実績、ほかの記録は ブログ にあります。