Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Deno + Chart.js 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

とても簡単 😙 9

Slide 10

Slide 10 text

活用した事例を紹介 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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