「ディスク上のそのファイルを上書きする」には File System Access API が必要で、 現時点でその完全版を実装しているのは Chromium 系ブラウザ(Chrome、Edge、Brave、Arc、Opera)だけです。
従来の <input type="file"> がページに渡すのはスナップショットです。ファイルを選ぶとページは内容を読めますが、
そこから戻り道はありません。編集結果を返すにはダウンロードを発生させ、あなた自身が元のファイルを置き換えるしかない —— つまり
「ダウンロード → ファイルマネージャーを開く → 元の場所へ戻す → 上書きを確認」という 4 段階の儀式です。
File System Access API が変えたのはこの点です。ユーザーが明示的に選んだあとは、ページが 書き込み可能なハンドルを保持でき、保存は本当に同じ場所へ書き戻されます。
| このエディターが使っているもの | 用途 |
|---|---|
showDirectoryPicker() | フォルダを開き、中の .md を一覧する |
showSaveFilePicker() | 名前を付けて保存 |
createWritable() | 同じファイルに新しい内容を書き戻す |
どちらも仕様のうちサンドボックス側(OPFS、ページ専用の非公開ストレージ)は実装していますが、 ユーザーが自分で選んだフォルダに届く側は実装していません。後回しになっているのではなく、 プライバシー上のトレードオフをより慎重に評価しているためです。 ユーザーのディレクトリに書き込み続けられる Web API は、悪用されたときに取り返しがつきにくいからです。
そのため Firefox と Safari では、このエディターは編集・プレビュー・コピーはでき、 保存は新しいファイルのダウンロードに切り替わります。壊れているのではなく、ブラウザがその鍵を渡していないだけです。
許可は今回のブラウジングセッションに紐づいています。再読み込みしても、ページは「どのフォルダだったか」は覚えています (ハンドルは IndexedDB にあるので、サイドバーに 📂 再度開く: フォルダ名 を出せます)。 しかし実際に読み書きするには、もう一度あなたの同意が必要で、その同意はあなたのクリックから始まらなければなりません。 ページが黙って求めることはできない仕組みです。
だからこそ流れは「再度開くを押す → ブラウザが尋ねる → 許可する」であって、自動復元ではありません。 ひと手間増えるのは確かに面倒ですが、それは「知らないうちに Web ページがディスクに書き込むことはない」という保証そのものです。
localhost は例外)。「上書き不可 — 名前を付けて保存」と表示されるので、名前を付けて保存 を使ってください。
出ません。このエディターにはファイルを受け取れるバックエンドがありません。 サイトの役目は HTML を 1 つ渡すことだけで、読み込み・解析・プレビュー・書き戻しはすべてブラウザ内で起こります。 データの取り扱いの詳細はプライバシーポリシーをご覧ください。
このページの .md をダウンロード エディターで開けば、そのままサンプル文書として使えます。