Markdown→HTML変換ツールを作った理由｜ブラックボックスを少しだけ半透明にしたい

こんにちは。麗です。

Markdownで書いた文章をHTMLへ変換し、変換後のコードと実際の見た目を並べて確認できるツールを作りました。

詳しい使い方や現在利用できる機能は、作品紹介ページにまとめています。

「変換するのが少し面倒」が出発点でした

私は普段、ブログの記事をMarkdownで書いています。

現在は自動でHTMLへ変換されますが、以前はHTMLを直接書いたり、Markdownで書いた記事をAIに変換してもらったりしていました。

変換そのものはできますが、「毎回お願いするのは少し面倒だな」と感じていました。

また、変換された結果だけを見ると、自分が書いたMarkdownのどの部分が、どのHTMLタグになったのか分かりにくいこともありました。

そこで、Markdownの入力、変換されたHTMLコード、実際の記事プレビューを一つの画面で確認できるツールを作りました。

HTMLを知らなくても、変化を眺められるようにしたい

Markdownは、見出しの先頭に##を付けるなど、比較的分かりやすい書き方です。

一方、同じ見出しをHTMLで表すと、次のようになります。

<h2>見出し</h2>

HTMLに慣れていないと、最初は記号の集まりに見えてしまいます。

そこで、変換されたHTMLタグへマウスカーソルを重ねると、そのタグが何を表しているのか表示する機能を加えました。

これは本格的なHTML教材というよりも、「自分が書いた文章が、裏側でどのように変わったのか」を気軽に眺めるための機能です。

ブラックボックスを少しだけ半透明にしたい

便利な仕組みが増えるほど、利用者が中の処理を知らなくても使える場面が増えていきます。

私自身も、自動変換やAIに助けてもらっています。

すべての仕組みを理解するのは難しいですが、入力した文章がどのようなコードになり、それが画面にどう表示されるのかを並べて見られれば、完全なブラックボックスではなくなります。

「ブラックボックスを完全に透明にするのではなく、少しだけ半透明にしたい」

それが、このツールに込めた考えです。

機能を増やす前に、方向を考えることにしました

公開後、Xで意見を募ったところ、Mermaid形式への対応や、CSSを含めたファイルのダウンロードといったアイデアをいただきました。

どちらも面白い機能です。

一方で、思いついた機能をすべて加えると、開発が大がかりになり、かえって使いにくくなる可能性もあります。

変換結果だけが欲しい人と、MarkdownとHTMLの関係を知りたい人では、必要な機能も異なります。

そのため、すぐに機能を追加するのではなく、このツールを誰にどのように使ってほしいのか、いったん立ち止まって考えることにしました。

実用ツールと体験ツールの間で

実務向けの変換ツールとして機能を増やす道もあります。

しかし、MarkdownをHTMLへ変換するツールは、すでに数多く存在しています。

このツールらしさがあるとすれば、入力したMarkdown、変換後のHTML、画面上の見た目を並べて、そのつながりを眺められるところです。

公開時点では、完成された多機能ツールにするよりも、MarkdownとHTMLの関係を気軽に体験できる方向が、このツールには合っているのではないかと考えています。

今後も、使いやすさを壊さない範囲で、少しずつ育てていきたいです。