Advanced Dashboard for note
ブログサービス「note」のクリエイター向け統計画面を拡張して、より詳細に情報を蓄積できるようにしたファンサービスです。
- ROLE
- 企画・設計・API・フロントエンド・Chrome 拡張機能（個人開発）
- PERIOD
- 2026.05 – 2026.08
- STACK
- Hono / Cloudflare Workers / Drizzle ORM / Neon / React / React Router / Mantine / Clerk / Chrome Extension
OVERVIEW
概要
ブログサービス「note」のクリエイター向け統計画面を拡張して、より詳細に情報を蓄積できるようにしたファンサービスです。API・Web アプリ・Chrome 拡張機能の 3 つのリポジトリで構成しています。
- Clerk による認証を React アプリと Chrome 拡張機能で共有
- 記事のビュー・いいね数などの日次推移を折れ線グラフで表示
- Chrome 拡張機能から、note 内の統計情報をワンクリックで取得
デモのリンクは、Web アプリ内の統計表示のサンプルページです。
SOLUTION
実装のポイント
複数デバイス間でのデータ共有
認証とクラウド DB を組み合わせ、複数デバイス間でデータを共有できるようにしました。
認証サービスには、SDK が充実している Clerk を採用しました。過去に Realm を使って 1 端末専用で開発してしまった Swift 製の iOS アプリ版も、将来的に統合できるようにするためです。
スキーマ駆動開発
複数のリポジトリ間で API のスキーマ型を共有するため、Zod + OpenAPI によるスキーマ駆動開発で進めました。どのリポジトリでも型安全に開発でき、Web 版と 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 |
LINKS