Microsoft Edgeでの*.htmlファイルの編集

Microsoft Edgeはクリエイティブな要素がまったくない愚民用のバカ・ツールだと思っているが、それはここではset aside(脇に置いておく)しておこう。

さて、Microsoftの息のかかったサイト(https://answers.microsoft.com)に次のようなQ&Aがあった。
参考
Q
Microsoft Edgeを最新にアップグレードしたらHP.のHTMLソースの編集が出来なくなってしまった。
A
HTML ソースの「編集」と書かれていますが、これは自分で作成した Web ページのソースを表示させて編集し、保存して Web ページに反映したいということでしょうか?
であれば、Edge の開発者ツールにはそういう機能はありません
Visual Studio Code 拡張機能をインストールすれば、ソースを Visual Studio Code で編集し、ローカルに保存することはできそうですが。
たかが短い単なるテキストファイルの編集である。メモ帳で編集すれば十分である。そんなことに「Visual Studio Code」とは何と大袈裟な。もうマトはずれで笑えるトンチンカンな回答である。

エクスプローラーで当該ファイルのあるフォルダのファイルリストを表示させておいて、右上のほうにある「開く▼」をクリックして「メモ帳」でオープンすればよいだけである(Fig.1)。特別にカネもかからない簡単な方法である。おそらく昔からあったこの方法がIEなきあとのEdge時代の*.htmlファイルの編集方法として使われるだろう(と思う)。IEではIE内部から表示しているファイル名をメモ帳に渡して自動的に呼び出していた(IEがその二重手間を吸収していただけのこと)。

Fig.1


また、*.htmlファイルへのショートカットがあればそれを右クリックしてもメモ帳でオープンできる(Fig.2)
Fig.2

ところで、ローカルで「自分で作成した Web ページのソースを表示させて編集し、保存」することは今のEdgeではできるようである。もちろん、Edgeからファイル名を渡してメモ帳を呼び出すという便利な方法(IEでの方法)は使えない。以下、読み書き・修正・削除・変更などを「編集」と呼ぶ。たぶん昔はEdgeでは*.htmlファイルの編集はできなかったのではないかと思う。このQ&Aは2020年7月のものである。

さて、今Edgeでそれをするには「開発者ツール(DevTools)」というものを使うことになる。これは[F12]または[Ctrl]+[Shift]+[I]Edgeの右半分の画面に呼び出されるものである。

これが文字が小さくて、操作が煩瑣で面倒、不便で手間がかかるわりには効果が少ない。しかも解説のドキュメントもほとんどないから不親切で、決して使い勝手の良いものではない。しかもそれでできる範囲も限られているのが難点である。IEのようにどんなファイルでも軽く「メモ帳」でサッサッと編集できたのと比べると雲泥の差である。


開発者ツール
Edge起動直後の何もないときに[F12]キーを押したところ。この右半分が「開発者ツール」の画面になる。これはDevToolsと呼ばれることもある。



編集の仕方

以下、Edgeで表示しているローカルなページを編集してみよう。

1
ローカルにあるpopuli.htmlというファイルをEdgeで見て、[F12]キーを押したところ。
「ソース」タブと「ファイルシステム」タブが選択されている(青色下線がついている)。


2
ここで、「ページ」タブをクリックする。
そうすると、左側にディレクトリ構造と右側にソースが表示される。
「ソース」の部分のカーソルのある行が黄色の反転で表示されている。このままでソースはリードオンリー(読み込み専用)で書き込みや修正などの編集はできない。


3
ソースに書き込みなどができるようにするためには、「ファイルシステム」タブを選択し、「+フォルダをワークスペースに追加する」をクリックして、現在表示しているファイル(populi.html)のあるフォルダ(ed1)を「ワークスペース」に指定する必要がある。
そうすると「ソース」の部分でカーソルのある行が黄色の反転で表示されていたものが消える。これで追加・書き込み・修正・削除などの編集作業ができることになる。以後、このエリアを「ソースエディタ」と呼ぶことにする。


4
ソースの部分に実験的に赤枠で囲んだ部分を追加書き込みしてみる。単純なテキストだけでなくタグも書き込める。


5
ソースの変更を保存するためには、カーソルをソースエディタ内に置いてマウスの右クリックをすると次のようなメニューが出る。ここで「Save as...」をクリックする(新規保存に近い)。
または、[Ctrl]+[S]でも同様にファイルの保存ができる。こちらは「上書き保存」で保存先フォルダ選択のダイアログは出ない。修正の場合はこちらの方が便利である。


6
保存が終ったら、実際に変更されているかの確認である。
左半分の画面の「更新」ボタン(時計回り矢印マーク)を押して、populi.htmlファイルを再読み込みすると、ファイルが変更されていることが確認できる。


メモ
書き込みができたら、右半分の部分にある「ソース」の[×]や「開発者ツール」の[×]を押して、ウインドウを消しておく。
「ワークスペース」に指定したフォルダは「削除」しておいてもいいし、後々同じように編集することがあるのならそのまま残しておいても問題はない。この設定はEdgeに記憶されているようである。再起動してもその設定は残っている。

7
最終確認。もう一度、populi.htmlを単独で読み込んだところである。正常に書き込み編集ができていることがわかる。


メモ
以上がおおまかな手順である。それにしても面倒である。煩を厭わなければメモ帳とEdgeを並行して起動して、比較対象しながら出来具合いを確認して書いていくのが今では最も手軽で手頃な方法かもしれない(Fig.1, Fig.2)。特別のソフトもいらない。

しかし、Edgeでも結局は*.htmlファイルの編集ができるものなら、IE方式でそれができるようにしたほうがはるかに簡便である。老衰企業のMicrosoftがいかにユーザーのニーズをくみ取っていないかがよくわかる。所詮は殿様商売の自己満足的な趣味的ソフトにすぎない。


注意点

1
この「開発者ツール」で*.htmlファイルを編集する場合、対象ファイルはUTF-8またはUTF-8Nで書かれている必要があるUTF-8BOMのないものをUTF-8Nという。ちにみにメモ帳のデフォルトはUTF-8Nである。このサイトではPCSM(パソコン・スマホ共用)化に際しては原則としてUTF-8にしている。

それ以外の文字コードで書かれている場合(たとえばShift_JISなど)、以下のように文字化けして使うことができない。
ただし、ファイルに書き込みなどをせずに、単にソースを見る(読み込み専用/リードオンリー画面)だけならShift_JISのソースでも正常に見える。なお、ワークスペースに指定したフォルダは常に書き込みなどができるので、リードオンリーにはならない。リードオンリーになるのはワークスペースに指定したフォルダ以外の部分にあるファイルである。



2
右側の「開発者ツール」で編集して「Save as...」で保存する場合、実質的には「上書き」保存だが、どんな場合でも常にドライブC:の「PC」の「ダウンロード」が保存先フォルダになる。ここはそのファイルの位置に合わせて適当なフォルダに指定する必要がある(D:\Homepage2\taro\ipc\ip3)。これが煩瑣で面倒である。「上書き保存」の場合は[Ctrl]+[S]がよい。



3
なお、この「開発者ツール」はEdgeに何も表示されていない場合でも、単独で起動して使うことができる。もちろん修正変更して保存することもできる(ワークスペースで指定したフォルダ内のファイルに限られる)。


YouTubeでくだらない動画を見ながら片手間にシコシコとファイルを修正することにも使える(笑)。ヒマつぶしの余興ソフトとしては便利である。


- 2021/06/27 -