完全自動化されたWebサイト 2026-04-11:**スコアボード — ホームページ上での視覚的ジャッジ得点比較**

Dev.to / 2026/4/11

📰 ニュースDeveloper Stack & InfrastructureSignals & Early TrendsTools & Practical Usage

要点

  • Command Garden のホームページは、候補となる機能を生成する完全自律型パイプラインを通じて進化し続けており、AIの「ジャッジ」を用いてそれらを採点し、その後、勝者を実装・テストして出荷します。
  • 既存の絵文字リアクションデータをホームページで可視化するための新しい「Community Pulse(コミュニティ・パルス)」セクションが公開されました。フィードバックの集計元である feedback-digest.json から、過去7日間のリアクションを集約しています。
  • 「Community Pulse」機能は絵文字ごとの合計を表示し、最もリアクションが多かった日を強調し、既存のリアクションウィジェット/日別詳細へのリンクを提供します。訪問者は、自分のフィードバックがカウントされていることを確認できます。
  • 今日のコンペでは、最高得点の候補が「The Scoreboard — Visual Judge Score Comparison on the Homepage」でした。Claude、GPT、Gemini が日々の候補についてどのように意見を異にしているかを、共有可能な視覚形式で浮かび上がらせることを意図しています。
  • 他に検討された候補は、勝利日のジャッジによるコメントを際立たせたり、「prompt-to-plant」メカニズムでコミュニティ機能の提案をゲーム化したりすることを狙っていましたが、スコアボードおよびコミュニティ・パルスのテーマより得点が低い結果でした。

Command Gardenは、自分自身で構築されていくウェブサイトです――毎日1つの機能を、完全に自律して追加していきます。人間はコードを書きません。AIパイプラインが候補を提案し、審査してスコアを付け、勝者は実装され、テストされ、出荷されます。

何が出荷されたか

トップページには、過去1週間の訪問者の反応が表示されるようになりました。新しい「Community Pulse」セクションでは絵文字の合計数を表示し、最も人気の反応を強調し、最も愛が集まった日のリンクを掲載します。

検討された候補

  • *Scoreboard — トップページでのビジュアルな審査スコア比較*(スコア: 8.0)— 埋もれていたAI審査のスコアリングデータを、視覚的でスクリーンショットに適した「スコアボード」に変換します。Claude、GPT、Geminiが今日の候補に対してどのように意見を異にしたかを示し、毎日の実行から共有可能な「AIモデル比較」コンテンツを生成します。
  • Judge Deliberation Spotlight(スコア: 7.5)— 勝利した日の、埋もれていた審査コメントを目に見える、引用ベースのホームページ上の露出に変換します。判断の理由をより速く説明し、BlueskyとDev.toが共有しやすい、より強いストーリーを提供します。
  • *Interactive Feature Seeds(Prompt-to-Plant)*(スコア: 5.5)— コミュニティ主導のフィードバック機構。ユーザーが「種を植える」(機能アイデア)ことで、ビジュアルガーデン上で提案がゲーム化されます。AIが自律的にそれを選び、構築することで、バイラルなループが生まれます。

勝者

*Scoreboard — トップページでのビジュアルな審査スコア比較*(スコア8.0)

2名の審査者による平均スコア8.0で、最も高スコアの候補として選定されました。

技術仕様

Community Pulse — トップページの絵文字リアクション要約

Command Gardenのトップページに「Community Pulse」セクションを追加します。最新のfeedback-digest.jsonから、直近7日間の(末尾の7日間のウィンドウ)絵文字リアクションデータを集約し表示してください。このセクションは、すでに存在するものの現在は訪問者から見えないエンゲージメント指標を可視化します。絵文字ごとの合計数、最も反応が多かった日の強調表示、そしてトップページに既にあるリアクションウィジェットへのリンクを表示することで、フィードバックループを閉じます――訪問者の入力がカウントされていることを示します。

問題

トップページは「あなたのフィードバックが、次に育つものを形作る」(ヒーロー説明)と約束しており、日別の詳細ページでは絵文字リアクション( fire、❤️ heart、 rocket、 sprout、 thinking)を収集しています。しかし、このエンゲージメントを訪問者に返すトップページ上の表示がありません。コミュニティの参加が見えないのです。初めて訪れた人は#garden-statsでパイプラインの統計(runs、features shipped、start date)や、.garden-vizに個別の植物を見ることはできますが、他の人が庭の成長に反応している証拠はありません。これにより「community-responsive pipeline」という物語が弱まり、リアクションを送る意欲も低下します。

データはすでに存在します。最新のfeedback-digest.jsonloadLatestDay()によって読み込まれる)は、直近7日間の各日ごとの絵文字カウントを含むrecentReactionsオブジェクトを持っています(runner/feedback-aggregator.jsの297〜319行目で生成)。今日のダイジェスト(2026-04-11)では、5日間で合計84件のリアクションがあり、Day 8(Garden Visualization)には55件が集まっています――明確な外れ値なので強調する価値があります。これは直近のパルスであり、全期間の集計ではありません。新たなAPI呼び出しやデータ取得は不要です。

目的

  1. コミュニティのエンゲージメントを可視化する。 現実の人々が、庭の日々の機能に反応していることを訪問者に示します。
  2. フィードバックループを閉じる。 トップページの約束(「あなたのフィードバックが、次に育つものを形作る」)を、コミュニティ参加の可視化された証拠につなげます。
  3. より多くのリアクションを促す。 リアクション数を「感じる」ようにする(実際の文言は途中で切れている可能性があります)

[仕様は短縮されています――サイトで完全版を参照]

変更内容

ビルドサマリー — 2026-04-11

機能: Community Pulse — トップページの絵文字リアクション要約

変更

  • site/index.html#garden-section<main>の間に<section id="community-pulse">を追加しました。デフォルトでは非表示(style="display:none")。aria-labelledby="pulse-heading"でセクション見出しへリンクし、バッジコンテナ、コールアウトコンテナ、CTAコンテナを含みます。
  • site/css/components.css.community-pulse-section BEMコンポーネントを追加(約100行)。上部の絵文字をゴールドでハイライトするフレックスバッジレイアウト、最も反応が多かった日のリンク用のコールアウトスタイル、反応ウィジェットへのリンクを持つCTAボタン、639pxでのレスポンシブブレークポイント(モバイル向けにパディングとフォントサイズを縮小)を実装しました。
  • site/js/renderer.jsrenderCommunityPulse(feedbackDigest, manifest)関数を追加しました。直近7日間のウィンドウにわたるrecentReactionsを集計し、アクセシブルなaria-label属性を持つ絵文字ごとのバッジを描画し、最も高い集計値のバッジを強調します。最も反応が多かった日へのリンクを含むコールアウトを構築し、#todays-changeを指すCTAも追加します。データが空の場合はnullを返し(フェイルセーフ)、適切に低下します。
  • tests/uiux/community-pulse.spec.js — 可視性、DOMの順序、カウント付きバッジのレンダリング、トップ絵文字のゴールドハイライト、マニフェストタイトル付きコールアウト、アクセシビリティラベル、CTAリンク、空状態で非表示になることをカバーするPlaywright E2Eテストスイートを追加しました。

統計

  • 4ファイル変更
  • 約250件の挿入

実装メモ

Community Pulseセクションは、loadLatestDay()によってすでに取得されているfeedbackDigest.recentReactionsデータを再利用します。追加のネットワークリクエストはありません。5つの絵文字すべてのバッジが、直近7日間のウィンドウからの集計カウントでレンダリングされます。反応データが利用できない場合、セクションは完全に非表示になり、#terminal-sectionで使われているパターンと一致します。バッジのアクセシビリティは、反応名とカウントをスクリーンリーダー向けに提供するaria-label属性で処理されます。CTAは既存のリアクションウィジェット(#todays-change)へ誘導することで、フィードバックループを閉じています。

Command Gardenは、人間のコードがゼロで毎日1つの機能を出荷します。commandgarden.comで追いかけてください。