文字化けしたCSSや日本語テキストをブラウザで直す「文字化け修復ツール」を作った

Web制作をしていると、たまに「エ蝣・繧ゅ↑縺・」のような、文字とも記号ともつかない謎のテキストに遭遇することがある。CSSのコメントに書かれた日本語だったり、CSVで受け取ったデータだったり、古いシステムから移行してきたテキストだったり——原因は毎回違うのに、症状はいつも同じ「文字化け」だ。

その場しのぎで「Shift-JISかな?」「いやEUC-JPかも」と手元のエディタで文字コードを変えながら試すのは地味に時間を食う。この作業をブラウザで一発にできないかと思って作ったのが、今回公開した文字化け修復ツールだ。

文字化けが起きる仕組み

文字化けの正体は、たいてい「正しいエンコーディングで書かれたバイト列を、別のエンコーディングとして誤読した」結果だ。たとえばUTF-8で保存されたファイルをShift-JIS(CP932)として開くと、ひらがなや漢字が本来と違う文字の組み合わせに変換されてしまう。

厄介なのは、この誤読パターンが複数あること。UTF-8⇄Shift-JIS、UTF-8⇄EUC-JP、UTF-8⇄ISO-8859-1(Latin-1)など、組み合わせによって化け方が変わる。人間が見ただけでは「どのパターンで化けたか」を判断するのは意外と難しい。

使い方

使い方はシンプルで、文字化けしたテキストをテキストエリアに貼り付けて「文字化けを修復する」を押すだけ。主要なエンコーディングパターンをすべて試した上で、結果を「日本語らしさ」のスコアが高い順に並べて表示する。

一番スコアが高い候補には「おすすめ」のラベルが付くので、迷わずコピーして使える。

👉 文字化け修復ツールを試す

実装のポイント

仕組み自体はシンプルで、PHPの mb_convert_encoding()mb_check_encoding() を使って、6パターンの「誤読エンコーディング → 正しいエンコーディング」の組み合わせを総当たりする。

// Step1: 文字化けUTF-8文字列 → 「誤読エンコーディング」のバイト列に戻す
$originalBytes = mb_convert_encoding($text, $wrong, 'UTF-8');

// Step2: そのバイト列が「正しいエンコーディング」として有効か確認
if (!mb_check_encoding($originalBytes, $correct)) continue;

// Step3: UTF-8文字列として取り出す
$fixed = mb_convert_encoding($originalBytes, 'UTF-8', $correct);

ポイントは「日本語らしさ」のスコアリング。変換結果の文字列に含まれる文字のUnicodeコードポイントを見て、ひらがな(U+3040〜U+309F)・カタカナ(U+30A0〜U+30FF)・CJK漢字(U+4E00〜U+9FFF)の割合を計算している。

function japaneseScore($str) {
    $len = mb_strlen($str, 'UTF-8');
    $count = 0;
    for ($i = 0; $i < $len; $i++) {
        $code = mb_ord(mb_substr($str, $i, 1, 'UTF-8'));
        if (($code >= 0x3040 && $code <= 0x309F) ||  // ひらがな
            ($code >= 0x30A0 && $code <= 0x30FF) ||  // カタカナ
            ($code >= 0x4E00 && $code <= 0x9FFF)) {  // CJK漢字
            $count++;
        }
    }
    return $count / $len;
}

この単純なスコアリングだけで、6パターンの候補を「日本語として自然な順」に並べ替えられる。複雑な形態素解析や辞書は使わず、Unicodeの範囲判定だけで実用的な精度が出るのが面白いところだ。

フロントエンドはAlpine.js、スタイルはTailwind CSS(CDN)で、サーバー側の変換処理だけPHPに任せている。gluons.jpの他のツールと同じく、npmビルド不要でファイルを置くだけで動く構成だ。

こんな場面で使ってほしい

  • CSSやHTMLのコメントが文字化けしていて読めない
  • 古いシステムからエクスポートしたCSV・テキストファイルが化けている
  • メールやチャットで送られてきたテキストが「?????」になっている
  • どのエンコーディングで化けたのか見当がつかない

特にWeb制作の現場では、クライアントから受け取るファイルの文字コードが統一されていないことが多い。そんな時にブラウザで貼り付けるだけで直せるツールがあると地味に助かる。ぜひ使ってみてほしい。