• #BlogCalendar
  • #Vue
  • #カテゴリ管理
  • #Nuxt Content
  • #Zod
  • #TypeScript
  • #フィルタUI
mdx-playgroundメモ

BlogCalendarのカテゴリ整理 - diaryカテゴリ追加とフィルタUI改善

ブログカレンダーの記事分類を見直し、開発日記(diary)を独立カテゴリとして扱えるようにした。合わせてmake-diaryスキルに著作権・プライバシー保護ルールを追加した。

背景

これまで開発日記は category: "dev" で管理していたが、日記とそれ以外の開発メモが混在してカレンダー上で区別しづらかった。また、旧カテゴリの「log」が使われていない状態だったので整理が必要だった。

やったこと

1. diaryカテゴリの新設

FilterType'diary'を追加し、旧'log'を削除した。

// BlogCalendar.vue
type FilterType = 'diary' | 'personal' | 'dev' | 'todo-active' | 'todo-done' | 'todo-canceled' | 'todo-memo'

凡例UIも「ログ」から「開発日記」に変更。カレンダー上では薄いオレンジイエロー(#FFF0D4)で表示される。

2. getArticleFilterTypeの優先順位

diary判定を最優先にし、todoよりも先に判定するようにした。カテゴリ未設定の記事(285件ほど)はフォールバックでpersonal扱いにしている。

const getArticleFilterType = (article: Article): FilterType => {
  if (article.category === 'diary') return 'diary'  // 最優先
  if (article.todo === 'active') return 'todo-active'
  // ...以下todo/category判定
  return 'personal'  // フォールバック
}

3. 日記記事の先頭ソート(sortDiaryFirst)

1日に複数記事がある場合、diary記事を先頭に表示するソート関数を追加した。カレンダーの各日セルでarticles.filter(matchesFilter).sort(sortDiaryFirst)として適用。

const sortDiaryFirst = (a: Article, b: Article): number => {
  const aIsDiary = a.category === 'diary' ? 0 : 1
  const bIsDiary = b.category === 'diary' ? 0 : 1
  return aIsDiary - bIsDiary
}

4. 型定義・スキーマの更新

content.config.ts: Zodスキーマのcategoryenumに"diary"を追加。

category: z.enum(["personal", "dev", "diary"]).optional(),

article.ts: Article型のcategoryにも'diary'を追加。

category?: 'personal' | 'dev' | 'diary'

5. 既存diaryファイル34件の一括変更

diary-YYYY-MM-DD.md形式の既存ファイル34件について、category: "dev"category: "diary"に変更し、不要になったtodo: "memo"を削除した。

6. make-diaryスキルへの著作権・プライバシー保護ルール追加

.claude/commands/make-diary.mdに以下のルールを追記した。

書籍名・教材名のぼかし方針:

  • 具体的な書名を出さず「参考書」「教科書」「問題集」などの一般名称で代替
  • 出版社名・著者名は記載しない
  • 教材固有の構成や番号体系はそのまま使わない

事業戦略・ビジネス情報のぼかし方針:

  • 具体的な業種名・テンプレート名・顧客戦略は記載しない
  • 料金・契約情報、競合分析の詳細は記載しない

NG例・OK例も追加し、スキル利用時に自動的にこれらのルールが適用されるようにした。

LocalStorageのバージョニング

フィルタの保存キーをblog-calendar-filters-v4に更新。カテゴリ構成が変わったため、旧バージョンのキャッシュが残っていても新しいフィルタセットで初期化される。

今回触ったファイル

ファイル変更内容
BlogCalendar.vuediary追加、log削除、sortDiaryFirst、凡例UI変更
content.config.tscategory enumにdiary追加
article.tsArticle型にdiary追加
make-diary.md著作権・プライバシー保護ルール追記
diary-*.md x 34件category: dev → diary、todo: memo削除

学び

  • カテゴリの設計は最初からやっておけばよかった。後から34件一括変更するのは手間がかかる
  • フォールバックでpersonal扱いにすることで、285件のカテゴリ未設定ファイルを一気に修正する必要がなくなった
  • 公開日記に書籍名を載せると著作権・商標の問題が出うるので、一般名称での代替をルール化しておくのは大事