html エディタの比較

informatics/html/html_editor
2018/06/01 更新


  1. Brackets
    • 使っている機能拡張
    • Live preview が起動しないとき
    • Live Preview Highlight: 自動スクロール
    • Linux version の感想
  2. Blue Griffon
  3. mi (mac only)

広告

Brackets: 最強の html エディタ

Adobe が提供するエディタ。かつては「Emmet を使えるようになって編集効率が上がったことと、BlueGriffon のように勝手にタグをいじられないことから、現在はこれを主に使っている」と消極的な理由で使っていたが、現在は完全にこれ一択、他の選択肢は考えられない

私は潔癖症または偏執狂の傾向があるのかもしれない、と思うほどコードが汚いのに耐えられないのである。

もちろん html はど素人なので、コード自体がどうこうと言える知識はない。しかし、BlueGriffon や、ブラウザ上で編集する Jimdo などの CMS のソースでは

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

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

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


Brackets の良いところ
  • コードを見ながら編集できる。
  • ペアになっているタグがハイライトされるのがわかりやすい。
  • 拡張機能が充実していて、いろいろなことができる。
悪いところ
  • 選択範囲の置換ができない。できるようになる拡張機能はあるのか?
  • Emmet で br から変換されるタグが <br> で、xhtml 対応の <br /> になってくれない。
  • たまに Live view が動かないことがある。
  • 編集中、改行すると勝手にインデントを入れられるのを解除できず面倒。

Brackets

使っている拡張機能

Emmet
様々なショートカットを可能にする。この業界では有名過ぎるらしく、かえって使い方についての説明を探すのに手間取った。

String convert
選択した文字列を変換してくれる。たとえば大文字から小文字など。

Show whitespace
スペースをドットで表示してくれるようになる。

Code folding
コードを折り畳めるようになるので、長いページが見やすくなる。div, ul だけでなく、自分で作った css の名前でも折り畳めるようになるとさらに良いと思う。

Shizimily Multi-encoding for Brackets
UTF-8 以外で書かれたファイルを開けるようになる。コメント欄 をつけるファイルが php で書かれており、これを編集するために入れている。


Live preview が動かないとき

保存しないでも編集した内容 Google chrome に反映される Live Preview は、Bracket の素晴らしい機能の一つ。うまく動かないときは、以下のことを試すと動くようになるかもしれない。Mac OS での経験談。


  • コードにエラーがあると、リアルタイムで変換されない。閉じるタグがないとか、明らかなエラーは Brackets の編集画面に赤で表示されるのでチェックする。
  • Brackets または Google chrome を再インストールしてみる。
  • フォルダを読み込んでいないと動かない。クリーンアップ後に html ファイルを直接 Brackets アイコンにドラッグして開いたりするとこの状態になる。html ファイルが入っているフォルダをドラッグしてから、各ファイルを開くようにする。
    • 上のような状態の場合、たぶん Chrome の URL 表示がローカルファイルを参照している (2)。file://Users/... などのような状態になっているとダメ。正しく Live preview が動いているときは、ここには IP アドレスのような数字が表示されている。123.0.1.0:23595/informatics/html/html_editor.html のような形式。

Live Preview Highlight: Brackets の自動スクロール

Brackets Live Preview は、スクロールに対応している。つまり、1) Brackets で編集したい場所をクリックすると、Chrome 側も自動でスクロールし、その場所が表示される。また、2) Chrome をスクロールしてから編集したい場所をクリックすると、Brackets でも自動的にその場所にスクロールする。

以前、2) は OK なのに、1) のみが動かないという変な状況になって困ったが、これは実は Brackets の Live Preview Highlight という機能である。

View から Live Preview Highlight にチェックを入れることで解決。ショートカットキーもあるので、おそらくどこかで間違って解除してしまったのだろう。


Linux version Brackets の感想

2017 年 4 月から Ubuntu のセットアップ をしており、Brakets はまあまあ快適に使えている。Word や Excel などの互換性よりも問題は少なそうである。使用感をメモしておく (4-30-2017)。

  • ショートカットもほとんど同じで、Emmet が使えるので Mac 版とほとんど使用感は変わらない。
  • Live preview も Google Chrome を入れるとちゃんと動く。
  • Ubuntu のフォントはきれいで好感がもてる。Windows のフォントは汚いと思う。
  • html ファイルをドラッグすると、ブラウザプレビューの画面が表示されてしまうことがある。Brackets の左カラムからファイルを開く必要がある。

広告

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> タグの部分が小さいウィンドウで表示されるので、構造がわかりやすい。

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

広告

コメント欄

一言コメントをどうぞ! (基本500字まで - 100字のページもあるかも)


フォーラムを作ったので、各ページにあるコメント欄のうち、コメントがついていないものは順次消していきます。今後はフォーラムをご利用下さい。管理人に直接質問したい場合は、下のバナーからブログへ移動してコメントをお願いします。


References

  1. BlueGriffon をインストールしたら最初にやっておきたい 7 箇条. Web.
  2. Brackets でライブプレビューが起動しない. とあるプログラマーのブログ. Link.
  3. Word さんは今日もおつかれです. Link.