【ITニュース解説】I Built a Markdown Converter That Finally Doesn’t Suck (And It’s Free)

Web上から文章をコピーして自分の資料やブログに貼り付ける際、余計な背景色や壊れた書式、謎のインラインスタイルが大量に付いてきて、困った経験は多くの人が持っているだろう。特にMediumやdev.toのような技術系ブログサイトからコピーすると、見た目だけを意識したHTML構造のため、そのままでは使い物にならないことが多い。このような状況で、きれいでシンプルなMarkdown形式のテキストが手に入れば、どれほど便利だろうか。しかし、これまでのコンバーターは、役に立たないものがほとんどだった。すべての書式を削除してしまったり、不要な背景を残したり、画像とリンクの組み合わせを正しく扱えなかったりといった問題があった。そこで、これらの不満を解消するために、独自のMarkdownコンバーターが開発された。

このコンバーターは「Rich Text To Markdown Converter」という名称で、完全に無料で提供されている。Web上のどんなコンテンツも、瞬時に完璧なMarkdown形式に変換できるリアルタイムのツールだ。大きな特徴は、サーバーを使わず、API呼び出しも一切ない、純粋なクライアントサイドで動作する点にある。つまり、ユーザーのブラウザ内で全ての処理が完結するため、ネットワークの遅延がなく高速で、変換する内容が外部に送信されることもないため、プライバシーの面でも非常に安全だ。

このコンバーターの最も誇るべき機能の一つは、「スマートペースト」だ。テキストを貼り付けると、不要な背景色、インラインスタイル、CSSクラスといった「ゴミ」をすべて取り除く。その一方で、見出し、太字、斜体、リンク、画像といった文章の構造はきちんと保持する。既存の汎用ライブラリを使うのではなく、何百もの実際のWebサイトでテストを重ねて構築された、独自のHTMLクリーナーがこの処理を実現している。例えば、リンク内に画像だけが含まれている場合や、アンカーリンクが設定された見出し、余分な空白を含むコードブロックといった、複雑なケースにも対応できるように細かく調整されている。

また、「リアルタイムMarkdownプレビュー」も重要な機能だ。テキストエディタに何かを入力したり貼り付けたりするたびに、瞬時に右側のプレビューパネルにMarkdown形式の出力が反映される。これは「変換」ボタンを押したり、読み込みを待ったりする必要がないことを意味する。全ての見出しレベル、ネストされたリスト、適切な書式のテーブル、そしてスマートな空白処理が施されたコードブロックや複数行の引用ブロックなど、多様な要素に対応したカスタムのHTML-to-Markdownパーサーが、この高速な変換を可能にしている。

特に開発者がこだわったのが「画像処理の賢さ」だ。多くのWebサイトでは、画像をライトボックス効果のためにアンカータグで囲んでいる。既存のコンバーターは、このリンクをそのまま残したり、画像を壊してしまったり、不正なMarkdown構文を生成したりする問題があった。このコンバーターでは、リンクタグの中に画像のみが含まれており、テキストが含まれていない場合に、そのリンクを無視して画像のみをMarkdown形式（例：![altテキスト](画像URL)）で抽出する仕組みが導入されている。これにより、本当に必要な情報だけが抽出され、無駄なリンクが削除される。

さらに、「見出しリンクの除去」も地味ながら非常に便利な機能だ。dev.toやMediumのようなプラットフォームでは、ディープリンクのために見出し自体がアンカーリンクで囲まれていることが多い。これをそのまま変換すると、見出しのテキスト部分がリンクになってしまい、意図しない出力になってしまう。このコンバーターは、リンク要素が見出し要素の内部にある場合、そのリンクを削除し、純粋な見出しテキストだけを抽出して出力する。これにより、常にきれいな見出しが得られる。

「コードブロックの完璧な処理」も開発者のこだわりが見える点だ。GitHubやStack Overflowなど、様々な場所からコードをコピーすると、先頭や末尾に余分な空白行があったり、プラットフォームごとに異なる書式が適用されていたりする。このツールは、コードブロックの先頭と末尾にある不要な空白行を削除しつつも、PythonやYAMLなどのプログラミング言語で重要な、内部のインデントや空白は正確に保持する。これは一見単純に聞こえるが、数十もの複雑なケースをテストして初めて実現できる高度な処理だ。

機能面だけでなく、ユーザー体験にも細かな配慮がなされている。開発者は既存の退屈な開発者ツールとは一線を画し、LinearやNotion、VercelといったモダンなSaaSアプリからインスピレーションを受け、プロフェッショナルなデザイン言語を採用した。ロゴアイコンの繊細なグラデーション、ボタンやモーダルの滑らかなアニメーション、レイヤー化されたシャドウによる適切な立体感、8ピクセルグリッドシステムに基づいた一貫したスペーシング、そして適切な文字間隔が設定された洗練されたタイポグラフィなど、細部にまでこだわり、高級感のあるダークテーマを構築した。

リンクや画像、テーブルを挿入する際にも、ブラウザ標準の素っ気ないprompt()ダイアログではなく、専用のモーダルシステムが用意されている。このモーダルは、背景のぼかし効果や滑らかなスライドアップアニメーション、入力フィールドへの自動的なフォーカス、エンターキーでの確定やエスケープキーでの閉じる操作といったキーボードショートカット、そして分かりやすいエラーメッセージによるフォームバリデーション（入力値検証）など、ユーザーが快適に操作できるように設計されている。

エディタとプレビューパネルの間の仕切りをドラッグして、それぞれの表示領域を自由に調整できる「リサイズ可能なパネル」も、ユーザーの作業環境に合わせて柔軟に対応できる機能だ。さらに、内容が何もないパネルがユーザーを途方に暮れさせることのないよう、大きな絵文字と「何をすべきか」を明確に伝えるメッセージ、そして便利なヒントが表示される「スマートな空の状態」も実装されている。リアルタイムで更新される文字数、単語数、行数といった「ライブ統計」は、記事の文字数目標達成やドキュメントサイズの確認に役立つ。また、コピーやダウンロードといったアクションが成功した際には緑色の、入力検証エラーの際には赤色の「トースト通知」が、画面右下から滑らかに表示され、ユーザーに即座にフィードバックを提供する。

技術的な選択に関して、このコンバーターはReactやVueといったJavaScriptフレームワークを一切使わず、純粋なVanilla JavaScriptで開発されている。その理由は、フレームワークのオーバーヘッドをゼロにすることで、アプリの起動や動作が瞬時に行われる「パフォーマンス」の高さにある。また、依存関係が少ないため「シンプルさ」と「保守性」が高く、誰でもコードを読んで理解しやすい。さらに、たった一つのHTMLファイルで全体のファイルサイズが50KB未満に抑えられていることも大きなメリットだ。

エディタ部分には、リッチテキスト編集のネイティブなサポートや、document.execCommandによる組み込みの元に戻す・やり直す機能、HTML全体にアクセスできる貼り付け処理のハンドリング、そしてより優れたユーザー体験を実現するためにcontenteditable属性が使用されている。ただし、貼り付けイベントを適切に処理し、挿入前にコンテンツをクリーンアップする工夫が必要だった。

HTMLからMarkdownへの変換には、Turndownのような既存のライブラリを使わず、独自のカスタムHTML-to-Markdownパーサーが構築された。これは、既存ライブラリではうまく処理できない、貼り付けられたコンテンツの背景色、アンカーで囲まれた見出し、画像のみのリンク、コードブロックの過剰な空白といった特殊なケースに完全に対応するためだ。

「完全クライアントサイドアーキテクチャ」の採用は、ユーザーのコンテンツがデバイスから外部に出ることがないため「プライバシー」が保護され、ネットワーク遅延がないため「速度」が非常に速く、初期ロード後はオフラインでも動作するため「信頼性」が高い。さらに、サーバーやAPI、データベースが不要なため、開発コストも運用コストもゼロという利点がある。テーマ設定を容易にするために、CSSのカスタムプロパティ、いわゆる「CSS変数」をフル活用したデザインシステムも構築されており、将来的なライトモード追加なども変数値を変更するだけで簡単に実現できるようになっている。

このツールを開発する中で、様々な困難に直面した。その一つが「ペーストイベントの複雑さ」だ。Webサイトによって、貼り付け時に提供されるデータ形式が異なり、完全なDOM構造を持つHTMLを送るものもあれば、プレーンテキストのみを送るものもある。中には閉じタグがない壊れたHTMLや、全てを台無しにするインラインスタイルが含まれることもあった。この問題に対しては、可能な限りHTMLデータを優先的に利用し、それを積極的にクリーンアップしてから挿入するという解決策がとられた。

モーダルダイアログを開く際に、ユーザーがエディタで選択していたカーソル位置やテキスト選択が失われてしまうという「モーダル表示時の選択範囲管理」も課題だった。これを解決するため、モーダルを開く前に現在の選択範囲を保存し、モーダルを閉じた後にその選択範囲を復元する独自の関数を実装することで、シームレスな操作を可能にしている。

「コードブロックの空白処理」も開発者を悩ませた点だ。貼り付けられたコードには、先頭や末尾に3〜4行の不要な空白行が含まれる一方で、コード内部の空白行（例えばPythonのクラス定義間など）は、プログラムの可読性や実行に不可欠なものだ。単純なトリミングでは内部の空白も削除されてしまうため、行ごとにループ処理を行い、先頭と末尾の非空白行までをトリミングし、内部の空白はすべて保持するという、緻密なロジックが実装された。

Markdownのテーブルではセル内に改行を含めることができないが、貼り付けられたテーブルには改行が含まれることがよくあるという「テーブルセルの改行問題」もあった。これに対しては、テーブルのセルを処理する際に、セル内の改行文字をスペースに置換するというシンプルな解決策で、大きな効果を得られた。また、ツールバーボタンの配置やパネルの縦積み、モーダルの小画面への対応、ネイティブのようなタッチスクロールなど、「レスポンシブデザイン」を損なわずに機能させることにも苦労し、Flexboxやメディアクエリ、-webkit-overflow-scrolling: touchといった技術を駆使してモバイル体験を完璧なものにした。

このツールは、ブログ記事のクロスポスト、GitHubのREADME作成、古いHTMLコンテンツのクリーンアップ、ドキュメント作成、手軽なメモ作成など、様々な場面で役立つように設計されている。リアルタイム変換や効率的なDOM操作、CSSによるハードウェアアクセラレーション、メモリリークの防止といった「パフォーマンス最適化」も徹底されているため、どんなに大量のコンテンツを扱ってもスムーズに動作する。

開発を通じて、contenteditableの奇妙な挙動や、MarkdownがHTMLの全てを表現できない限界、そして「ユーザーテスト」がいかに重要であるかを学んだという。最初のバージョンでは気づかなかった問題点（背景色、画像リンク、見出しリンクなど）が、実際のWebサイトでテストすることで初めて明らかになった。また、ツールチップの配置、ボタンのホバー状態、空の状態のメッセージ、エラーフィードバック、キーボードショートカット、タッチジェスチャーといった「細部のこだわり」が、単に機能するツールと、使っていて心地よい「優れたツール」との違いを生むことも実感した。そして、この特定の用途に焦点を当てたツールにおいては、現代的なフレームワークよりも「Vanilla JavaScript」が、開発速度、パフォーマンス、メンテナンスの容易さにおいて最適解であったことも発見だ。

このコンバーターは、約20時間の開発期間で、JavaScript約500行、CSS約800行、HTML約200行という、総ファイルサイズ48KBのコンパクトなコードベースで実現されている。依存関係は一切なく、Chrome 90+、Firefox 88+、Safari 14+といった主要ブラウザで動作する。初期ロード時間は100ミリ秒未満、5000ワードの記事の貼り付けから変換までは50ミリ秒未満、メモリ使用量も約15MBと非常に効率的だ。

このツールの開発者の哲学は、「ゼロ設定」、「即時フィードバック」、「寛容なUX」、「キーボードファースト」、「デフォルトで美しいデザイン」という五つの柱に基づいている。設定メニューは不要で、スマートなデフォルト設定で全てが機能する。あらゆる操作が即座に反映され、読み込み待ちはない。間違いを犯しても簡単に元に戻せ、モーダルにはキャンセルボタンがあり、確認メッセージによってデータ損失を防ぐなど、ユーザーのミスを許容する設計になっている。パワーユーザーはマウスに触れることなく全ての操作をキーボードショートカットで行える。そして、デザインは単なる装飾ではなく、明確さを追求したもので、全てのピクセルが目的を持って配置されている。

開発者は、このツールが「より良い仕事」を可能にすると考えている。以前は手作業でHTMLをクリーンアップしたり、Markdown構文を手書きしたり、書式設定を一つずつコピーしたりしていた作業が、今では貼り付けるだけで済むため、記事一本あたり10〜15分、週に3〜4本の記事を書く人にとっては毎週1時間もの時間を節約できる。これは単なる時間の節約だけでなく、書式設定に気を取られることなく、執筆という本来の創造的な作業に集中できるという、精神的な負担の軽減にも繋がる。

開発者は、このツールをオープンソース化することも検討しているが、サポートの負担や機能追加の管理、競合他社の出現といったデメリットと、コミュニティからの貢献や学習機会の提供、信頼性の向上といったメリットを天秤にかけている段階だ。

実際にこのツールを使ってみることが、その価値を理解する最も良い方法だと開発者は言う。Mediumやdev.to、個人のブログなどから画像やコードを含む段落をコピーして、このコンバーターに貼り付けてみれば、開発者が20時間を費やして作り上げた「魔法」を体験できるだろう。細部へのこだわりが積み重なって、ストレスなく「ただ機能する」ツールが生まれたのだ。

この経験は、時には「自分が欲しかったツールを自分で作る必要がある」という教訓を与えてくれた。既存のコンバーターでは満たされなかったニーズを、自らの手で解決し、毎日使うことができる、誇りに思えるツールを完成させた。滑らかなアニメーションから賢い貼り付け処理、そしてきれいなMarkdown出力まで、すべての細部が意図的に設計されており、単に動作するだけでなく、使っていて心地よい、高速で美しく、信頼性の高いツールがここに誕生したのだ。開発者は、このv1.0がさらなる進化を遂げることに期待している。