週末に思い立って簡単に作ってみたシリーズですが、仕事してて現状の最新ブラウザバージョンっていくつだっけ? とか、ブラウザのシェアや画面解像度のシェアみたいのを確認することってたまにあるんですが、そういうのを 1つにまとめて簡単に確認できるページを作ってみました。
元々のきっかけは、react-chartjs-2 をお勉強がてらに使ってみたかったってのがあるんですが、マーケットシェアのデータは Statcounter Global Stats を参照させていただきつつ、自分が見たいデータだけをピックアップしてグラフ表示するようにしています。
ブラウザシェア
画面解像度シェア
OS シェア
で、グラフだけだと寂しかったので、仕事関連でよく見るドキュメント類や、よく使うツール類へのリンク集も足しておきました。自分のブラウザのブックマークに保存されていて、直近で何回か閲覧したものに絞っていますので、多少偏りがあるかもしれませんが。
ドキュメントへのリンク集
便利ツールへのリンク集
Next.js + Tailwind CSS でちゃちゃっと作って、Vercel にデプロイ。
グラフの描写は Chart.js v3 に react-chartjs-2 を組み合わせてますが、細かいところを気にしなければ簡単にグラフが作れて便利でした。
npm install --save chart.js react-chartjs-2