【ブラウザ拡張機能】noteダッシュボードでビューのランキング上位20を表示

はじめに

これまでに、noteのダッシュボードからデータを自動で取得してCSV保存する機能や、全記事数をカウントする機能を作成してきました。

そして今回は、前回の予告通り「集計完了と同時に、ビュー（PV）数のランキング上位20記事を美しい棒グラフで画面上に直接表示する機能」をブラウザ拡張機能に追加しました！

CSVを開いてExcelで並び替える手間すら省き、ツールを動かしたその場で「どの記事が伸びているのか」を一目で確認できる仕組みです。

🎥 実際の動いている様子（動画デモ）

まずは、実際にダッシュボード上でデータ取得からグラフ描画までを行う動画をご覧ください！

データ取得完了後、画面全体が薄暗くなり（オーバーレイ表示）、中央に「ビュー数TOP20」の美しい棒グラフがパッと浮かび上がります。

右上の「閉じる」ボタンを押せば、すぐに元の画面に戻ることができます。

🛠️ グラフ表示を実現する3つの技術的ポイント

今回の機能拡張にあたって採用した設計やテクニックの裏側を、大きく3つのポイントに分けてご紹介します。

1. 外部ライブラリ「Chart.js」の活用

Web上で綺麗なグラフを描画するために、世界的にもよく使われているJavaScriptライブラリ「Chart.js」を採用しました。

拡張機能内で動作させるため、CDN（[https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js](https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js)）からスクリプトファイルをローカルにダウンロードし、プロジェクト内に組み込んで読み込ませています。

中身の複雑な描画計算ロジックを自分で一から書く必要はなく、ライブラリが用意してくれている枠組みを利用するだけで直感的なグラフが作れます。

2. 過去に紹介した「モーダル（オーバーレイ）画面」の再利用

グラフを画面上に綺麗に見せるため、以前作成した「モーダルウィンドウ」の仕組みをそのまま応用しました。

• 背景を半透明の黒で薄暗くし、メインのグラフに視線を集中させる

• 画面右上に直感的に押せる「閉じる」ボタンを設置する

「過去に一度作ったUIの仕組み（オーバーレイ）」のポップアップ部分を「グラフ表示領域」に差し替えただけの設計です。

一度作った仕組みを別の用途に再利用（パーツ化）していくことで、開発スピードは一気に上がります。

3. タイトル長による「レイアウト崩れ」の防衛策

noteの記事タイトルは長くなりがちです。

そのままグラフの軸ラベルに長いタイトルを表示してしまうと、文字が溢れてグラフ全体のレイアウトが崩れてしまいます。

これを防ぐため、一定の文字数（例：15文字など）を超えたタイトルは自動で切り詰め、末尾に「...」を付与してカットする処理（文字列トリミング）を入れました。

こうした「ちょっとした表示上の配慮」を入れるだけで、ツールの完成度が一段上がります。

💡 グラフ描画は「穴埋めパズル」感覚でOK

「グラフを描く」と聞くと数学的で難しそうに感じるかもしれませんが、実際のプログラム（Chart.jsの設定）は「用意された定型フォーマット（穴）に必要な値（ラベルや数値）を当てはめていく穴埋めパズル」のような感覚です。

構造さえ把握してしまえば、あとはパラメータの数値を調整するだけ。

理屈を難しく考えすぎず、「型通りに当てはめれば動く」割り切りも個人開発の時間創出においては非常に大切だと実感しました。

🚀 次回予告：二軸グラフ化へ挑戦！

今回は「ビュー数」単体のランキング表示でしたが、noteの分析で本当に重要なのは「ビューに対してどれだけスキが付いたか（スキ率・反応率）」です。

そこで次回は、1つのグラフの中に「ビュー数」と「スキ数」の両方を並べて比較できる『二軸グラフ表示』への機能拡張に挑戦します！

📢 【Amazon1位獲得】あなたのPCを「自動化の武器」に変える一冊

こうした日常の泥臭い手作業やデータ収集をプログラムで自動化し、自分だけの「圧倒的な時間」を生み出す思考法をまとめた新刊『PC魔改造術』が、おかげさまでAmazonキャリア1位を獲得🥇しました！

PythonやVBA、ブラウザ自動化を駆使して「1時間の作業をボタン一発で終わらせる」ノウハウを徹底解説しています。効率化で自分の時間を取り戻したい方は、ぜひKindle本をチェックしてみてください！

👤 最後に：フォロー＆スキをお願いします！

この記事が「参考になった！」「グラフ表示かっこいい」「次回の二軸グラフも見たい」と思った方は、ぜひスキ（いいね）とフォロー、そしてご感想のコメントをいただけると大変励みになります！

みなさんは自分の記事を分析するとき、どの数字（PV・スキ・読了率など）を一番重視していますか？ぜひコメント欄で教えてください！