Twitter絵文字ライブラリ(Twemoji)の使い方

Twitter絵文字ライブラリ(Twemoji)とは、Twitter社が公開したオープンソースのライブラリです🤪
最新版であるバージョン 11.0 では、2,841種類の絵文字を利用することが出来ます。
Webサイトへの組み込みも極めて簡単ですので、今すぐ活用しましょう🤭

Twemoji 公式サイト
http://twitter.github.io/twemoji

バージョン 11.0では Unicode 11.0 と Emoji 11.0 draft に準拠した 2,841種類の絵文字が利用できます。
バージョン 2.7 ではテントなど一部の絵文字のデザインが変更されました。
バージョン 2.6 ではピストルなど一部の絵文字のデザインが変更されました。
バージョン 2.5 では一部の絵文字のデザインが変更されました。
バージョン 2.4 では 2,685種類の絵文字を利用することが出来ます。
バージョン 2.3.1 では 2,661種類の絵文字を利用することが出来ます。
バージョン 2.3 では Unicode 10.0 に準拠した56種類の絵文字が追加されました🤩

公式のReadMeも併せてどうぞ
https://github.com/twitter/twemoji/blob/gh-pages/README.md

Twitter絵文字ライブラリの仕組み

Twitter絵文字ライブラリは、Javascript で記載されたライブラリ（スクリプト）です。
HTMLドキュメント内に記述された絵文字に該当する文字列を画像に置き換えて表示します。
HTMLドキュメント自体の文字コードは utf8 で記載する必要があります。

Twitter絵文字ライブラリの使い方

1⃣ HTMLドキュメントの<head>部分で、以下を宣言します。
以下の記述ではCDNのJavaScriptを利用します。
JavaScriptをWebサーバにアップロードする手間もなく、また閲覧者も高速に読み込むことが出来ます。

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

2⃣ HTMLドキュメント内もしくは、外部のCSSファイルにて、文字と絵文字の大きさを整えます。

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

3⃣ HTMLドキュメントの<body>の最後のあたりで、Javascriptの関数(twemoji.parse)を呼び出します。
簡単に説明するため、以下では document.body 全体の文字を変換対象としています。

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

具体的な記載例は、以下のサンプルページを参照ください。
https://lets-emoji.com/emoji/sample11.0.html

特定のDOM要素(id)を指定する場合は以下のように記載します。

<script>
twemoji.parse(document.getElementById('idの名称'));
</script>

補足

twemojiのバージョン2以降は画像サイズが72ｘ72pxのみサポートされています。
バージョン1とはオプションが異なりますので、必要に応じて以下をご確認ください。
https://github.com/twitter/twemoji/blob/gh-pages/README.md