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

Twitter絵文字ライブラリ(Twemoji)は、Twitter社が公開したオープンソースのライブラリでした。Twitter社でのレイオフなどの問題があり、新しいパッケージ @twemoji/api になりました😊

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

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

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

以下の記述では、デフォルトのCDNである jsDelivr 参照しています。

<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/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>

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

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

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