WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

  • twitter WIING WebServiceCloud
  • Instagram WIING WebServiceCloud
  • facebook WIING WebServiceCloud
  • note WIING WebServiceCloud
  • WIING media ログイン
HOME  〉Web制作 〉HTML 〉UTF-8からShift_JISへWebサイトの文字コード変更方法

2022.09.08 Thu

UTF-8からShift_JISへWebサイトの文字コード変更方法

Web制作

UTF-8からShift_JISへWebサイトの文字コード変更方法のイメージ

UTF-8からShift_JISの文字化け祭り発生

通常、Webサイトの文字コードは普段何を指定されていますか。

当社でも普段は、

  • Web標準とも世界基準ともいえるUnicodeのUTF-8

で文字コード指定することが比較的ほとんどになるかもしれません。

ただWebサイトやSaaSなどのWebサービスにはJIS X 0208規格のShift_JISが指定されている場合があります。

UTF-8文字コードのファイルをサーバーアップしてしまうと、一気に文字化けしますし、テキストエディタなどでShift_JIS化すると原文が文字化けしてしまって、元ファイルの文字が判別できなくなってしまったり、結構窮地に陥ることがあります。

今回は文字コードの基本的な知識をわかりやすく理解した上で、UTF-8で制作されたページを上手くShift_JIS化させる手順までの知識や情報を学習していきます。

基本的な言葉の意味と概要

いくつか普段聞きなれない言葉や意味が曖昧な語彙があるので、あらためて簡単な表現で各関連キーワードを理解していきます。

文字コードとは

文字コードとは、コンピューター上でアルファベットや漢字やひらがな等の文字を利用することを目的として、コンピューターが理解できる0と1の組み合わせであるバイト表現と文字の解釈を手伝う組み合わせ方の約束事(コード)になります。

コンピュータは0と1しか理解できず、人はそれぞれの使用言語しか理解しにくいので、双方の変換ルールの組み合わせを定めた翻訳の仕組みといったところでしょうか。

UTF-8とは

文字コードの変換ルールの一種でありひとつの規格といったところでしょうか。 コンピュータは0と1の信号でしかデータ情報を理解できませんが、文字コードの変換ルールがあることで、人が理解できる文字化や数字化ができます。ただ、0と1だけで伝えると膨大な処理が必要になるので、間にさらにその0と1の組み合わせを独自の記号の組み合わせに再割り当てを行います。 世界標準、Web標準としても認知、使用されている文字コードです。

この中間の翻訳の割り当ての仕組み仕様のひとつの種類がUTF-8といういったところでしょうか。ですので、この中間翻訳の仕組みが別の翻訳変化の規格が適用されると、文字が正常に変換されなくなり文字化けが発生します。 この中間翻訳の規格のことを文字符号化方式といいます。

Shift_JISとは

JIS X 0208という符号化文字集合の日本の規格です。JISはJISマーク、日本産業規格のJISで、日本の産業や工業などの国家規格の略称です。 Shift_JISとは、JISが承認している日本のコンピュータと人の中間翻訳の規格のひとつですね。 日本で一般的に多くの人が目にするWebコンテンツはUTF-8とShift_JISのどちらかがほとんどといっても良いでしょう。

Unicode(ユニコード)とは

符号化文字集合という上位規格のような存在で、UTF-8などの文字符号化方式といわれる文字コード群の規格が所属する文字コードになります。 Shift_JISの上位規格はJIS X 0208であり、文字符号化方式Shift_JISが所属するのは符号化文字集合のJIS X 0208になります。

  • Unicode:符号化文字集合 >
    UTF-7、UTF-8、UTF-16、UTF-32:文字符号化方式

のようなイメージでしょうか。

文字コードにはそれぞれ制定する団体があり、団体の中の翻訳変換ルールもいくつか種類があるといったところでしょうか。

文字コードは翻訳変換ルールの仕様

文字化けの原因と対策

前章では、2つの文字コードの種類や体系をわかりやすく分類してみました。

文字化けの原因は勘の良い方はすでにお気づきでしょうが、
  • 翻訳変換ルールの違いで文字化けする

ということが理解いただけたかもしれません。

たとえば、UTF-8という翻訳変換ルールで保存されたテキストはUTF-8で開かれれば問題ないのですが、Shift_JIS形式で開くと翻訳変換ルールがことなるため、まるで見たことのない文字列に翻訳変換されて表示され、文字化けが発生するわけです。

ですので、UTF-8で保存されたWebページの文字コードがShift_JISに指定されていた場合文字化けしますし、Shift_JISで保存されたページがUTF-8ページとして表示すると同じように文字化けします。

このように
  • 翻訳変換ルールが異なる指定コンテンツを閲覧すると発生するのが文字化け

となるので、ブラウザなどの見る側の文字コードと表示させるデータやページの保存形式を同一の書式にすることが、文字化けを解決する方法と対策となります。

近年のブラウザはWebページで指定された文字コード記述をもとにサーバーから出力され自動的にコード指定されるため、通常はユーザー側で文字コードを合わせることができません。

ただ、修正や文字コードの統一は若干手順がややこしくなる場合がるので、次の章では具体的な手順について解説します。

文字化けは翻訳変換が違うために発生する

Webページの文字コードをUTF-8からShift_JIS変換

実際に文字コードを変更する手順と方法を解説してきます。 わかりやすくするために、今回はHTMLでコーディングされたWebページを例に説明していきます。

まず文字化けの際に決して行ってはいけないこと。

  • 文字化けした状態のファイルを新規上書き保存はしない

これはテキストエディタやブラウザなどで表示編集したときに文字化けしたデータを編集の有無にかかわらず上書き保存や新規保存はしていけないことになります。

この場合、間違って翻訳変換された状態を正しく保存してしまうことになり、元のデータが復活できなくなります。

ですので、まずは文字化けしたファイルをテキストエディタなどで開いて確認のみし、保存せずに閉じるようにしましょう。

文字化けの際に確認したいこと

基本的な文字化けは表示されているアプリと元のデータの保存形式やコード指定記述の翻訳変換コードのルールが違うことが原因となっています。 文字化けした時点で、ファイルの指定方法で何が問題であるかを判断するようにします。

ここでは、以下のように文字コードを変換する方法の例を記述します。

  • UTF-8形式で保存され、meta charset=”UTF-8″のWebページをShift_JISとしてページ出力されるサーバー側に設置してみる。
  • まず、UTF-8のWebページをそのままサーバーアップしてブラウザ表示すればほぼ間違いなく文字化けした状態でページが表示されます。
  • 保存形式やmeta情報の記述は正しい内容ですが、サーバー側でShift_JIS形式の翻訳変換でHTMLページを出力するためです。

Webページの保存形式もmeta記述もブラウザ側ではUTF-8と指定されて表示しているにもかかわらず、実際にはページの翻訳変換はShift_JISで出力されているからです。

カウボーイの格好をした日本語しか喋れない侍が英語を話せと強要されているような状態です。

この場合は、侍には鎧武具一式か紋付袴などを着せてあげることで、自信をもって母国語で話せるようになります。

手順としては、テキストエディタで開き、meta情報をShift_JISに変更して名前を付けて保存するとして新規保存時にShift_JISの文字コードを指定して保存します。
  • これで、UTF-8形式のWebページをShift_JIS形式で保存し直すことが可能になります。

ただややこしいのが、UTF-8で表示されていたWebページをShift_JIS形式で保存した場合などです。 この場合テキストエディタで開いても、文字化けしてしまい文字コードを変換しても文字ばけが改善されない場合があります。

そのような場合はWindowsパソコンであればメモ帳で開くことで文字化けが改善されることがありますので、UTF-8形式で保存しなおして、上述の同じ手順でShift_JIS形式に変更することができます。

このように文字コードの変更は手順を間違わなければスムーズに対応できます。

Webページの文字コードは保存形式とcharasetをセットで修正する

その他の注意点と考察

文字コードの変換は、あくまでも正しい状態で表示される環境であれば可能になります。

以下のような場合には、文字コードの変換や文字化けの修正ができない場合があります。
  • もともと表示可能な文字コードで保存されていないデータ
  • 特殊な文字コードを指定しているデータ
  • 文字化け状態で上書き保存されたデータ
  • MacやWindowsのみの独自形式で保存されたデータ
  • 破損してしまっているデータ
  • 文字化けしているように見えるだけのデータ

などになります。

基本的な文字コードの変換は手順通りやれば問題ありませんが、もとの文字コード環境で閲覧すると文字化けすることがあるので、あらかじめ、表示環境や実行環境、サーバー環境などの文字コード仕様を事前に知っておくとよいでしょう。

特に、文字化けした状態で保存してしまうと、それは正しい文字列として再保存されることになり元に戻らなくなるので注意が必要です。

今回は文字コードの仕組みや変更方法、文字化けの仕組みや対応方法をできるだけわかりやすく解説させていただきました。

文字化けはわりと困るし焦る
  • 診断チェックツール5
  • 診断チェックツール5

    診断チェックツール5は5問、5診断結果までの診断チェックをオンラインでチェックできるWebツールです。

WIING MEDIA twitter

WIING MEDIA facebook

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。