文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法

プログラムのファイルというのは「文字コード」の設定があります。
これはPHPやJavaScriptなどのプログラムのファイルだけに限らず、HTMLやCSSのようなファイルでも同様です。

このページでは「文字コードとは何か?」の簡単な説明と、ファイルを編集する際に文字コードをどのように設定するかの手順を解説していきます。

「文字コードの説明などいらないから、設定のやり方だけ教えろ」という方はこのページの終盤にある「無料のテキストエディタ「TeraPad」でUTF-8Nの設定をする手順」のタイトルからお読みください。

文字コードとは何か?

「文字コードとは」と検索すると以下のように解説されています。

文字コードとは、文字をコンピュータで扱うために個々の文字や記号に割り当てられた、固有の番号のことである。
文字コードとは – IT用語辞典 Weblio辞書

わかりやすい例を挙げて解説します。
例えば日本語の「あ」という文字をコンピューター上で扱う際はそのまま「あ」として扱うわけではなく、何らかの英数字の組み合わせに変換してから扱います。
ここでは例として「あ」を数字の「1」「い」を「2」「う」を「3」というように変換すると仮定してみます。
文字を変換
このような変換のことを「エンコード」といいます。
補足:実際にはこのように一桁の数字では足りなくなるので、アルファベットを含めて数桁を使用して変換します。

そして、コンピュータ上での処理が終了して再び画面に文字を表示させる際には、数字を文字に変換し直します。
元の文字に戻す
このような元に戻す変換のことを「デコード」といいます。

今回の例の場合だと、エンコードをする側とデコードをする側が、

  • 「あ」を「1」
  • 「い」を「2」
  • 「う」を「3」

というように同じ変換ルールを守っていたからこそ正しく文字が表示されたことになります。
ではもし仮に、片方が全く別の変換ルールを適用してしまったらどうなるでしょう?
もうおわかりですね。文字を表示させる際に文字化けをしてしまうのです。
文字化けの原因

インターネット上には各国さまざまな言語が存在するので、それに応じて多くの文字コードが存在します。
だからこそインターネット上で使用されるファイルでは文字コードの設定をして明示しておく必要があるのです。
日本語でのウェブサイトで使用される文字コードは、

  • Shift_JIS(シフト・ジス)
  • EUC-JP(イーユーシー・ジェイピー)
  • UTF-8(ユーティーエフ・エイト)

が一般的です。
上記の中で「国際的に文字化けが起きにくい」というメリットから現在多く使われているのが「UTF-8(ユーティーエフ・エイト)」になります。
以下からはテキストエディタのソフトで文字コードをUTF-8に設定する方法を解説していきます。

テキストエディタとは?

「テキストエディタ」とは、文字を入力・編集・表示するだけのソフトのことをいいます。
Windowsだと「メモ帳」、Macだと「テキストエディット」というテキストエディタのソフトが標準でインストールされています。

ちなみに、Wordのようなソフトは「ワープロソフト」に属されるので、テキストエディタではありません
その見分け方は「文字の装飾(色や大きさなど)ができるかどうか」が決定的な違いとなります。
テキストエディタでは文字の大きさや色の編集はできません。
そんな見た目などは編集できず、ひたすら文字情報(テキスト)だけを編集する硬派なソフトがテキストエディタとなります。

UTF-8には「BOMあり」と「BOMなし」がある

UTF-8には「BOMあり」と「BOMなし」があります。
BOMとは「バイトオーダーマーク(byte order mark)」の略であり、BOMありだとファイルの先頭部分に目に見えないデータが付加されます

このサイトで公開しているメールフォームなどのプログラムもそうですが、一般的にBOMがあるとサーバー上でのプログラムの実行にエラーが起きるケースが多いです。

このシーケンスを通常の文字と認識するプログラムでは、先頭に余分なデータがあるとみなされて問題となることがある。例えば、Unix系OSにおける実行可能スクリプトは、ファイル先頭が「#!」から始まるとき、それに続く文字列をインタプリタのコマンドとして認識するが、多くのシステムでは、このシーケンスが存在するとこの機能が働かず実行できない。PHPでは、<?PHPの前に出力されるため、header()関数の実行に失敗する原因となる。
バイト順マークの使用について – UTF-8 – Wikipedia

BOMありの場合を「UTF-8」、BOMなしの場合を「UTF-8N」と呼んだりしますが、これは日本独自の呼び方らしいです。

なお、日本の特殊事情として、このシーケンスがある方をUTF-8、ない方を特にUTF-8Nと呼ぶこともあるが、このような呼び分けは日本以外ではほとんど知られておらず、また公的規格などによる裏付けもない。
バイト順マークの使用について – UTF-8 – Wikipedia

というわけで、テキストエディタでの文字コード設定で「UTF-8N」を選択する必要があります。

Windowsのメモ帳ではUTF-8Nは設定できない

上記のようにWindowsにはメモ帳というテキストエディタのソフトが最初からインストールされています。
しかし、このソフトはUTF-8Nの文字コードを選択することができません
ファイルを保存する際のプルダウンメニューで文字コードの選択肢はありますが、
メモ帳での文字コード設定
「UTF-8」はあっても「UTF-8N」はありません。
もちろんここで「UTF-8」を選択して保存するとファイルの先頭にBOMが付加され、そのファイルのプログラム実行の際にはエラーが発生することになります。

無料のテキストエディタ「TeraPad」でUTF-8Nの設定をする手順

Windows用のテキストエディタのフリーソフトに「TeraPad(テラパッド)」というものがあり、このソフトを使えばUTF-8Nでの保存が可能です。
私がウェブサイトを作る際のHTMLやCSS、PHP、JavaScriptなどはすべてこのTeraPadで手打ちで制作しています。硬派でしょう。
参考リンク:TeraPad公式ダウンロードページ
TeraPadダウンロード
ダウンロードリンクにある.exeタイプはインストーラー付き、.zipタイプはインストーラーなしのスタンドアローンタイプとなります。
ちなみに私はスタンドアローンタイプを使用しています。
補足:インストールしなくても使用できるものを「スタンドアローン」といいます。

TeraPadを起動し、メニューバーにある「表示」から「オプション」を選択します。
TeraPadのオプション設定

オプションのウインドウが出現したら、以下のように設定をします。(以下は私のいつもの環境です)
TeraPadの文字コード設定
改行コードは上画像のようにしなくてもいい可能性がありますが、サーバーに使われているOSで最もシェアが高いのはLinux系ですから、Linux系OSでの改行コードであるLFを選択しています。
TeraPadの初期状態で選択されているCR+LFというのはWindows向けの改行コードとなります。

上記の設定が終われば、フロッピーディスクのデザインの保存アイコンを押すだけでUTF-8Nで保存されると思いますが、不安な場合はメニューバーの「ファイル」から「文字/改行コード指定保存」を選択してから、
文字コードを指定して保存

UTF-8N」を選択してから保存しても良いでしょう。
UTF-8Nを選択

現在の文字コードや改行コードはTeraPadでファイルを開いたときにウインドウ右下部分に表示されます。
現在の文字コード
ここでの注意点として、ファイル内に日本語が全く存在せずすべて半角英数字のみの場合は、UTF-8Nで保存されているファイルでもSJIS(Shift_JIS)と表示されます
これは不具合ではありません。
日本語のような2バイト文字が存在しない場合はUTF-8NとShift_JISは内部的に同じになるため、TeraPad側で判別ができずにSJIS(Shift_JIS)と表示されているだけです。

もし不安な場合はファイル内で効果のないコメント、例えばHTMLなら

<!-- コメント -->

CSSなら、

/* コメント */

PHPやJavaScriptのような言語なら、

// コメント

といった感じで日本語をファイル内に書いて上書き保存し、右下の表示を確認してみましょう。

まとめ

「表示されたページが文字化けしている」という症状は文字コードの設定が正しくできていないことが原因です。
もし文字化けしているページがあった場合にはブラウザの設定で文字コードを変更してみると、どの文字コードが正しいのかを判別することができます。
ブラウザの文字コード設定

文字コードの設定は一度覚えてしまえばそんなに難しいものではないので、自分が制作するサイトが文字化けしたりしないよう、正しく設定し編集・保存できるようになっておくと良いですね。

サポートBBS

サイト内を検索
サイト運用事例
ダウンロード

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+