Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
「Goで画像合成!」OGP画像の動的生成 / Dynamic generation of OGP images by Golang
Yuichi Tsunematsu
November 24, 2021
Programming
0
480
「Goで画像合成!」OGP画像の動的生成 / Dynamic generation of OGP images by Golang
[非公式]Go Reject Con 2021 の発表資料です
https://moneyforward.connpass.com/event/228698/
Yuichi Tsunematsu
November 24, 2021
Tweet
Share
More Decks by Yuichi Tsunematsu
See All by Yuichi Tsunematsu
アウトプットが当たり前の文化をつくる / Create a culture where output is the norm.
tunepolo
0
950
3年がかりのQA組織立ち上げ / 3 years of work to set up a QA organization
tunepolo
1
520
Timeeさん LeSS講演 「LeSSを始めてから軌道に乗せるまで」 / How to start LeSS
tunepolo
1
59
アジャイルに向き合うソフトウェア開発の技術面 "ライトウィング" / Technical aspects of software development towards agile
tunepolo
8
7.2k
スクラムマスターの育て方 / Training Scrum Master
tunepolo
9
5k
"これから学ぶ" システム思考 / System thinking introduction
tunepolo
3
3.5k
ユニコーン企業の働き方を目指して - Rettyでの2年間の取り組みをギュッと紹介 / Toward a Unicorn Company Way of Working
tunepolo
1
1.4k
自律するチームとそれを支えるマネジメント / Management that supports self-management team
tunepolo
2
150
LeSS導入からじき2年、Rettyが経験した改善と悩みについて / Introduction of LeSS in Retty
tunepolo
2
1.8k
Other Decks in Programming
See All in Programming
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
engineer
spacemarket
0
3.9k
Get Ready for Jakarta EE 10
ivargrimstad
0
2.7k
【Scrum Fest Osaka 2022】スクラムチームに放り込まれた若手エンジニアの皆さん、どのように技術のキャッチアップをしていくかイメージはついていますか?
miiiki
0
120
git on intellij
hiroto_kitamura
0
170
クックパッドマートの失敗したデータ設計 Before / After 大放出
mokuzon
0
180
React Nativeアプリを DDDで開発している話
nihemak
0
160
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
5.6k
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
5
560
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
無限スクロールビューライブラリ 二つの設計思想比較
harumak
0
260
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
160
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
15
36k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Support Driven Design
roundedbygravity
86
8.5k
Bootstrapping a Software Product
garrettdimon
296
110k
How to train your dragon (web standard)
notwaldorf
58
3.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Docker and Python
trallard
27
1.6k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Transcript
「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でのプロダクト開発など、ざっくばらん にお話いたします!