Noto Emoji を SVG 化する API を作る

この記事は Next.js 版の内容です。現在は Astro で構築し直したため、情報が古い可能性があります。当時のリポジトリはこちらにあるので参考にしてください。

よくあるブログだと記事にアイキャッチ画像を添付するケースが多いと思う（例えば note とか）。良い画像があれば特に迷うことはないのだが、ちょっとした記事を書くだけなのに毎回用意するのは正直言って面倒くさい。

なので、このブログでは以下のように Frontmatter に絵文字をセットするだけでアイキャッチ画像を生成するように実装した。このアイデア自体は Zennや GitHub Discussions で採用されているものなので特に真新しいというわけではない。

---
title: "Noto Emoji を SVG 化する API を作る"
emoji: 🔄
category: Tech
tags: []
status: published
publishedAt: 2024-05-19
---

そして、こちらの記事で述べているように Noto Emojiを font-family として指定することでサイトのモノクロな雰囲気に合うように絵文字の表示を変えていた。記事一覧ページを minブラウザで見ると以下のようなデザインである。

ただ、Safari で記事一覧ページを見ると以下のように表示されてしまう。

ちなみに Chrome では問題ない。なぜか Safari でのみ変換されない絵文字がある。

なぜ Noto Emoji が Safari で表示されない？

調べてみたのだが、ZWJ Sequencesが関係しているっぽい。絵文字は端末で見ていると 1 つでも実際は複数の絵文字で構成されているパターンがある。例えば絵文字 👩‍❤️‍💋‍👨は 👩❤️💋👨 をゼロ幅接合子（Zero Width Joiner）で繋げることで構成されている。 Windows にしかないパターンもあったりとこれら全てに対応するのはさすがに時間がかかり過ぎるため諦めた。

代案として Img 要素から SVG に変換された絵文字を読み込むことを考えた。それならクロスプラットフォームにも対応できる。

このサイトでは Next.js と Vercel を使って構成されているので Next.js の Route Handlers と Vercel の Edge Runtime を使うことにした。 Edge Runtime にキャッシュさせておけばパフォーマンス面でも問題なさそう。

（基本的な原理がわかっていれば Cloud Functions や Cloudflare Workers のようなサーバレス環境でも OK。今回は Vercel を使いたかっただけ。）

絵文字 SVG を返す API の実装

今回は以下のようなエンドポイントを作成する。試しにアクセスしてみてほしい。画面左端上部にモノクロの絵文字が表示されると思う。

https://kkhys.me/api/noto-emoji/🐟.svg?theme=light

上記では 🐟 を指定しているが、ここはどんな絵文字でも問題ない。逆に絵文字以外が入力されていたり、svg が抜けていれば適切なエラーを返すようにする。

また、このサイトはダークモードとライトモードに対応しているため、クエリパラメータでテーマを選択可能にしている。 theme=dark を指定すればダークモード用の SVG が返される。

絵文字の SVG 化には Vercel 製のライブラリ satoriを使用した。

実装自体はシンプルで、以下のようになっている。

1
import type { NextRequest } from 'next/server';
2
import emojiRegex from 'emoji-regex';
3
import satori from 'satori';
4

5
export const runtime = 'edge';
6

7
export const GET = async (request: NextRequest, { params: { slug } }: { params: { slug: string } }) => {
8
  const rawText = slug.endsWith('.svg') ? slug.replace('.svg', '') : '';
9

10
  if (!rawText.length || !isEmoji(rawText)) {
11
    return new Response('Invalid URL', {
12
      status: 400,
13
    });
14
  }
15

16
  const firstEmoji = Array.from(rawText)[0];
17

18
  const notoEmojiRegular = await fetch(
19
    new URL('../../../../../assets/fonts/NotoEmoji-Regular.ttf', import.meta.url),
20
  ).then((res) => res.arrayBuffer());
21

22
  const searchParams = request.nextUrl.searchParams;
23
  const theme = searchParams.get('theme') ?? 'light';
24

25
  const svg = await satori(
26
    <div
27
      style={{
28
        fontSize: 21,
29
        width: '100%',
30
        height: '100%',
31
        display: 'flex',
32
        alignItems: 'center',
33
        justifyContent: 'center',
34
        fontFamily: 'Noto Emoji',
35
        fontSmooth: 'antialiased',
36
        color: theme === 'dark' ? '#e6e5e5' : '#0a0a0b',
37
      }}
38
    >
39
      {firstEmoji}
40
    </div>,
41
    {
42
      width: 24,
43
      height: 24,
44
      fonts: [
45
        {
46
          name: 'Noto Emoji',
47
          data: notoEmojiRegular,
48
          style: 'normal',
49
          weight: 400,
50
        },
51
      ],
52
    },
53
  );
54

55
  return new Response(svg, {
56
    status: 200,
57
    headers: {
58
      'Content-Type': 'image/svg+xml',
59
      'X-Content-Type-Options': 'nosniff',
60
      'cache-control': 'public, immutable, no-transform, max-age=31536000',
61
    },
62
  });
63
};
64

65
/**
66
 * Checks if a given string contains an emoji.
67
 *
68
 * @param str - The string to check for emoji.
69
 * @returns Returns true if the string contains an emoji, false otherwise.
70
 */
71
const isEmoji = (str: string) => emojiRegex().test(str);

25 行目で Google Fonts からダウンロードした Noto Emoji の TTF ファイルへのパスを指定している。ここは相対パスでなければいけないので注意が必要。ここを変えればいろんなフォントに対応できる。

77 行目に絵文字かどうかを判別するための関数がある。絵文字かどうかは正規表現を使えばわかるのだが、けっこう複雑なので emoji-regexというライブラリに頼っている。

そして、ここで最も重要なのは 66 行目の cache-control である。ここで max-age=31536000 を指定することで一度 SVG 画像を読み込めばブラウザのキャッシュに保存するため 2 回目以降サーバにリソースの再要求を行わない。キャッシュ時間はかなり長めにとっているが、絵文字が変わることはおそらくないので問題ない。

フロント側の処理

フロント側では Img 要素を使って SVG 画像を読み込んでいる。

1
export const EyeCatch = ({
2
  emoji,
3
  className,
4
  size,
5
}: { emoji: string; className?: string } & VariantProps<typeof eyeCatchVariants>) => {
6
  const { theme, systemTheme } = useTheme();
7
  const [imageSrc, setImageSrc] = React.useState('');
8

9
  React.useEffect(() => {
10
    const selectedTheme = theme === 'system' ? systemTheme : theme;
11
    setImageSrc(`/api/noto-emoji/${emoji}.svg?theme=${selectedTheme === 'dark' ? 'dark' : 'light'}`);
12
  }, [theme, systemTheme, emoji]);
13

14
  return (
15
    <span className={cn(eyeCatchVariants({ size }), className)}>
16
      <img src={imageSrc} alt={emoji} className={cn(svgVariants({ size }))} />
17
    </span>
18
  );
19
};