satoriをOGP画像生成以外の用途で使う（最終的にはZoom背景ジェネレーターになった）

この記事の概要

最近では、ブログのOGPを動的に生成したいときにsatoriが使われているのをよく見ます。

ただ、色々使えそうなライブラリの割にこのユースケースしか見ないような気もします。
（自分が知らないだけだったらすみません）

というわけで、違う使い方を模索してみました。

作ったもの

こねくりまわした結果、Zoomなど用のバーチャル背景用ジェネレーターができました。

READMEに貼った動画のような感じで、好きなテキストを打ち替えてダウンロードができます。

コード（抜粋）

import { useEffect, useState } from 'react'
import satori from 'satori'
import { Card } from './Card'
import { downloadSvgAsPng } from './svg-utils'
import './style.css'

const notoSansJP = fetch('/NotoSansJP-Regular.otf').then((res) =>
  res.arrayBuffer()
)

export default function App() {
  const [role, setRole] = useState('Human')
  const [name, setName] = useState('John Doe')
  const [svgString, setSvgString] = useState('')

  const handleChangeRole = (e) => {
    setRole(e.target.value)
  }
  const handleChangeName = (e) => {
    setName(e.target.value)
  }

  useEffect(() => {
    ;(async () => {
      const svg = await satori(<Card role={role} name={name} />, {
        width: 1920,
        height: 1080,
        fonts: [
          {
            name: 'Noto Sans JP',
            data: await notoSansJP,
          },
        ],
      })
      setSvgString(svg)
    })()
  }, [role, name])

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: svgString }} />
      <label>
        Role
        <input type='text' onChange={handleChangeRole} />
      </label>
      <label>
        Name
        <input type='text' onChange={handleChangeName} />
      </label>
      <button type='button' onClick={() => downloadSvgAsPng(svgString)}>Download</button>
    </>
  )
}

別途定義したCardコンポーネントを呼び出して、svgに変換してビューとして埋め込み、役職や名前をリアルタイムでプレビューできるようにしました。
そしてsvgをpngとしてダウンロードする関数も別途定義しておき¹、それを噛ませてダウンロードしています。

今回はinputの数だけuseStateを定義してしまいましたが、数が増えたとき用に1つにまとめておいた方が良さそうな気はしています。

最後に

天邪鬼なので「みんなと違う使い方をしてみたいなあ」から始まっていますが、これはこれで便利かもしれません。
よくあるのがデザイナーしかAdobeライセンスを持っていなくて、ちょっとしたテキスト変更だけなのにデザイナーに頼まないといけなくて面倒、みたいなシチュエーションです。

メルマガ用の画像やツイート用の画像など、OGPとして生成しづらい場面用にテンプレートとして用意しておくことができそうな気がしています。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！

1. なお、この機構もresvgとして提供されてるじゃん。と後から気がつきました。 https://github.com/yisibl/resvg-js ↩