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


自己紹介
 常松祐一 (つねまつ ゆういち) 
 ● Engineering Manager 
 ● Software Engineering Coach 
 ● Agile Development
 
 SNSアカウント
 ● tunepolo : 
 ● tune : 
 https://user.retty.me/3946697/ 今日は上記画像を生成するサービスを サマーインターンで開発してもらった話です

OGP画像とは
 ● SNSシェア時に表示されるサムネイル画像のこと
 ○ “Open Graph Protocol”で定義されており、HTMLにメタタグを入れるこ とで使うことができる。


ページ種別によってOGP画像の仕様は異なる
 【店舗紹介ページ】
 画像1枚をサイズ調整
 【ユーザページ】
 アイコンと補足情報から合成
 アイコン 補足情報 左右に 余白 上下を カット

画像合成のアプローチ
 1. 画像ライブラリを自前で操作
 ○ Good: 必要最小限の処理で済む
 ○ Bad: 文字レイアウトが困難
 2. HTMLを動的生成し、キャプチャする
 ○ Good: 文字が多いレイアウトが作りやすい。
 ○ Bad: HTMLレンダリングを挟むため重い
 インターン生 + メンターで議論してもらった結果、2を選択 1, 2共にtimakinさんのnoteにまとまっています Goでheadless browserを用いた 動的画像生成

● CleanArchitecture
 ● echo(web framework)
 ● wire(DI)
 ● httptest + chromedp
 ● imageorient
 サービス構成
 OGPサービス ユーザサービス など HTTPS 1. データ取得 2. HTML生成 3. レンダリング &キャプチャ

合成画像をキャプチャする箇所のコード
 なんと シンプル!

苦労したところ - アイコンフォントをどう持たせるか
 ● Web/アプリでも使われるデータのため、共通管理したい
 ● OGPサーバー内部でHTMLをレンダリングする際にアイコンフォントをどう やって配信する?
 ○ webpack + webfonts-loaderでビルドした成果物を静的に抱き込む形 として対処
 ○ もっといい解決策があれば知りたい


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


まとめ
 ● HTMLを動的生成する画像合成は実用的
 ○ 画像生成までの流れが整理できていると、パターンを増や すことは簡単
 ○ パフォーマンス(処理時間・CPU・メモリ)も問題になることは なかった
 ● 3週間で0から開発し、サービス投入まで実現してくれたイン ターン生の皆様に敬意と感謝
 Photo by Max Delsid on Unsplash

エンジニア募集中！ 11 ITで新たな食体験を提供していく「 Retty」のプロダ クト開発に携わるバックエンドエンジニアを募集し ます。 マイクロサービス化、新規事業など一緒に Goで開 発しませんか。 Go Conferenceの発表で盛り込めなかった話や 残念ながら採択されなかったプロポーザルの話、 Go Conferenceに参加してみての感想戦、 Retty におけるGoでのプロダクト開発など、ざっくばらん にお話いたします！