開発環境だけの制作ダッシュボードを作り、コミット数をGitHubの草のような緑の濃淡で見せる

開発eurekapu-nuxt4

開発環境だけの制作ダッシュボードを作り、コミット数をGitHubの草のような緑の濃淡で見せる

教材サイト（eurekapu-nuxt4）では、Excel講座の動画制作や画面再現、財務諸表講座など、いくつものシリーズを並行して作っている。 どれも最近作り始めたものだと思っていた。 では、それは何日前で、それぞれ何日かかっているのか。 朝、まずそれを Claude Code に調べてもらい、続けて、そうした数字を開発環境の専用画面で見られるようにしてもらった。 画面を頼んだときには、少し気分を盛り上げたい、とも付け足している。

何日前から作っているのか

11時53分に始めた mdx-playground 側のセッションで、制作中のカードが並ぶ画面のスクリーンショットを貼って、次の2つを尋ねた。

  • 何日前から作り始めたか
  • それぞれ今何日ぐらいかかっているか

Claude Code には、最初に origin との差がないことを確かめてもらった。 そのうえで画面のカードがどこで定義されているかを探させ、eurekapu-nuxt4 の git 履歴からシリーズ別に初回の日付と作業した日数を出させた。 コミットメッセージの側からも裏を取らせている。

返ってきた表の列は「始めた日」「何日前」「作業した日数」「コミット数」「最後に触った日」だった。 今日（10月7日）の時点で、いちばん古いのは「動画制作」で、9月22日に始めていて15日前になる。 いちばん新しいのは「財務諸表講座」で、10月3日に始めていて4日前になる。

トップから開発用の表示を外して、ヘッダーにリンクを置く

5分後の11時58分、今度は eurekapu-nuxt4 のセッションを開いて画面の作り替えを頼んだ。 その時点では、開発環境のトップページ（http://localhost:3200/）に、開発環境でだけ表示する制作中シリーズの一覧が載っていた。 開発環境だけに出すのはそれでよい。 変えたかったのは、置き場所のほうだった。

頼んだ内容は次のとおり。

  • ヘッダーの右側にある「ログイン」の少し左に、開発用の画面へ移るリンクを1つ置く
  • トップページには開発用の表示を残さない
  • リンク先には、Excel講座の動画制作や画面再現など、制作中のシリーズをカードで並べる
  • 完了か未了かの表示は助かっているので残す
  • ガントチャートに近い形で、いつ始めたか、どれぐらい作業しているか、最後に触ったのはいつか、進捗はどうかを一覧で見たい

最後の項目は、11時53分に調べてもらった表の列とほぼ重なっている。

Claude Code に任せた作業は、次の順に進んだ。

  1. 既存の制作ページと、データの置き場所を調べる
  2. git 履歴から各シリーズの開始日と作業日数を取れるかを確かめる
  3. git 履歴を集計する純粋関数と API を書く
  4. カード、タイムライン、/dev ページ本体を書く
  5. トップページから開発用のセクションを外す
  6. 分類ルールを1点直して、作業記録の集計を確かめる

できあがったのは、制作ダッシュボード http://localhost:3200/dev である。 トップページの開発用の表示はすべて外れ、ヘッダーの「ログイン」の左に「開発」ボタンが付いた。 このボタンは開発環境にしか出ない。

Chrome DevTools が応答しなかったとき

描画を確かめる段階で、ブラウザ確認に使う Chrome DevTools が応答しなかった。 そこで Playwright に切り替えてもらい、先に描画を確かめた。 PC 幅（1440px）とスマホ幅（390px）でスクリーンショットを撮り、コンソールにエラーが出ていないこと、横にはみ出していないことを確かめている。

そのあと、応答が遅れていた Chrome DevTools がつながった。 Chrome の前面タブ（11番）で /dev を開き、実機の Chrome でも同じ画面を確かめてもらった。

  • タイムラインは「すべて」の行を含めて7行と、目盛りの行が出ている
  • 6シリーズの進捗と、連続作業「6日」の表示が、Playwright で見たときと同じ値になっている

コミット数を、棒の高さから緑の濃さへ

最初の版のタイムラインは、コミット数をグラフの高さで表していた。 画面を見て、次のように返した。

ありがとう。これコミットの数、グラフの高さにするんじゃなくて、GitHubで言うところのグリーンの濃さとかにしませんか？

これを受けて、タイムラインは GitHub の草と同じ1日1マスの緑の濃淡に変わった。

  • 各シリーズの始めた日から最後に触った日まで、毎日1マスずつ並べる
  • 作業のない日は薄い灰色のマスにする
  • マスの濃淡に合わせて、凡例と「直近7日」のマスも緑に揃える

Chrome のタブ11で再読み込みして確かめ、コンソールにエラーも警告も出ていないことまで見てもらった。

学びメモ

  • 11時53分に聞いた「何日前に始めて、何日かかっているか」と、5分後に常設の画面へ求めた項目は、ほぼ重なっていた
  • ブラウザ確認の経路が1本応答しなくても、別の経路（Playwright）で先に確認を済ませ、つながったあとに実機で同じ値が出るかを見比べればよい
  • コミット数の見せ方は、最初の版を見てから決め直した。棒の高さで一度出してから、緑の濃淡へ変えている

振り返り

動画制作を始めた9月22日から数えると、今日で15日になる。 始めた日から最後に触った日まで、マスは1日も飛ばさずに並ぶ。 作業のない日は灰色のまま残る。 少し気分を盛り上げたいという最初の頼みに緑のマスが応えるかどうかは、これから先のマスの色で決まる。

#Nuxt#開発環境#git#ダッシュボード#Playwright