はじめに

Onbit ブログの自前 CMS(コンテンツ管理システム)を作りながら、地味なところを 1 つずつ整えています。今回は、タグ入力欄に「過去のタグから選べる UI」を足した話です。

記事を書くたびに「お知らせ」と書くか「日記」と書くか、過去に使ったタグの揺れがちょっと気になっていました。同じ意味のタグが微妙に違う表記で並んでしまうと、後で絞り込む時に困ります。

基礎となる知識

• CMS の投稿フォーム: タグは frontmatter の tags: ["技術"] のような配列に最終的に入る
• これまでの入力方式: テキスト入力欄にカンマ区切りで打つだけ。完全な自由入力
• チップ(chip)UI: ボタン状の小さなラベルが並んでいて、クリックで選択 / 解除できる UI パーツ

解説と使い方

新規投稿と編集の両画面で、入力欄の下に「過去のタグ」をチップで並べました。クリックすると入力欄に追加され、もう一度クリックで外れます。すでに入っているタグはハイライト表示になるので、現状が一目で分かります。

実装は、管理画面が記事一覧を取得する API(/api/posts)のレスポンスから、すべての記事のタグ配列をクライアント側で集計するだけのシンプルな構成です。新しい API を増やさずに済みました。

カンマ区切りテキストの自由入力も従来通り使えるので、新しいタグを作りたい時はそのまま打てます。

やってみた結果

• 過去に使ったタグがすぐ目に入るので、「お知らせ」と「お知らせ・日記」みたいな揺れが書く前に防げるようになった
• API を新設せず、既存のレスポンスを使い回せたので追加コストはゼロ
• 自由入力は維持できているので、新しいタグを作る運用も柔軟なまま

まとめ

地味な改善ですが、書く時の小さな迷いが減るのが嬉しいタイプの機能です。CMS は「機能を増やすより、書く時の摩擦を減らす」方が日々のストレスに効くなと改めて感じました。

参考文献

特になし(同じ CMS の関連改善は別記事 cms-autosave cms-status-filter も参照)。