Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「Goで画像合成!」OGP画像の動的生成 / Dynamic generation of OG...
Search
Yuichi Tsunematsu
November 24, 2021
Programming
0
1.3k
「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
成功をつなげる プロジェクトマネジメントの探求 / Exploring Project Management to Continuous Success
tunepolo
0
290
組織のスケーリングと持続性 / Scaling and Sustainability
tunepolo
9
9.5k
信頼される振る舞いを継続しましょう / Keep up the trusted behavior
tunepolo
2
1.1k
アジャイルプラクティスガイドブックを携え、チームで現場を変えていく / Improve your development process with Agile Practices Guidebook
tunepolo
0
260
チームではじめる 「アジャイルプラクティス」 実践の第一歩 / First step to start implementing "Agile Practices" with your team
tunepolo
2
1.6k
アジャイルプラクティスガイドブックの紹介 / introduction of Agile Practice Guidebook
tunepolo
0
1.1k
技術プラクティスの整理に1年半向き合ってわかったこと / What I learned from facing the arrangement of technical practices.
tunepolo
1
1.9k
「全社でアジャイル!」を広げるために / Expand Agile throughout the Company
tunepolo
1
1.8k
アウトプットが当たり前の文化をつくる / Create a culture where output is the norm.
tunepolo
0
2.6k
Other Decks in Programming
See All in Programming
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
840
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
170
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
570
止められない医療アプリ、そっと Swift 6 へ
medley
1
110
CSC305 Lecture 02
javiergs
PRO
1
260
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
370
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
940
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Music & Morning Musume
bryan
46
6.8k
GitHub's CSS Performance
jonrohan
1032
460k
How GitHub (no longer) Works
holman
315
140k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Side Projects
sachag
455
43k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
A better future with KSS
kneath
239
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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でのプロダクト開発など、ざっくばらん にお話いたします!