HTMLファイルをアップロードせずにオンラインで編集する

目の前にあるのは、お客さんのページかもしれないし、できれば誰にも見られたくないファイルかもしれません。それをさっと直そうと、オンラインのHTMLエディタを見つけます。カーソルがファイル選択のボタンの上をさまよって——そこで、手が止まる。これ、押したら私のファイルが見知らぬ誰かのサーバーに送られるんじゃないか？

そうとは限りません。オンラインのHTMLエディタは、本当に私的であり得ます。ページはあなたのブラウザで動きますが、ファイルはあなたのマシンの上で直接開かれ、編集され、どこへも送られません——ツールがそう作られていれば、の話ですが。厄介なのは、多くがそうではないこと。だから身につける価値があるのは、オンラインエディタを避けることではありません。私的なものをそれ以外から見分けること、そして信じる前に確かめることです。

「オンライン」と「アップロード」は別の言葉

私たちは「オンライン」を二つの意味で使っていて、その隙間に気づきません。あるときは、作業がどこかのサーバーで起きるという意味——写真をアップロードしてサイズを変えてもらうときのように。別のときは、ただツールがインターネット越しに届いたという意味で、どんなウェブページとも同じ、そのあとは全部があなた側の、線のこちら側で起きます。

HTMLエディタは、そのどちらにもなり得ます。サーバー側のものは、あなたのファイルを受け取り、上へ送り、あなたが決して見ないマシンの上で編集をして、結果を返してきます。クライアント側のものは、二つ目のほう。HTMLとCSSとJavaScriptでできたウェブページで、そのページがいったん読み込まれれば、あなたのブラウザがそれを動かします——ファイルを開いて、あなたに変えさせる部分も含めて。あなたのファイルはページの中へ入るのであって、サーバーへ上がるのではありません。

ラベルの言葉は同じ。でも、ファイルがたどる旅は、まるきり別の二つです。

働いているのはあなたのブラウザで、サーバーではない

仕組みはこうです——一度これが見えると、見当違いの心配をしなくなるので。

クライアント側のエディタがファイルを開いてと言うとき、それはブラウザの機能を使っています——ただのファイル選択画面か、ChromeとEdgeにある新しめの File System Access API か——それがファイルの中身を、ページ自身のコードに手渡します。この受け渡しは、あなたのブラウザの中で起きます。リクエストは一つも、あなたのパソコンを出ません。JavaScriptがあなたの .html の文章を読み、あなたに見せ、あなたの変更を書き戻す。ぜんぶローカルで。

サーバー側のツールは、その道のりをどれ一つ省きません。あなたがファイルを開くか変換したその瞬間、中身をバックエンドへ送り上げ、そこが作業をして返してくる。仕事によっては便利。ただ、私的ではない。

分かれ道は、こんなふうに見えます。

	クライアント側のエディタ	サーバー側のエディタや変換ツール
サーバーから読み込むもの	エディタのページ、一度きり	ページ、加えて操作のたびにあなたのファイル
ファイルが処理される場所	あなたのブラウザの中	あなたに見えないバックエンド
ファイルはアップロードされるか	されない	される
オフラインでも動き続けるか	動く、一度読み込めば	動かない

一分くらいで、自分で確かめる

これは誰の言葉も鵜呑みにしなくていい話です。私のも含めて。あなたのブラウザが教えてくれます。

開発者ツールを開いて——たいていのブラウザはF12、あるいはページを右クリックして検証——Networkタブをクリックします。ページが出すリクエストを、一つ残らず並べてくれます。さあ、エディタでファイルを開いて、見ていてください。ツールがそれをアップロードするなら、あなたが動いた瞬間に新しいリクエストが現れます。たいていはPOSTで、クリックすれば、あなたのファイルの中身がその中に乗って進んでいくのが見えます。ファイルを選んでも新しいものが何も現れなければ、何も送られていません。あなたのファイルは、そのままそこに。

もっと乱暴な確かめ方もあります。エディタを読み込んで、それからwifiを切る。編集をローカルでやるツールは、接続が消えても動き続けます。ファイルを処理するのにサーバーが要るツールは、ただ止まります。線を断って、手にしているのがどちらか見てみましょう。

本当にあなたのファイルを持っていくもの

「オンライン」はいつも安全、という思いを、あなたに残したくありません。そうではないし、あなたが最初に抱いた心配に値するツールも、いくつかあります。

オンラインの変換ツールが、いつもの容疑者です。あなたのHTMLをPDFや画像に変えたり、その場で「きれいに」直して組み直したりするものは、たいていサーバー上でそれをやっています——つまり、あなたのファイルは上がった、ということ。「beautifier」や「minify」の類のページも、たくさんが同じ。作業をアカウントに保存する本格的なオンラインエディタも同じで、そのアカウントは相手のサーバーに住んでいて、あなたのファイルもそこに住みます。どれも自動的に怪しい、というわけではありません。公開のマーケティングページや、どこにでも貼るような一片なら、どうでもいい。でも、お客さんとの契約書、社内のページ、本物の名前や数字が入った何か——それこそが、まっさきに確かめるファイルです。

友だちに渡すなら、こう短く言います。私的なものは何であれ、クライアント側だと確かめたツールを使うか、さもなければ、どこかの適当なサイトに貼らないこと。

私的な編集、開くところから保存まで

クライアント側のエディタで、私的な編集が実際どう進むのか、頭からしっぽまで。私は自分の HTML Tweak を使って話します。まさにこのために作ったので——でも、あなたが確かめたどのツールでも、手順は同じ考えです。

1. ブラウザでエディタを開く。初めての訪問では、どのサイトとも同じように、自分のページとコードをダウンロードします。それはエディタが読み込まれているのであって、あなたのファイルがアップロードされているのではありません。
2. 先へ進む前に証拠がほしい？いまNetworkタブを開くか、ページが読み込めたところで通信を切ってしまう。動き続けます。
3. あなたの .html ファイルを開く。エディタがそれをローカルで読み、本物のページをそのコードと並べて見せます。二つは同期しています。ページの何かをクリックすると、コードの対応する行がハイライトされます——変えたい箇所を探しているとき、これが助かる。
4. 編集する。言い回しを変える、リンクを差し替える、色を直す。構造には触ってほしくない相手にファイルを渡す？テキストのみのモードがレイアウトをロックして、言葉だけを編集できるようにします。
5. 保存。ChromeやEdgeなら、あなたの元のファイルへ直接書き戻します。ほかのブラウザなら、代わりに編集済みのコピーをダウンロードします。どちらにしても、ここへ来るまでにファイルがあなたのマシンを離れたことは、一度もありません。

このリストのどこにも登録はなく、あなたのファイルを抱え込むアカウントもありません。HTML Tweak が開くのは単一の .html ページで、複数ファイルのReactやNextのプロジェクトではありません。そちらには本物のコードエディタがほしいし、それを私的に保つのは、また別の話です。

もっとくわしい案内がほしければ、すでに手元にあるファイルを編集する、あらゆるやり方の一巡りを書きました。それと、無料のエディタの公平な比べものも。私のより他のツールがうまくやるところも含めて。

静かに間違えるいくつかのこと

たいていは、間違った合図を信じたところから来ます。

アドレスバーの鍵マークが私的を意味する、と思い込む。意味しません。HTTPSは、あなたとサーバーのあいだの道のりを暗号化するので、途中の誰もあなたのファイルを読めません——でも、そもそもファイルが送られたかどうかについては、何も言っていない。HTTPS越しのサーバー側の変換ツールも、あなたのファイルをちゃんとディスクに載せています。転送中の暗号化は、決して出ていかないことと同じではありません。

マーケティングの文句にある「アップロードなし」を読んで、そこで止まる。本当かもしれない。Networkタブなら一分で決着がつくし、あなたの元手はゼロです。

ツールを読み込むことと、ファイルをアップロードすることを取り違える。前者はふつう——どのサイトも読み込みます。見張るべきなのは、あなたがファイルを開くまさにそのとき、そのファイルを乗せて出ていくリクエストです。

そして、オフラインのテストを早くやりすぎる。通信を切るのは、エディタのページがすっかり読み込めたあとで。先に切れば、もちろん何も動きません。ツールをまだ受け取っていないのだから。肝心なのは、いったん読み込めば、ローカルのエディタはあなたのファイルを編集するだけのために、もうネットワークを必要としないはず、ということ。

誰にも見せたくないファイルがありますか？ブラウザのNetworkタブを開いて、それを HTML Tweak に落とし、編集しているあいだじゅう、そのパネルが空のままなのを見ていてください。その空のパネルこそ、約束のすべてです——そして、私の言葉を鵜呑みにしなくていい。あなたは、それが起きるのを見ていられます。