単なる絵文字のJSONを作った

絵文字ピッカーを作ろうとして、シンプルにただ絵文字がいい感じの順序でいい感じの粒度で並んでいるやつが欲しかった。

ライブラリとしての絵文字ピッカーは意外とありがちだが、どうにも見た目が弄りづらかったり、絵文字のデータが古くて新しい絵文字が利用できなかったりと、しっくりくるものがなかった。

欲しいものはこんな感じ

単純なJSON

並べればそのまま絵文字ピッカーが作れるようないい感じの一覧

できるかぎりUnicodeのスペックをそのままに、余計なことをしすぎない

それを目指して作ったもの。

Unicodeの絵文字の仕様自体はテキストデータとして置いてあった。単にパースしてどこからでも利用しやすいJSONに変換してみる。

ところが、意外と難儀するもので、単にUnicodeに定義された一覧をJSONにしただけでは絵文字ピッカーとして使うには不便な事が多い。

色がついている絵文字スタイルのみ入れる

肌の色は個別に表示せずにグルーピングする

一番シンプルなケースで 👋 と 👋🏻👋🏼👋🏽👋🏾👋🏿 のように5種類ある。

👩‍❤️‍👨 のような2人のケースでは25パターンが定義されているので、それらは1つとして扱う。

単独では使わず、他の絵文字とのシークエンスで意味を持つものを取り除く。

🦱(ヘアスタイル) や � (肌の色指定) などは単独では使わない。

iOSのバージョンによって対応しているUnicodeバージョンの絵文字のみを表示できるようにバージョン情報を入れる

これはフォントなどを独自で入れれば一貫した表示ができるが、ネイティブを利用する場合は対応状況によって出し分ける必要がある。

それに加えて余計なことをしすぎないこと。あくまでも仕様をJSONの型にはめただけにしておきたい。

code:emoji.json

[

{

"group": "Smileys & Emotion",

"subgroup": "face-smiling",

"emoji": "😀",

"version": "1.0",

"name": "grinning face"

},

...

{

"group": "People & Body",

"subgroup": "hand-fingers-open",

"emoji": "👋",

"version": "0.6",

"name": "waving hand",

"variants": [

{ "emoji": "👋🏻", "name": "light skin tone" },

{ "emoji": "👋🏼", "name": "medium-light skin tone" },

{ "emoji": "👋🏽", "name": "medium skin tone" },

{ "emoji": "👋🏾", "name": "medium-dark skin tone" },

{ "emoji": "👋🏿", "name": "dark skin tone" }

]

},

...

]

ちなみに、パース前のUnicodeの定義はこれ。わりとそのままな感じに仕上げてるつもり。

code:emoji-test.txt

# group: Smileys & Emotion

# subgroup: face-smiling

1F600 ; fully-qualified # 😀 E1.0 grinning face

...

# group: People & Body

# subgroup: hand-fingers-open

1F44B ; fully-qualified # 👋 E0.6 waving hand

1F44B 1F3FB ; fully-qualified # 👋🏻 E1.0 waving hand: light skin tone

1F44B 1F3FC ; fully-qualified # 👋🏼 E1.0 waving hand: medium-light skin tone

1F44B 1F3FD ; fully-qualified # 👋🏽 E1.0 waving hand: medium skin tone

1F44B 1F3FE ; fully-qualified # 👋🏾 E1.0 waving hand: medium-dark skin tone

1F44B 1F3FF ; fully-qualified # 👋🏿 E1.0 waving hand: dark skin tone

...

並べてみるといい感じに絵文字ピッカーができる。

https://scrapbox.io/files/6704dbf41060ed001d7101ef.png

あとはメンテナンスである。データ系はバージョンに常に追従し続けなくてはならない。CIでの定期的なチェックと、自動でPRを作るような仕組みにできるとよさそう。

リリースはUnicodeのバージョニングと揃えている。

ぜひ使ってみてください。