search
LoginSignup
4

More than 3 years have passed since last update.

posted at

NFCとNFDに気をつける

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

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

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

起きた問題

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

なぜ発生したか?

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

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

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

修正

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

str = str.normalize("NFC");

まとめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4