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
220
組織のスケーリングと持続性 / Scaling and Sustainability
tunepolo
9
8.5k
信頼される振る舞いを継続しましょう / Keep up the trusted behavior
tunepolo
2
990
アジャイルプラクティスガイドブックを携え、チームで現場を変えていく / Improve your development process with Agile Practices Guidebook
tunepolo
0
200
チームではじめる 「アジャイルプラクティス」 実践の第一歩 / First step to start implementing "Agile Practices" with your team
tunepolo
2
1.5k
アジャイルプラクティスガイドブックの紹介 / introduction of Agile Practice Guidebook
tunepolo
0
1.1k
技術プラクティスの整理に1年半向き合ってわかったこと / What I learned from facing the arrangement of technical practices.
tunepolo
1
1.8k
「全社でアジャイル!」を広げるために / Expand Agile throughout the Company
tunepolo
1
1.7k
アウトプットが当たり前の文化をつくる / Create a culture where output is the norm.
tunepolo
0
2.5k
Other Decks in Programming
See All in Programming
PHPのガベージコレクションを深掘りしよう
rinchoku
0
250
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
170
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
1.2k
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
1k
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
870
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
130
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
1.4k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3.5k
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
3
1.8k
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
7k
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1.1k
フロントエンドテストの育て方
quramy
11
2.7k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
500
How to Ace a Technical Interview
jacobian
276
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
Six Lessons from altMBA
skipperchong
27
3.7k
Practical Orchestrator
shlominoach
186
10k
Music & Morning Musume
bryan
46
6.4k
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でのプロダクト開発など、ざっくばらん にお話いたします!