Chart.js が簡単に使えるようになっていたので OGP 画像生成に使った話

2026.6.3 toranoana.deno #25 登壇資料

Transcript

1. Chart.js が簡単に使えるようになっていたので OGP 画像生成に使った話 2026.06.03 toranoana.deno #25 すずとも / kamekyame
2. 自己紹介 すずとも / subname: kamekyame 株式会社 jig.jp フロントエンドエンジニア 福井在住 Deno、Angular 2 @SuzuTomo2001 @kamekyame kamekyame.com
3. Deno + Chart.js 3
4. Chart.js とは JavaScript でチャートを書くためのライブラリ Canvas を使って描画される 4 https://www.chartjs.org/docs/latest/samples/line/line.html https://www.chartjs.org/docs/latest/samples/other-charts/doughnut.html
5. Deno + Chart.js だけではチャートを作れない サーバー用のランタイムには Canvas API がない → Canvas API 互換のライブラリ を組み合わせる必要がある Deno 用に Canvas API を実装したライブラリがある JSR “canvas” 🔎 で出てきたいくつかのライブラリで使ってみたが… jsr:@gfx/canvas@0.5.8 ❌ jsr:@gfx/canvas-wasm@0.4.2 ❌ jsr:@josefabio/deno-canvas@1.5.2 ❌ 5
6. Deno + Chart.js だけではチャートを作れない npm もいくつか試してみて… npm:canvas@2.11.0 ❌ npm:skia-canvas@3.0.8 ❌ nodeModulesDir: “auto” にしてと言われるし、しても動かない :( 6 npm:@napi-rs/canvas@1.0.0 🎉 nodeModulesDir の設定も不要！
7. Deno + Chart.js + @napi-rs/canvas の使い方 7 github.com/kamekyame/deno-chartjs-sample
8. Deno + Chart.js + @napi-rs/canvas の使い方 8 github.com/kamekyame/deno-chartjs-sample
9. とても簡単 😙 9
10. 活用した事例を紹介 10
11. crux-feed　github.com/kamekyame/crux-feed CrUX : Chrome UX Report LCP、INP、CLS（Core Web Vitals で使われる指標）など 実際のユーザー環境 で測定&集計したものがデータとして公開 CrUX Viz という可視化ツールはある→ 変化を Slack で 継続的に監視 したい！ → RSS Feed として配信しよう Deno Deploy でホスト 11
12. crux-feed の機能 CrUX API から得られるデータを XML 形式にして返すだけ /feed subscribe https://crux-feed.kamekyame.deno.net/?view=cwvsummary&url=https://deno.com/&identifier=url 12 OGP 画像の作成に Chart.js を使用
13. OGP 画像はアクセス時に作成 OGP に指定している画像 URL https://crux-feed.kamekyame.deno.net/i?url=https://deno.com https://crux-feed.kamekyame.deno.net/i?url=https://nodejs.org/ja 13 deno.com nodejs.org/ja
14. まとめ Chart.js + @napi-rs/canvas を使えば Deno でもチャート作成ができる Node & npm 互換性向上 のおかげ いつから動くようになったんだろう？ この組み合わせを crux-feed に活用しました Deno Deploy 上でも問題なく動くことを確認済み ファイルから フォント読み込みもできました（数字には Roboto を使っています） よかったら使ってください！ CrUX Viz とクエリパラメータがほぼ互換なので、ドメイン名を変えれば使えます！ 14