UTF-8で円記号を入出力させる

「UTF-8で円記号を入出力させる」って、何の事を言っているんだ?
あたりまえに入力できるんじゃないの?

と、思っている方、あまーい!

EUC-JPやShift-JISからUTF-8に移行した場合、IEでは円記号の表示がバックスラッシュになってしまいます。
また、テキストボックスなどで入力する際も同様です。
さらに、Linuxではバックスラッシュになってしまいます。

対策には結構工夫が必要でした。

円記号の表示

始めにお断りしておきますが、単純に(PHPのprintなどで)文字列を表示している場合はお手上げです。
こういった事をしている方は、まちがいなく初心者レベルです。以下の方法では、間違いなく一から作り直しです。

さて、円記号がバックスラッシュで表示される原因ですが、日本人が通常円記号として使っているコードは、日本国内のみ円記号として使う約束なのです。
インターネットは国の枠を超えていますので、こういった文字がどう表示されても文句は言えません。使うべきでない文字です。

HTMLでは円記号は¥と表記すれば正しく表示されます。

現在のWeb技術者の常識として、HTMLになにかしらデータを表示する際には、ハッキングされないよう、ユーザ関数で < を &lt; などと変換して表示しているはずです。

このユーザ関数に、円記号を &yen; に変換する処理を追加して対策できます。

ちなみに、半角スペースは &nbsp; に変換して表示します。これをしておかないと、空白の連続は1文字の空白にまとめられてしまいます。

円記号を入力

円記号を入力するには、バックスラッシュキーを入力された時、この文字をUTF-8の円記号に置き換えてしまえばいいわけです。
これにはJavaScriptを使う以外ありませんでした。

と、JavaScriptの関数を定義しておきます。

※ JavaScriptでのkeyCodeは、UTF-16のようですので、注意が必要です。

等として、入力されたときに呼び出します。

また、これによって入力した円記号のPOSTの値は、0xc2a5となります。
「円記号を表示」と整合性をあわせるため、これを円記号に変換します。

ちなみに &nbsp; のPOSTの値は、0xc2a0となりますので、これを半角スペースに変換します。

全体的な考え方

上記では、以下のような基本的な考え方に従っている。

・現行の円記号はそのまま。データ移行のコストがかからない。
・入出力の時点で文字コードは内部文字コードに統一する。

こういった基本方針がはっきりしていないと、いつまでもバグや例外処理のメンテナンスを行うはめになる。


“UTF-8で円記号を入出力させる” への1件の返信

  1. ピンバック: リンク集 [Junsei Chiba]

コメントを残す

メールアドレスが公開されることはありません。

*