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.3k
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
750
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
980
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
380
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuously measure my website performance!!!
kentarom
2
530
Actions ToolkitではじめるGitHub Action開発 / Getting started creating a GitHub Action with Actions Toolkit
kentarom
2
1.9k
GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist
kentarom
1
800
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
740
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
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
290
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
Swift Testingのモチベを上げたい
stoticdev
2
200
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
830
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.3k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.8k
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
130
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
ML.NETで始める機械学習
ymd65536
0
240
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
750
Jakarta EE meets AI
ivargrimstad
0
650
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
GitHub's CSS Performance
jonrohan
1030
460k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Speed Design
sergeychernyshev
28
820
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Rails Girls Zürich Keynote
gr2m
94
13k
Six Lessons from altMBA
skipperchong
27
3.6k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Become a Pro
speakerdeck
PRO
26
5.2k
A designer walks into a library…
pauljervisheath
205
24k
Designing Experiences People Love
moore
140
23k
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