# OGP画像を自動生成した話
by:@d_etteiu8383
---
# 自己紹介
- 名前:@d_etteiu8383(でっていう)
- 所属:生命理工学院生命理工学系
- traP
- グラフィック班(モデリング,デザイン)
- ゲーム班
- ビラのイラスト作った
---
# きっかけ
1. 最近ブログを始めた(<https://eyemono.moe>)
2. OGP画像欲しくなった
3. 自分でいちいち作るのはめんどい...
4. 自動化しよう
---
# OGP(Open Graph Protocol)とは
webページをイイ感じに共有するための手段
画像とかタイトルとか説明が表示される
---
# 調査
"OGP 画像 動的"とかでググったりいろいろして**Vercel**の**Open Graph Image as a Service**を使うことにした
うにぽた(sigma)さんが使っていたのが決め手だった
> Twitterカード用のOGPもVercelで作ってます
> 雑ログ:unilog(<https://log.unipota.me/p/hello>)
---
# Open Graph Image as a Serviceとは
**Vercel**が提供している画像の動的生成OSS(https://github.com/vercel/og-image)
1. クエリパラメータからHTMLとCSSを生成し、
2. PeppeteerがヘッドレスChromeでそのHTMLを開いてスクショを撮って
3. 画像として返してくれる
パラメータを変えるだけでイイ感じの画像が得られる
Note:
ここでデモとして <https://og-image.vercel.app/> を見せる
---
# 中身
`https://og-image.vercel.app/HelloWorld.png`
みたいなリンクに対して
```html
<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$で数式を表示できるようにした
- **文字の色**を変えられるようにした
Note:
デモとして
- <https://og-image.eyemono.moe/>
- <https://og-image.eyemono.moe/**OGP%E7%94%BB%E5%83%8F**%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%83%84%E3%83%BC%E3%83%AB.png?pattern=cross&md=1&fontSize=75px&textColor=%23404040&textStrongColor=%238340BB&overlay=https%3A%2F%2Fog-image.eyemono.moe%2FOGP_overlay.png>
- <https://og-image.eyemono.moe/**OGP%E7%94%BB%E5%83%8F**%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%83%84%E3%83%BC%E3%83%AB.png?pattern=none&md=1&fontSize=75px&textColor=%23404040&textStrongColor=%238340BB&overlay=https%3A%2F%2F1.bp.blogspot.com%2F-43uWT_S2ZyM%2FX1CLR8paJLI%2FAAAAAAABa5s%2FT3dOIgCmOJ0yJua_QppssSDdABzmQRIkwCNcBGAsYHQ%2Fs1600%2Fbg_koukasen_color1.png>
- <https://og-image.eyemono.moe/**%E6%95%B0%E5%BC%8F**%E3%82%82%E6%9B%B8%E3%81%91%E3%82%8B%0A%0A%24%5Csum_%7Bn%3D1%7D%5E%7B%5Cinfty%7D%5Cfrac%7B1%7D%7Bn%5E2%7D%3D%5Cfrac%7B%5Cpi%5E2%7D%7B6%7D%24.png?pattern=none&md=1&fontSize=75px&textColor=%23404040&textStrongColor=%238340BB>
- <https://og-image.eyemono.moe/**OGP%E7%94%BB%E5%83%8F**%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%83%84%E3%83%BC%E3%83%AB.png?pattern=none&md=1&fontSize=75px&textColor=%23404040&textStrongColor=%23ba4087>
を見せる
---
# vercel/og-imageは便利
君も使ってみよう
{"metaMigratedAt":"2023-06-16T07:38:04.008Z","metaMigratedFrom":"YAML","title":"OGP画像を自動生成した話","breaks":true,"slideOptions":"{\"width\":\"80%\",\"height\":\"110%\"}","contributors":"[{\"id\":\"8552dd98-3210-442f-b413-95e61b25cc09\",\"add\":4525,\"del\":1691}]"}