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.js module for generating Open Graph image
Search
Kentaro Matsushita
January 19, 2020
Programming
1
7k
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
630
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
840
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
310
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuously measure my website performance!!!
kentarom
2
460
Actions ToolkitではじめるGitHub Action開発 / Getting started creating a GitHub Action with Actions Toolkit
kentarom
2
1.7k
GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist
kentarom
1
730
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
640
AWSの既存サービスを活用して、 障害検知・復旧を迅速化するカラクリ / JAWS-UG Kanazawa x OpsJAWS
kentarom
2
4.5k
DMM.comの認証基盤を支えるエラー通知の仕組み / AWS Dev Day Tokyo 2018 Lightning Talk
kentarom
2
13k
Other Decks in Programming
See All in Programming
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
380
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Temporalを取り巻く仕様を整理する
sajikix
0
120
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
유연한 Composable 설계
l2hyunwoo
0
380
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
小さな開発会社を作った理由
polidog
0
1.9k
Featured
See All Featured
Docker and Python
trallard
37
2.9k
Web development in the modern age
philhawksworth
203
10k
Happy Clients
brianwarren
94
6.6k
Fireside Chat
paigeccino
25
2.8k
What's in a price? How to price your products and services
michaelherold
239
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
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