Chart.js が簡単に使えるようになっていたので OGP 画像生成に使った話 2026.06.03 toranoana.deno #25 すずとも / kamekyame 

自己紹介 すずとも / subname: kamekyame 株式会社 jig.jp フロントエンドエンジニア 福井在住 Deno、Angular 2 @SuzuTomo2001 @kamekyame kamekyame.com 

Deno + Chart.js 3 

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 

Deno + Chart.js だけではチャートを作れない サーバー用のランタイムには Canvas API がない → Canvas API 互換のライブラリ を組み合わせる必要がある Deno 用に Canvas API を実装したライブラリがある JSR “canvas” 🔎 で出てきたいくつかのライブラリで使ってみたが… jsr:@gfx/[email protected] ❌ jsr:@gfx/[email protected] ❌ jsr:@josefabio/[email protected] ❌ 5 

Deno + Chart.js だけではチャートを作れない npm もいくつか試してみて… npm:[email protected] ❌ npm:[email protected] ❌ nodeModulesDir: “auto” にしてと言われるし、しても動かない :( 6 npm:@napi-rs/[email protected] 🎉 nodeModulesDir の設定も不要！ 

Deno + Chart.js + @napi-rs/canvas の使い方 7 github.com/kamekyame/deno-chartjs-sample 

Deno + Chart.js + @napi-rs/canvas の使い方 8 github.com/kamekyame/deno-chartjs-sample 

とても簡単 😙 9 

活用した事例を紹介 10 

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 

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 を使用 

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 

まとめ Chart.js + @napi-rs/canvas を使えば Deno でもチャート作成ができる Node & npm 互換性向上 のおかげ いつから動くようになったんだろう？ この組み合わせを crux-feed に活用しました Deno Deploy 上でも問題なく動くことを確認済み ファイルから フォント読み込みもできました（数字には Roboto を使っています） よかったら使ってください！ CrUX Viz とクエリパラメータがほぼ互換なので、ドメイン名を変えれば使えます！ 14