2026年2月28日の開発日記

HTMLファイルの中でMermaid図が重なり合ってテキストがはみ出している画面を見て、「これはランタイムレンダリングの限界だ」と判断した瞬間から、今日の作業が始まった。HTML記事のMarkdown変換、Mermaid図の静的SVG化、そしてブログ一覧に記事が出てこないバグの修正まで、2セッションで片付けた。

今日やったこと

1. HTMLロジックフロー記事のMarkdown変換

「お金儲けしたいんだけど、何の仕事が一番いい？」への回答ロジックをまとめたHTMLファイル（logic-flow-v2.html）を、Nuxt Content用のMarkdown記事に変換した。3冊のマネー本からロジックを組み立てた記事で、インラインSVGとMermaid図が混在していた。

主な成果:

• HTMLからMarkdownへの構造変換（見出し・引用・SVG埋め込み）
• インラインSVG（幸福の方程式など）はそのままMarkdownに貼り付け
• frontmatterのcategory/project_nameでenumに存在しない値を指定してビルドエラーが出たため、既存のenum値に修正
• category: "personal", project_name: "personal" に確定

2. Beautiful MermaidによるSVG図の生成

Mermaidコードブロックをそのまま埋め込んだところ、ノードが重なりラベルが枠からはみ出した。環境によってレンダリング結果が変わるランタイム描画を諦め、beautiful-mermaidパッケージで静的SVGを生成する方向に切り替えた。

生成した4つのSVG:

主な成果:

• 一時的なNode.jsスクリプトを書いて4つのSVGを生成し、スクリプトは削除
• Markdownからは ![alt](./esbi-quadrant.svg) で参照する形式に統一
• Chrome DevToolsで表示確認 --- どの環境でも同じ見た目が保証される状態になった

3. ブログ一覧ページのタイムゾーンバグ修正

Chrome DevToolsで記事の表示を確認したところ、記事の個別ページは開けるのにブログ一覧（/blog）に記事が出てこなかった。

原因は publishedAt の日付比較にあった。"2026-02-28" はUTCの 2026-02-28T00:00:00Z として解釈されるが、JST（UTC+9）では 2026-02-28T09:00:00 になる。フィルタ条件 publishedAt <= now がUTC基準で「まだ未来の記事」と判定し、一覧から除外していた。

主な成果:

• 日付比較ロジックをタイムゾーン非依存に修正
• 一覧ページと個別ページの表示が一致するよう検証

詳細: HTML→Markdown変換とMermaid図のSVG化

今日の学び

• Mermaidのランタイムレンダリングはフォントとビューポートに引きずられる。SSGサイトでは静的SVGに変換しておくと、環境差が消える。beautiful-mermaidはCLI不要で、スクリプトを書いて生成して捨てるまで5分で終わった
• publishedAt: "2026-02-28" はUTCとして解釈される。JSTで当日の記事を書いても、UTCでは「まだ明日」になっていることがある。ブログ一覧で記事が消える現象を目の前で見て、初めてこのずれが腑に落ちた
• Nuxt Contentのfrontmatterでenumに存在しない値を使うとビルド時にエラーが出る。content.config.ts の定義を確認してから設定する手順を踏まないと、ビルドの度に止まる

明日やること

• ブログ一覧ページのタイムゾーン修正が他の日付フィルタにも波及していないか確認する
• beautiful-mermaidの生成フローをスキル化して、次回以降のMermaid→SVG変換を1コマンドで実行できるようにする

関連記事

• 「お金儲けしたいんだけど、何の仕事が一番いい？」への回答ロジック
• HTML→Markdown変換とMermaid図のSVG化