Twitter絵文字API twemoji.parse() の仕様と使い方。
2014年、Twitter 社は Unicode で定められた絵文字を画像に変換する API やその画像を GitHub に公開した。 当時、対応する絵文字は872種類あった。 その後、2017年には2661種類に増えた。
2015年当時、多くのスマホは Unicode の絵文字を概ね表示できたが、パソコンは環境によっては表示できなかった。 そういう環境のために Unicode の絵文字を画像に変換し、どの環境でも絵文字が見られるようにするのがこの API である。 ただ、2017年現在、Windows 10 でも多くの絵文字が表示できるようになっている。
Unicode の絵文字は毎年少しずつ追加され、各 OS はその仕様を反映している。 基本的に新しい OS は多くの絵文字を表示できるが、古い OS は新しい絵文字に対応していないため、絵文字が表示されないことがある。 そういったときに本 API を活用することもできる。
APIの使い方は twitter/twemoji · GitHub に英語で書かれている。
まず、APIで必要となる JavaScript を読み込む。
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
そして、twemoji.parse() という関数で絵文字を画像に変換して表示する。 やり方は string parsing と DOM parsing の2通ある。 string parsing は GitHub のサンプルにある通り以下のように記述する。
<script>
twemoji.parse('I \u2764\uFE0F emoji!');
</script>
ただ、この方法では何も表示されない。 GitHub のページにセキュリティがどうのこうのと書かれているので、使えなくなったのかもしれない。 もう1つは DOM。 GitHub にいろいろ例があるが、以下のように書くのが一番簡単。
🀄 <script> twemoji.parse(document.body); </script>
🀄 は絵文字で「中」の文字。 その後の twemoji.parse(document.body); によって HTML の body 要素内にある絵文字を全て画像に変換する。 使用する画像サイズはデフォルトでは 36px だが、16px と 72px が用意されており、以下のようにサイズを指定できる。
<script>
twemoji.parse(document.body, {"size":72});
</script>
body 全体に適用したくない場合は、以下のように部分的に適用できる。
🀄
<div id="emoji-list">
🀄
</div>
<script>
twemoji.parse(document.getElementById('emoji-list'));
</script>
この例は id="emoji-list" の要素だけ適用しているので、その外にある 🀄 は画像に変換されない。
また、以下の例は body 内の2番目の div 要素に適用する例。
<div>
🀄
</div>
<div>
🀄
</div>
<script>
twemoji.parse(document.getElementsByTagName('div')[1]);
</script>
[0] が1番目の div、[1] が2番目の div という具合になり、この例の場合、1番目の 🀄 は画像に変換されない。 この辺りは API というより JavaScript の話なので、JavaScript を知っていればどのようにも書ける。
単に画像だけ表示する場合はこのままで良いが、文章の中で絵文字を使う場合、他の文字とサイズを揃える必要がある。 以下のようなスタイルシートで絵文字のサイズを調整できる。
<style>
img.emoji{
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
</style>
文字のサイズに合わせて height や width などを調整する。 ページの文字コード（エンコーディング）は UTF-8 を使用する。
1ページ内に絵文字がたくさんある場合、絵文字を変換して表示するのに時間がかかる。
以下は iOS と Android での表示例で、Twitter API 使用時と未使用時のスクリーンショットである。 API 未使用時は各 OS にインストールされている絵文字が表示される。
【iOS 8＋Safari、Twitter API 使用】
スマホであれば、Twitter API を使わなくても概ね絵文字を表示できる。 2015年当時、Twitter API を使用しない場合、Windows 10 では、Edge は概ね絵文字を表示できるがモノクロ、Firefox も概ね表示できてカラー（色付き）、Chrome は若干表示できる絵文字が少なくモノクロ、といった具合にまちまちとなっていた。 Mac OS X 10.10 Yosemite では Safari、Firefox、Chrome ともに概ね絵文字を表示でき、カラーで表示される。 2017年現在は Windows 10 でも多くの絵文字が表示できるようになっている（Internet Explorer を除く）。
