iPhoneでブラウザに円記号を表示するには？

10月
20

携帯事情 1. 携帯サイト開発

koreadays

iPhoneのブラウザ上に「￥」を表示しようとしても、「＼」（バックスラッシュ）になってしまう。一体どうすればいいのか？

Durianの開発中にこんな問題に直面した。何としてもiPhone対応したいという一心で、試行錯誤した結果は・・・。

まずはフォントを指定

この手の問題はフォントを変更すればうまくいくだろう、と思い、最初に試したのがフォントの指定。iPhoneで使えるらしいフォントファミリーをstyle属性で指定してみた。

<span style="font-family:'American Typewriter'">\500</span><br>
<span style="font-family:'AppleGothic'">\500</span><br>
<span style="font-family:'Arial'">\500</span><br>
<span style="font-family:'Arial Rounded MT Bold'">\500</span><br>
<span style="font-family:'Arial Unicode MS'">\500</span><br>
<span style="font-family:'Courier'">\500</span><br>
<span style="font-family:'Courier New'">\500</span><br>
<span style="font-family:'DB LCD Temp'">\500</span><br>
<span style="font-family:'Georgia'">\500</span><br>
<span style="font-family:'Helvetica'">\500</span><br>
<span style="font-family:'Helvetica Neue'">\500</span><br>
<span style="font-family:'Hiragino Kaku Gothic ProN W3'">\500</span><br>
<span style="font-family:'Hiragino Kaku Gothic ProN W6'">\500</span><br>
<span style="font-family:'Marker Felt'">\500</span><br>
<span style="font-family:'STHeiti J'">\500</span><br>
<span style="font-family:'STHeiti K'">\500</span><br>
<span style="font-family:'STHeiti SC'">\500</span><br>
<span style="font-family:'STHeiti TC'">\500</span><br>
<span style="font-family:'Times New Roman'">\500</span><br>
<span style="font-family:'Trebuchet MS'">\500</span><br>
<span style="font-family:'Verdana'">\500</span><br>
<span style="font-family:'Zapfino'">\500</span><br>

結果はご覧の通り。全部ダメだった。

気を取り直して次なる策を考えてみる。

次はlang属性とmetaタグで日本語をアピール

日本語であることをブラウザに知らせればいいはず、と思い、HTMLに手を入れてみた。lang属性で"ja"を指定し、metaタグでContent-Typeを明示的に指定した。ついでにOsakaフォントも試してみる。

<html lang="ja">
<head>
<meta name="Content-Type" content="text/html; charset=Shift_JIS">
<title>円記号テスト</title>
</head>
<body>
<span style="font-family:Osaka">\500</span><br>
</body>
</html>

が、これでも結果が変わらず。

本来の円記号を指定

やはり、円記号をバックスラッシュ（U+005C）で表現する日本的な書き方ではダメのようだ。本来の円記号（U+00A5）を試すことにした。

<html><body>
＆#x00A5;500
</body></html>

これでやっと表示された！

ちなみに、HTMLの文字実体参照には ¥ が定義されている。¥ は本来の円記号（U+00A5）を指していて、実際にiPhoneでも使うことができた。コンテンツにも書きやすく読みやすいから、 ¥ を使う方がよさそうだ。

Durianでの対応は？

本来バックスラッシュだったからバックスラッシュとして表示する、という点を見ると、Safariは結構厳密に処理を行っているような気がする。とはいっても、現在の日本だと円記号をバックスラッシュ（U+005C）としてファイルに記述したり、DBに格納したりしているのが大多数に違いない。バックスラッシュは円記号、と解釈するのが現実的だ。

結局Durianでは、iPhone向けにHTML変換する際、バックスラッシュ（U+005C）は「¥」へ変換することとし、それ以外のケースではバックスラッシュのままとすることに決めた。「¥」という表記は最近の3G端末なら解釈可能だけど、movaなどの2G端末では「￥」が表示されない。そこで、iPhoneのケースのみを特殊扱いすることになった。

最後に

今回の結果は意外ではあったけど、バックスラッシュと円記号を本来の目的で処理するというSafariのポリシーを垣間見ることができた。

と、納得してたのに、さっき試してみたらHTMLのキャラクタエンコーディングがEUC-JPのときだけ、バックスラッシュを「￥」表示することを発見。厳格な処理をしているハズだったのでは！？謎は深まる・・・。

（参考）

トラックバック URL :

■ コメント

「本来の円記号を指定」のところ、「&」が「＆（全角）」になってますよ。

コメント by 通りすがり — 2010年01月22日金曜日 @ 0:35:15
ご指摘ありがとうございます。
実はブログ更新ツールの都合上、「&」を全角にしないといけないんです・・・。
半角で「&」が使えるといいんですけどね。

コメント by koreadays — 2010年01月22日金曜日 @ 9:34:05