自己紹介

名前:@d_etteiu8383(でっていう)
所属:生命理工学院生命理工学系
traP
- グラフィック班(モデリング,デザイン)
- ゲーム班
ビラのイラスト作った

きっかけ

でっていうのブログの画像

最近ブログを始めた(https://eyemono.moe)
OGP画像欲しくなった
自分でいちいち作るのはめんどい…
自動化しよう

OGP(Open Graph Protocol)とは

webページをイイ感じに共有するための手段

画像とかタイトルとか説明が表示される

TwitterにおけるOGPの表示例

調査

"OGP 画像動的"とかでググったりいろいろしてVercelのOpen Graph Image as a Serviceを使うことにした

うにぽた(sigma)さんが使っていたのが決め手だった

うにぽたさんのブログのOGP

Twitterカード用のOGPもVercelで作ってます
雑ログ:unilog(https://log.unipota.me/p/hello)

Open Graph Image as a Serviceとは

Vercelが提供している画像の動的生成OSS(https://github.com/vercel/og-image)

クエリパラメータからHTMLとCSSを生成し、
PeppeteerがヘッドレスChromeでそのHTMLを開いてスクショを撮って
画像として返してくれる

パラメータを変えるだけでイイ感じの画像が得られる

中身

https://og-image.vercel.app/HelloWorld.png

みたいなリンクに対して

<html>
    <meta charset="utf-8">
    <title>Generated Image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <body>
        <div class="heading">
            HelloWorld
        </div>
    </body>
</html>

みたいなHTMLが生成されてスクショされる(かなり省略してます)。

カスタマイズしてみる

You'll want to fork this repository and deploy your own image generator.

ブラウザで表示できるものは(HTMLとCSSの知識があれば)大体何でもできる
先ほどのテンプレート部分をいじったりして

日本語を使えるようにした
背景パターンを選択できるようにした
背景画像を変更できるようにした
\(\TeX\)で数式を表示できるようにした
文字の色を変えられるようにした

vercel/og-imageは便利

君も使ってみよう

OGP画像を自動生成した話