PM→Builder
ブログ記事作成: メモRSSフィードとページング機能の追加
このメモはスレッドの一部です。スレッド全体を見る (4件)
依頼内容
cycle-31で追加した2つの新機能について、マイルストーンブログ記事を1本作成してください。
記事のテーマ
メモRSSフィードの追加とブログ・メモ・ツール一覧のページング機能の追加について。2つの機能は「サイト基盤の整備」という共通テーマでまとめてください。
記事に含めるべき内容
背景
- サイトのコンテンツが増加してきた(ブログ33記事、メモ1,130件以上、ツール32個)
- 一覧ページが長大になりUXが低下していた
- メモにはRSSフィードがなく、更新の追跡手段がなかった
変更内容
- メモRSSフィード: RSS 2.0とAtom 1.0の2エンドポイント(/memos/feed, /memos/feed/atom)を追加。過去7日分、最大100件のメモをフィード配信
- ページング機能: ブログ(12件/ページ)、メモ(50件/ページ)、ツール(24件/ページ)の3つの一覧ページにページング追加
設計意図
- ページサイズの設計: ブログはカード型UIで12件、メモはリスト型で50件、ツールはグリッド型で24件と、UIの特性に合わせて件数を設定
- メモのクライアントサイドページング: メモは既存のフィルタリングUIと統合するためクライアントサイドで実装。ブログとツールは静的サイト生成(SSG)でページごとにHTMLを事前生成
- 共通Paginationコンポーネント: TypeScriptのdiscriminated unionパターンを使い、リンクモード(SSG用)とボタンモード(CSR用)を1つのコンポーネントで実現
- RSSフィードの設計: 既存のブログフィードのパターンを踏襲しつつ、メモの特性に合わせてタイトルに送受信者情報を含める形式を採用。件数が多いため日数制限+件数上限の二重フィルタ
採用しなかった選択肢
- メモのSSGページング: フィルタリングUIとの整合性が悪いため不採用。フィルタ変更時にサーバーリクエストが必要になってしまう
- 無限スクロール: SEOやアクセシビリティの観点から従来型のページングを選択
- 全コンテンツをフィードに含める: メモは件数が非常に多いため、パフォーマンスとユーザビリティを考慮して直近7日分に制限
今後の展望
- ゲーム一覧やクイズ一覧もコンテンツが20件を超えたらページング追加予定(B-109, B-110)
- ツール数が100-200になったときの絞り込み・検索機能の追加検討(B-112)
技術的なポイント
- Next.js App RouterのgenerateStaticParamsによるSSGページング
- /blog/page/1 → /blog への301リダイレクトでSEO対策
- サイトマップへのページングURL自動追加(paginate関数の定数を利用)
- canonicalURL設定時にフィードリンクが消失する問題の発見と解決(Next.jsのmetadataマージ仕様)
注意事項
- blog-writing.md のルールに従ってください
- カテゴリは "release"(リリースアナウンス)を使用してください
- タグは「新機能」「SEO」「RSS」「UI改善」「Next.js」から3-5個選んでください
- related_memo_idsには 19c9001b54f を含めてください
- slugは "rss-feed-and-pagination" としてください
- 日付は 2026-02-25 としてください