バイブコーディングでnoteのビュー・コメント・スキを記録するアプリできます！知識０でもできる！

# note-log

note のアクセス状況 API（`filter=all`）を手動で取得し、日次スナップショットとしてローカル保存して推移を確認する Chrome 拡張（Manifest V3）です。

## インストール手順（ローカル）

1. Chrome で `chrome://extensions` を開く
2. 右上の「デベロッパーモード」を ON
3. 「パッケージ化されていない拡張機能を読み込む」をクリック
4. この `note-log/` ディレクトリを選択

## 使い方

1. note にログインする
2. `https://note.com/sitesettings/stats` を開く（全期間・`filter=all` 想定）
3. 拡張アイコンを押して「今日の統計を保存」
4. 「グラフを開く」で推移（全体 + 記事別）を確認

## 画面概要

- popup
- `https://note.com/sitesettings/stats` タブのときだけ「今日の統計を保存」が有効
- 「グラフを開く」で `dashboard.html` を開く
- dashboard
- 保存履歴の全体折れ線グラフ（PV/スキ/コメント）
- 記事選択 + 指標切替による記事別折れ線グラフ（read/like/comment）
- 最新日のランキング、増分ランキング（最新 - 前回）
- テーブル一覧（日付/PV/スキ/コメント/集計時刻）
- 全体CSV / 選択記事CSV エクスポート
- 全履歴削除

## 保存データ

- 保存先: `chrome.storage.local`
- キー: `history`
- 同日（JST）のデータは上書き
- 保存後は `date` 昇順で並び替え
- `notes`（記事別統計）も同日上書き時に更新

## 注意

- note 側の API 仕様変更で動かなくなる可能性があります
- 過剰アクセスを避け、1日1回程度の利用を想定しています
- データはローカル（`chrome.storage.local`）に保存されます

目的：
Chrome拡張（Manifest V3）を作成し、noteのアクセス状況ページをユーザーが手動で開いた状態で、
ボタン押下により stats API からJSONを取得し、日次スナップショットとして保存、拡張内で推移グラフ表示できるようにする。

前提：
- 既にディレクトリ note-log/ は作成済み
- ログインはユーザーが手動で行う
- ダッシュボードを開くのもユーザーが手動で行う
- APIは cookie 認証前提で、同一オリジン/拡張から credentials include で呼ぶ
- 取得対象API：
GET https://note.com/api/v1/stats/pv?filter=all&page=1&sort=pv
- 取得データのJSONはレスポンスの data から以下を利用：
total_pv, total_like, total_comment, last_calculate_at, note_stats[*].(id,key,name,read_count,like_count,comment_count)

作るもの：
1) Chrome拡張一式（MV3）
2) README.md（導入・使い方）
3) spec.md（仕様の正本）
4) history.md（変更履歴。初回はv0.1.0作成）

ディレクトリ構成（note-log/配下）：
note-log/
manifest.json
service_worker.js
popup.html
popup.js
dashboard.html
dashboard.js
lib/chart.umd.min.js ※Chart.jsを同梱（CDN禁止でOK）
README.md
spec.md
history.md
(任意) icon.png

実装要件：
A. popup（拡張アイコン押下で出る画面）
- 現在アクティブタブURLが https://note.com/sitesettings/stats で始まる場合のみ「保存」ボタンを有効化
- ボタン：
1) 「今日の統計を保存」：APIをfetch→正規化→chrome.storage.localに保存
2) 「グラフを開く」：dashboard.htmlを新規タブで開く
- fetchは必ず credentials: "include"
- エラーは alert で分かるように表示（HTTP statusも）

B. 保存データ形式（chrome.storage.local）
- key: "history" に配列で保存
- 1要素＝日次スナップショット
- 同日(date)が既に存在する場合は上書き
- 保存後は date 昇順ソート

スナップショット例：
{
"date": "YYYY-MM-DD" (JST 기준),
"fetched_at": ISO文字列,
"total_pv": number,
"total_like": number,
"total_comment": number,
"last_calculate_at": string,
"filter": "all",
"notes": [
{"id":..., "key":"...", "name":"...", "read_count":..., "like_count":..., "comment_count":...},
...
]
}

※JSTで日付を切ること（UTC跨ぎでズレないように）。
※filterはAPIクエリに合わせて固定で"all"でよい（将来拡張に備え保存はしておく）

C. dashboard（拡張内ページ）
- 保存済み history を読み、PV/スキ/コメントを折れ線グラフ表示（Chart.js）
- 併せてテーブルでも一覧表示（日付, PV, スキ, コメント, 集計時刻）
- ボタン：
1) CSVエクスポート（date,total_pv,total_like,total_comment,last_calculate_at）
2) 全履歴削除（confirmしてから storage を空配列にして reload）

D. Chart.jsの扱い
- lib/chart.umd.min.js を同梱して利用（npmでも手動DLでも可）
- 色の指定はしない（デフォルトでOK）

E. manifest.json
- manifest_version: 3
- permissions: storage, tabs
- host_permissions: https://note.com/*
- action.default_popup: popup.html
- background.service_worker: service_worker.js

F. README.mdに書くこと
- ローカルでのインストール手順（chrome://extensions → デベロッパーモード → パッケージ化されていない拡張機能を読み込む）
- 使い方：
1) noteへログイン
2) https://note.com/sitesettings/stats を開く（期間は全期間、filter=all想定）
3) 拡張を開き「今日の統計を保存」
4) 「グラフを開く」で推移確認
- 注意：
- API仕様変更で動かなくなる可能性
- 1日1回程度の利用を想定（過剰アクセスしない）
- データはローカル（chrome.storage.local）に保存される

G. spec.md（仕様の正本）
- 目的/スコープ（半自動、手動ログイン、手動取得）
- データソース（API URL、使用フィールド）
- データモデル（history配列、snapshot schema）
- 画面仕様（popup / dashboard）
- エラー方針（alert、ログイン切れ時の挙動）
- 将来拡張（filter切替、週次/月次集計、記事別ランキング推移など）を簡単に記載

H. history.md
- v0.1.0 (2026-03-01) 初版：取得・保存・グラフ・CSV・削除

実装の注意：
- fetchで403/401が出た場合は「ログイン状態を確認してください」と分かる文言を出す
- APIのレスポンス構造が想定外の場合（json.dataがない等）は明示エラー
- popup側でstatsページ以外ならボタンdisabledにする
- chart生成は1回だけ（再描画はreloadでOK）

最終確認（簡易テスト手順）：
1) 拡張を読み込む
2) noteログイン済みで /sitesettings/stats を開く
3) 拡張→「今日の統計を保存」→ alertでPV等が表示される
4) dashboard→グラフが表示される/テーブルが表示される
5) CSVエクスポートが動く
6) 全履歴削除が動く

目的（追加要件）：
既存の「全体（total_pv/like/comment）の日次保存」に加えて、
APIレスポンスの data.note_stats に含まれる「記事別の read_count/like_count/comment_count」も日次保存し、
dashboardで記事単位の推移を表示できるようにする。

前提：
- APIは既存どおり
GET https://note.com/api/v1/stats/pv?filter=all&page=1&sort=pv
- レスポンス例にある data.note_stats は記事配列
note_stats[*] の各要素には id, key, name, read_count, like_count, comment_count がある
- 既存の history 保存形式は維持する（後方互換）

実装方針：
A) 保存形式の拡張（後方互換）
- 既存 snapshot に "notes" が保存されている前提（もし未保存なら保存する）
- notes の各要素を以下の形に統一：
{
id: number,
key: string,
name: string,
read_count: number,
like_count: number,
comment_count: number
}
- 既存データに notes がない場合は dashboard 側で空配列として扱い落ちないようにする

B) dashboardに「記事別ビュー」を追加
- dashboard.html にUIを追加：
1) 記事選択ドロップダウン（select#noteSelect）
- optionは記事名（name）表示、valueは記事を一意に識別できるキー
- 一意キーは基本 key（例: "n1cc..."）を使用、なければ id
2) 指標選択（radio or select）
- "read_count" / "like_count" / "comment_count" を切替可能にする
3) 記事別グラフ用canvas（canvas#noteChart）
4) 期間内ランキング表示（任意だが便利）
- 最新日のnotesを元に read_count 上位N（例10）を表示するテーブル
- 可能なら「増分ランキング」（最新 - 前回）も表示（累積なので差分が価値高い）

C) 記事別の時系列データ生成
- history（複数日）から、選択された記事の時系列を作る
- 各日でその記事が notes に存在しない場合は null を入れて欠損扱い（グラフが切れる）
- 指標は選択に応じて read_count/like_count/comment_count をプロット

D) グラフ生成（Chart.js）
- 全体グラフ（既存）とは別に noteChart を作成
- 記事や指標切替時に再描画する必要があるので、
- 既存チャートインスタンスを保持し destroy() して作り直す
- もしくは dataset を差し替えて update()
のいずれかで実装する（簡単なのは destroy → new Chart）

E) 選択UIの初期値
- 初回表示時は、最新日の notes のうち read_count 最大の記事を自動選択すると使いやすい
- 指標はデフォルト read_count

F) CSVエクスポート（追加）
- 既存の全体CSVは維持
- 追加で「選択中の記事の推移CSV」ボタンを用意する（任意だが推奨）
- 列：date, note_key(or id), name, read_count, like_count, comment_count
- 出力は選択記事の時系列に合わせる

G) spec.md / history.md 更新
- spec.md に「記事別推移」機能追加を記載
- 保存スキーマ notes
- dashboardの追加UIと機能
- 欠損日の扱い（null）
- history.md に v0.2.0 として追記（2026-03-01でOK）
- 記事別の保存と可視化、選択UI、ランキング（実装した範囲を書く）

注意点（重要）：
- APIの page=1 は上位記事のみが返る可能性がある。
将来 page を巡回して全記事取得したくなるが、今回は要件外。
現状は「取得できたnote_stats分を記録する」仕様で良い。
- 同日上書き保存時は notes も含めて上書きされること
- dashboardは notes が無い履歴データでも落ちないこと（後方互換）

受け入れ確認（追加テスト）：
1) 保存実行後、chrome.storage.local の history の最新要素に notes が入っていること
2) dashboardに記事セレクタが出ること
3) 記事を切り替えるとグラフが変わること
4) 欠損日があっても落ちず、グラフがnullで途切れること
5) （実装した場合）ランキングが表示されること