【WP移植】日本語名データが文字化けしていないにもかかわらず、画像が表示されない問題を解決する

サーバー上の日本語名のデータが文字化けしていないにもかかわらず、画像がリンク切れで表示されない問題が発生しました。英語名のデータは正常に表示されています。

原因

データベース上のパーセントエンコードと、サーバーにアップロードされているパーセントエンコードを比較すると、濁点文字に差異があることがわかりました。

  1. プ = %E3%83%95%E3%82%9A
  2. プ = %E3%83%97

上記のように、Unicodeでは濁音が分割されている「NFD」と、濁音が一体化されている「NFC」が存在しています。

今回は、データベース上に保存されている画像は、濁音が分割されているNFDで登録されており、サーバに保存されている画像は、濁音が一体化されるNFCで保存されていることがわかりました。

Transmitの説明を見ると、LinuxやWindowsベースのサーバではNFCが使用され、macOSベースのサーバではNFDが使用されるのが一般的とのこと。

ユニコードの正規化ユニコードの正規化処理の方法を選択します。LinuxやWindowsベースのサーバではNFCが使用され、macOSベースのサーバではNFDが使用されるのが一般的です。(より詳しい情報はウィキペディアのUnicode正規化およびUnicode Normalization Formsをご参照ください。)

https://library.panic.com/より

確かに先方は、macOSで更新作業をして画像をWordPress経由でアップロードしていました。

解決方法

FTPを利用している場合は、FTPツール側でNFDでデータをアップロードするように設定変更します。

Transmitの初期設定では、データはNFCでアップロードされるので、NFDでアップロードされるように設定していきます。

環境設定 > 上級タブ > 詳細サーバ設定 > ユニコードの正規化で「UTF-8 NFD」を選択します。

備考

NFD
Normalization Form Canonical Decomposition
文字は正準等価性によって分解される。
NFC
Normalization Form Canonical Composition
文字は正準等価性によって分解され、再度合成される。結果として文字の並びが変換前と変わることもありうる。
wikipediaより

正準等価
正準等価(せいじゅんとうか、英: Canonical Equivalent)は、視覚的および機能的に等価な文字を保存する、より狭い形態の等価性である。たとえば、ダイアクリティカルマークを持つ合成済みの文字は、分解すると「基底文字+結合文字のダイアクリティカルマーク」の文字列に変わるが、いずれも等価であるとみなされる。言いかえると合成済み文字 ‘ü’ は ‘u’ と結合文字の分音記号 ‘¨’ を並べたものと正準等価である。同様に、Unicodeはいくつかのギリシャ文字のダイアクリティカルマークと約物を同じ外見の他のダイアクリティカルマークへ統合している。正規等価と表記されることもある。

wikipediaより

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。