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

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でのプロダクト開発など、ざっくばらん にお話いたします！