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
770
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
1k
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
400
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuously measure my website performance!!!
kentarom
2
550
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
820
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
760
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
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
130
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
PT AI без купюр
v0lka
0
200
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
580
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
がんばりすぎないコーディングルール運用術
tsukakei
1
190
漸進。
ssssota
0
1.2k
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
100
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.5k
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Optimizing for Happiness
mojombo
378
70k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Unsuck your backbone
ammeep
671
58k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Producing Creativity
orderedlist
PRO
346
40k
KATA
mclloyd
29
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
What's in a price? How to price your products and services
michaelherold
245
12k
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