Twitter絵文字ライブラリ(Twemoji)の使い方
Twitter絵文字ライブラリ(Twemoji)とは、Twitter社が公開したオープンソースのライブラリです🤪
最新版である Twemoji 14.0.1 では 3000種類以上の絵文字を利用することが出来ます。
Webサイトへの組み込みも極めて簡単ですので、今すぐ活用しましょう👍
Twemoji 公式サイト
http://twitter.github.io/twemoji
公式のReadMeははこちら
https://github.com/twitter/twemoji/blob/master/README.md
Twitter絵文字ライブラリの仕組み
Twitter絵文字ライブラリは、Javascript で記載されたライブラリ(スクリプト)です。
HTMLドキュメント内に記述された絵文字に該当する文字列を画像に置き換えて表示します。
HTMLドキュメント自体の文字コードは utf8 で記載する必要があります。
Twitter絵文字ライブラリの使い方
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>
具体的な記載例は、サンプルページを参照ください。
特定のDOM要素(id)を指定する場合は以下のように記載します。
<script> twemoji.parse(document.getElementById('idの名称')); </script>
補足
twemojiのバージョン2以降は画像サイズが72x72pxのみサポートされています。
バージョン1とはオプションが異なりますので、必要に応じて以下をご確認ください。
https://github.com/twitter/twemoji/blob/gh-pages/README.md