# 画面設計書 29-ブログ一覧

## 概要

本ドキュメントは、Prettier公式サイトの「ブログ一覧」ページの画面設計書である。このページは、Prettierのリリースノート、更新情報、技術記事などを時系列で一覧表示するブログ機能のエントリーポイントとして機能する。

### 本画面の処理概要

この画面では、Prettierプロジェクトのブログ記事を新しい順に一覧表示する。各記事のタイトル、著者、投稿日、要約（truncate以前のコンテンツ）が表示され、「Read more」リンクで記事の全文にアクセスできる。サイドバーには最新10件の記事リンクが表示される。

**業務上の目的・背景**：Prettierは頻繁にアップデートされるオープンソースプロジェクトであり、新バージョンのリリースノート、新機能の紹介、技術的な解説記事などを発信する必要がある。このブログ機能は、ユーザーや開発者コミュニティに対する公式な情報発信チャネルとして機能し、プロジェクトの透明性とコミュニティエンゲージメントを高める。

**画面へのアクセス方法**：ホームページのナビゲーションバーから「Blog」をクリックしてアクセスする。また、フッターの「Blog」リンクからもアクセス可能である。URLは `/blog` である。

**主要な操作・処理内容**：
1. ブログ記事一覧の閲覧（ページネーション対応、10件/ページ）
2. 各記事の要約確認と全文へのアクセス
3. サイドバーからの最新記事へのクイックアクセス
4. RSS/Atomフィードの購読
5. 前後ページへのナビゲーション

**画面遷移**：
- 遷移元：ホームページ、フッター、他のドキュメントページ
- 遷移先：各ブログ記事詳細ページ（/blog/年-月-日-タイトル）、GitHubリポジトリ（Edit this pageリンク）

**権限による表示制御**：なし（公開ブログページ）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当なし（ブログ機能のため） |

## 画面種別

ブログ一覧（動的コンテンツ一覧） - ページネーション対応

## URL/ルーティング

- URL: `/blog` (一覧ページ)、`/blog/page/2` (2ページ目以降)
- ルーティング: Docusaurus blog機能による自動生成

## 入出力項目

本画面は静的に生成されたブログ一覧ページのため、ユーザー入力項目はない。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| - | - | - | 該当なし |

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "Prettier blog" | ブラウザタイトル |
| ブログ記事カード | 各記事の要約表示 | 10件/ページ |
| 記事タイトル | 記事のH1タイトル | リンク付き |
| 著者情報 | 記事の著者名 | フロントマターのauthorsから取得 |
| 投稿日 | 記事の投稿日 | ファイル名から自動取得 |
| 要約テキスト | truncate以前のコンテンツ | |
| Read moreリンク | 記事全文へのリンク | |
| サイドバー | "Recent posts"見出しと最新10件リンク | blogSidebarCount: 10 |
| ページネーション | 前後ページへのナビゲーション | postsPerPage: 10 |
| RSS/Atomリンク | フィード購読リンク | feedOptions設定 |

## イベント仕様

### 1-ページ読み込み

Docusaurusによる静的サイトジェネレーションにより、ビルド時にブログ記事のMarkdownファイルから一覧ページが生成される。ユーザーがページにアクセスすると、生成済みのHTMLコンテンツが表示される。

### 2-記事タイトル/Read moreクリック

各記事のタイトルまたは「Read more」リンクをクリックすると、該当するブログ記事の詳細ページに遷移する。

### 3-ページネーションクリック

「Next」「Previous」ボタンをクリックすると、次/前のページに遷移する（10件ごとのページネーション）。

### 4-サイドバーリンククリック

サイドバーの記事リンクをクリックすると、該当するブログ記事の詳細ページに遷移する。

### 5-RSSフィード購読

RSS/Atomフィードリンクにアクセスすると、フィードリーダーで購読可能なXMLフィードが提供される。

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 静的サイトのため該当なし |

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|---------|---------------|
| - | - | - | 静的ブログページのため該当なし |

## 例外処理

| 例外 | 処理内容 |
|------|---------|
| 404 Not Found | ブログ記事が存在しない場合、Docusaurusの404ページを表示 |
| 無効なページ番号 | 存在しないページ番号にアクセスした場合、404ページを表示 |

## 備考

- 本ページはDocusaurusのblog機能を使用して生成される
- ブログ記事は `website/blog/` ディレクトリ内のMarkdownファイルから生成される
- ファイル名形式: `YYYY-MM-DD-title.md`（例: `2026-01-14-3.8.0.md`）
- 各記事のフロントマターで `authors`、`title` を定義
- `<!-- truncate -->` コメントで要約部分と本文を区切る
- `onUntruncatedBlogPosts: "throw"` により、truncateなしの記事はビルドエラー
- feedOptionsでRSS/Atomフィードを自動生成
- Google Analytics (gtag) によるアクセス解析が有効

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: Docusaurusブログ設定を理解する

まず、ブログ機能の設定を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | docusaurus.config.js | `website/docusaurus.config.js` | blog設定（feedOptions、blogTitle、postsPerPage、blogSidebarCount等） |

**読解のコツ**: Docusaurusのblogプリセット設定は `presets[0][1].blog` に定義されている。feedOptions、blogSidebarCount、postsPerPage、onUntruncatedBlogPostsなどの設定値に注目。

**主要処理フロー**:
- **行93-107**: blog設定（feedOptions、blogTitle、blogDescription、editUrl、blogSidebarCount、postsPerPage、onInlineTags、onInlineAuthors、onUntruncatedBlogPosts）

#### Step 2: ブログ記事の構造を理解する

実際のブログ記事ファイルの構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | 2026-01-14-3.8.0.md | `website/blog/2026-01-14-3.8.0.md` | 最新ブログ記事の構造、フロントマター、truncate位置 |

**主要処理フロー**:
- **行1-4**: フロントマター（authors、title）
- **行17**: `<!-- truncate -->` による要約と本文の区切り

#### Step 3: ナビゲーション構成を理解する

ナビゲーションバーとフッターのブログリンクを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | docusaurus.config.js | `website/docusaurus.config.js` | navbar.items、footer.linksのブログリンク |

**主要処理フロー**:
- **行156**: navbar.itemsの"Blog"リンク（`{ to: "/blog", label: "Blog", position: "right" }`）
- **行225**: footer.linksの"Blog"リンク

### プログラム呼び出し階層図

```
Docusaurus Build Process
    |
    +-- website/blog/ (Source Directory)
    |      |
    |      +-- 2026-01-14-3.8.0.md
    |      +-- 2025-11-27-3.7.0.md
    |      +-- 2025-06-23-3.6.0.md
    |      +-- 2025-02-09-3.5.0.md
    |      +-- ... (42 total blog posts)
    |
    +-- website/docusaurus.config.js (Configuration)
    |      |
    |      +-- presets[0][1].blog
    |      |      +-- feedOptions (RSS/Atom)
    |      |      +-- blogTitle
    |      |      +-- blogSidebarCount: 10
    |      |      +-- postsPerPage: 10
    |      |
    |      +-- navbar.items
    |      |      +-- { to: "/blog", label: "Blog" }
    |      |
    |      +-- footer.links
    |             +-- { label: "Blog", to: "/blog" }
    |
    +-- Generated Output
           |
           +-- /blog (List Page 1)
           +-- /blog/page/2 (List Page 2)
           +-- /blog/page/N (Paginated Pages)
           +-- /blog/YYYY-MM-DD-title (Article Pages)
           +-- /blog/rss.xml (RSS Feed)
           +-- /blog/atom.xml (Atom Feed)
```

### データフロー図

```
[入力]                         [処理]                         [出力]

Markdown Files         ------> Docusaurus Blog Plugin  -----> Blog Pages
(website/blog/*.md)           (Pagination, Feed Gen)          (/blog, /blog/page/N)
       |                                                              |
       +-- Frontmatter                                                +-- RSS Feed
       |      +-- authors                                             +-- Atom Feed
       |      +-- title
       |
       +-- Content
              +-- Pre-truncate (Summary)
              +-- <!-- truncate -->
              +-- Post-truncate (Full Content)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | ブログ機能の設定（フィード、ページネーション等） |
| 2026-01-14-3.8.0.md | `website/blog/2026-01-14-3.8.0.md` | ソース | 最新ブログ記事（Angular v21.1サポート） |
| 2025-11-27-3.7.0.md | `website/blog/2025-11-27-3.7.0.md` | ソース | ブログ記事（Prettier 3.7） |
| 2025-06-23-3.6.0.md | `website/blog/2025-06-23-3.6.0.md` | ソース | ブログ記事（Prettier 3.6） |
| 2023-07-05-3.0.0.md | `website/blog/2023-07-05-3.0.0.md` | ソース | ブログ記事（Prettier 3.0メジャーリリース） |
| 2017-04-13-1.0.0.md | `website/blog/2017-04-13-1.0.0.md` | ソース | 最初のブログ記事（Prettier 1.0リリース） |
