はじめに

以前から、Unityで絵文字パネルを作ってみたいという願望が有ったので、それを実装してみたというお話

Windows10では、Winキー+.(ピリオド、テンキーのほうじゃない方)で絵文字パネルが表示されます…まぁ、車輪の再発明ですが、絵文字とUnicodeの関係を学ぶのに丁度いい機会ですし

背景

ここ数日、Unityでの絵文字を出してみたいと思い、情報を拾っていると、バーチャルキャストさんとこのブログに当たりました。

親方！空から絵文字が！

そこから、TextMeshProとFull Emoji Support APIで提供されているTMP_EmojiTextUGUIを使えば絵文字が表示できると判明しました。

また、emoji-dataのemoji.jsonと各種スプライトシートを使用すれば、いろんな表示(Apple,Google,Twitter)での絵文字が使えるとわかり、いっぺん絵文字パネルを作ってみようと試行錯誤してみたわけです。

試行錯誤

というわけで、当方にとって頭を捻った点は以下の３つでした

そもそも、どれが文字コードになるのかわからん
文字コードは書いてあるようやけど、Unicodeは種類が沢山あってなぁ…UTF-8なのかUTF-16なのかUTF-32なのか
それがわかれば、あとはstringに変換できれば…

コードはどれだ！？

まず、emoji.jsonの中に正解がありそうと考えたので、中身をざっと見通したのですが、文字コードになりそうなのはunifiedの値がコードになりそうと判断。

ググってみると当たりのようですので、unifiedを使ってみます。

{"name":"HASH KEY","unified":"0023-FE0F-20E3","non_qualified":"0023-20E3","docomo":"E6E0","au":"EB84","softbank":"E210","google":"FE82C","image":"0023-fe0f-20e3.png","sheet_x":0,"sheet_y":0,"short_name":"hash","short_names":["hash"],"text":null,"texts":null,"category":"Symbols","sort_order":135,"added_in":"0.6","has_img_apple":true,"has_img_google":true,"has_img_twitter":true,"has_img_facebook":false}

どのコードが最適？

これが実は最後まで悩みのタネで、様々なサイトで記事を読んで見ましたが、これといった正解が見つからず…。

ただ、色々記事を読んでみたり、emoji.jsonを眺めてみると、漠然的に

4桁どころか5桁の16進数で表現されている文字がある
UTF-8でもUTF-16でも無理だろう
ならUTF-32かな

と成り行きでコードが判明いたました。

どうやってstringに変換しよう？

これが最後に残った謎でしたが、Full Emoji Support APIのソースを読めば一発で解決しました。

char.ConvertFromUtf32

という非常に便利なメソッドがありました。読んで字の如し、32ビット整数をUTF-32のコードと判別して文字列に変換してくれるというありがたいメソッドです。

あと、「サロゲートペアはどないしたら」云々は、このメソッドで変換したstringを単純に+でつなげただけで問題ありませんでした。

これで、emoji.jsonの情報からstringに変換できるようになりました。

成果

当方が絵文字パネルを作った際に作成した、emoji.jsonの情報->stringに変換するコードをそのままgistに掲載いたします。

パネルの実装イメージはスクリーンキャプチャをTwitterにあげていますので、そちらをご参照ください。

さいごに

絵文字パネルの実装は昔からやってみたかったので、無事に実装できたことで得も言われぬ達成感を味わっています。

ほんま、出来上がった成果を目の当たりにすると感動しますね！ UT

参考文献