うしこlog
公開: 2017/07/17

mac作成のwebページに画像が表示されない

今回の内容

 macでwebページを作成する時、ローカル環境では画像が表示されるが、webページをサーバにアップロードしてwebページを表示すると、なぜか濁点の入った画像ファイルのみが表示されません。なぜ表示されないのかについて原因を調査した結果、macのファイル名は濁点を1文字として扱うため、HTML内の画像ファイル名に文字化けが生じてしまい画像ファイルが見つからないことが原因でした。

ファイル名のコピーで起こる問題

 macでwebページを編集することって当然ありますよね。私の場合は、HTMLを直接書いてwebページを作成しています。画像をwebページに画像を表示するには、imgタグに画像のファイル名を記述します。その際に、ファイル名を間違えないように画像ファイル名をそのままコピーして、HTMLに貼り付けしていました(図1)。
出来上がったwebページをローカルで問題なく表示されることを確認して、いざwebページをアップロードすると、図2のようになぜか画像ファイル名に「濁点」や「半濁点」の入った画像ファイルのみが表示されませんでした。。。(ファイル名にかな文字を使用すること自体がナンセンスですがそこは見逃してください)

そのままエディタにファイル名をコピー
そのままエディタにファイル名をコピー
webページに画像が表示されない例
webページに画像が表示されない例

 注意すべき点は、macのファイル名で使用されている「濁点」や「半濁点」にあります(図3)。mac上では、ファイル名をテキストファイルに貼り付けても問題なく見ることができました。しかし、別のOS、例えばwindowsでテキストを表示した時に、文字化けしてしまいます。図4,5,6は、それぞれSublimeText、TeraPad、メモ帳でテキストファイルを表示したときの例です。メモ帳では文字化けが発生しませんでしたが、文字化けしていることがわかります。

macのファイル名に注意
macでのファイル名に注意
windowsのSublimeTextでテキストを表示した場合の文字化け
windows用SublimeTextでの文字化け
windowsのTeraPadでテキストを表示した場合の文字化け
windowsのTeraPadでの文字化け
メモ帳でテキストを表示した場合は文字化け発生せず
メモ帳では文字化け未発生

 TeraPadを見ると、「ブ」という文字を見ると「フ」と「?」に分離していることがわかります。他にも「ド」という文字は「ト」と「?」に分離しています。このことから「?」は「゛(濁点)」を意味していることが推測できます。つまり、「濁点」は1文字として扱われていることがわかります。
このように濁点や半濁点を1文字として扱うファイルシステムをNFDと呼び、macではこの形式が使用されているようです。一方、「濁点」等を1文字として扱わず「本体文字」と「濁点/半濁点」のセットを1文字として扱う形式はNFCと呼ばれ、WindowsやLinuxで採用されているようです。詳しくはMac OS XのNFD問題での対策諸々をご覧ください。

解決方法

 文字化けを解決するには、macではファイル名をコピーせず、直接キーボードからファイル名をHTML等のテキストファイルに入力することです。そうすることにより、図7のように無事に画像が表示されました。
もし、webページをアップロードするソフトがNFCとNFDを上手いこと扱ってくれれば問題は発生しなかったが、私の使用しているCyberduckさんは上手いことやってくれないようです。そのため、手入力で問題を解決しました。

文字化け解決後
文字化け解決後

Copyright © Usico All Right Reserved.