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.2k
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
670
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
900
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
340
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuously measure my website performance!!!
kentarom
2
480
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
760
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
680
AWSの既存サービスを活用して、 障害検知・復旧を迅速化するカラクリ / JAWS-UG Kanazawa x OpsJAWS
kentarom
2
4.6k
DMM.comの認証基盤を支えるエラー通知の仕組み / AWS Dev Day Tokyo 2018 Lightning Talk
kentarom
2
13k
Other Decks in Programming
See All in Programming
◯◯エンジニアになった理由
gessy0129
PRO
0
590
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.2k
Removing Corepack
yosuke_furukawa
PRO
9
1.1k
"Swarming" をコンセプトに掲げるアジャイルチームのベストプラクティス
boykush
2
170
Iteratorでページネーションを実現する
sonatard
3
700
5年分のツケを一気に払った話
soogie
3
1.1k
CSC305 Lecture 01
javiergs
PRO
1
140
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
170
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
250
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
150
"noncopyable types" の使いどころについて考えてみた
andpad
0
130
AWS Lambda Web Adapterを活用する新しいサーバーレスの実装パターン
tmokmss
6
5.4k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Producing Creativity
orderedlist
PRO
341
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
30
2.6k
Building Adaptive Systems
keathley
37
2.1k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
Code Review Best Practice
trishagee
62
16k
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