Twemoji - Twitter製。絵文字を画像にパース
iPhoneで絵文字がサポートされるようになって、FacebookやTwitter、GitHubなどでも絵文字が使えるようになっています。同じデバイス、サービスであれば問題はないのですが、外部サービス連携している場合などは絵文字がトウフになってしまうことが多々あります。 そんな残念な状態を改善できるかも知れないのがTwemojiです。Twitter社が自社で使っている絵文字をオープンソースとして公開しています。
Twemojiの使い方
Twemojiの使い方はシンプルです。例えば次のような文字があります。
I \u2764\uFE0F emoji!
これだとUTF-8部分が文字化けるでしょう。
そこでパースします。
var div = document.createElement('div');
div.textContent = 'I \u2764\uFE0F emoji!';
document.body.appendChild(div);
twemoji.parse(document.body);
var img = div.querySelector('img');
// note the div is preserved
img.parentNode === div; // true
img.src; // https://twemoji.maxcdn.com/36x36/2764.png
img.alt; // \u2764\uFE0F
img.className; // emoji
img.draggable; // false
画像のオブジェクトとして返ってくるので、どのデバイスでも問題なく表示ができます。
もっと簡単に使うこともできます。
twemoji.parse('I \u2764\uFE0F emoji!');
// will produce
/*
I <img class="emoji"
draggable="false"
alt="❤️"
src="https://abs.twimg.com/emoji/v1/36x36/2764.png"/> emoji!
*/
これならばパースした結果をそのまま埋め込むだけで良いでしょう。
絵文字を画像にして表示するのは意外と面倒ですが、Twemojiを使えばとても簡単に実装できます。スマートフォンとデスクトップで共通のデータを使う場合などに便利そうです。
TwemojiはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。