--- title: "Markdownのウェブを構築する" generator: "Hugo Version: 0.164.0" urlPrev: "https://mehori.com/diary/2026/06/22/index.md" --- Markdownのウェブを構築する ![](https://mehori.com/diary/2026/11/08/2026.11.08.png) ポッドキャスト、ブログ、RSS など、ウェブがいまのような姿になったさまざまな仕組みを作ってきたことで知られている Dave Winer 氏が Web of Markdown という新しいプロジェクトを開始していて注目していました。 [Web of Markdown](https://mehori.com/diary/2026/11/08/http://scripting.com/2026/10/06/005559.html?title=webOfMarkdown) は、いま HTML をレンダリングしているブラウザの代わりに、Markdown を直接表示するのはどうかというアイデアです。なんだか車輪の再発明のようにもみえますが、背景を知るとその必要性も見えてきます。 ウェブサイトを記述する HTML は文章、画像、その他のメディアをブラウザ内でどのように表示するかを記述するプロトコルでしたが、読むための文章のコンテナの側面はだいぶ後退して、いまではありとあらゆるウェブ技術が投入されて CSS で見た目が改変されて表示される現場となっています。 それはそれでよいのですが、Dave Winer のように「書くこと」「読むこと」に集中したい人にとっては「Markdownでいいじゃないか」と考える余地があるわけです。「書くこと」と「読むこと」の間に、表示のフレームワークや、ブラウザの互換性や、Google や SNS といったものがややこしく入り過ぎており、その各所に監視であったり、ランキングや露出を恣意的に上下させる外的な仕組みが入り込んで気持ち悪いと彼みたいな人は考えます。 そこで、サイトには単に Markdown を置き、それを RSS で配信し、フィードのソーシャル・ネットワークで広めるという単純な「書くこと」と「読むこと」に特化した、Google などが排除されたウェブを作るという発想が生まれます。 ## 誰でもブラウザを作れる時代に そうした考え方に基づいて、Dave がさきほど公開したのが BonBonWeb というツールで、これは Markdown がホストされている URL を与えるとブラウザ内でそれをレンダリングして表示してくれます。 たとえば、このブログの先日の記事は[こんな風](https://mehori.com/diary/2026/11/08/https://demo.bonbonweb.org/?url=https%3A%2F%2Fmehori.com%2Fblog%2F2026%2Fbeyond-the-strand%2Findex.md)になります。 ![](https://mehori.com/diary/2026/11/08/bonbonweb1.jpg) MD アイコンを使えばソースを閲覧できて、A アイコンでいくつかの基本的なテーマを選ぶことができます。 ブラウザの中でブラウザを作っているようなものなので、ちょっと面倒にみえますが、重要なのはこの Markdown のプロトコルさえしっかり定義すれば、ブラウザ自体はだれでも生成 AI で自前に作ってしまえるという点です。テーマだって、自分の好みにあわせて作ればいいわけです。 ## このブログでも Markdown 配信をしてみます これは実に Dave Winer らしい考え方なのがしびれます。ポッドキャストだってRSS に音声ファイルをつなぐという、ちょっとしたアイディアで始まったわけですが、いまや全世界で知らない人がいないほどのフォーマットになっています。いまでは Spotify や YouTube によって言葉がハイジャックされそうになりつつあるものの、根幹の部分では「配信リスト + 音声ファイル」という基本はなぞられているわけです。 ブログ記事だって、似たような形で配信できないわけがありません。そしてそれにもってこいのフォーマットが Markdown なのに異論はないでしょう。 もちろんこうした読み方がメインストリームになるとは思えないのですが、趣旨としては賛同しますので、私のブログでも Dave の形式にのっとった Markdown ファイルを、HTML と並行して発行するようにしてみました。 Hugo でこれを実現するのはとても簡単です。まず、テーマの `_default/single.md` のようなファイルを作って、Markdown のテンプレートを作ってしまいます。 ```--- title: "{{ .Title }}" generator: "Hugo Version: {{ hugo.Version }}" {{ with .PrevInSection }}urlPrev: "{{- .Permalink -}}index.md"{{ end }} {{ with .NextInSection }}urlNext: "{{- .Permalink -}}index.md"{{ end }} --- {{ .Title }} {{ with .Params.featured_image }} {{- $src := absURL . }} {{- with $.Resources.Get . }}{{ $src = .Permalink }}{{ end }} ![](https://mehori.com/diary/2026/11/08/{{ $src }}) {{ end }} {{ $body := .RawContent | replaceRE `(?s)\{\{[<%].*?[%>]\}\}\n?` "" }} {{ $body = $body | replaceRE `(!?)\[([^\]]*)\]\(([^)\s:/#][^)\s:]*)` (printf "${1}[${2}](https://mehori.com/diary/2026/11/08/%s${3}" .Permalink) }} {{ $body }} ``` なんかいろいろ正規表現がみえますが、これは Hugo の Leaf bundle で表示されている画像についていちいちパーマリンクが挿入されるようにしているというものです。あと `featured_image` というプロパティがあったらアイキャッチ画像を入れるというロジックはこのブログ固有の話です。 次に `hugo.toml` の設定ファイルで、html に加えて Markdown を出力するように指示をします。 ``` [outputs] page = ["html", "markdown"] ``` あとひとつ、Cloudflare でファイルにアクセスが合った場合に、Markdown ファイルがちゃんと `text/markdown` になるように設定します。これは `static/_header` というファイルで定義しておきます。 ``` /*.md Content-Type: text/markdown; charset=utf-8 ``` これだけで、ブログの全記事に Markdown が生成されるようになりました。どの記事でも、最後に `index.md` が続けば、[閲覧できます](https://mehori.com/diary/2026/11/08/https://mehori.com/blog/2026/beyond-the-strand/index.md)。 各記事の日付の横にも MD アイコンを設置しましたので、これをクリックすると Dave の BonBonWeb へと飛んで Markdown がレンダリングされて表示されます。そのうち、この部分も自前の仕組み変えてもいいのでしょう。 現時点では、これをやっているのは私くらいなものですが、賛同する人がでてきたらそれぞれのフィードを OPML ファイルでつないでネットワークにしてもいいでしょう。その仕組みのどこにも、Google も Twitter も入りこまないわけです。 これはささやかではありますが、ウェブを「書いている人」と「読んでいる人」に取り戻す、反抗のようなものなのです。