最終更新日2019年10月11日プログラムのファイルというのは「文字コード」の設定があります。これはPHPやJavaScriptなどのプログラムのファイルだけに限らず、HTMLやCSSのようなファイルでも同様です。このページでは「文字コードとは何か?」の簡単な説明と、ファイルを編集する際に文字コードをどのように設定するかの手順を解説していきます。「文字コードの説明などいらないから、設定のやり方だけ教えろ」という方はこのページの終盤にある「無料のテキストエディタ「TeraPad」でUTF-8Nの設定をする手順」のタイトルからお読みください。2018年8月30日追記:TerapadはWindows用のソフトなので、MacのPCをお使いの方は「Mac用のフリーソフト「CotEditor」でUTF-8Nの設定をする手順」からお読みください。文字コードのまとめ文字コードとは何か?「文字コードとは」と検索すると以下のように解説されています。文字コードとは、文字をコンピュータで扱うために個々の文字や記号に割り当てられた、固有の番号のことである。Weblio辞書わかりやすい例を挙げて解説します。日本語の「あ」という文字をコンピューター上で扱う際はそのまま「あ」として扱うわけではなく、何らかの英数字の組み合わせに変換してから扱います。ここでは例として「あ」を数字の「1」、「い」を「2」、「う」を「3」というように変換すると仮定してみます。このような変換のことを「エンコード」といいます。補足:実際にはこのように一桁の数字では足りなくなるので、アルファベットを含めて数桁を使用して変換します。コンピュータ上での処理が終了して再び画面に文字を表示させる際には、数字を文字に変換し直します。このような元に戻す変換のことを「デコード」といいます。「う」を「3」というように同じ変換ルールを守っていたからこそ正しく文字が表示されたことになります。仮に、片方が全く別の変換ルールを適用してしまったらどうなるでしょう?もうおわかりですね。文字を表示させる際に文字化けをしてしまうのです。インターネット上には各国さまざまな言語が存在するので、それに応じて多くの文字コードが存在します。インターネット上で使用されるファイルでは文字コードの設定をして明示しておく必要があるのです。日本語でのウェブサイトで使用される文字コードは、Shift_JIS(シフト・ジス)EUC-JP(イーユーシー・ジェイピー)UTF-8(ユーティーエフ・エイト)が一般的です。上記の中で「国際的に文字化けが起きにくい」というメリットから現在多く使われているのが「UTF-8(ユーティーエフ・エイト)」になります。以下からはテキストエディタのソフトで文字コードをUTF-8に設定する方法を解説していきます。テキストエディタとは?「テキストエディタ」とは、文字を入力・編集・表示するだけのソフトのことをいいます。Windowsだと「メモ帳」、Macだと「テキストエディット」というテキストエディタのソフトが標準でインストールされています。ちなみに、Wordのようなソフトは「ワープロソフト」に属されるので、テキストエディタではありません。その見分け方は「文字の装飾(色や大きさなど)ができるかどうか」が決定的な違いとなります。テキストエディタでは文字の大きさや色の編集はできません。そんな見た目などは編集できず、ひたすら文字情報(テキスト)だけを編集する硬派なソフトがテキストエディタとなります。UTF-8には「BOMあり」と「BOMなし」があるUTF-8には「BOMあり」と「BOMなし」があります。mark)」の略であり、BOMありだとファイルの先頭部分に目に見えないデータが付加されます。このサイトで無料配布しているメールフォームやBBSなどのプログラムもそうですが、一般的にBOMがあるとサーバー上でのプログラムの実行の際にエラーが起きるケースが多いです。このシーケンスを通常の文字と認識するプログラムでは、先頭に余分なデータがあるとみなされて問題となることがある。Unix系OSにおける実行可能スクリプトは、ファイル先頭が「#!」から始まるとき、それに続く文字列をインタプリタのコマンドとして認識するが、多くのシステムでは、このシーケンスが存在するとこの機能が働かず実行できない。PHPでは、<?PHPの前に出力されるため、header()関数の実行に失敗する原因となる。WikipediaBOMありの場合を「UTF-8」、BOMなしの場合を「UTF-8N」と呼んだりしますが、これは日本独自の呼び方らしいです。日本の特殊事情として、このシーケンスがある方をUTF-8、ない方を特にUTF-8Nと呼ぶこともあるが、このような呼び分けは日本以外ではほとんど知られておらず、また公的規格などによる裏付けもない。Wikipediaというわけで、テキストエディタでの文字コード設定で「UTF-8N」を選択する必要があります。(追記あり)上記のようにWindowsにはメモ帳というテキストエディタのソフトが最初からインストールされています。このソフトはUTF-8Nの文字コードを選択することができません。「UTF-8」はあっても「UTF-8N」はありません。ここで「UTF-8」を選択して保存するとファイルの先頭にBOMが付加され、そのファイルのプログラム実行の際にはエラーが発生することになります。BOMなし(UTF-8N)に対応したようで、初期状態ではこれが選択されているようです。注目したいのは、バイトオーダーマーク(BOM)のないUTF-8エンコーディングが標準になったことだろう。付き)”の6種から選択可能で、初期設定はBOMのない“UTF-8”にセットされている。無料のテキストエディタ「TeraPad」でUTF-8Nの設定をする手順Windows用のテキストエディタのフリーソフトに「TeraPad(テラパッド)」というものがあり、このソフトを使えばUTF-8Nでの保存が可能です。(Macの場合は後で解説いたします)私がウェブサイトを作る際のHTMLやCSS、PHP、JavaScriptなどはすべてこのTeraPadで手打ちで制作しています。今ご覧になっているこのサイトも、画像以外はすべてTerapadで作られています。参考リンク:TeraPad公式ダウンロードページダウンロードリンクにある.exeタイプはインストーラー付き、.zipタイプはインストーラーなしのスタンドアローンタイプとなります。ちなみに私はスタンドアローンタイプを使用しています。補足:インストールしなくても使用できるものを「スタンドアローン」といいます。TeraPadを起動し、メニューバーにある「表示」から「オプション」を選択します。オプションのウインドウが出現したら、以下のように設定をします。(以下は私のいつもの環境です)改行コードは上画像のようにしなくてもいい可能性がありますが、サーバーに使われているOSで最もシェアが高いのはLinux系ですから、Linux系OSでの改行コードであるLFを選択しています。TeraPadの初期状態で選択されているCR+LFというのはWindows向けの改行コードとなります。「UTF-8N」を選択してから保存しても良いでしょう。現在の文字コードや改行コードはTeraPadでファイルを開いたときにウインドウ右下部分に表示されます。ここでの注意点として、ファイル内に日本語が全く存在せずすべて半角英数字のみの場合は、UTF-8Nで保存されているファイルでもSJIS(Shift_JIS)と表示されます。これは不具合ではありません。日本語のような2バイト文字が存在しない場合はUTF-8NとShift_JISは内部的に同じになるため、TeraPad側で判別ができずにSJIS(Shift_JIS)と表示されているだけです。コメントといった感じで日本語をファイル内に書いて上書き保存し、右下の表示を確認してみましょう。Mac用のフリーソフト「CotEditor」でUTF-8Nの設定をする手順MacのPCの場合は今回は「CotEditor」というフリーソフトを使用してUTF-8Nでの保存をします。Storeで「CotEditor」と検索をすると出てくるので、それをダウンロード・インストールしてください。CotEditorはインターフェースがシンプルなので迷う点はないかと思いますが、文字コードは以下の部分で変更できます。以下の文字コードの選択肢を見てもらうとわかるように、このソフトの場合は「UTF-8」という表記ならBOMなしとなります。BOM付き」と明示される形となります。文字コードのまとめ「表示されたページが文字化けしている」という症状は文字コードの設定が正しくできていないことが原因です。文字化けしているページがあった場合にはブラウザの設定で文字コードを変更してみると、どの文字コードが正しいのかを判別することができます。文字コードの設定は一度覚えてしまえばそんなに難しいものではないので、自分が制作するサイトが文字化けしたりしないよう、正しく設定し編集・保存できるようになっておくと良いですね。(実験中)たまに配信しています。アップデート情報この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。Web制作のブログブログ一覧ファーストステップでは人や世の中の役に立つプログラムを作っています。使ってみて、改善点や要望などがあればお申し出ください。