ブログ記事が25件に達した。 これだけの数を書くと、過去の記事が埋もれていき、「自分がいったい何を積み上げてきたのか」が見えにくくなる。

そこで、Obsidianのような 「Graph View（ナレッジグラフ）」 をブログに実装することにした。 記事を「点」、リンクを「線」として、夜空の星座のように表示する機能だ。

実装の仕組み

使ったのは、物理演算ライブラリの定番 force-graph だ。 仕組みはシンプルで、以下の3ステップで動く。

1. 地図を作る: ビルド時に全記事をスキャンし、つながり情報（JSON）を生成する。
2. 配置する: ブラウザ上でJSONを読み込み、物理演算でフワフワと漂わせる。
3. 移動する: 点をクリックすると、その記事へ飛ぶ。

立ちふさがる「404エラー」の壁

実装自体は相棒のGeminiと協力してすぐにできた。 画面上には美しいドットの集合体が表示され、マウスでグリグリ動かせる。

しかし、いざドットをクリックすると……。

404 Not Found ページが見つかりません。

なぜだ？ ブラウザのURL欄を見ると /posts/Antigravity_Gemini となっている。 記事ファイルはある。スペルも合っている。なのに表示されない。

真犯人は「几帳面なAstro」

数時間の格闘の末、ログ（足跡）に決定的な証拠を見つけた。

• Graph Viewの案内先: /posts/Antigravity_Gemini （大文字あり）
• 実際のブログURL: /posts/antigravity_gemini （全部小文字）

犯人は 「Case Sensitivity（大文字・小文字の区別）」 だった。 AstroはURLを生成する際、ファイル名に含まれる大文字を 勝手に全て小文字に変換 し、さらに先頭の日付（2026-02-06-など）もカットしていたのだ。

一方、私のプログラムはファイル名を「そのまま」使っていたため、「名前は似ているが別人」として門前払いされていたわけだ。

解決策：強制正規化

地図を作るスクリプト（generate-graph.mjs）に、Astroと同じルールを叩き込んだ。

// 解決策：日付をカットし、強制的に小文字にする
const slug = fileName.replace(/^\d{4}-\d{2}-\d{2}[-_]/, '').toLowerCase();

<small>※（執筆協力：Gemini / 編集・監修：古老）</small>;