#81スコア 3.5/5メディア・出版

AI に編集カレンダーを作らせてみた — 「月カレンダー」だけは、まだ部品が無い（やってみた #81）

ルート: /content-calendar
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に編集カレンダーを作らせてみた — 「月カレンダー」だけは、まだ部品が無い（やってみた #81）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。メディア/出版2枚目——編集カレンダー / コンテンツカレンダー（月間カレンダー × 記事チップ × 入稿締切 × チャネル別フィルタ）。

メディアの2枚目はコンテンツカレンダー——記事を公開予定日に並べ、入稿締切を追う画面。そして80枚やって何度も顔を出してきた「カレンダービュー」の穴が、月カレンダーの形でまた出た回。

結果 — 3.5/5

tsc/build 緑・console 0・375px（モバイルはアジェンダ崩し）・月間カレンダー・記事チップ（タイトル+カテゴリ+ステータス）・入稿締切マーカー・チャネル別フィルタ・予定追加/移動・当月サマリ。

今回の穴 — 月カレンダー（イベント付き）の primitive が無い

No calendar-view / month-grid-with-events component. Calendar is a react-day-picker date PICKER (no event concept). ScheduleGrid is a fixed rows×columns matrix whose cell is one content node — no day-number, no today, no "multiple stacked events per cell". So MonthGrid.tsx is hand-built: role="grid" + roving 矢印/Home/End/Enter + 合成読み上げ名 + モバイルagenda fallback. The day-cell-with-stacked-events pattern — the single most common scheduling UI on the web — must be built from scratch.

これは #142（最古参の headline gap）の3つ目の顔:

WeekView（時刻グリッド+重なり詰め・#27）
ResourceTimeline/Gantt（リソース×連続時間軸・#68）
MonthCalendar（日付×イベント・#81 ← 今回）
※ 離散の時間割/マトリクスは ScheduleGrid（#70）で対応済

カレンダー/スケジューリングビュー系は、シリーズ通して最も再出現する未対応領域。 各形（週/ガント/月）が大型なので、3回ルールというより専用の EventCalendar を腰を据えて1本作るべき段階——mid-loop で急いで作る大きさじゃない。#142 に「最優先の残課題」として記録した。

それでも周辺は既存部品で

DataTable→締切トラッカー「best component in the kit」（sort/filter/renderCard mobile）・Statistic→当月サマリ・Badge icon→記事ステータス（色だけに非依存）・Sheet+DatePicker→予定追加/移動・Tabs→カレンダー/アジェンダ/締切一覧。葉っぱは全部 @gunjo/ui、手組みは月グリッドの骨格だけ。

起票だけ（no-build）

  • 🟠 月カレンダー(EventCalendar)が無い＝#142 の最優先化（#142 に追記）。
  • 🟡 DatePicker に label/description 配線が無い（Input/Select/Textarea と不整合・#315）。
  • 🟡 DataTable の columnheader 名がソート指示に乗っ取られる（SR が列名でなく「Click to sort」を読む・#307 に追記）。
  • 🟢 tone vs variant のプロップ名不統一・Banner が1行固定。

学び — 「最頻出の作法」ほど、最後まで残ることがある

#80 で back-office 三種の神器が8業界に効くのを見た。だが #81 は逆——カレンダー（最も一般的なスケジューリング UI）が、80枚やってもまだ部品化されていない。理由は明快：カレンダービューは「大きい」（月レイアウト・イベント積み・今日/月外・キーボードナビ・モバイル崩し）。小〜中 primitive は3回ルールで次々埋まったが、大型ドメインレイアウト（カレンダー・系譜グラフ・連続ガント）は、専用の build セッションを切らないと埋まらない。これは穴の発見ではなく、「次に腰を据えて作るべきもの」の明確化。

次回予告（やってみた #82）

  • EventCalendar を腰を据えて build（#142・月ビュー）or Meter 集約 PR（#277/#286/#297/#308）or メディア/別業界もう1枚。

試す

まだ alpha。葉っぱは全部既存部品で組めたが、月カレンダーの骨格だけはまだ手組み——次に腰を据えて作るべきものが見えた回。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

BadgeBannerButtonCardCardContentColumnDefDataTableDatePickerEmptyStateIconInputSelectSeparatorSheetSheetContentSheetDescriptionSheetFooterSheetHeaderSheetTitleStatisticTabsTabsContentTabsListTabsTriggerTextarea

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。