Twitter のサイトで使われている絵文字がオープンソースライブラリとして公開されています。

Twitterの絵文字/Emojiがオープンソースになりました。https://t.co/CJukTy4e5M　Open sourcing Twitter emoji for everyone　（英語）

— TwitterDevJP (@TwitterDevJP) November 7, 2014

» https://github.com/twitter/twemoji

このライブラリは、Webサイト上にある絵文字を示すユニコード文字列を該当する絵文字の画像ファイルに置換してくれるというライブラリです。全部で872種類の絵文字に対応しているそうです。

そもそも絵文字は最近のスマートフォンでは表示できるのに Google Chrome では表示できなかったりと、ブラウザによって対応がまちまち。このライブラリはその問題を解決してくれます。

というわけで、試しに「#グラドル自画撮り部 の部室」に組み込んでみました。

↑ これが Twemoji 適用前に Chrome で閲覧した状態。

Step 1. まずは head タグ内で以下の JavaScript を読み込みます。

<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>

Step 2. 次に body タグの終わりのほうに以下の JavaScript を記述します。

<script>
twemoji.parse(document.body);
</script>

twemoji.parse() には文字列もしくはDOM要素を与えることができます。上の例が一番ざっくりとした例で、body要素全体を与えています。詳しくはドキュメントを。

この状態でリロードすると、以下のような表示になります。

↑ きちんと絵文字が表示されている！が、サイズが合っていない。

デフォルトでは 36x36 のサイズの画像ファイルが読み込まれます。ドキュメントによれば、この絵文字を本文のサイズとマッチさせるために次の CSS をスタイルシートに記述します。

Step 3. 以下の CSS をスタイルシートに記述。

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

↑ これで絵文字がきちんとリサイズされました。

という感じで、簡単に自分のサイトに絵文字表示を組み込むことができます。

ドキュメントによれば画像サイズを指定したり、書き出す img タグの src の値を変更したり、除外する絵文字を指定できたりといったオプションを備えていて、なかなか便利に使えそうです。

もし今絵文字対応に困っているのならすぐに使ってみましょう。

» https://github.com/twitter/twemoji