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
OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node....
Search
Kentaro Matsushita
January 19, 2020
Programming
1
7.4k
OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node.js module for generating Open Graph image
Kanazawa.js meetup #1 LT発表
Kentaro Matsushita
January 19, 2020
Tweet
Share
More Decks by Kentaro Matsushita
See All by Kentaro Matsushita
開発のアジリティ向上のためのシステムリプレイス ~DMM GAMESの事例~
kentarom
0
810
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
1.1k
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
420
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuously measure my website performance!!!
kentarom
2
570
Actions ToolkitではじめるGitHub Action開発 / Getting started creating a GitHub Action with Actions Toolkit
kentarom
2
2k
GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist
kentarom
1
860
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
790
AWSの既存サービスを活用して、 障害検知・復旧を迅速化するカラクリ / JAWS-UG Kanazawa x OpsJAWS
kentarom
2
4.7k
DMM.comの認証基盤を支えるエラー通知の仕組み / AWS Dev Day Tokyo 2018 Lightning Talk
kentarom
2
14k
Other Decks in Programming
See All in Programming
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
350
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
230
プログラマのための作曲入門
cheebow
0
530
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
CSC305 Lecture 02
javiergs
PRO
1
260
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
470
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
720
Model Pollution
hschwentner
1
180
Serena MCPのすすめ
wadakatu
4
880
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Why Our Code Smells
bkeepers
PRO
339
57k
Fireside Chat
paigeccino
40
3.7k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Building Applications with DynamoDB
mza
96
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Transcript
OGP画像を⽣成するNode.jsの ライブラリを作ってみた Kentaro Matsushita Kanazawa.js meetup #1 2020/01/19
⾃⼰紹介 ⾦沢市内のゲーム会社で働くフロントエンドエンジニア ゲームプラットフォームのリプレイス開発に従事 Kentaro Matsushita kentaro-m _kentaro_m
Node.jsでOGP画像の動的⽣成に チャレンジした話をします 今⽇のトピック
⽬次 • OGP画像とは • Node.jsでOGP画像⽣成 • 作成したライブラリ紹介 • 画像⽣成の仕組み •
実装ハマりポイント • さいごに
OGP画像とは • Open Graph Protocol (OGP) • SNSにWebサイトをシェアしたときにタイトルや概要、サムネイルな どのWebサイト情報を正しく伝えるための標準規格 •
OGP画像 • SNSでWebサイトをシェアしたときにタイムラインに表⽰される画像 • フォロワーの⽬を引いて、Webサイトを⾒てもらうのが⽬的で設定
これがOGP画像です
OGP画像のもやもや • 画像が設定されてない場合、寂しい⾒た⽬になる • 画像を毎回作成するのは⾯倒
OGP画像の動的⽣成が増えている • 記事タイトルや作者名から動的に画像を⽣成する事例が増加 • Qiitaやはてなブログ、dev.toなどがサポートしている • 画像配信CDNの画像へのテキスト追加機能やサーバーサイドの 画像処理の仕組みで実現 • 記事の作成者はOGP画像作成の考慮する必要がない
• SNSにシェアしたときに統⼀感のある⾒た⽬になる
Node.jsで動的に画像⽣成する ライブラリを作った ⾃分の課題解決のために
作例
None
None
できること • 記事タイトルと作者名を含んだ画像⽣成 • 各種カスタマイズ機能 • テキスト周囲のパディング指定 • 出⼒画像サイズの指定 •
背景⾊や背景画像の指定、作者のアイコン指定 • 任意のフォントの使⽤、フォントサイズやフォントカラーの指定 • タイムアウト設定
画像⽣成の仕組み
Node.jsで動的に画像⽣成する • ブラウザで処理するならCanvas APIで実現できそう • JavaScriptとHTMLのCanvas要素を使⽤し、ブラウザ上で図を描画を ⾏うHTML5の機能 • GatsbyJSのビルド時に画像⽣成したいので、サーバーサイドで動かし たい
• node-canvasというNode.jsモジュールがある • Canvas APIの機能がサーバーサイドでも利⽤できる
node-canvasを簡単に触ってみる
正⽅形を描画するコード例 • 描画したい位置の座標と図形の⼤きさを指定する
テキストを描画するコード例 • 描画したい位置の座標とテキストを指定する
⻑⽅形とテキストの描画を 組み合わせて画像を⽣成を実現
実装ハマりポイント
テキスト描画は座標計算との戦い
テキスト描画は座標計算との戦い • キャンバスサイズに収まるようにテキスト配置が必要 • ⾏間やフォントサイズの調整やテキストの折返しなどを ⾏う場合は描画位置の座標計算が必要 • CSSのありがたみをすごく感じる • レイアウトの柔軟性は乏しい
• テキストや画像の配置を柔軟に変えることは難しい
テキスト描画は座標計算との戦い • こんにちは。こんばんは。を描画した例 • キャンバスが400px、フォントサイズが48pxの 場合、幅は8⽂字しか⼊らない • テキストを”こんにちは。こん”と”ばんは。”に わけて、2⾏に分割して描画する必要がある •
measureText(text)を使⽤することで、引数に渡したテキストを描画す る際の幅や⾼さが分かる • 使⽤したフォントやフォントサイズによって、異なる計算結果が出る
停⽌しないタイムアウト処理
タイムアウト処理を追加 • 記事タイトルやフォントサイズはユーザー指定で⼊⼒する • テキストの⻑さやフォントサイズの値が⼤きい場合は計算に時間がか かることもある • ⼀定時間内に処理が終了しない場合にタイムアウトエラーを throwするようにした •
タイムアウト制御をPromise.race()で⾏うようにした • タイムアウトの時間はユーザー指定可能
停⽌しないタイムアウト処理 • Promise.race() は複数のPromise関数を実⾏して、最初に成功 か失敗したPromise関数の結果を得る • 画像⽣成関数の成功かタイムアウト関数の失敗のいずれかの結果を得 て、処理を終了したい
停⽌しないタイムアウト処理
停⽌しないタイムアウト処理 • ⾃分の書いたコードは画像⽣成関数もタイムアウト関数も双⽅ とも最後まで処理された • 本来であれば、⼀⽅の関数の結果が返却されたら、もう⼀⽅は停⽌し てほしい • Promise.race()は最初に成功か失敗したPromise関数の結果を 得たあとに、他のPromise関数の停⽌は保証されない
• つまり⾃分でもう⼀⽅の関数の処理を⽌める必要がある
正常なタイムアウト処理
今後の展望 • ライブラリをnpmに公開する • ライブラリを使って、GatsbyJSのプラグインを作りたい • Kanazawa.jsのコミュニティページで動作させる
さいごに • OGP画像の動的⽣成について紹介しました • 画像⽣成が⾃動化されて、楽をすることできた • OGP画像を⼿っ取り早く作成するにはCDN利⽤が良いと思う • カスタマイズ性を求めるならサーバーサイドでやるのもあり •
ソースコードはGitHubに公開しているので、興味がある⽅はご 覧ください • kentaro-m/generate-og-image