NFCとNFDに気をつける

1818 ワード
文字コード 文字コード テキストリンク

自分のサイト(AAHub)で起きた問題の備忘録的内容です。NFCとNFDについてです。

NFCとNFDについては以下の文字列をどこかのtextareaに貼り付けてみてみてください。
NFDと書かれた方は「ギ」がキと濁点の組み合わせになっており、例えばバックスペースで削除する時は最初に濁点が削除されてキだけになると思います。

NFD:3月ウサギ
NFC:3月ウサギ

起きた問題

AAHubのユーザーからタイトルをコピペしてWindowsのエディタに貼り付けたら表示が崩れたと言われてしまいました。どうやらタイトルがNFDだったからのようです。

なぜ発生したか？

このタイトルはGCSに置いているファイル名を使っています。どうやらMacから直でファイルをアップロードしていたため起きたみたいです。

Macだとフォルダに置かれるファイルはNFDで扱っているようでそれを例えば以下のようなスクリプトでGCSにアップするとこうなってしまうようです。

gsutil -m cp -r out/folders/* gs://example/folders/

修正

不便に感じる方がいるのは間違いないし濁点が分割してるなんてマニアックな動きをするのもエンジニア以外は面食らうと思いますので修正しました。JavaScript上だと以下の処理で変換することができます。

str = str.normalize("NFC");

まとめ

こ知らないと対策わからないし、言われないと気づかないところです。けど不便に感じるユーザーが確実にいると思うので対処していきたいですね。
それでは。