Slide 1
Slide 1 text
「Goで画像合成！」OGP画像の動的生成
Retty株式会社
常松祐一
2021/11/24
Slide 2
Slide 2 text
自己紹介
常松祐一 (つねまつ ゆういち)
● Engineering Manager
● Software Engineering Coach
● Agile Development
SNSアカウント
● tunepolo :
● tune :
https://user.retty.me/3946697/
今日は上記画像を生成するサービスを
サマーインターンで開発してもらった話です
Slide 3
Slide 3 text
OGP画像とは
● SNSシェア時に表示されるサムネイル画像のこと
○ “Open Graph Protocol”で定義されており、HTMLにメタタグを入れるこ
とで使うことができる。
Slide 4
Slide 4 text
ページ種別によってOGP画像の仕様は異なる
【店舗紹介ページ】
画像1枚をサイズ調整
【ユーザページ】
アイコンと補足情報から合成
アイコン
補足情報
左右に
余白
上下を
カット
Slide 5
Slide 5 text
画像合成のアプローチ
1. 画像ライブラリを自前で操作
○ Good: 必要最小限の処理で済む
○ Bad: 文字レイアウトが困難
2. HTMLを動的生成し、キャプチャする
○ Good: 文字が多いレイアウトが作りやすい。
○ Bad: HTMLレンダリングを挟むため重い
インターン生 + メンターで議論してもらった結果、2を選択
1, 2共にtimakinさんのnoteにまとまっています
Goでheadless browserを用いた
動的画像生成
Slide 6
Slide 6 text
● CleanArchitecture
● echo(web framework)
● wire(DI)
● httptest + chromedp
● imageorient
サービス構成
OGPサービス
ユーザサービス
など
HTTPS
1. データ取得 2. HTML生成
3. レンダリング
&キャプチャ
Slide 7
Slide 7 text
合成画像をキャプチャする箇所のコード
なんと
シンプル!
Slide 8
Slide 8 text
苦労したところ - アイコンフォントをどう持たせるか
● Web/アプリでも使われるデータのため、共通管理したい
● OGPサーバー内部でHTMLをレンダリングする際にアイコンフォントをどう
やって配信する?
○ webpack + webfonts-loaderでビルドした成果物を静的に抱き込む形
として対処
○ もっといい解決策があれば知りたい
Slide 9
Slide 9 text
HTMLテンプレート
合成用ロゴ
デフォルトOGP画像
go:embedによるファイル埋め込みは便利
Slide 10
Slide 10 text
まとめ
● HTMLを動的生成する画像合成は実用的
○ 画像生成までの流れが整理できていると、パターンを増や
すことは簡単
○ パフォーマンス(処理時間・CPU・メモリ)も問題になることは
なかった
● 3週間で0から開発し、サービス投入まで実現してくれたイン
ターン生の皆様に敬意と感謝
Photo by Max Delsid on Unsplash
Slide 11
Slide 11 text
エンジニア募集中！
11
ITで新たな食体験を提供していく「 Retty」のプロダ
クト開発に携わるバックエンドエンジニアを募集し
ます。
マイクロサービス化、新規事業など一緒に Goで開
発しませんか。
Go Conferenceの発表で盛り込めなかった話や
残念ながら採択されなかったプロポーザルの話、
Go Conferenceに参加してみての感想戦、 Retty
におけるGoでのプロダクト開発など、ざっくばらん
にお話いたします！