html エディタの比較

UB3/informatics/html/html_editor


  1. 概要: コードの綺麗さについて
  2. Visual Studio Code
    • 機能拡張
    • トラブルシューティング
  3. Sublime Text 4
  4. Brackets → Brackets のページへ
  5. Blue Griffon
  6. mi (mac only)

広告

概要: コードの綺麗さについて

BlueGriffon や、ブラウザ上で編集する Jimdo などの CMS のソースでは

  • <span> で文字サイズが 11.643875639275 とかに設定してある
  • 何もテキストがない部分なのに、<span> </span> などタグだけ残っている

などというのが頻繁にあり、これを考えると気持ち悪くなってしまう。つまり html ソースを見ながら編集できるエディタがベスト。

ちなみに MS Word にもこういうゴミが溜まるので、テキストファイルの保存方法もなんとか改善したいところ。

Visual Studio Code

2022 年 5 月の Monterey へのアップデートで Brackets に変えて導入。英語入力の状態で Option + Z とすると wrap text ができる。

全般に、プレビューはフォルダを開いていないと画像や CSS を読み込まないようだ。

Extension

いろいろ試した結果、HTML Preview という名前の機能拡張がベスト。同じ名前の機能拡張がいくつかありるが、Thomas Haakon Townsend という Publisher のもの。右側にプレビューが出て、保存したり特殊なキーを押したりしなくても、プレビューが更新される。

左側の editor 画面を編集しているときに、場所があちこちに飛ぶという問題があったが、これは設定の変更で解決できた。Scroll Editor With Preview と Scroll Preview with Editor が両方 ON になっていると、この問題が生じるようだ。Editor 側にはマップも出ているので、Scroll Preview With Editor のみを ON にしておく。また、Selection やダブルクリックなどの使わない設定もオフにする。これで快適に使えている。

以下のプレビュー機能拡張も試してみた。

  • Ritwick Dey Live Server: Brackets のようにフォルダを開いて、html の部分で右クリック、Open with Liver Server とすると Safari が開く。少し応答は遅いが、一応編集部分にスクロールする。完全ライブではなく、保存すると反映される感じ。これが一番使用に耐える気がする。とりあえずはこれを使ってみる。
  • Microsoft の Live Preview: これも悪くないが、スクロールに対応していない。
  • shawnfunke HTTP Server / HTML Preview はエラーでうまくプレビューできなかった。
  • Kenneth Auchenberg Browser Preview: 廃止予定。Chrome を使うが、うまく動かなかった。
  • ty4z HTML Preview: プレビューできず。
  • negokaz の Liver Server Preview. F1 を押すとコマンド入力のような画面が開き、Show Liver Server Preview でプレビューができる。しかしスクロールなし。
  • YuichiNukiyama Preview on Web Server: Control + Shift + V で、VSCode 内でプレビュー。これはスクロールなし。Control + Shift + l でブラウザが開く。これもスクロールなし。Safari, Chrome とも。

img タグ で画像サイズを知りたいときは、Command + クリックでそのイメージを開くと、画面右下にサイズが表示される。

カラーは、とりあえず Monokai dimmed というのにしてみた。フォントなど、他のお気に入りも探していく。

FTP ソフトを使わずにアップロードできるのはありがたい。SFTP という機能拡張を入れる (4)。これも同じ名前のものが複数あるが、liximomo のものを使用。Command + Shift + P (Control + Shif + P in Win) でコマンドパレットを開き、SFTP Config を選択。

トラブルシューティング

  • VSCode には Emmet がデフォルトで組み込まれていて、例えば p とタイプしてタブを押すと <p></p> と変換される。これが突然効かなくなった。このページ を参考にタブの割り当てなどを変更したがダメ。よく見てみたら、R のコードをコピペしたときに <- が残っていてエラーになっているだけだった。

Sublime Text 4

画面がきれいなので、本当は VSCode よりもこれを使いたい。パッケージのインストールなどはちょっと手間 (参考)。

まず、メニューの Tool から Install Package Control のようなものを選ぶ。すると、Package Control というプラグインがインストールされる。

次に、Control + Shift + p (Mac では Command + Shift + p) でウィンドウが開く。Command Palette というらしい。ここで Package Control: Install Package を選ぶことで、他のパッケージをインストールできるようになる。Package のコントロールという機能自体が、デフォルトではなく Package Control というパッケージで制御されているということになる。

Emmet と LiveServer というパッケージをインストール。

Liver server は、GitHub に従ってセットアップを進める。brew から npm, npm で live-server をインストール。Node.js も ここ からインストール。Command Palette から Preferences: Live Server Setting を選ぶと、左側に設定が出ているが、上に「これは GitHub のを表示してるだけ」のようなメッセージが出る。 Note: These are just mappings to https://github.com/tapio/live-server#usage-from-command-line

左側のメッセージを全部コピーして、右側のほぼ空欄になっているところに貼り付ける。こちらがローカルの設定。さらに、node のインストール記録から、node は /usr/bin/ でなく /usr/local/bin にインストールされたことがわかったので、この設定でも /usr/bin を /usr/local/bin に変更。

Command Palette で Add Repository として、URL に https://github.com/molnarmark/sublime-live-server を記入、enter。

以上を設定してから、Live Server: Start とする。うまくスタートすれば、ウィンドウの一番下にクラッカーのマークが出て、ブラウザに遷移する。Safari でそれらしい画面が開いた。残念ながら、このプレビューでは保存しないと更新されず、さらに CSS や画像も読み込んでいないようである。

このパッケージがいまいちだったので、続いて Browser Sync というパッケージを試す。Sublime Text 3 用のパッケージだが、Command Palette からインストールすると、メニューに Browser Sync が現れる。しかし、Launch としても何も動かない。


広告

Blue Griffon

Firefox 系のエディタ。英語モードをインストール、まだ機能拡張は入れていない。編集の効率は良いが、やはり勝手にソースを書き換えられるのが気に入らず、次第に使わなくなった。


良いところ

  • html コードでなく web サイトのプレビューを直接編集できる Wysiwyg (what you see is what you get) で、やはり編集作業が格段に早くなる。
  • html source の直接編集画面とすぐに切り替えられるのがとても便利。

悪いところ

  • インストール後、html ファイルを開く前に以下の設定をしておかないと、勝手にインデントを入れられたりして大変なことになる (1)。 元のページには 7 項目 (6 項目?) あるが、とくに重要だと思うのは

    1. ソース Source で「長い行を折り返す Wrap long lines」のチェックを外す
    2. ソース Source で「オートインデント Auto indent」のチェックを外す
    3. ドキュメント Documents で「Create a backup before saving a file (*.bak )」のチェックを外す

  • meta tag の中に勝手に改行を入れられる気がする。
  • html ソースを編集したあと、文法ミスがあると Wysiwyg 編集画面に戻れない。このサイトだと Google カスタム検索のタグがなぜか文法ミスと判定されてしまい困ったが、このように html に書き換えたらうまく動作するようになった。
  • Wysiwyg の編集中に書き換えられるソースが汚い。span が連発されたり、文章を消したところにも p タグだけ残っていたりする。

以下は、最初の慣れてないうちに起こったトラブル。

  • Wysiwyg の画面でリンクをコピー & ペーストすると、相対リンクが絶対リンクに書き換えられる? その後再現されていないので、思い違いかもしれない。
  • Brackets で編集した html ファイルの内容を Source にコピーして保存、再度開くと日本語部分が全部 ? に文字化けした。仕方がないので全部打ちなおし。一度 Blue Griffon で編集した後は、Brackets との間を行き来しても大丈夫な模様。
  • html ファイルを保存すると、.bak という拡張子のバックアップファイルが同じ場所に勝手に作られる。Preference で作らない設定にすることができる。


mi (mac only)

日本語のエディタ。選択置換ができる。文字ソースコードをいろいろ選べるなど、基本的だが汎用性の高いエディタという印象。

良いところ

  • 見出し <h></h> タグの部分が小さいウィンドウで表示されるので、構造がわかりやすい。

悪いところ
  • ショートカットキー、拡張機能などが充実しておらず、編集の効率は良くない。

広告

References

  1. BlueGriffon をインストールしたら最初にやっておきたい 7 箇条. Web.
  2. Brackets でライブプレビューが起動しない. とあるプログラマーのブログ. Link.
  3. Word さんは今日もおつかれです. Link.
  4. Visual Studio Code プラグイン「SFTP」の使い方. Link: Last access 2022/05/14.

コメント欄

各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。

禁止ワード: http, the, м (ロシア語のフォントです)


このページにコメント

Name:


Comment:



これまでに投稿されたコメント

Date Name Comment