サイト内の絵文字を Twemoji にする

絵文字、好きです。

テキストだけでは伝わらない微妙な心情を表現できる絵文字ですが、

Microsoft のは線画が太く、Apple のはリアル、Google のはふんわり、といった具合に、

プラットフォームによって表示が変わってしまうのが悩みどころです。

私は Twitter の Twemoji がシンプルでかわいくて好きなので、ブログ内の絵文字をプラットフォームによらず Twemoji が表示されるようにしました。

プラットフォーム間で統一した表示にする

統一させるだけなら、画像として表示すればいいです。

Twemoji は Twitter Emoji (Twemoji) で PNG と SVG が公開されているので、その URL を使います。

URL の形式は、SVG なら

https://twemoji.maxcdn.com/v/latest/svg/<code-point>.svg

PNG なら

https://twemoji.maxcdn.com/v/latest/72x72/<code-point>.png

です（サイズは 72x72 しかないみたい）。

<code-point> の部分には絵文字の 16 進数のコードポイントを英小文字で指定します。

このコードポイントは Emojipedia などのサービスで調べることができます。

例えば ←この人のコードポイントは 1f44d なので、

https://twemoji.maxcdn.com/v/latest/svg/1f44d.svg

から画像を取得できます。

あとは img タグなどを使って貼り付ければ OK です。

この方法は GitHub の README などにも使えます

（Zenn は画像がインラインで表示されないので主張が強くなります）

サイト内で絵文字を自動的に変換する

JavaScript が使えるサイトなら、twemoji を使ってサイト内のただの絵文字を適切な img タグに変換することができます。

（README に絵文字がひとつもないとは何事）

yarn add twemoji

そして Twemoji 化したい絵文字を含む DOM 要素やテキストを twemoji.parse に渡すだけで、

（あたかも食材を入れて放置するだけで料理ができる電子レンジみたいに）絵文字だった部分を img タグに置き換えてくれます。

1
import twemoji from 'twemoji';
2

3
const content = 'I 💗 emoji!';
4
const twemojified = twemoji.parse(content);
5
// I <img className="emoji" draggable="false" alt="💗" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/2764.png"/> emoji!

convert.toCodePoint で絵文字からコードポイントに変換もできるので、

これで自分で URL を取得することもできます。

1
const heart = '💗';
2
const codePoint = twemoji.convert.toCodePoint(heart);
3
const url = `https://twemoji.maxcdn.com/v/latest/svg/${codePoint.split('-')[0]}.svg`;

国旗など、複数の絵文字でひとつを表すものもあるので、コードポイントが 1f3d7-fe0f のように複数出てくることもあるのですが、

URL に複数指定すると 404 になることもあります。

たぶん後ろのが fe0f で前のがひとつしかないときは省いて大丈夫かと思います。

コードブロック内は変換しないようにする

コードブロック内に絵文字を書いたときにも、その絵文字が Twemoji に変換されてしまうので、これでは img タグが丸見えになってしまいます。

1
// Markdown でこう書いたのに
2
const content = 'I 💗 emoji!';
3
// こうなる？？
4
const content = 'I <img className="emoji" draggable="false" alt="💗" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/2764.png"/> emoji!';

これを変換させないように、コードブロック外だけ twemoji.parse を通すようにします。

Markdown の場合、コードブロックの開始と終了は ``` なので、次のようにします。

1
const splitted = markdownContent.split(/(```(?:.|\n)+?```)/);
2
const res: string[] = [];
3
for (const part of splitted) {
4
  if (part.slice(0, 3) === '```') {
5
    res.push(part);
6
  } else {
7
    res.push(twemoji.parse(part));
8
  }
9
}
10
const twemojified = res.join('');

これでサイト内の絵文字が Twemoji になります！

あとはサイズなどを CSS で調整すればいいです。

この記事がお役に立てればうれしいです。

では

  関連記事【Hugo】ブログにマウスオーバーでふわっと表示する吹き出しを追加