オープンソースの絵文字EmojiOneを使う

近頃フラットデザインのかわいい絵文字を見かける機会が増えました。どこかで配布されているのだろうかと調べてみると、どうやらEmojiOneというオープンソースの絵文字ライブラリが存在するようです。

ダウンロード

まずはウェブサイトのdevelopersページからツールキットをダウンロード。大量の画像ファイルが含まれているためサイズが少々大きいです。（GitHubリポジトリも存在します。）

JavaScriptで利用する場合は次のようにしてCSSとJavaScriptを読み込みます。

<script src="emojione/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="emojione/assets/css/emojione.min.css">

CDNからも利用できます。

<script src="https://cdn.jsdelivr.net/emojione/2.2.7/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/emojione/2.2.7/assets/css/emojione.min.css">

デモ

ツールキットには画像やソースコードの他に、デモのHTMLも同梱されています。これが丁寧に作られており、関数の動作をページ上で確認できるようにもなっています。

例えばJavaScriptではemojione.toImage(str)というのが、文字列str中の絵文字表記（Unicodeやショートネーム:shortname:）をEmojiOneの絵文字に変換する関数です。他にも次のような関数が用意されています。（PHP版にも同様の関数群があります。）

関数	変換前	変換後
.toShort(str)	native unicode	shortnames
.shortnameToImage(str)	shortname	images
.unicodeToImage(str)	native unicode	images
.toImage(str)	native unicode + shortnames	images

ライセンス

記事を執筆した時点で確認したところ、アートワーク（PNG, SVG）のライセンスはCC-BY 4.0、アートワーク以外はMITライセンスだそうです。

まとめ

モダンなデザインの絵文字をモダンな方法で利用できる貴重なライブラリではないでしょうか。絵文字としての利用はもちろんのこと、カラフルなアイコンを手軽に利用する手段としても魅力的に思えます。