この記事の概要
最近では、ブログの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としてダウンロードする関数も別途定義しておき1、それを噛ませてダウンロードしています。
今回はinputの数だけuseStateを定義してしまいましたが、数が増えたとき用に1つにまとめておいた方が良さそうな気はしています。
最後に
天邪鬼なので「みんなと違う使い方をしてみたいなあ」から始まっていますが、これはこれで便利かもしれません。
よくあるのがデザイナーしかAdobeライセンスを持っていなくて、ちょっとしたテキスト変更だけなのにデザイナーに頼まないといけなくて面倒、みたいなシチュエーションです。
メルマガ用の画像やツイート用の画像など、OGPとして生成しづらい場面用にテンプレートとして用意しておくことができそうな気がしています。
最後まで読んでくださってありがとうございます!
Twitterでも情報を発信しているので、良かったらフォローお願いします!
Devトークでのお話してくださる方も募集中です!
-
なお、この機構もresvgとして提供されてるじゃん。と後から気がつきました。 https://github.com/yisibl/resvg-js ↩