「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

   

   View Slide

2. 自己紹介

   常松祐一 (つねまつ ゆういち) 

   ● Engineering Manager 

   ● Software Engineering Coach 

   ● Agile Development

   

   SNSアカウント

   ● tunepolo : 

   ● tune : 

   https://user.retty.me/3946697/
   今日は上記画像を生成するサービスを
   サマーインターンで開発してもらった話です
   

   View Slide

3. OGP画像とは

   ● SNSシェア時に表示されるサムネイル画像のこと

   ○ “Open Graph Protocol”で定義されており、HTMLにメタタグを入れるこ
   とで使うことができる。

   

   View Slide

4. ページ種別によってOGP画像の仕様は異なる

   【店舗紹介ページ】

   画像1枚をサイズ調整

   【ユーザページ】

   アイコンと補足情報から合成

   アイコン
   補足情報
   左右に
   余白
   上下を
   カット
   

   View Slide

5. 画像合成のアプローチ

   1. 画像ライブラリを自前で操作

   ○ Good: 必要最小限の処理で済む

   ○ Bad: 文字レイアウトが困難

   2. HTMLを動的生成し、キャプチャする

   ○ Good: 文字が多いレイアウトが作りやすい。

   ○ Bad: HTMLレンダリングを挟むため重い

   インターン生 + メンターで議論してもらった結果、2を選択
   1, 2共にtimakinさんのnoteにまとまっています
   Goでheadless browserを用いた
   動的画像生成
   

   View Slide

6. ● CleanArchitecture

   ● echo(web framework)

   ● wire(DI)

   ● httptest + chromedp

   ● imageorient

   サービス構成

   OGPサービス
   ユーザサービス
   など
   HTTPS
   1. データ取得 2. HTML生成
   3. レンダリング
   &キャプチャ
   

   View Slide

7. 合成画像をキャプチャする箇所のコード

   なんと
   シンプル!
   

   View Slide

8. 苦労したところ - アイコンフォントをどう持たせるか

   ● Web/アプリでも使われるデータのため、共通管理したい

   ● OGPサーバー内部でHTMLをレンダリングする際にアイコンフォントをどう
   やって配信する?

   ○ webpack + webfonts-loaderでビルドした成果物を静的に抱き込む形
   として対処

   ○ もっといい解決策があれば知りたい

   

   View Slide

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

   

   View Slide

10. まとめ

    ● HTMLを動的生成する画像合成は実用的

    ○ 画像生成までの流れが整理できていると、パターンを増や
    すことは簡単

    ○ パフォーマンス(処理時間・CPU・メモリ)も問題になることは
    なかった

    ● 3週間で0から開発し、サービス投入まで実現してくれたイン
    ターン生の皆様に敬意と感謝

    Photo by Max Delsid on Unsplash
    

    View Slide

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

    View Slide