[{"data":1,"prerenderedAt":270},["ShallowReactive",2],{"content-/blog-make-diary-badge-ui":3,"all-pages-for-dir":268,"og-image-/blog-make-diary-badge-ui":269},{"id":4,"title":5,"body":6,"category":250,"description":251,"extension":252,"meta":253,"navigation":254,"ogImage":255,"path":256,"project_name":257,"published":258,"publishedAt":259,"seo":260,"stem":261,"tags":262,"todo":255,"unpublished":258,"updatedAt":255,"__hash__":267},"pages/2026-06/2026-06-30/blog-make-diary-badge-ui.md","/blog のカレンダーに make-diary 自動生成バッジを追加した",{"type":7,"value":8,"toc":239},"minimark",[9,14,26,34,38,45,48,70,77,81,84,135,145,148,151,172,183,187,199,202,205,225,228,236],[10,11,13],"h2",{"id":12},"きっかけ-blog-を見ていて目が滑った","きっかけ: /blog を見ていて目が滑った",[15,16,17,21,22,25],"p",{},[18,19,20],"code",{},"/blog"," のカレンダーを開いて 6月の記事一覧をスクロールしたら、自分が手で書いた記事と ",[18,23,24],{},"/make-diary"," コマンドが吐き出した日記が同じ見た目で並んでいた。タイトルだけ見て区別がつかず、目当ての手書き記事を探すのに3回ほどクリックを往復した。",[15,27,28,29,33],{},"「これ make-diary で作ったやつだっけ?」と毎回開いて確認している自分に気づいた瞬間、UIに識別子が出ていないのが原因だと判断した。タグもカテゴリ（開発・個人・日記）もあるが、",[30,31,32],"strong",{},"自動生成かどうか","を示すものはどこにも露出していない。",[10,35,37],{"id":36},"まずスキーマから足すかと思ったが調べてもらった","まずスキーマから足すか、と思ったが調べてもらった",[15,39,40,41,44],{},"最初は ",[18,42,43],{},"is_auto_generated: true"," みたいなフラグを frontmatter に足して、既存の make-diary 製記事を全部マイグレーションすべきかと考えた。ただ、その前に「今のスキーマで識別できる手がかりが本当に無いのか」を Claude Code に調べさせた。",[15,46,47],{},"結果が拍子抜けだった。",[49,50,51,67],"ul",{},[52,53,54,57,58,61,62],"li",{},[18,55,56],{},"category: \"diary\""," の記事が ",[30,59,60],{},"195件","、全部 make-diary 製\n",[49,63,64],{},[52,65,66],{},"内訳: 統合日記 174本 + 同日のカテゴリ別詳細記事 21本",[52,68,69],{},"手書きで書いた diary 記事は1本も混ざっていない",[15,71,72,73,76],{},"つまり",[30,74,75],{},"識別子はすでにあって、UIに出していないだけ","だった。スキーマを増やすのは完全に過剰、と分かった。",[10,78,80],{"id":79},"a案-b案を並べてa案を選んだ","A案 / B案を並べて、A案を選んだ",[15,82,83],{},"選択肢を Claude Code に並べさせた。",[85,86,87,103],"table",{},[88,89,90],"thead",{},[91,92,93,97,100],"tr",{},[94,95,96],"th",{},"案",[94,98,99],{},"内容",[94,101,102],{},"コスト",[104,105,106,121],"tbody",{},[91,107,108,112,118],{},[109,110,111],"td",{},"A",[109,113,114,115,117],{},"既存の ",[18,116,56],{}," を「make-diary製」と読み替え、カレンダーと一覧にバッジを出す",[109,119,120],{},"10〜30分、スキーマ不変",[91,122,123,126,132],{},[109,124,125],{},"B",[109,127,128,131],{},[18,129,130],{},"is_auto_generated"," フラグを frontmatter に追加、195件マイグレーション + UI も対応",[109,133,134],{},"1〜2時間、スキーマ変更で他のクエリへの影響もチェック必要",[15,136,137,138,140,141,144],{},"A案で十分だと即決した。理由は単純で、「make-diary 製 = ",[18,139,56],{}," 」という対応関係が既に1対1で成立しているため、新フィールドを足しても情報量が増えない。",[30,142,143],{},"動いている識別を可視化するだけ","で要件を満たす。",[10,146,147],{"id":147},"実装はバッジ2箇所だけ",[15,149,150],{},"修正したのは2ファイル。",[49,152,153,166],{},[52,154,155,158,159,162,163,165],{},[18,156,157],{},"apps/web/app/components/BlogCalendar.vue",": カレンダーセルの記事リンクの隣に ",[18,160,161],{},"make-diary"," バッジを追加。さらに「開発日記」フィルタチップの右に凡例として小さな ",[18,164,161],{}," タグを置き、hover すると「make-diary コマンドで自動生成された記事」とツールチップが出る",[52,167,168,171],{},[18,169,170],{},"apps/web/app/components/ArticleTable.vue",": リスト表示でもタイトル横に同じバッジを表示",[15,173,174,175,178,179,182],{},"バッジ表示の判定ロジックは ",[18,176,177],{},"article.category === 'diary'"," の1行だけ。スキーマも、データ生成スクリプトも、",[18,180,181],{},"useBlogArticles.ts"," も触らずに済んだ。CSS で小さくグレーの角丸タグに見えるよう整え、本文タイトルを邪魔しない大きさに抑えた。",[10,184,186],{"id":185},"dev-で確認","dev で確認",[15,188,189,192,193,195,196,198],{},[18,190,191],{},"pnpm dev"," を立ち上げて ",[18,194,20],{}," を開いた。6月のカレンダーセルに ",[18,197,161],{}," バッジが並び、手書きの記事だけバッジが付かずに残った。視線が自然に「バッジ無しの記事」だけに引き寄せられ、手書き記事をスクロールで拾うのが速くなった。ArticleTable 側も同じ見え方になっているのを確認した。",[15,200,201],{},"最初に感じた「目が滑る」感覚はバッジ追加後に消えた。手書き記事を探すクリックの往復が無くなった。",[10,203,204],{"id":204},"学び",[49,206,207,216,222],{},[52,208,209,212,213,215],{},[30,210,211],{},"新フィールドを足す前に、既存スキーマで識別できないか必ず確認する","。今回は ",[18,214,56],{}," が既に1対1で対応していたので、フィールド追加は不要だった。データの実態を Claude Code に集計させて初めて分かった",[52,217,218,221],{},[30,219,220],{},"UI改善は「機能不足」よりも「既にある情報を見せていない」ことが多い","。スキーマを増やす前に、「データはあるか / どこに出すか」を順に確認する癖をつける",[52,223,224],{},"「見づらい」は曖昧な感想で止めず、「目的の記事に辿り着くまでに3回クリックが要る」と動作レベルに落とすと、解決策（バッジで識別できれば0回になる）が即座に出てくる",[10,226,227],{"id":227},"次にやるなら",[49,229,230,233],{},[52,231,232],{},"バッジクリックで「自動生成記事だけを抽出」するフィルタ動作を入れる",[52,234,235],{},"統合日記とカテゴリ別詳細記事をバッジの色で分ける（今は1種類にまとめている）",[15,237,238],{},"ただし当面は今のシンプルな見せ方で十分使えているので、追加実装は積み残しにしておく。",{"title":240,"searchDepth":241,"depth":241,"links":242},"",2,[243,244,245,246,247,248,249],{"id":12,"depth":241,"text":13},{"id":36,"depth":241,"text":37},{"id":79,"depth":241,"text":80},{"id":147,"depth":241,"text":147},{"id":185,"depth":241,"text":186},{"id":204,"depth":241,"text":204},{"id":227,"depth":241,"text":227},"dev","ブログ一覧で make-diary コマンド製の日記と手書き記事を見分けられるよう、BlogCalendar と ArticleTable に小さなバッジを追加した。スキーマは触らず、既存の category: diary を読み替えただけで済んだ。","md",{},true,null,"/blog-make-diary-badge-ui","mdx-playground",false,"2026-06-30T00:00:00.000Z",{"title":5,"description":251},"2026-06/2026-06-30/blog-make-diary-badge-ui",[263,264,265,266],"日記","Nuxt","UI","blog","PhpkEZeqAKYL2Gbwqas-XR0kx2fVGtAQQ-AfCu5-e2o",[],"https://log.eurekapu.com/og/blog/blog-make-diary-badge-ui.png?v=2026-06-30T00%3A00%3A00.000Z&title=%2Fblog%20%E3%81%AE%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%81%AB%20make-diary%20%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%83%90%E3%83%83%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=3636d14f7f7456f9",1782885017739]