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

Twitter絵文字ライブラリ(Twemoji)は、Twitter社が公開したオープンソースのライブラリでしたが、イーロン・マスク氏による Twitter買収後から公式のTwemojiリポジトリでは新しい絵文字が追加されなくなりました。

その後、Twitter社でTwemojiに携わっていたJustine De Cairesさんがフォークして、コミュニティと協力してオープンソース版のTwemojiをリリースしています。Justine De Cairesさん、並びに開発に携わった皆さまに感謝申し上げます🙇

2024年4月14日に公開された Twemoji 16.0.1 では 3800種類以上の絵文字を利用することが出来ます。Webサイトへの組み込みも極めて簡単ですので、今すぐ活用しましょう👍

jakejarvis/twemoji-emojis (16.0.1)
https://github.com/jdecked/twemoji

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>