Markdown を docx に変換するミニアプリ「DOC」を作った

Markdown で書いた文書を Word (docx) に変換したい場面のために、ブラウザだけで完結するエディタ「DOC」を作った。サーバーに本文を送信せず、変換もすべてブラウザ内で行う。

DOC とは

/doc で使えるミニアプリで、左側の Markdown エディタと右側のプレビューを見比べながら文書を書き、そのまま docx としてダウンロードできるツール。エディタには Monaco Editor (VS Code と同じエディタコンポーネント) を採用しており、シンタックスハイライトや快適なカーソル操作がそのまま使える。

主な機能

Markdown 編集とリアルタイムプレビュー

画面は左右分割で、左が Markdown エディタ、右がプレビュー。境界線をドラッグすれば幅を自由に調整できる。エディタをスクロールするとプレビュー側も連動してスクロールする。

docx へのワンクリック変換

ツールバーのボタンひとつで、入力した Markdown から OOXML (docx の中身の XML) を生成し、ブラウザ内で zip パッケージングして .docx としてダウンロードできる。本文が外部サーバーに送信されることはない。

見出し・段落・太字/斜体/取り消し線・箇条書き・番号リスト・コードブロック・引用・表といった一般的な Markdown 記法に対応しており、変換後も Word でそのまま開いて編集できる。

OOXML タブで変換結果を直接確認

プレビューと切り替えられる「OOXML」タブでは、変換後の XML をそのままエディタ上で確認できる。docx の中身がどう組み立てられているか気になったときに便利。

ヒント

docx が内部的にどういうパッケージ構造を持っているかは、以前 docx をテキストエディタで作ってみた という記事でも触れた。DOC は、その OOXML 生成とパッケージングを自動でやってくれるツールという位置づけになる。

装飾ツールバー

選択したテキストに対して、太字・斜体・取り消し線のボタンで Markdown 記法 (**, *, ~~) を自動的に付け外しできる。組み合わせにも対応しており、たとえば太字と斜体を両方適用すると ***text*** になる。

フォント選択

Noto Serif JP / Noto Sans JP をはじめ、明朝体・ゴシック体・複合フォントから出力フォントを選べる。選んだフォントはプレビューにも即座に反映され、次回アクセス時のためにブラウザに記憶される。

Markdown / docx ファイルのインポート

既存の .md .markdown ファイルはもちろん、.docx ファイルをドラッグ&ドロップまたはファイル選択でインポートすると、Markdown に逆変換して読み込める。既存の Word 文書を下敷きに編集を始めたいときに使える。

AI チャットパネル

OpenRouter に対応した AI チャットパネルを開くと、文書の生成を頼んだり、AI の応答を選択範囲へ反映したり、文書全体を丸ごと置き換えたりできる。プロンプトキャッシュにも対応しており、同じ文書を参照しながらやり取りを続けても無駄なトークン消費を抑えられる。

自動保存

編集中の本文はデバウンス付きでブラウザの localStorage に自動保存される。うっかりタブを閉じてしまっても、次にページを開いたときに続きから編集できる。

まとめ

• /doc は Markdown を docx に変換するブラウザ完結のエディタ
• Monaco Editor による編集 + リアルタイムプレビュー、OOXML タブでの中身確認が可能
• 太字/斜体/取り消し線のツールバー、フォント選択、Markdown/docx インポートに対応
• OpenRouter 対応の AI チャットで文書生成・編集も可能
• 本文はローカルストレージに自動保存され、変換処理もすべてブラウザ内で完結するためサーバーには送信されない

ちょっとした議事録や仕様書を Markdown でさくっと書いて、そのまま Word 形式で共有したいときに使ってほしい。