Twemojiの使い方

Twemoji（Twitter絵文字）について

Twemojiとは、Twitterが公開したオープンソースの絵文字ライブラリで、現在は @twemoji/api にて最新のライブラリが提供されています。（Twitter絵文字、Twitter Emojiとも呼ばれます）

TwemojiをWebページに導入すると、ページ内にある絵文字が自動的に絵文字画像に置き換えられ、X（Twitter）と同じデザインの絵文字が表示されるようになります。

クレジット表記（後述）を行えば商用・非商用を問わず無料で利用できるので、Webサイトやブログで使いやすい絵文字ライブラリとなっています。

標準絵文字からTwemojiへの変換例

😱 → 😱

Twemojiのメリット

絵文字のデザインが統一される: 標準絵文字（Unicodeの絵文字）では環境により絵文字のデザインが異なりますが、Twemojiは画像に変換してから表示されるため、どの環境で見ても同じデザインで表示されます。
Webサイトへの導入が簡単: JavaScriptの簡単な記述を行い、絵文字画像の表示サイズをCSSで指定するだけでTwemojiを導入することができます。
使用許諾要件が緩い: Twemojiの絵文字画像はCC-BY 4.0でライセンスされています。ライセンス条件に従っている限り、無料で広範囲の用途に使用することができます。

まず、HTML文書はUTF-8で作成されている必要があります。

<meta charset="UTF-8">

次に、HTML文書の <head> ～ </head> 内に下記のscriptタグを記述します。

<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>

上記により、Twemojiで使用するJavaScript（twemoji.min.js）がページ内に読み込まれます。

次に、HTML文書の最後の方（</body> の前あたり）に下記のJavaScriptを記述します。

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

上記の場合は document.body を指定しているため、HTML文書全体を対象として絵文字の変換が行われます。

特定の範囲内のみを対象としたい場合は、例えば次のように指定します。

<script>
twemoji.parse(document.getElementById('ID名'));
</script>

上記の場合、特定のIDが指定された要素内でのみ変換が行われます。

最後に、CSSで絵文字画像の表示サイズなどを指定します。

img.emoji {
  width: 1em;
  height: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

絵文字画像のimgタグには自動的に「emoji」というクラス名が付けられるので、img.emoji をセレクタとすることで上記のスタイルが適用されます。（各プロパティの値は必要に応じて調整してください）

※サイズを指定しておかないと、絵文字画像が意図しない大きさで表示されてしまいます。

パラメーターの指定

デフォルトではPNG形式の絵文字画像が読み込まれますが、次のパラメーターを指定することでSVG形式の絵文字画像を読み込むことができます。

twemoji.parse(document.body, {
  folder: 'svg',
  ext: '.svg'
});

絵文字画像の読み込み先を変更したい場合は、次のパラメーターを指定します。（例えば、ダウンロードした絵文字画像を自身が管理するサーバーにアップロードして使用する場合など）

twemoji.parse(document.body, {
  base: 'https://example.com/emoji/'
});

上記のURLを指定した場合、絵文字画像の読み込み先は次のようになります。

PNG形式の画像
https://example.com/emoji/72x72/

SVG形式の画像
https://example.com/emoji/svg/

PNGとSVGの違い

PNG形式の場合は画像サイズが「72x72px」となり、ファイル容量はSVG形式より小さくなります。

SVG形式の場合はファイル容量が少し大きくなりますが（最大で26KB程度）、絵文字画像を大き目のサイズで表示したい場合はこちらの方が綺麗に表示されます。

文章中に絵文字を表示するだけならば、デフォルトのPNG形式のままで良いかと思います。

※ちなみに、すべての絵文字画像の容量は、PNG形式で3.2MB程度、SVG形式で8.2MB程度になります。

ライセンスについて

重要：以下の内容には筆者個人の解釈が含まれています。正確な情報については原文を確認し、ご自身の責任において判断してください。

Twemojiの絵文字ライブラリは、JavaScriptに関しては「MITライセンス」、画像に関しては「CC-BY 4.0」でライセンスされています。どちらも自由度の高いライセンスですが、使用にあたっては適切なクレジット表記（著作権やライセンスの表示）が必要となります。

Twemojiのライセンスの原文（英語）は下記のリンク先で確認することができます。

LICENSE（JavaScriptのライセンス）
LICENSE-GRAPHICS（画像のライセンス）

JavaScriptのクレジット表記については、twemoji.min.js のソースコード内に記載されているので、特に意識する必要はないのかなと（個人的には）考えています。ただ、このJavaScriptファイルを自サーバーにアップロードして使用する場合には、前述のライセンスの原文にリンクするか、そのURLを記載しておいた方が良いかもしれません。

次に絵文字画像を使用する際のクレジット表記ですが、ひとつの例として「ライブラリの名称とそのリンク」「著作権の表示」「CC-BY 4.0へのリンク」を含めたものを掲載しておきます。

Twemoji by Copyright Twitter Inc. and other contributors. Licensed under CC-BY 4.0

HTML

<a href="https://www.npmjs.com/package/@twemoji/api" target="_blank">Twemoji</a> by Copyright Twitter Inc. and other contributors. Licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC-BY 4.0</a>

リンクを貼れない場合（ソースコード内に表記する場合）は、次のように記載しておくと良いのではと思います。（下記の例ではライセンス原文のURLも記載しています）

Twemoji by Copyright Twitter Inc. and other contributors. Licensed under CC-BY 4.0

Twemoji
https://www.npmjs.com/package/@twemoji/api

LICENSE-GRAPHICS
https://github.com/jdecked/twemoji/blob/HEAD/LICENSE-GRAPHICS

CC-BY 4.0
https://creativecommons.org/licenses/by/4.0/

※上記に加え、絵文字画像を改変した場合はどのように変更したかを明記する必要があります。

クレジットの表記場所については、@twemoji/api 内の「Attribution Requirements」セクションで説明されています。

Webサイトの場合は、「Aboutセクション」や「フッター」、あるいは「HTMLやJavaScriptのソースコード内」の表記でも十分であるとされています。

その他

Emoji Toolsでは、標準絵文字をTwemojiに変換するツールをご用意しております。

絵文字の画像変換ツール

単発でTwemojiを使用したい場合などにご利用ください。