mac作成のwebページに画像が表示されない
今回の内容
macでwebページを作成する時、ローカル環境では画像が表示されるが、webページをサーバにアップロードしてwebページを表示すると、なぜか濁点の入った画像ファイルのみが表示されません。なぜ表示されないのかについて原因を調査した結果、macのファイル名は濁点を1文字として扱うため、HTML内の画像ファイル名に文字化けが生じてしまい画像ファイルが見つからないことが原因でした。
ファイル名のコピーで起こる問題
macでwebページを編集することって当然ありますよね。私の場合は、HTMLを直接書いてwebページを作成しています。画像をwebページに画像を表示するには、imgタグに画像のファイル名を記述します。その際に、ファイル名を間違えないように画像ファイル名をそのままコピーして、HTMLに貼り付けしていました(図1)。
出来上がったwebページをローカルで問題なく表示されることを確認して、いざwebページをアップロードすると、図2のようになぜか画像ファイル名に「濁点」や「半濁点」の入った画像ファイルのみが表示されませんでした。。。(ファイル名にかな文字を使用すること自体がナンセンスですがそこは見逃してください)
注意すべき点は、macのファイル名で使用されている「濁点」や「半濁点」にあります(図3)。mac上では、ファイル名をテキストファイルに貼り付けても問題なく見ることができました。しかし、別のOS、例えばwindowsでテキストを表示した時に、文字化けしてしまいます。図4,5,6は、それぞれSublimeText、TeraPad、メモ帳でテキストファイルを表示したときの例です。メモ帳では文字化けが発生しませんでしたが、文字化けしていることがわかります。
TeraPadを見ると、「ブ」という文字を見ると「フ」と「?」に分離していることがわかります。他にも「ド」という文字は「ト」と「?」に分離しています。このことから「?」は「゛(濁点)」を意味していることが推測できます。つまり、「濁点」は1文字として扱われていることがわかります。
このように濁点や半濁点を1文字として扱うファイルシステムをNFDと呼び、macではこの形式が使用されているようです。一方、「濁点」等を1文字として扱わず「本体文字」と「濁点/半濁点」のセットを1文字として扱う形式はNFCと呼ばれ、WindowsやLinuxで採用されているようです。詳しくはMac OS XのNFD問題での対策諸々をご覧ください。
解決方法
文字化けを解決するには、macではファイル名をコピーせず、直接キーボードからファイル名をHTML等のテキストファイルに入力することです。そうすることにより、図7のように無事に画像が表示されました。
もし、webページをアップロードするソフトがNFCとNFDを上手いこと扱ってくれれば問題は発生しなかったが、私の使用しているCyberduckさんは上手いことやってくれないようです。そのため、手入力で問題を解決しました。
