satoriでTwemoji(Twitter絵文字)も含めて画像化する

ほそぼそと作ってるゲームアプリで、
絵文字に対応したときの備忘録(*´ω｀*)

🚀🚀アップデートDONE🚀🚀
1. 絵文字でステージを作成できるようになりました✨
2. ランキング数を10から30に変更しました✨
ほか、いくつかの改善や修正も😊#マグロ探し #indiedev #ゲーム開発 #個人開発 https://t.co/9E4ikyzU0s
— きらぷか@スプシAPI化&積読のサービス運営中🔥 (@kira_puka) June 16, 2024

なお、Twemojiの本家は、こちら

jdecked/twemoji: Emoji for everyone.

つくったOGPはこんな感じ

😍を探せ in 🥰
ID: qwLaheQx#マグロ探し #MAGURO_Finding https://t.co/R7UF8Kig4D
— きらぷか@スプシAPI化&積読のサービス運営中🔥 (@kira_puka) June 16, 2024

OGP生成の話はこちら
nitro＋satori＋sharpを使った方法

unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。

satoriでTwemojiを使う

SVGやPNGなどをおいてある本家はjdecked/twemojiだけど、
Node.js/TypeScriptではうまくつかえず...

@twemoji/parserでパースをしつつ対応した

jdecked/twemoji-parser: A simple library for identifying emoji entities within a string in order to render them as Twemoji.

@twemoji/parserの使い方

まずはインストール
(v15.1.1以降でないと型定義がないので注意)

pnpm add @twemoji/parser

使い方はこんな感じ
文字列をパースすると、絵文字の部分だけの情報を返してくれる

import { parse } from '@twemoji/parser';
const entities = parse('I 🧡 Twemoji! 🥳');
/*
entities = [
  {
    url: 'https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f9e1.svg',
    indices: [ 2, 4 ],
    text: '🧡',
    type: 'emoji'
  },
  {
    url: 'https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f973.svg',
    indices: [ 12, 14 ],
    text: '🥳',
    type: 'emoji'
  }
]
*/

satoriでtwemojiを使う

流れとしては、

文字列をパースして、
絵文字の部分を<img src="">に置き換える

という形

今回は1文字だけなので、こんな感じ

import twemoji from "@twemoji/parser";

function toTwemoji(text: string, size: number): string | null {
  // 文字列をパースして、png形式のURLを取得
  const entites = twemoji.parse(text, { assetType: "png" });
  if (entites.length < 1) return null;
  // pngのURLを使って、<img />を組み立てる
  const emojiUrl = entites[0].url;
  return `<img src="${emojiUrl}" style="width: ${size}px; height: ${size}px;" />`;
}

あとは、いつも通り、satoriで処理すればOK

satoriのドキュメントだとうまくいかない

最初はREADMEにあるgraphemeImagesやloadAdditionalAssetを試したけど、だめだった...

JSXではないからなのか、loadAdditionalAssetは呼ばれず、
うまく動作しないようだった...

SVGだとうまくいかない

最初はこんな感じで、デフォルトの形式であるSVGを渡すようにしていたけど、
うまく描画されなかった...

const entites = twemoji.parse(text);

PNG形式にしたところ、うまく描画されるけど、
サイズを指定する必要があり、width/heightを付けている感じ

twemojiのバージョンを指定する

デフォルトでは、twemoji@latestになっている。
指定したい場合は、これを置き換えればOK

const emojiUrl = entites[0].url;
// https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f973.svg

const TWEMOJI_VERSION = "14.1.2";
const emojiUrl2 = entites[0].url.replaceAll("@latest", `@${TWEMOJI_VERSION}`);
// https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f973.svg