Markdown Viewer を公開しました

Markdownファイルを開いて内容を確認したいだけなのに、エディタを入れたり、Webサービスへファイルをアップロードしたりするのは少し大げさです。

そこで、ブラウザだけで使える Markdown Viewer を作りました。

できること

Markdown Viewerでは、mdファイルやテキストを読み込み、その場でレンダリング結果を確認できます。

• Markdownのプレビュー
• ソースとプレビューの表示切り替え
• レンダリングしたHTMLのコピー
• ブラウザの印刷機能を使ったPDF保存

用途はかなり限定しています。Markdownを書くための高機能エディタではなく、「手元のMarkdownをすぐ確認する」ことに寄せたツールです。

なぜブラウザ完結にしたか

Markdownの中身には、公開前の記事、社内メモ、設定手順、コード片などが入ることがあります。

オンラインツールで一番気になったのは、「このファイルはどこへ送られているのか」が利用者から分かりにくいことでした。そのため、Markdown Viewerでは入力された内容をサーバーへ送って処理する方式を採らず、ブラウザ内で読み込み・変換する構成にしています。

さらに、単に「送信しません」と書くだけではなく、Content-Security-Policy（CSP）で外向きの通信経路を制限しました。この設計と、公開後に実際に見つけた外部画像の通信経路を塞いだ経緯は、ブラウザ完結ツールの「送信しない」を、約束ではなく構造にする にまとめています。

外部画像はそのまま読み込まない

Markdownには、次のように外部URLの画像を埋め込めます。

![](https://example.com/image.png)

これをそのまま表示すると、Markdown本文をサーバーへ送っていなくても、画像の取得時には外部サイトとの通信が発生します。

そのため現在のMarkdown Viewerでは、外部画像への通信をCSPで遮断し、表示側でも外部画像をそのまま読み込まないようにしています。ブラウザ完結を名乗るなら、本文だけでなく、Markdownから派生する通信も含めて考える必要があると分かりました。

向いている場面

• インストールできないPCでmdファイルを確認したい
• READMEやメモの見た目だけ素早く確認したい
• MarkdownをPDFとして保存したい
• ファイルをアップロードする方式を避けたい

一方、GitHub上で最終的に公開するREADMEなど、特定サービス上での表示を完全に再現したい場合は、そのサービス自身のプレビューを確認するのが確実です。Markdownには実装ごとの差があるためです。

Yomuとの違い

Markdown Viewerの公開後、Markdownを確認するだけでなく、そのまま文章を修正し、公開先へ持っていきたい用途に対応するため、ブラウザ型MarkdownエディタのYomuも公開しました。

2つの道具は、次のように役割を分けています。

読むだけならViewer、原稿を仕上げるならYomuです。Viewerで足りる用事に高機能なエディタを使う必要はなく、編集や公開先別の変換が必要になった時点でYomuへ移る形を想定しています。

使い方を目的別に確認する

Markdown Viewerの使い方は、やりたいことごとに分けて整理しています。該当記事が公開されると、以下の案内が自動で表示されます。

インストールせずにMarkdownを確認したい場合は、Markdownをブラウザだけでプレビューする方法から見ると全体像をつかみやすいです。

.mdファイルを受け取ったものの開き方が分からない場合は、mdファイルを開く方法で、テキストとして開く方法と整形表示する方法を分けて説明しています。

PDFとして残したい場合は、MarkdownをPDFにする方法で、ブラウザ内で表示して印刷保存する流れをまとめています。

表が崩れる、表示されないときは、Markdownの表が崩れる・表示されない原因で、構文とレンダリング差の切り分け方を確認できます。

GitHubへ上げるREADMEを確認したい場合は、README.mdを公開前にプレビューする方法で、ローカル確認とGitHub上の最終確認の役割を分けています。

機密情報を含むファイルをWebツールで扱う前に、オンラインツールにアップロードしてはいけないファイルとはも確認してください。

小さくても、安心して使える道具にする

最初の機能は多くありません。ただ、ファイルを扱うツールだからこそ、機能数よりも「何をしているか分かること」を優先しました。

今後も、必要な機能を増やしながら、ブラウザ内で完結できる処理はできる限りその構造を維持していきます。

Markdown Viewerを開く