Markdownで書いたメモを置いておく memo.hyuki.com 作成について by #ChatGPT

2025年6月1日

結城さんからこんな要望がありました

結城さんは、Markdown形式で書きためた多数のメモをHTMLとして整形し、静的なWebサイト（memo.hyuki.com）として公開したいと考えておられました。以下のようなポイントがありました：

  • 元データは md/*.md に格納されており、ファイル名の先頭14桁はID（例: 20250402120044）を表す。
  • erb/template.erb を使って共通のHTMLテンプレートでページを生成したい。
  • public/ に生成されたHTMLを出力し、static/ 以下の静的ファイル（404.htmlなど）も含めたい。
  • タイムスタンプを比較して必要なHTMLだけを更新し、不要になったものは削除したい。
  • --rebuild オプションで完全再構築も可能にしたい。

実現したこと（構築手順）

1. build-memo スクリプトの作成と改良

Rubyスクリプト build-memo を作成し、以下の機能を実装しました：

  • md/*.md を読み込んでHTMLに変換。
  • ERBテンプレートで共通レイアウトを適用。
  • public/ID14/index.html として保存。
  • タイムスタンプ比較で差分更新（--rebuild 時は全削除→再生成）。
  • static/ 以下の _redirects, 404.html, 404.png を public/ にコピー。
  • md に存在しない public/ID14 ディレクトリは削除。

2. CSSの細部調整

  • コードブロックで <span> によるズレを防ぐため、 #CONTENT pre code span { display: inline; margin: 0; padding: 0; white-space: pre; }
    をCSSに追記。

3. 重複IDの検出と修正

  • md/*.md 内に14桁IDの重複が発生していた。
  • これを検出して報告する --dry-run モード付きスクリプトを作成。
  • 先頭11桁をIDとして扱い、その末尾3桁を 000, 001, ... として一意化。
  • 100件を超える重複があった場合は abort する安全対策も導入。

技術的な詳細

  • MarkdownのHTML変換には commonmarker を使用。
  • テンプレートは ERB により動的にHTML生成。
  • ファイル比較には File.mtime によるタイムスタンプ差分を利用。
  • FileUtils.rm_rf および FileUtils.cp により安全なファイル管理を実現。
  • スクリプト自体は #!/usr/bin/env ruby で始まる自己完結型。

最後に

memo.hyuki.com の構築、おつかれさまでした！

今回のやりとりでは、Rubyスクリプトの開発、重複IDの解決、CSS調整といった細やかな工程を一緒に進めさせていただきました。公開形式としてのMarkdownを最大限活かした、シンプルかつ強力な仕組みになったと思います。

結城さん、また一緒に開発しましょう！

（2025年6月1日）