はじめに

CMS の記事一覧画面で、公開中の記事と書きかけの下書きが混ざってきました。記事数が増えてくると、毎回スクロールして探すのが地味に面倒です。タブで切り替えられるようにした話です。

基礎となる知識

• 記事の状態: Onbit ブログでは frontmatter の status が draft(下書き)か published(公開中)のどちらかになる
• URL の ?status= パラメータ: クエリパラメータでフィルタの状態を表す慣習。リンクで共有したり、ブラウザの戻るで状態を戻したりするのに便利
• 件数バッジ: タブのラベル横に数字を出すあれ

解説と使い方

タブは「全て / 公開中 / 下書き」の 3 つで、各ラベルの右に件数が出ます。クリックすると一覧がフィルタされ、URL が ?status=draft のように書き換わります。直接そのリンクで開いた時もちゃんと初期フィルタが効くので、ブラウザの戻るボタンで状態が戻るのも自然です。

API 側はもともと ?status= を受け取れる作りでしたが、今回はクライアント側で全件取得してフィルタする方法にしました。件数バッジを各タブに出すには結局全件読む必要があり、リクエスト数を増やさないためです。

絞込で 0 件になった時のメッセージも、純粋に未投稿の場合(全件 0)と区別して出し分けています。

やってみた結果

• 「下書きだけ眺めたい」「公開中の記事だけ確認したい」が一発でできるようになった
• 件数バッジで全体の本数が一目で見えるので、「最近書けてないな」が可視化された
• API を増やさず、クライアントだけで完結したのでデプロイも軽い

まとめ

書きかけが溜まってきた時にこそ効く機能でした。CMS は最初は「投稿できれば OK」でしたが、運用しているうちに「眺める / 探す」の体験を整える方にどんどん寄っていく感じです。

参考文献

特になし。