イメージ

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

公開日
最終更新日
2021年9月15日
著者

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

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

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

2018年8月30日追記：TerapadはWindows用のソフトなので、MacのPCをお使いの方は「Mac用のフリーソフト「CotEditor」でUTF-8Nの設定をする手順」からお読みください。(TeraPadの解説の後にあります)

  1. 文字コードとは何か？
  2. テキストエディタとは？
  3. UTF-8には「BOMあり」と「BOMなし」がある
  4. Windowsのメモ帳ではUTF-8Nは設定できない (追記あり)
  5. 無料のテキストエディタ「TeraPad」でUTF-8Nの設定をする手順
  6. Mac用のフリーソフト「CotEditor」でUTF-8Nの設定をする手順
  7. 文字コードのまとめ

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

文字コードとは、文字をコンピュータで扱うために個々の文字や記号に割り当てられた、固有の番号のことである。
文字コードとは – 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なし」があります。
BOMとは「バイトオーダーマーク(byte order mark)」の略であり、BOMありだとファイルの先頭部分に目に見えないデータが付加されます。

このサイトで無料配布しているメールフォームやBBSなどのプログラムもそうですが、一般的に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の文字コードを選択することができません。

ファイルを保存する際のプルダウンメニューで文字コードの選択肢はありますが、
メモ帳での文字コード設定
「UTF-8」はあっても「UTF-8N」はありません。
もちろんここで「UTF-8」を選択して保存するとファイルの先頭にBOMが付加され、そのファイルのプログラム実行の際にはエラーが発生することになります。

2019年7月24日追記：2018年末ごろのWindows10のアップデートにより、メモ帳もUTF-8 BOMなし(UTF-8N)に対応したようで、初期状態ではこれが選択されているようです。

まず注目したいのは、バイトオーダーマーク（BOM）のないUTF-8エンコーディングが標準になったことだろう。
Build 18298の「メモ帳」は保存の際に、文字コードを“ANSI”、“UTF-16 LE”、“UTF-16 BE”、“UTF-8”、“UTF-8（BOM 付き）”の6種から選択可能で、初期設定はBOMのない“UTF-8”にセットされている。
「メモ帳」に多数の改善、BOMなしUTF-8がデフォルト保存形式に ～「Windows 10 19H1」 – 窓の杜

上記の変更を見ても、UTF-8 BOMなし(UTF-8N)が現在の業界標準であることがわかると思います。

Windows用のテキストエディタのフリーソフトに「TeraPad(テラパッド)」というものがあり、このソフトを使えばUTF-8Nでの保存が可能です。
(Macの場合は後で解説いたします)

私がウェブサイトを作る際のHTMLやCSS、PHP、JavaScriptなどはすべてこのTeraPadで手打ちで制作しています。硬派でしょう。
もちろん今ご覧になっているこのサイトも、画像以外はすべて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のような言語なら、

// コメント

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

【補足】
内部的に同一な時に「UTF-8N」ではなく「SJIS(Shift_JIS)」のほうを優先して表示するのは、TeraPadが古いソフトだからだと思われます。(最終更新が2012年)

MacのPCの場合は今回は「CotEditor」というフリーソフトを使用してUTF-8Nでの保存をします。
https://itunes.apple.com/jp/app/coteditor/id1024640650?mt=12

まずMac App Storeで「CotEditor」と検索をすると出てくるので、それをダウンロード・インストールしてください。
CotEditor

CotEditorはインターフェースがシンプルなので迷う点はないかと思いますが、文字コードは以下の部分で変更できます。
文字コードの設定

以下の文字コードの選択肢を見てもらうとわかるように、このソフトの場合は「UTF-8」という表記ならBOMなしとなります。
BOMありの場合は「UTF-8　BOM付き」と明示される形となります。
UTF-8　BOMなし

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

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

このページと関連しているページ一覧

提供サポートなど