Twitter絵文字API、Twemojiの仕様・使い方

更新：2024-08-29

2014年、Twitter（現X）はUnicodeで定められた絵文字の画像や、そのAPIをGitHubに公開した。 Twemojiと呼ばれている。当初対応する絵文字は少なかったが、少しずつ増えてバージョン14.0.2では3689種類ある。

当時、多くのスマホはUnicodeの絵文字を概ね表示できたが、パソコンは環境によっては表示できなかった。 Twemoji APIは、そのような環境のためにUnicodeの絵文字を画像に変換し、絵文字が見られるようになる。

Unicodeの絵文字は少しずつ追加されており、各OSはアップデートによって定期的に対応している。基本的に新しいOSは多くの絵文字を表示できるが、古いOSは新しい絵文字に対応していないため絵文字が表示されないことがある。そういったときにこのAPIを活用することができた。

ただ、その後Windowsでも多くの絵文字が表示できるようになった。また、イーロン・マスク氏がTwitterに関わった辺りからTwemojiの更新が途絶え、バージョン14.0.2（2022年3月31日）が最終版となっている。

さらに本APIがデフォルトで使用していたMaxCDNというCDNが閉鎖し、APIが使えなくなった。もし何かしらの絵文字に変換したい場合は、GoogleフォントにNoto Emojiというフォントがあるので、それを利用するとよい。

仕様・使い方

APIの使い方はGitHub Twitter Emoji (Twemoji) に英語で書かれている。

まず、APIで必要となるJavaScriptを読み込む。前述のとおりMaxCDNが閉鎖されたため、現在は代替としてUNPKGが用意されている。

<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>

ページの文字コード（エンコーディング）は UTF-8 を使用する。

そして twemoji.parse() という関数で絵文字を画像に変換する。ただし、デフォルトのままでは変換できない。ここではまず基本を理解するために流れだけを記す。詳しい話は後述の対応策を参照。

&#x1f0cf;

<script>
twemoji.parse(document.body);
</script>

🃏 はジョーカーの絵文字🃏。なお、ここでは文字参照で書いているが、絵文字のコードそのもの🃏を書いても変換できる。

twemoji.parse(document.body) によってHTMLのbody要素内にある絵文字を全て画像に変換している。

body要素全体に適用したくない場合は、以下のように指定した要素にのみ適用できる。

&#x1f0cf;

<div id="emoji-example">
&#x1f0cf;
</div>

<script>
twemoji.parse(document.getElementById('emoji-example'));
</script>

この例は id="emoji-example" の要素にのみ適用しているので、その外にある 🃏 は画像に変換されない。

デフォルトの画像は、縦72×横72pxのPNG形式。ウェブブラウザの開発ツール（ディベロッパーツール）で見ると絵文字がimgタグに置き換わっているのが分かる。デフォルトでは各img要素に class="emoji" というクラス名が付いている。したがって以下のようにCSSで画像の表示サイズが変更できる。

<style>
img.emoji {width:32px;height:32px;}
</style>

上記で使用した id="emoji-example" の要素に適用する場合は以下のように記述する。

<style>
#emoji-example .emoji {width:32px;height:32px;}
</style>

この辺りはCSSの話なので自由に書けばよい。

対応策

今までは上記のように書けば絵文字が変換できた。上述のとおりMaxCDNが閉鎖され、代替としてUNPKGが用意されているが、UNPKGにあるJavaScriptを読み込んでも絵文字は変換できない。 twemoji.min.js のソースコードを見ると base:"https://twemoji.maxcdn.com/v/14.0.2/" という部分があることが分かる。つまりデフォルトではMaxCDNにある画像を探しに行っているため変換できない。また、UNPKGにはJavaScriptのみ公開されており、画像は含まれていない。つまり現状画像は自分で用意しないといけない。

さらにデフォルトで指定されている変数baseなどを変更する必要がある。ただ、これは twemoji.min.js のコードを変更する必要はなく twemoji.parse() 関数にて指定（変更）できる。

事前準備

まず、ローカル（PC上）で動作確認できるようにUNPKGから twemoji.min.js または twemoji.js をダウンロードする。また、GitHubからTwemojiをダウンロードしてZIPファイルを展開する。 assets/72x72 にPNG画像、assets/svg にSVGが入っている。

フォルダの階層が以下のような状態になっていることを前提に説明する。

example.html
twemoji.min.js
emoji（フォルダ）
	assets（フォルダ）
		72x72
		svg

サンプル

example.html にて twemoji.min.js を読み込む。

<script src="twemoji.min.js"></script>

デフォルトではbaseに書いてあるパスの下にある72x72フォルダにてPNG画像を探すようになっている。したがって以下のようにbaseを指定する。

<div id="emoji-example">
&#x1f0cf;
</div>

<script>
twemoji.parse(document.getElementById("emoji-example"),
   {"base":"emoji/assets/"}
 );
</script>

以下、違いは twemoji.parse 部分だけなのでそこだけ記述する。

folderという変数もあり、baseを空にして以下のように書くこともできる。 extは画像の拡張子。各変数はカンマで区切る。

twemoji.parse(document.getElementById("emoji-example"),
   {
   "folder":"emoji/assets/72x72",
   "ext":".png",
   "base":""
   }
 );

folderやbaseのパスは、実行するHTMLから見たパス。いろいろな書き方ができる。

twemoji.parse(document.getElementById("emoji-example"),
   {
   "folder":"72x72",
   "ext":".png",
   "base":"emoji/assets/"
   }
 );

先述のとおりimg要素のクラス名はデフォルトでemojiだが、classNameという変数で指定して好きな名前に変更できる。

twemoji.parse(document.getElementById("emoji-example"),
   {
   "folder":"72x72",
   "ext":".png",
   "base":"emoji/assets/",
   "className":"test"
   }
 );

SVGもPNGと同じ要領で表示できる。

twemoji.parse(document.getElementById("emoji-example"),
   {
   "folder":"emoji/assets/svg",
   "ext":".svg",
   "base":""
   }
 );

書き方はいろいろ。

twemoji.parse(document.getElementById("emoji-example"),
   {
   "folder":"svg",
   "ext":".svg",
   "base":"emoji/assets/"
   }
 );

自分で画像を用意する場合、基本的に自サイトに画像を置くのでfolderやbaseは相対パスや絶対パスで指定するが、別サイトに画像を置く場合などは以下のように書くこともできる。

twemoji.parse(document.getElementById("emoji-example"),
   {"base":"https://example.com/emoji/assets/"}
 );

Twitter絵文字API、Twemojiの仕様・使い方

仕様・使い方

対応策

事前準備

サンプル

カテゴリ