

できること
- 型付き props を持つ、依存ライブラリなしの React ヒートマップコンポーネント
- 同じカレンダーを JSON データブロック付きの HTML ファイル 1 つで
- git log、CSV、JSON を日ごとの件数に集計するスクリプト
- 合計、連続記録、キーボード操作、ライブ表示
- PopNow によるヘッダー画像やシェアカード画像(任意、先に見積もり)
向いている用途
- プロフィールページでのコミット・執筆・学習の履歴
- 習慣、筋トレ、連続記録のトラッカー
- レポートでの日次売上、登録数、問い合わせ件数
向いていない用途
- 複数の系列を 1 つのチャートで比較すること
- 時間帯ごとの傾向や、ごく短期間の履歴
- 正確な値の確認(表のほうが読みやすい)
使い方
Claude・ChatGPT で
PopNow のスキル「カレンダーヒートマップ」(activity-heatmap-calendar)を使って、次のことをしてください:このリポジトリの過去 1 年分のコミットを、ポートフォリオの About ページに表示して。
コーディングエージェントで
/popnow-activity-heatmap-calendar このリポジトリの過去 1 年分のコミットを、ポートフォリオの About ページに表示して。
次はこれ
段階を固定値にして:1、3、6 コミット。
このセクション用のシェアカード背景を作って。先に必要なクレジットを教えて。
用意しておくもの
- 記録データ、またはそれを書き出すコマンド
- 1 単位の意味(コミット 1 件、注文 1 件など)
- 対象期間と、週を月曜始まりにするかどうか
似ているスキル
すべて見る →3D アバター作成ツール
+3ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
AI SaaS ランディングページ
+3温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
アニメーション付きヒーローセクション
+3見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
シェーダーのヒーロー付きの代理店サイト
+3下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
ダークモード SaaS ランディングページ
+3動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
デザイナーのポートフォリオサイト
+3落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
エンジニア向けポートフォリオサイト
+3事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
雑誌風の SaaS サイト
+3ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
グラスモーフィズムのサイトテンプレート
+3ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
ハードウェア製品のサイト
+3銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
インタラクティブなアーキテクチャ図
+3検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
インタラクティブなグリッドのヒーロー
+3ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
ナレッジグラフ エクスプローラー
+3プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
KPI ダッシュボードのテンプレート
+3変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
AI モックアップからのランディングページ
+3まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
Web マガジンサイト テンプレート
+3記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
パーティクルアニメーションのヒーロー
+3温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
個人ブランドのウェブサイト
+3細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
シネマティックな製品ローンチページ
+3映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
管理画面ダッシュボード テンプレート
+3グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
SaaS ランディングページ テンプレート
+3実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
スクラップブック風ポートフォリオサイト
+3紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
スニーカーショップ サイトテンプレート
+3カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
ワークフロー自動化のランディングページ
+3グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
データはどこから取りますか?
記録ごとに日付があれば何でも使えます。付属のスクリプトは git log の出力、日付列のある CSV ファイル、JSON 配列、タイムスタンプの単純なリストを読み込み、1 日ごとの件数を書き出します。
チャートライブラリは必要ですか?
不要です。React 版は React だけ、HTML 版は何も必要ありません。どちらも通常の要素でグリッドを描画し、ライトモードとダークモードの両方で動作します。
色の段階はどう決まりますか?
デフォルトでは、記録のある日の四分位数から決めるので、活動の少ない年でも濃淡を全段階使います。数値に決まった意味がある場合は、固定のしきい値を設定できます。
統計を画像モデルに描かせないのはなぜですか?
画像モデルは数字を間違えることがあるためです。スキルは PopNow で文字のない背景を生成し、実際の合計や連続記録はその上に HTML で配置します。

