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

Twitter絵文字ライブラリ(Twemoji)とは、Twitter社が公開したオープンソースのライブラリです🤪

最新版である Twemoji 12.1.4 では 3000種類以上の絵文字を利用することが出来ます。
Webサイトへの組み込みも極めて簡単ですので、今すぐ活用しましょう👍

アップデートの詳細はこちら

Emoji for everyone. Contribute to twitter/twemoji development by creating an account on GitHub.

github.com

Twemoji 12.1.4では、一部絵文字のデザインが変更されました。

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

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

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></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>

具体的な記載例は、以下のサンプルページを参照ください。

lets-emoji.com

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

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

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