はじめに

HTMLメルマガのコーディング依頼をいただくことがたまにあります。

Webサイトのコーディングと違い、レイアウトはtableタグを複数入れ子にしてレイアウトするなど、メルマガコーディング特有の注意点が色々と存在します。

その中の1つに文字コード問題があります。

HTMLメルマガでよく使用されている文字コードの1つが ISO-2022-JP です。

文字コードについて

そもそも文字コードとは？

コンピュータは人間ではないので、人間が使用する文字（あいうえお等）が理解できません。

コンピュータは0と1しか処理できないのです。

そこでコンピュータが文字を理解するには「文字と番号の対応表（例：あ＝3042）」が必要です。

文字コードとは簡単に言うとその文字と番号の対応関係についての規則体系のことです。

文字化け

VSCode で文字コード ISO-2022-JP のファイルを開くと下の画像のように文字化けしてしまいます。

これは VSCode がデフォルトでは ISO-2022-JP に対応していないからです。

拡張機能　ConvertToISO-2022-JP　をインストール

そこで拡張機能「ConvertToISO-2022-JP」をインストールして ISO-2022-JP も編集できるようにします。

拡張機能を利用する場合は、はじめにインストールが必要です。

VSCode の左側サイドバーから「拡張機能」をクリックし、検索バーに「ConvertToISO-2022-JP」と入力して検索します。

検索結果から「ConvertToISO-2022-JP」を選択し、インストールをクリックします。

インストール後 VSCode を再起動すると拡張機能が有効になります。

文字コードを ISO-2022-JP → UNICODEに変換

拡張機能「ConvertToISO-2022-JP」が有効になった状態で再度、先ほどの文字コード ISO-2022-JP のファイルを開きます。

開いた時点では先ほどと同様に文字化けしています。

左下の歯車アイコンからコマンドパレットを開きます。（”Ctrl + Shift + P” or “⌘ + Shift + P”）

次に「Convert ISO-2022-JP」と検索し、クリックします。

すると ISO-2022-JP → UNICODE に変換することができ、文字化けしていた文字が正常に表示されます。

右下のステータスバーに”Convert ISO-2022-JP”という文字が表示されてります。ここをクリックしても ISO-2022-JP ⇔ UNICODE を交互に変換することができます。

コーディング

あとは通常どおり、コーディングをしていけば問題ないのですが、コーディングが終わりファイルをそのまま保存してしまうと、今度はファイルをブラウザで開いた時に文字化けしてしまいます。

これは下記のようにHTMLファイルの<header>内で文字コードを「ISO-2022-JP」に指定しているのに、ファイルが UNICODE で保存されてしまったからです。

<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">

文字コードを UNICODE → ISO-2022-JPに変換して保存

この文字化けを防ぐためには、コーディングが終了したら今度は UNICODE → ISO-2022-JP に戻してやらなければいけません。

先ほどと同様に右下のステータスバーの”Convert ISO-2022-JP”という文字をクリックすることでこの度は UNICODE → ISO-2022-JP に変換することができます。

VSCode のエディター上では文字化けした状態になりますが、その状態でファイルを保存してブラウザーで開くと正常に表示されます。