wasm-html-to-image で実現するブラウザレス画像生成：OGP・縦書き・CSSアニメーションまでを完全網羅

Zenn

wasm-html-to-image で実現するブラウザレス画像生成：OGP・縦書き・CSSアニメーションまでを完全網羅

wasm-html-to-image で実現するブラウザレス画像生成：OGP・縦書き・CSSアニメーションまでを完全網羅Web アプリケーションで動的に OGP（Open Graph Protocol）画像やソーシャルカード、バナーを生成したいとき、どのようなツールを選んでいるでしょうか？これまでは、Puppeteer や Playwright などのヘッドレスブラウザを起動してスクリーンショット…

https://zenn.dev/sora_kumo/articles/wasm-html-to-image

2026/10/29 22:38 生成

対談終了

ポチ (Pochi)食いしん坊の犬コメンテーター
いい匂いがするワン。これ、料理でいうと「一皿に全部盛られてる定食」の話だワン。これまではゆでる係と焼く係と味付け係がバラバラの店だったのが、render() ひとつで全部出てくるってことかもしれないワン。……でも待って、縦書きってなんだか串に刺さった焼き鳥みたいで、ぼくはそこが一番そそられるワン。ねえ、これって結局だれのお皿が一番うれしくなるやつなんだワン？
ミミ (Mimi)せっかちなスピード狂ウサギコメンテーター
結論から言うと、待てない人全っ！初回のWASM読み込みだけは遅いけど、2回目以降はレンダリングだけって、まさに「走り出したら速い」じゃん。ヘッドレスブラウザの起動待ちとか、あたし3秒で発狂するよっ。
カピー (Kapy)のんびりカピバラ哲学コメンテーター
ふぁ〜、速いのはいいけどねえ……走り出したら止まらない川って、ちょっと怖くない？まあ、いっか。
ポチ (Pochi)食いしん坊の犬コメンテーター
「止まらない川が怖い」って気持ち、わかるワン。でも怖いのは速さより、味見しないまま全部一皿に盛っちゃうことかもしれないワン。render() ひとつで済むなら、重いブラウザを抱えられない小さな店や、日本語の縦書きで詩を出したい人には匂いが強いワン。で、結局だれが得するかっていうと、道具を何個も揃えられない作る側だワン。ぼくはその皿、ちゃんと取り分けられるかだけ気になるワン。
ミミ (Mimi)せっかちなスピード狂ウサギコメンテーター
取り分けって、そこ気にしてる間に焼き鳥冷めるじゃん！まず一枚出して、味見はあとで走りながらでいいよっ。
カピー (Kapy)のんびりカピバラ哲学コメンテーター
ふぁ〜、冷めた焼き鳥も、あとで美味しいかもよ〜。
ポチ (Pochi)食いしん坊の犬コメンテーター
「冷めて美味しいのは、もともと味がしみてるやつだけだワン。縦書きもPDFも画像変換も一皿に盛るなら、あとで味見じゃなく最初に小皿で確かめたいワン。で、その余裕がない作る側こそ、この道具の匂いを嗅ぎ分けられるのかがまだ気になるワン。」
ミミ (Mimi)せっかちなスピード狂ウサギコメンテーター
味見してる間に出遅れるんだよっ。小皿は走りながら用意すればいいじゃん、はい次！
カピー (Kapy)のんびりカピバラ哲学コメンテーター
ふぁ〜、結局ねえ、急ぐ人と味見する人と、どっちも正しいんだよ。ただ10年後も惜しいと思えるのは、たぶん「道具をひとつ覚えれば、あとはゆっくり味を詰められる」って状態の方かもねえ。走りながら小皿を持つのは大変だから、ぼくは最初にひと呼吸おく余裕を応援してるよ〜。……で、なんだっけ？ああ、縦書きの焼き鳥。まあ、冷めてもしみてれば美味しいから、いっか。

別のURLで対談する