[{"data":1,"prerenderedAt":234},["ShallowReactive",2],{"content-/dev-top-series-progress-heatmap":3,"all-pages-for-dir":211,"related-/dev-top-series-progress-heatmap":212,"og-image-/dev-top-series-progress-heatmap":233},{"id":4,"title":5,"body":6,"category":191,"concepts":192,"description":193,"extension":194,"meta":195,"navigation":196,"ogImage":192,"path":197,"project_name":198,"published":199,"publishedAt":200,"seo":201,"source":202,"stem":203,"tags":204,"todo":192,"unpublished":199,"updatedAt":192,"__hash__":210},"pages/2026-10/2026-10-07/dev-top-series-progress-heatmap.md","開発環境だけの制作ダッシュボードを作り、コミット数をGitHubの草のような緑の濃淡で見せる",{"type":7,"value":8,"toc":181},"minimark",[9,13,17,21,24,34,37,40,44,52,55,72,75,78,103,110,114,117,123,131,135,138,144,147,158,161,164,175,178],[10,11,5],"h1",{"id":12},"開発環境だけの制作ダッシュボードを作りコミット数をgithubの草のような緑の濃淡で見せる",[14,15,16],"p",{},"教材サイト（eurekapu-nuxt4）では、Excel講座の動画制作や画面再現、財務諸表講座など、いくつものシリーズを並行して作っている。\nどれも最近作り始めたものだと思っていた。\nでは、それは何日前で、それぞれ何日かかっているのか。\n朝、まずそれを Claude Code に調べてもらい、続けて、そうした数字を開発環境の専用画面で見られるようにしてもらった。\n画面を頼んだときには、少し気分を盛り上げたい、とも付け足している。",[18,19,20],"h2",{"id":20},"何日前から作っているのか",[14,22,23],{},"11時53分に始めた mdx-playground 側のセッションで、制作中のカードが並ぶ画面のスクリーンショットを貼って、次の2つを尋ねた。",[25,26,27,31],"ul",{},[28,29,30],"li",{},"何日前から作り始めたか",[28,32,33],{},"それぞれ今何日ぐらいかかっているか",[14,35,36],{},"Claude Code には、最初に origin との差がないことを確かめてもらった。\nそのうえで画面のカードがどこで定義されているかを探させ、eurekapu-nuxt4 の git 履歴からシリーズ別に初回の日付と作業した日数を出させた。\nコミットメッセージの側からも裏を取らせている。",[14,38,39],{},"返ってきた表の列は「始めた日」「何日前」「作業した日数」「コミット数」「最後に触った日」だった。\n今日（10月7日）の時点で、いちばん古いのは「動画制作」で、9月22日に始めていて15日前になる。\nいちばん新しいのは「財務諸表講座」で、10月3日に始めていて4日前になる。",[18,41,43],{"id":42},"トップから開発用の表示を外してヘッダーにリンクを置く","トップから開発用の表示を外して、ヘッダーにリンクを置く",[14,45,46,47,51],{},"5分後の11時58分、今度は eurekapu-nuxt4 のセッションを開いて画面の作り替えを頼んだ。\nその時点では、開発環境のトップページ（",[48,49,50],"code",{},"http://localhost:3200/","）に、開発環境でだけ表示する制作中シリーズの一覧が載っていた。\n開発環境だけに出すのはそれでよい。\n変えたかったのは、置き場所のほうだった。",[14,53,54],{},"頼んだ内容は次のとおり。",[25,56,57,60,63,66,69],{},[28,58,59],{},"ヘッダーの右側にある「ログイン」の少し左に、開発用の画面へ移るリンクを1つ置く",[28,61,62],{},"トップページには開発用の表示を残さない",[28,64,65],{},"リンク先には、Excel講座の動画制作や画面再現など、制作中のシリーズをカードで並べる",[28,67,68],{},"完了か未了かの表示は助かっているので残す",[28,70,71],{},"ガントチャートに近い形で、いつ始めたか、どれぐらい作業しているか、最後に触ったのはいつか、進捗はどうかを一覧で見たい",[14,73,74],{},"最後の項目は、11時53分に調べてもらった表の列とほぼ重なっている。",[14,76,77],{},"Claude Code に任せた作業は、次の順に進んだ。",[79,80,81,84,87,90,97,100],"ol",{},[28,82,83],{},"既存の制作ページと、データの置き場所を調べる",[28,85,86],{},"git 履歴から各シリーズの開始日と作業日数を取れるかを確かめる",[28,88,89],{},"git 履歴を集計する純粋関数と API を書く",[28,91,92,93,96],{},"カード、タイムライン、",[48,94,95],{},"/dev"," ページ本体を書く",[28,98,99],{},"トップページから開発用のセクションを外す",[28,101,102],{},"分類ルールを1点直して、作業記録の集計を確かめる",[14,104,105,106,109],{},"できあがったのは、制作ダッシュボード ",[48,107,108],{},"http://localhost:3200/dev"," である。\nトップページの開発用の表示はすべて外れ、ヘッダーの「ログイン」の左に「開発」ボタンが付いた。\nこのボタンは開発環境にしか出ない。",[18,111,113],{"id":112},"chrome-devtools-が応答しなかったとき","Chrome DevTools が応答しなかったとき",[14,115,116],{},"描画を確かめる段階で、ブラウザ確認に使う Chrome DevTools が応答しなかった。\nそこで Playwright に切り替えてもらい、先に描画を確かめた。\nPC 幅（1440px）とスマホ幅（390px）でスクリーンショットを撮り、コンソールにエラーが出ていないこと、横にはみ出していないことを確かめている。",[14,118,119,120,122],{},"そのあと、応答が遅れていた Chrome DevTools がつながった。\nChrome の前面タブ（11番）で ",[48,121,95],{}," を開き、実機の Chrome でも同じ画面を確かめてもらった。",[25,124,125,128],{},[28,126,127],{},"タイムラインは「すべて」の行を含めて7行と、目盛りの行が出ている",[28,129,130],{},"6シリーズの進捗と、連続作業「6日」の表示が、Playwright で見たときと同じ値になっている",[18,132,134],{"id":133},"コミット数を棒の高さから緑の濃さへ","コミット数を、棒の高さから緑の濃さへ",[14,136,137],{},"最初の版のタイムラインは、コミット数をグラフの高さで表していた。\n画面を見て、次のように返した。",[139,140,141],"blockquote",{},[14,142,143],{},"ありがとう。これコミットの数、グラフの高さにするんじゃなくて、GitHubで言うところのグリーンの濃さとかにしませんか？",[14,145,146],{},"これを受けて、タイムラインは GitHub の草と同じ1日1マスの緑の濃淡に変わった。",[25,148,149,152,155],{},[28,150,151],{},"各シリーズの始めた日から最後に触った日まで、毎日1マスずつ並べる",[28,153,154],{},"作業のない日は薄い灰色のマスにする",[28,156,157],{},"マスの濃淡に合わせて、凡例と「直近7日」のマスも緑に揃える",[14,159,160],{},"Chrome のタブ11で再読み込みして確かめ、コンソールにエラーも警告も出ていないことまで見てもらった。",[18,162,163],{"id":163},"学びメモ",[25,165,166,169,172],{},[28,167,168],{},"11時53分に聞いた「何日前に始めて、何日かかっているか」と、5分後に常設の画面へ求めた項目は、ほぼ重なっていた",[28,170,171],{},"ブラウザ確認の経路が1本応答しなくても、別の経路（Playwright）で先に確認を済ませ、つながったあとに実機で同じ値が出るかを見比べればよい",[28,173,174],{},"コミット数の見せ方は、最初の版を見てから決め直した。棒の高さで一度出してから、緑の濃淡へ変えている",[18,176,177],{"id":177},"振り返り",[14,179,180],{},"動画制作を始めた9月22日から数えると、今日で15日になる。\n始めた日から最後に触った日まで、マスは1日も飛ばさずに並ぶ。\n作業のない日は灰色のまま残る。\n少し気分を盛り上げたいという最初の頼みに緑のマスが応えるかどうかは、これから先のマスの色で決まる。",{"title":182,"searchDepth":183,"depth":183,"links":184},"",2,[185,186,187,188,189,190],{"id":20,"depth":183,"text":20},{"id":42,"depth":183,"text":43},{"id":112,"depth":183,"text":113},{"id":133,"depth":183,"text":134},{"id":163,"depth":183,"text":163},{"id":177,"depth":183,"text":177},"dev",null,"教材サイトの開発環境トップにあった制作中シリーズの一覧を専用ページへ移し、ヘッダーに開発環境限定のリンクを置いた。各シリーズを何日前に始めて何日かかっているかを git 履歴から調べ、コミット数の表示を棒の高さから1日1マスの緑の濃淡に変えた記録。","md",{},true,"/dev-top-series-progress-heatmap","eurekapu-nuxt4",false,"2026-10-07T00:00:00.000Z",{"title":5,"description":193},"make-diary","2026-10/2026-10-07/dev-top-series-progress-heatmap",[205,206,207,208,209],"Nuxt","開発環境","git","ダッシュボード","Playwright","9nd4V1KkAhp0RXcdHXtfHE4oofE_cmeBsthaold8pYY",[],[213,217,221,225,229],{"title":214,"path":215,"publishedAt":216},"形骸化した学習ゲートをやめ、pre-commitでCodexのコードレビューを自動化した","/codex-commit-review-gate","2026-09-14T00:00:00.000Z",{"title":218,"path":219,"publishedAt":220},"Windows Defenderの除外でNuxtのビルドは半分になったが、記事のプリレンダーは16%しか縮まなかった","/deploy-speed-defender-and-repo-push-audit","2026-08-19T00:00:00.000Z",{"title":222,"path":223,"publishedAt":224},"dev サーバーを止めずにデプロイできるよう、Nuxt のビルド出力先と Content DB を分けた","/deploy-while-dev-running","2026-07-31T00:00:00.000Z",{"title":226,"path":227,"publishedAt":228},"自作会計システムに消費税を通した日。composable の await 連続で Nuxt コンテキストが消えた","/accounting-system-consumption-tax-phase6","2026-07-30T00:00:00.000Z",{"title":230,"path":231,"publishedAt":232},"herdr Windowsベータ導入とFeliCa勤怠構想、Claude Code警告の退治まで — 開発ツールと環境整備の一日","/herdr-felica-and-env-fixes","2026-07-15T00:00:00.000Z","https://log.eurekapu.com/og/blog/dev-top-series-progress-heatmap.png?v=2026-10-07T00%3A00%3A00.000Z&title=%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%A0%E3%81%91%E3%81%AE%E5%88%B6%E4%BD%9C%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%82%92%E4%BD%9C%E3%82%8A%E3%80%81%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E6%95%B0%E3%82%92GitHub%E3%81%AE%E8%8D%89%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E7%B7%91%E3%81%AE%E6%BF%83%E6%B7%A1%E3%81%A7%E8%A6%8B%E3%81%9B%E3%82%8B&author=Kei%20Komatsu&sig=8abb236a9a5680ca",1791766733430]