はじめに
私は以前ブログサービスのnoteで記事を書いていたのですが、note公式で実装されているクリエイター向け統計画面（ダッシュボード）には「固定された期間の数字しか見られない」「記事を横断して推移を見られない」という不満をずっと感じていました。
「これ、自分で作った方が早いのでは」と思い立ち、2025年にnoteの記事統計（PV・スキ・コメント数）を自動収集してグラフで可視化するiOSアプリとして Advanced Dashboard for note をリリースしました。
しかし、当時はネットワーク・バックエンド・DBの知識がほとんどないiOSエンジニアだったため、WebViewとRealmSwiftでiPhone内のローカル処理しか実装できず、結局バグ修正やUX向上を図れずに放置してしまうという苦い経験になりました。
そこから時は進んで2026年3月にJISOUというエンジニアコミュニティに加入し、React・TypeScriptのアウトプット学習を続けています。
そこで学習を続けるうちに、以前失敗したアプリのリベンジを図りたくなり、 Web版 Advanced Dashboard for note の開発を今回行いました。
- Chrome拡張機能で note にログイン中のセッションを使って統計データを取得
- バックエンドAPIに送信・蓄積
- Webダッシュボードで推移グラフ・記事別ランキングとして可視化
という3リポジトリ構成のサービスです。この記事では、何を作ったか・どう作ったか・どこで詰まったかを振り返りとしてまとめます。
Note: 本サービスは非公式のファンサービスであり、note株式会社および note 公式サービスとは一切関係ありません。
- Webアプリ: https://ad4n.dev/
- Chrome拡張機能: https://chromewebstore.google.com/detail/advanced-dashboard-for-no/jghfekmichjnabnglepmiapkffgflonl
アプリについて
noteにはクリエイター向けの統計画面がありますが、記事ごとの推移を横断的に分析することはできません。Advanced Dashboard for noteは、Chrome拡張機能でnoteの非公開APIから統計・記事情報を取得し、自前のAPIに蓄積した上で、Webダッシュボード上でグラフ・テーブルとして見られるようにするサービスです。
主な機能
- 推移タブ: ビュー・コメント数などの日次推移を折れ線グラフで表示
- 記事別タブ: 記事ごとの統計を棒グラフ・テーブルで表示（並び替え・ページネーション対応）
- デモページ: 会員登録前でもモックデータでダッシュボードを体験可能
- Clerkによる会員認証: サインアップ・ログイン
- Chrome拡張機能からのワンクリック取得: ポップアップを開いて実行するだけで、progressバー付きで取得〜送信が完了
全体の構成
3つのリポジトリで構成しています。
- advanced-dashboard-for-note-api - バックエンドAPI
- advanced-dashboard-for-note-web - Webダッシュボード
- advanced-dashboard-for-note-crx - Chrome拡張機能
画面構成
| トップページ | 日次統計ページ |
|---|---|
 |
 |
| 記事別統計ページ | Chrome拡張機能 |
 |
 |
技術スタック
| リポジトリ | 主な技術 |
|---|---|
| API | Hono, Cloudflare Workers(wrangler), Drizzle ORM, Neon(PostgreSQL), Zod + OpenAPI, Swagger UI, Clerk, Vitest |
| Web | React 19, React Router v7, Mantine, openapi-fetch, openapi-typescript |
| Chrome拡張機能 | React 19, @crxjs/vite-plugin (Manifest V3), Zod, dayjs |
3リポジトリともpnpmで管理し、APIのOpenAPIスキーマからWeb・拡張機能側の型をopenapi-typescriptで自動生成することで、バックエンド⇄フロントエンドの型を手動同期せずに済むようにしています。
開発の流れ
- APIの土台づくり（5月上旬）: Hono + Drizzle ORM + Neonで基盤構築、Docker→Neon直結に切り替え
- APIのCRUD実装（5月中旬）: users/articles/statsのエンドポイントとZod + OpenAPIによるスキーマ定義
- Webダッシュボードの立ち上げ（5月下旬）: React Router + Mantineでルーティングとチャート表示を実装、openapi-typescriptでAPI型を自動生成
- Chrome拡張機能の着手（5月末〜6月頭）: Clerkによる認証機能から実装開始
- 統計送信フローの実装（6月中旬）: 拡張機能からの統計送信、前回取得日時との比較による差分更新、APIのN+1クエリ問題の修正
- Webの機能拡充（6月下旬）: サインアップ、利用規約、並び替え・ページネーション
- ランディングページ・CI/CD整備（7月頭）: デモページ、Cloudflare Workersへのデプロイ自動化、Observability対応
- 3リポジトリの認証統合（7月頭）: Clerkのsession共有（syncHost）でWebアプリと拡張機能を接続、リリース仕上げ
一番密度が高かったのは終盤（7月3日〜5日）で、WebとChrome拡張機能の認証まわりを統合する作業に一気に時間を使いました。
こだわった・工夫した点
1. 認証とクラウドDBで、複数デバイス間でのデータ共有に対応
これはiOS版の反省から、必ずマルチデバイス利用に対応させると決めていました。
現在はWeb版とChrome拡張機能のみで実質1セットですが、将来Swift製のiOSアプリにもClerkの認証とAPIを容易に統合できる設計を心がけました。
2. ブックマークレットではなくChrome拡張機能による取得を採用
ユーザーセッションからAPIを叩くアプリは、情報取得にブックマークレットを採用していることが多いと思いますが、私はChrome拡張機能を採用しました。
採用理由は、
- ブックマークレットの導入自体があまりとっつきやすくない
- 将来的にService Workerからブラウザ起動時に自動取得処理を入れられる
の2点です。
3. OpenAPI駆動での型連携
API側で@hono/zod-openapiを使ってZodスキーマからOpenAPIドキュメントを生成し、Web・拡張機能側はopenapi-typescriptでその型を取り込む構成にしました。モノレポにせず3リポジトリを分けたままでも、APIのレスポンス型がフロント側にそのまま反映されるので、手動での型合わせが発生しません。
4. Clerkのセッション共有（syncHost）
WebアプリとChrome拡張機能はOriginが異なる（ad4n.dev と chrome-extension://...）ため、そのままではClerkのProduction Keyが弾かれます。syncHost方式でCookieベースにセッションを共有し、ログイン・ログアウトのUIはWebアプリ側に寄せることで解決しました。
苦労したこと・詰まったこと
今まで仕事も含めてモノレポでしか開発したことがなかったので、複数リポジトリにまたぐ開発は苦労の連続でした。
一つ一つのリポジトリのコード量は大したことがなくても、リポジトリ間の統合調整や複数のインフラの設定に時間がかかったことで、見積より長い開発時間がかかってしまったのが反省点です。
また、技術的な面では、主に下記のような詰まりポイントがありました。
- StatsのGETがN+1クエリで劣化していた問題: 記事数分だけクエリが飛んでいて、4日分の取得に80秒かかっていました。JOIN + GROUP BYに寄せて解消しました。
-
Cloudflare Workersのデプロイが
packages field missing or emptyで落ちる:pnpm approve-buildsが生成したpnpm-workspace.yamlをCloudflare側がモノレポと誤認識していましたが、これをすぐに発見できずに右往左往しました。 - Clerk × Chrome拡張機能のProduction認証で3段階詰まる: syncHostの導入、Client Trustによるルーティングの崩壊、確認メール二重送信、と立て続けに問題が出ました
今後の展望
- 記事タグ別・期間別など、もう少し切り口を増やした分析機能
- ブラウザ起動時に自動取得処理
- 昨年リリースしたiOSアプリ版を、今回のリリースしたAPI利用する形に改修
おわりに
3つのリポジトリを横断して、認証・データ収集・可視化を一通り自分で組み上げてみて、「複数のOriginやドメインをまたぐサービスは、単体のWebアプリを作るのとは別種の難しさがある」というのが一番の実感でした。特にClerkの認証まわりは、Web単体なら数十分で終わる設定が、拡張機能を絡めた途端に丸3日かかる、みたいなことがざらにありました。
同じようにChrome拡張機能とWebアプリを組み合わせたサービスを作ろうとしている方の参考になれば幸いです。