Web 開発時に確認したい項目を簡単に一覧できるダッシュボード的なものを作ってみた件

Web 制作の仕事中によく確認するブラウザシェアや画面解像度シェアのデータ、あるいは Web 標準やライブラリなどの公式ドキュメント、使うツールなんかへのリンク集をまとめた、ダッシュボード的なサイトを習作してみました。

週末に思い立って簡単に作ってみたシリーズですが、仕事してて現状の最新ブラウザバージョンっていくつだっけ? とか、ブラウザのシェアや画面解像度のシェアみたいのを確認することってたまにあるんですが、そういうのを 1つにまとめて簡単に確認できるページを作ってみました。

burnworks Dashboard

元々のきっかけは、react-chartjs-2 をお勉強がてらに使ってみたかったってのがあるんですが、マーケットシェアのデータは Statcounter Global Stats を参照させていただきつつ、自分が見たいデータだけをピックアップしてグラフ表示するようにしています。

ブラウザシェア

画面キャプチャ:Browser Share - burnworks Dashboard

画面解像度シェア

画面キャプチャ:Screen Resolution Stats - burnworks Dashboard

OS シェア

画面キャプチャ:OS Share - burnworks Dashboard

で、グラフだけだと寂しかったので、仕事関連でよく見るドキュメント類や、よく使うツール類へのリンク集も足しておきました。自分のブラウザのブックマークに保存されていて、直近で何回か閲覧したものに絞っていますので、多少偏りがあるかもしれませんが。

ドキュメントへのリンク集

画面キャプチャ:Documentation - burnworks Dashboard

便利ツールへのリンク集

画面キャプチャ:Tools - burnworks Dashboard

Next.js + Tailwind CSS でちゃちゃっと作って、Vercel にデプロイ。

グラフの描写は Chart.js v3 に react-chartjs-2 を組み合わせてますが、細かいところを気にしなければ簡単にグラフが作れて便利でした。

npm install --save chart.js react-chartjs-2

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?