「Goで画像合成！」OGP画像の動的生成 / Dynamic generation of OGP images by Golang

[非公式]Go Reject Con 2021 の発表資料です
https://moneyforward.connpass.com/event/228698/

Transcript

1. 「Goで画像合成！」OGP画像の動的生成
 Retty株式会社
 常松祐一
 2021/11/24

2. 自己紹介
 常松祐一 (つねまつ ゆういち) 
 • Engineering Manager 
 • Software Engineering Coach 
 • Agile Development
 
 SNSアカウント
 • tunepolo : 
 • tune : 
 https://user.retty.me/3946697/ 今日は上記画像を生成するサービスを サマーインターンで開発してもらった話です
3. OGP画像とは
 • SNSシェア時に表示されるサムネイル画像のこと
 ◦ “Open Graph Protocol”で定義されており、HTMLにメタタグを入れるこ とで使うことができる。

4. ページ種別によってOGP画像の仕様は異なる
 【店舗紹介ページ】
 画像1枚をサイズ調整
 【ユーザページ】
 アイコンと補足情報から合成
 アイコン 補足情報 左右に 余白 上下を カット
5. 画像合成のアプローチ
 1. 画像ライブラリを自前で操作
 ◦ Good: 必要最小限の処理で済む
 ◦ Bad: 文字レイアウトが困難
 2. HTMLを動的生成し、キャプチャする
 ◦ Good: 文字が多いレイアウトが作りやすい。
 ◦ Bad: HTMLレンダリングを挟むため重い
 インターン生 + メンターで議論してもらった結果、2を選択 1, 2共にtimakinさんのnoteにまとまっています Goでheadless browserを用いた 動的画像生成
6. • CleanArchitecture
 • echo(web framework)
 • wire(DI)
 • httptest + chromedp
 • imageorient
 サービス構成
 OGPサービス ユーザサービス など HTTPS 1. データ取得 2. HTML生成 3. レンダリング &キャプチャ
7. 合成画像をキャプチャする箇所のコード
 なんと シンプル!
8. 苦労したところ - アイコンフォントをどう持たせるか
 • Web/アプリでも使われるデータのため、共通管理したい
 • OGPサーバー内部でHTMLをレンダリングする際にアイコンフォントをどう やって配信する?
 ◦ webpack + webfonts-loaderでビルドした成果物を静的に抱き込む形 として対処
 ◦ もっといい解決策があれば知りたい

9. HTMLテンプレート 合成用ロゴ デフォルトOGP画像 go:embedによるファイル埋め込みは便利

10. まとめ
 • HTMLを動的生成する画像合成は実用的
 ◦ 画像生成までの流れが整理できていると、パターンを増や すことは簡単
 ◦ パフォーマンス(処理時間・CPU・メモリ)も問題になることは なかった
 • 3週間で0から開発し、サービス投入まで実現してくれたイン ターン生の皆様に敬意と感謝
 Photo by Max Delsid on Unsplash
11. エンジニア募集中！ 11 ITで新たな食体験を提供していく「 Retty」のプロダ クト開発に携わるバックエンドエンジニアを募集し ます。 マイクロサービス化、新規事業など一緒に Goで開 発しませんか。 Go Conferenceの発表で盛り込めなかった話や 残念ながら採択されなかったプロポーザルの話、 Go Conferenceに参加してみての感想戦、 Retty におけるGoでのプロダクト開発など、ざっくばらん にお話いたします！