オフラインでHTMLを編集する方法

26A の席、ノートを開いて、画面の隅の wifi アイコンには斜線。あるページに電話番号の間違いがあって、着陸までに直さないといけない——しかも見出しのど真ん中に——なのに締め切りは、この先四時間まったく電波がないことなど、気にもかけません。ページは自分のドライブに保存してあるので、開くこと自体は問題じゃない。問題はエディタのほうです。オフラインになった今、そもそも起動するのか。それとも、もう手元にないあの回線を、こっそり必要としていたのか。

オフラインで直すのは、簡単なほうの半分です。厄介なのは、もっと小さくて、もっと陰険な落とし穴——それはオフラインという言葉そのものの中に隠れています。巡航高度に上がる前に、ちゃんと話します。やり方は二つあって、どちらも、もう一方が守るものを手放します。でもまず、そもそもなぜページをネットから切り離したいのか——電波が死んでいる、というだけの話であることは、めったにないからです。

ファイルをネットに上げたくないとき

編集のあいだ、ページをネットから遠ざけておきたい理由は、いくらでもあります。

機密だから——顧客の仕事、契約のページ、漏らしてはいけない名前や数字がのっている何か。社内限りだから——人事ハンドブックの一ページや運用手順のように、会社のファイアウォールの内側で暮らしていて、そこに留まるべきもの。まだ完成していなくて、生煮えの下書きを、どこかのサーバーにキャッシュされたくないから。あるいは、単に電波がないから——飛行機、トンネルに潜る電車、必要になるたびに切れる、一本だけアンテナの立つ山小屋。

そして、ただの好みのこともあります。自分のファイルのコピーを、誰かのマシンの上に置いておきたくない、一度も。それだけで、じゅうぶんまっとうな理由です。

オフラインでやる、二つの道

というわけで、選択肢は二つ、正反対の方向へ引っぱります。インストールするコードエディタ。それとも、一度だけダウンロードする単一ファイルのエディタ。

選択肢	ネットなしで動く	見た目のページとコードが同期	インストールが要る	向いているのは
ローカルのコードエディタ（VS Code、Notepad++）	動く、一度インストールすれば	いいえ——生のコード、プレビューはブラウザで再読み込み	要る、フルインストール	タグを読むのが苦にならない人
ダウンロードした単一ファイルのエディタ	動く、最初に開いてキャッシュされたあとは	はい	不要——.html ファイル一つ	オフラインで、ページを見たまま編集

コードエディタは、昔ながらの答えです。一度入れれば、ずっとあなたのもの、回線は要りません。難点は、目の前にあるのが生のタグだということ。そして、レンダリングされたページを見るには、ファイルをブラウザにダブルクリックで放り込んで、何か変えるたびに毎回、更新する。もともと HTML を楽に読めるなら、それでいい。読めないなら、骨が折れます。

もう一つの道が、単一ファイルのエディタ——ドライブに保存する .html が一つ、インストーラなし、あなたのページを見たまま開いて、コードはそのすぐ隣。それが、私の作っている道具のいる車線で、「ただページを直したいだけ」の人の大半が、ほんとうに探しているものです。選ぶ前にエディタの全体像が見たいなら、無料の HTML エディタを比べた記事に並べてあります。

一度ダウンロードして、ずっと持っておくファイル

約束したひっかかりは、これです——飛行中に自分でぶつかるより、私の口から聞いてほしい。

ブラウザの中で動く単一ファイルのエディタも、やはりエンジンが要ります——クリックやライブ編集を動かしている、あのコードです。そのファイルを最初に開いたとき、エディタはそのエンジンを取ってきて、あなたのブラウザにキャッシュします。そのあとは、オフラインで動く、毎回、回線なしで。出かける前に、オフライン地図を落としておくのと同じ——電波のあるうちに一度だけ取り込んでおけば、電波の消えた先まで、それがあなたを連れていってくれる。

だから、やることは単純です。ファイルをダウンロードして、まだ wifi があるうちに一度開いて、自分をキャッシュさせる。あとは蓋を閉じて、どこへでも。開きもせずに機内モードへ直行すると、その最初の一回は、白いままかもしれません。接続は一度、一回きり。それが代価で、代価はそれだけ——キャッシュができてしまえば、同じファイルをずっと持っておけて、二度と家に電話しません。

ローカルのコードエディタには、この癖がありません。入れれば、最初からオフライン。ただ、見たままのページを、ビジュアルエディタのようには見せてくれない。どちらを取るか、あなた次第です。

では、何もつながっていない状態で、どうやって編集するのか

エンジンがキャッシュされてしまえば、接続は、もう関係なくなります。

.html ファイルを開く。ページがレンダリングされる。間違った電話番号をクリックして、打ち直すと、下のコードも歩調を合わせて更新される——「クリックで位置を探す」が、確かめたければ対応する行へ飛ばしてくれます。保存すると、Chrome と Edge は、変更をあなたのドライブの元ファイルへ直接書き戻します。ほかのブラウザは、変更を焼き込んだダウンロード版のコピーを渡してきて、元ファイルはそのまま。これ全部が、あなた自身のマシンの上で、ブラウザがファイルを読み書きしているだけ。アップロードは、つながっていようがいまいが、ありません。

テキスト専用モードもあります——レイアウトをロックして、何かを位置からずらすことなく、言い回しだけを書き直せる。コードを書かない誰かが、壊すわけにいかないページの文面を直さないといけないとき、これが効きます。

境界が一つ。これが効くのは一枚の .html ページで、複数ファイルの React や Next のプロジェクトではありません——一枚のページ、リポジトリじゃない。

電波を失う前に、支度をすませる

1. まだ接続があるうちに、エディタを整えておく——コードエディタをインストールするか、単一ファイル版をダウンロードして、一度開いてエンジンをキャッシュさせる。
2. **頼りにする前に、オフラインで試す。**wifi を切って、エディタを開き直し、まだ読み込めることを確かめる。搭乗ゲートで問題に気づくほうが、空の上で気づくよりずっといい。
3. .html ファイルを開く——その中で（ファイルを開くボタンで。素のブラウザタブへのダブルクリックではなく）。
4. 必要なところを変える——テキスト、リンク、画像をクリックして見たまま編集し、構造的なものはコードビューに切り替える。
5. **保存する。**Chrome か Edge なら、ファイルへ書き戻す。ほかのブラウザなら、編集済みのコピーをダウンロードするので、今どのファイルが最新なのかを控えておく。
6. **ちゃんと表示されるか確かめる。**保存したファイルをブラウザにダブルクリックして、ノートを閉じる前に、変更が本当にそこにあるか見ておく。

よくつまずくところ

いくつか、人を噛みにくるものがあって、そのどれもが避けられます。

エディタをダウンロードして、先にオンラインで開いておかない。すると、いざ必要なときに白いまま、しかもそれを直す wifi がない。地上で一度、開いておくこと。

ファイルを開くことと、編集することを取り違える。.html を Chrome にダブルクリックすればページは映るし、DevTools でつついた編集は本物に見える——でも更新すれば消えます。それは見ているだけで、保存ではないから。もし引っかかった覚えがあるなら、その違いをHTML ファイルを編集する方法に書きました。

「コピーをダウンロード」するブラウザで、コピーを見失う。番号を直して、新しいファイルを保存して、それから、うっかり古い元ファイルのほうを編集し続ける。名前をはっきり付けるか、変更が一つのファイルに戻る Chrome か Edge で作業する。

オフライン＝安全、と思い込む。違います。オフラインが取り除くのはアップロードで、機密ファイルを載せたまま失くしたり盗まれたりしうるノートパソコンではありません。ディスクの暗号化は、やはりあなたの仕事です。

フレームワークのプロジェクトまるごとを開けると期待する。開けないし、そのためのものでもありません。一枚のページ。

次のフライトでは、wifi と格闘しないこと。単一ファイル版をダウンロードして、地上で一度開いてキャッシュさせておけば、巡航高度でも、あなたのページを機嫌よく編集してくれます——機密のものも、ひっくるめて。