Markdownファイルをブラウザ内だけでプレビューし、HTMLコピーやPDF保存まで行える「Markdown Viewer」を公開しました。設計上、入力内容を外部へ送らない構成にしています。
Markdownファイルを開いて内容を確認したいだけなのに、エディタを入れたり、Webサービスへファイルをアップロードしたりするのは少し大げさです。
そこで、ブラウザだけで使える Markdown Viewer を作りました。
できること
Markdown Viewerでは、mdファイルやテキストを読み込み、その場でレンダリング結果を確認できます。
- Markdownのプレビュー
- ソースとプレビューの表示切り替え
- レンダリングしたHTMLのコピー
- ブラウザの印刷機能を使ったPDF保存
用途はかなり限定しています。Markdownを書くための高機能エディタではなく、「手元のMarkdownをすぐ確認する」ことに寄せたツールです。
なぜブラウザ完結にしたか
Markdownの中身には、公開前の記事、社内メモ、設定手順、コード片などが入ることがあります。
オンラインツールで一番気になったのは、「このファイルはどこへ送られているのか」が利用者から分かりにくいことでした。そのため、Markdown Viewerでは入力された内容をサーバーへ送って処理する方式を採らず、ブラウザ内で読み込み・変換する構成にしています。
さらに、単に「送信しません」と書くだけではなく、Content-Security-Policy（CSP）で外向きの通信経路を制限しました。この設計と、公開後に実際に見つけた外部画像の通信経路を塞いだ経緯は、ブラウザ完結ツールの「送信しない」を、約束ではなく構造にする にまとめています。
外部画像はそのまま読み込まない
Markdownには、次のように外部URLの画像を埋め込めます。
これをそのまま表示すると、Markdown本文をサーバーへ送っていなくても、画像の取得時には外部サイトとの通信が発生します。
そのため現在のMarkdown Viewerでは、外部画像への通信をCSPで遮断し、表示側でも外部画像をそのまま読み込まないようにしています。ブラウザ完結を名乗るなら、本文だけでなく、Markdownから派生する通信も含めて考える必要があると分かりました。
向いている場面
- インストールできないPCでmdファイルを確認したい
- READMEやメモの見た目だけ素早く確認したい
- MarkdownをPDFとして保存したい
- ファイルをアップロードする方式を避けたい
一方、GitHub上で最終的に公開するREADMEなど、特定サービス上での表示を完全に再現したい場合は、そのサービス自身のプレビューを確認するのが確実です。Markdownには実装ごとの差があるためです。
小さくても、安心して使える道具にする
最初の機能は多くありません。ただ、ファイルを扱うツールだからこそ、機能数よりも「何をしているか分かること」を優先しました。
今後も、必要な機能を増やしながら、ブラウザ内で完結できる処理はできる限りその構造を維持していきます。