各種HTML Editor検討

 概要 
私は HPをアップし始めて間もなくの頃からずっと HTMLページの編集ソフトとして HTML Project2というフリーウェアを愛用してきた(最初のころは前身の HTML Projectとか言う名前だったと思うが)。 HTML Project2というツールはプロジェクト管理ができることが売りなんだが、私は単に単発ページの HTMLタグエディターとして使用してきた。初期のころは WysiWygエディタなんて言葉もない時代だったから、HTMLコードの挿入アシスト機能があるのでうろ覚えのタグでも編集ができて、ソースを編集してリロードボタンを押せばその結果が即下のビューペインで確認できるなど結構便利だった。そのうちにより高機能な新しいツールも登場したことは知っていたが、自分の知らない/意図しないソースコードが書かれるようなツールは使う気にならないし、何よりこうしたツールは機能・操作性に若干の優劣差があっても操作に慣れてしまえば気にならなくなるし効率も上がる。
とは言いつつ、 HTML Project2もアップデートが何年もされておらず、もうそろそろ変え時かと、何年もの間思いつつも、新しいツールへの乗り換えが億劫で先延ばししてきた。
ただ、最近になってこのページのような3カラム構成をレスポンシブ対応にしてヘッダーやフッターと言う入り組んだページの編集をするときに、HTML Project2だとブロック要素の範囲が分かりづらく、間違って終端タグを消去してしまったり、終端タグを入れ忘れ/2重に入れてしまい時々表示が崩れてしまって苦労することがあった。そんなこんなで思い切って新しいエディターの検討をしてみた。(当然フリーウェア前提で)
以下は 私の独断の途中評価。

結論から先に言ってしまうと:
 最初はフリーウェアでもオープンソース系のツールが出てきているので、WysiWygエディタに結構使えるツールがあるのでは、と淡い期待をしたものの、今回もやはり WysiWyg エディタだけで思い通りのページを記述するのは(少なくとも私には)難しそうだと分かってしまった。WysiWyg エディタのプレビュー画面だけだとタグ位置との関連で例えば行末を削除しようとしただけなのに終了タグまで消えたり、行頭に文字や表のセルなどを挿入しようとしたのに思うように挿入出来ずにレイアウト全体が崩れてしまうと言うことが頻繁に起きる。
結局、どれか一つのHTMLエディターに決め打ちして ページの新規作成から些細な修正まで全部やることに拘るより、タグ挿入型エディタをメインに使い、それで不十分なところを状況に応じて WysiWygエディタで補うような使い方が良さそうだと思い始めた。
現時点での結論は、新規作成で最初からある程度の形が出来るまでは タグ挿入タイプのエディターでタグを直接打って、レイアウトが思うように出来ないときは大枠をタグ表示可能な WysiWyg エディターで確認して成形する。そうしてテンプレート的なページを作り、出来あがったテンプレートにテキスト、画像、表などを挿入するのは WysiWygエディターのプレビューで、フォントなどのスタイルをチョットだけ新たに設定するときは WysiWyg エディターのソース画面・・・というのが現実的かな?と思ったり、反面 タグをある程度理解しているなら WysiWygエディタでなくても、プレビュー画面とソース画面のカーソル位置の対応が取れていさえすれば、余計なストレスがないので タグエディタだけで十分という気もする。
そんなこんなで暫くは上記のように StyleNote をメインにしつつBlueGriffonも補助的に使ってみようかと。
(それにしても、BlueGriffon系のエディタは何でファイルを保存するたびに改行が挿入されてしまうんだろう??? ソースコードの改行は表示には問題ないので致命的とは言えないが、ソースを見てしまうとどうも気になる。
尚、以下の評価は 私の独断の途中評価です。今後使い続けた場合変わることが十分に考えられるので 丸ごと信じないように!

HTML Project2   国産 タグ挿入型HTMLエディタ
    スクリーンショット
htmlprjt01.png

結論:
StyleNote を使ってしまった今は、もう HTML Project2には戻れない・・・というのが正直な感想。
気に入っている点
  • 意図しないコードや改行は入らない
        (コードエディタだから当然)
  • ビューペイン(左図の②)で結果が同時表示可能
  • タグや属性の色分けが自由で見やすい
  • タグや属性の挿入支援機能が整っているのでうろ覚えでも8割方出来る
  • 下段のペインではプレビュー以外にタグの階層や属性表示のタブもあり、タグの整合性で問題あるタグにはエラーが表示され、そのタグ上でダブルクリックすると対応のソースコード部分にジャンプできる
不満な点
  • ブロック要素の対応範囲が分かりづらい(開始タグに対応した終端タグが分かりづらい。タグの階層表示画面からはジャンプ可能だがその用途では実用的には使えない)
  • プレビュー画面で表示をチェックして対応コード部分を修正する場合にそのソースコード部分を探すのが面倒(特に セル数の多い表やその中に更に表が入れ子になっている場合など目的のセルがどの<td>タグなのか分かりづらい・・・コードエディタ式は皆同じかと思ったが、StyleNoteはこれが出来た!)
 

ez-HTML   国産 タグ挿入型HTMLエディタ
   スクリーンショット
ez01.png(48057 byte)
上記の HTML Project2 というエディタからの乗り換えに際して、最大の注目点<タグ範囲の表示機能>で検索した結果 ヒットしたタグエディタだが、改めて使い方をマスターして使うほどの魅力は見つけられなかった。
但し、とりわけ大きな不満点があるわけではないので、使い慣れれば 「クセ」の少ない使いやすいツールではあると思う。
長所
  • ブロック要素タグの範囲がショートカットキーで一発反転可能
  • デフォルトではタグ・属性・属性値のフォント色分けが明確でないが、カスタマイズ可能(左図)


不満な点
  • プレビュー画面②からソース画面①に表示を切り替えた時、対応ポイントが表示されない(HTML Project2も同じ。特に セル数の多い表やその中に更に表が入れ子になっている場合など目的のセルがどの<td>タグ内にあるのか分かりづらい)
  • ソース画面とプレビュー画面はタブを切り替え式で若干面倒
    (PCのモニタの画面が大きくなっているので、全面にソース画面が表示されるメリットは少ない)
 

StyleNote5   国産 タグ挿入型HTMLエディタ      StyleNote の使い方(非公式マニュアル)>>
   スクリーンショット


現時点での結論:
私のスキルでは、一番使いやすそう。
まだ使い始めて間もないので、これから色々 便利な使い方が出来そう。
長所
  • 開始タグ/終了タグ位置まで移動、タグ範囲選択などタグ範囲単位の各種操作がショートカットキーで可能
  • 左図のようにプレビュー画面②でテキストや画像等の表示要素を選択すると、ソース画面①で対応のタグコードが反転表示されるのでプレビュー画面でチェックしてコードを編集しやすい。
  • プレビュー画面とソース画面は同時表示で左右、上下任意の並びに切替可能。
    プレビュー画面の表示更新はリアルタイムで行えるので修正箇所の確認が楽。
  • スマートエディット/オートコンプリート 等と呼ぶ タグ挿入支援機能が充実していて、タグ要素・属性・属性値などの挿入が楽にできる。よく使う複数タグの組み合わせなども登録すれば数文字の挿入で複数タグや属性が挿入可能で利用価値が高い。


不満な点
  • ソース画面とプレビュー画面はマウスカーソルがある方がアクティブになるので、ソースコード編集中にマウスがソース画面外に移動すると、キー入力が出来なくなってしまう。
  • 圧倒的にマニュアル不足。多大な開発工数をかけて高機能なツールを開発しているのに、「どう使わせたいのか?」が伝わらないのではユーザは増えずもったいない。高機能すぎるためか長時間続けると動作も若干緩慢になる。
  • メジャーなブラウザとのスタイルシートでのレイアウトの互換性がイマイチと思われる
  • ローカルな cssファイル以外のセレクタは候補に表示されない??
  • 使い続けると若干動作が緩慢になる。
    例:外部エディタから StyleNote に戻って、プレビュー画面上でクリックしてその結果がソース画面の対応位置に反映されるまでのタイムラグ大(数秒)

その他要望点など:
 

BlueGriffon   Mozilla FireFox系 WysiWyg HTMLエディタ
   スクリーンショット
BlueGriffon

結論:
元々、この系列のエディターにはソースコードを途中で改行すると、ファイル保存のたびに無駄な空行が挿入されると言うバグがあり、 BlueGriffonでは改行をしない設定でそれを回避できるようになったが、それだと長い文章を打つ時は 1行が延々と長くなってしまい、横スクロールを多用しないと目的のコード部分を表示できない。
しかし、右にスクロールしていくと逆に行頭付近に多い前後行のタグは見えなくなってしまうので、実質的にはソース画面での編集は使い物にならない。
利用価値としてはプレビュー画面での編集で
  1. タグを理解できない人ならテンプレートのレイアウトに従って文章や画像、表などの挿入・編集だけで使う。
  2. 上図の All Tagモードでタグをレイアウト上に表示させて階層構造やレイアウトをチェックする。
  3. レイアウトを仕上げた後で、テキストとか途中への画像挿入などの些細な変更をプレビューで行う。

のような限定した使い方しか思いつかない。

長所
  • WysiWigなので、文字修正だけなら修正するところをダイレクトに修正可能
    図の移動などは D&Dで可能
  • プレビュー画面のカーソル位置がソース画面に完全に反映される
  • ソース画面のタグ、属性、属性値が色分けされる
  • All Tagsモード(左図)にすると、プレビュー画面でも主なタグが黄色く表示されるのでブロック要素範囲等が分かり易い(普段はAll Tagsモードを解除すればコメントしか表示されないので邪魔にならない)


不満な点
  • ソース画面では右クリックで Copy/Paste が出来ない(D&Dで移動、Copyのキーボードショートカットは使える。プレビュー画面では右クリックでも可能)
  • プレビュー画面ではタグ属性が分かりづらく書式変更が殆ど出来ない(DOM Explorerを表示させると一応表示・編集は可能)
  • ソースファイルを保存する度に<meta>タグの後ろや行末にタグのない行の次に空行(改行)が挿入されてしまう
    (気づくとそこいら中に空行が 10行とか!)
  •  <body>タグ内でも、行末がテキスト文字とか、テキストの後ろが直接<p>や<div>、<ul>などの開始タグだと空行が挿入される。
    (テキスト行末が<br>タグや終端タグなら入らない)
  • 逆に </div>タグの前に<br>タグを挿入してもプレビューとソース画面の切替え等で勝手に削除されてしまう。(</div>タグの後ろなら問題なし)
  • プレビュー画面で行を挿入(改行)するとソース画面ではインデントが継承されない。
 

SeaMonkey (Composer)   Netscape/Mozilla系 WysiWyg HTMLエディタ
    スクリーンショット
結論:
BGと比較すると、これと言って長所がなく、今から Composerを使う理由は見つからない。
 長所
  • 「HTMLタグ」ビュータブではブロック要素のタグが黄色表示されるので親子関係が見やすい(左図: BlueGriffonの AllTagsモードと同じ)

 不満な点
  • プレビュー画面のカーソル位置がHTMLソースビュータブに反映されない。(BGでは反映)
  • 余分な空行の挿入は BlueGriffonと同じ。
 

その他
 そのほか WysiWygエディタには Nvuとか Komposerとか Mozila系のオープンソースのエディタがあるが、現在開発が止まっていて、開発は BlueGriffonに移行したようなので、評価は割愛。(その BlueGriffonも 1年以上更新はない。どうもオープンソース系のアプリは 途中で投げ出されるケースが多いようだ。)
 

私にとっての HTML Editor 必須条件
アプリは、人それぞれ使い方にクセがあり、多大な時間を費やして実現した機能もそれをあまり使わない人にとっては意味がないし、便利な自動機能が人によっては「意図しない」動作になってしまう事もあるから、そうした機能は極力カスタマイズできることが好ましいと思う。例えば HTMLエディタでは FTP機能が搭載されているものも多いが、サーバー上での表示を頻繁に確認したい人や サーバー/クライアントの概念がない人にとっては有用でも、編集確認後に一回だけアップする人にとっては別アプリを立ち上げることもそれほど厭わない。
以下はあくまで私だけの選定基準。凡その優先順位。

  1. 意図しないソースコードの挿入、改変がなく 余計なお節介の機能はカスタマイズ設定で外せること
  2. プレビュー画面はメジャーなブラウザと互換性が高いこと
    (若干のHTMLバージョンミスマッチなどに対しても極力)
  3. プレビューのカーソル位置がソース画面に切り替えても反映されること
    (プレビューで編集しようと思った箇所がソースコード上で見つけやすいこと。その点 WysiWyg Editorはベスト)
    逆にとりわけ非WysiWygエディタではソース画面の表示位置がプレビュー画面にも反映されると、編集部分の確認もスクロールがなくて速くなるので、私のようにダラダラと長いページを書く/その一方で HTML文法に疎く自信がないのですぐチェックしたくなる人間にとってはベスト
    ソース画面 <==> プレビュー画面 でカーソル位置が一致していれば、 WysiWygよりも 思った通りのコードが書ける タグ挿入型の方が個人的には好み。
  4. タグ、属性、属性値はなるべく少ない手順で挿入可能なこと
  5. ソース画面でタグ範囲の明示機能(開始タグ~終端タグ間の反転など)、タグツリーなど(タグの包含関係)の連携表示機能、テキストや画像などを指定した時、そのオブジェクトを修飾している上位の全てのタグや属性とその属性値(スタイルシート含む)までをリストしてくれるような機能があると便利

 

Y.Nakajima's Top    Page top    StyleNoteの使い方(非公式マニュアル) >

Access Counter:  総アクセス数


スマホが充電出来なくなる前に!
充電端子は2年前後で接触不良になり充電出来なくなる可能性が !

Android/iPhone/type-c共通
Android/iPhone 共通

TOMSMOO 第四世代 1M ナイロンメッシュ編 マグネット式 充電ケーブル 高耐久 データ通信可能 iPhone/iPad/Android/Type-C/USB-C対応 (シルバー 1M)

新品価格
¥1,180から
(2019/4/15 16:13時点)

TOMSMOO マグネット式 充電スタンド 携帯電話ホルダー 3 in 1 Lightning/Micro USB/Type C データ伝送 ナイロン編みケーブル付き iPhone X/8/8 Plus/7/7 Plus/6/6 Plus/6S/6S Plus/Galaxy S8/S8 Plus/S7/S7 Edge/Sony Xperia/Nexus/各種スマートフォン対応(ブラック)

新品価格
¥1,866から
(2019/4/15 18:24時点)

Mantis(マンティス)【2in13本セット】2in1 iPhone / Android マグネットケーブル  Lightning & Micro USBまぐねっと端子 第五代 一本両用 磁石 着脱式 防塵機能 急速充電 高速データ通信転送 ハイクオリティ磁気吸収データライン 強化ナイロンメッシュ編み 高耐久 断線防止 アイホン usb延長ケーブル マイクロスマートフォン 変換アダプター アンドロイド ライトニング ケーブル (3色)

新品価格
¥2,899から
(2019/4/15 16:26時点)