2013/06/03(月) [n年前の日記]
#1 [windows][prog] HTML書きに使えそうなエディタを少し探したり
普段、少しHTMLを書く時は、xyzzy + html用のモードを使っているのだけど。Zen coding も使えない上に、どうもHTML5には対応してないようで。自動フォーマットというかソース整形というか、indent-region をするとインデントがグチャグチャになったりするあたりが気になり始めているわけで。
ということで、HTMLを書く時だけでも使えそうなエディタは無いものかと少し探したり。
ということで、HTMLを書く時だけでも使えそうなエディタは無いものかと少し探したり。
◎ Notepad++ を試用。 :
_Notepad++ Home
不具合その1。最新版の6.3.3は、IME絡みの何かとぶつかって起動すらしない・エラーダイアログが出て固まってしまうので、一つ前の 6.3.2 しか動かせない。この調子だと、今後いつまで使えるのか非常に怪しい。開発者は英語圏の人だろうから、「IME？ 何ソレ？ 俺のところでは動いてるんだから知らねえよ」で修正されないままバージョンがグングン上がっていく可能性が高そう。
不具合その2。環境によっては、Emmet が利用できず。Python のバージョン互換性の無さが原因で動かないっぽい。プラグイン → Python Script → Show console で、エラーがずらずら出てたら問題が起きている。Python のこういうところが嫌いだ…。
以下のページで、とりあえずの解決策が紹介されてた。
_意識低い（R） Python2.7.4にしたらNotepad++のPythonScriptがImportError吐く件
- Plugin Manager を使えば、簡単にプラグインを追加できる。(プラグイン → Plugin Manager → Show Plugin Manager で呼び出す。)
- Zen Coding の次版である Emmet を、プラグインの形で追加できる。デフォルトのキー割り当ては、Ctrl + Alt + Enter。
- Preview HTML プラグインを導入すれば、エディタ内でリアルタイムにHTMLプレビューができる。
- Tidy2プラグインを導入すれば、HTMLの自動フォーマットができる。
不具合その1。最新版の6.3.3は、IME絡みの何かとぶつかって起動すらしない・エラーダイアログが出て固まってしまうので、一つ前の 6.3.2 しか動かせない。この調子だと、今後いつまで使えるのか非常に怪しい。開発者は英語圏の人だろうから、「IME？ 何ソレ？ 俺のところでは動いてるんだから知らねえよ」で修正されないままバージョンがグングン上がっていく可能性が高そう。
不具合その2。環境によっては、Emmet が利用できず。Python のバージョン互換性の無さが原因で動かないっぽい。プラグイン → Python Script → Show console で、エラーがずらずら出てたら問題が起きている。Python のこういうところが嫌いだ…。
以下のページで、とりあえずの解決策が紹介されてた。
_意識低い（R） Python2.7.4にしたらNotepad++のPythonScriptがImportError吐く件
2.7.4からMAXREPEAT定数が_sreモジュールに移動された模様。とりあえずNotepad++をインストールしたフォルダ以下の、plugins\PythonScript\scripts\startup.py 中、import site の直前に追加。ということらしい。…どうしてコレでエラーが出なくなるのか自分には分からないけど、たしかにエラーが出なくなった。
# This imports the "normal" functions, including "help"
sys.path = [n for n in sys.path if not n.startswith('D:\\Python27')]
import site
としておけばImportErrorは消える。意識低い（R） Python2.7.4にしたらNotepad++のPythonScriptがImportError吐く件 より
◎ Komodo Edit を試用。 :
_Komodo Edit: Free Editor for Perl, Python, Tcl, PHP, Ruby, HTML, CSS, Javascript
Komodo Edit も Emmet が使えるらしいので、8.0.2 をインストールしてみた。
AutoCode なるアドオンを追加することで、画像ファイル等のパスをHTML中に書けるらしいのだけど。何度試してみても、それらしい動作が全く見えず。というか、使い方が分からん…。Placesパネルで Alt + Click、と説明文には書いてあるけど、Placesパネルってどこのこと？ ファイル一覧が表示されてるパネルのこと？ 画像ファイルを Alt + click しても何も起きないけど？ そもそも click ってマウスクリック？ 別の何かの操作をクリックって言ってるの？ 動画やアニメgifでもあれば一発で分かりそうだけど、いくら探してもそんなの無いし。何度も試してるうちにイライラ。やってられるか。なんだこの糞エディタ。
いや、Komodo Edit のせいでは全然なくて、AutoCode アドオンのせいではあるのだけど。自分の中で、またしても微妙に印象が悪くなってしまって。毎回、Komodo Edit のバージョンが上がるたびに、一応少しは触ってみるのだけど、結構ヨサゲだなと思いつつ、ちょっとしたところで思い通りに動いてくれないことが多くて、結局触らなくなってしまう。どうも相性が悪い…。
Komodo Edit も Emmet が使えるらしいので、8.0.2 をインストールしてみた。
- Windows、Mac、Linux で使える。らしい。
- アドオン追加で、Emmet も使える。
- HTMLプレビューも一応できる。ツールバー上の地球儀みたいなボタンを押せばいい。エディタ内でプレビューするなら、ファイルを保存するたびにプレビューも更新される。
AutoCode なるアドオンを追加することで、画像ファイル等のパスをHTML中に書けるらしいのだけど。何度試してみても、それらしい動作が全く見えず。というか、使い方が分からん…。Placesパネルで Alt + Click、と説明文には書いてあるけど、Placesパネルってどこのこと？ ファイル一覧が表示されてるパネルのこと？ 画像ファイルを Alt + click しても何も起きないけど？ そもそも click ってマウスクリック？ 別の何かの操作をクリックって言ってるの？ 動画やアニメgifでもあれば一発で分かりそうだけど、いくら探してもそんなの無いし。何度も試してるうちにイライラ。やってられるか。なんだこの糞エディタ。
いや、Komodo Edit のせいでは全然なくて、AutoCode アドオンのせいではあるのだけど。自分の中で、またしても微妙に印象が悪くなってしまって。毎回、Komodo Edit のバージョンが上がるたびに、一応少しは触ってみるのだけど、結構ヨサゲだなと思いつつ、ちょっとしたところで思い通りに動いてくれないことが多くて、結局触らなくなってしまう。どうも相性が悪い…。
◎ Eclipse系を試用、するのは諦めた。 :
Eclipse や Aptana Studio 3 でも、Emmet は使えるのだけど。起動がとにかく遅いのと、一々プロジェクトを作らないとHTMLプレビューすらできないみたいなので、使うのは諦めた。
自動フォーマットというか、ソース整形ができるあたりはヨサゲなのだけど。ただ、なんだか奇妙な整形結果になる…。自分用のフォーマットルールを設定できるのだけど、設定項目数が少なくて思い通りにならない感も。…まあ、HTMLソースの綺麗さにこだわってみても意味はないのかもしれないけど。
自動フォーマットというか、ソース整形ができるあたりはヨサゲなのだけど。ただ、なんだか奇妙な整形結果になる…。自分用のフォーマットルールを設定できるのだけど、設定項目数が少なくて思い通りにならない感も。…まあ、HTMLソースの綺麗さにこだわってみても意味はないのかもしれないけど。
◎ Sublime Text 2を試用。 :
有償ソフトだけど何かしらの制限付きで試用はできるらしいので一応試してみたり。Emmet やら、HTMLタグ補完やら、プラグインを追加することで色々できるようになった。
しかし、HTMLプレビューをする方法が分からず。Mac環境ならプラグインがあるらしいけど、Windows 用の何かしらは見つからず。ブラウザを起動して渡してやる、みたいな設定はできるらしいけど、それでは使い勝手が悪いんじゃないかと…。まあ、Alt+Tabでウインドウを切り替えてF5キー押してまたAlt+Tabで戻ってくる、ということもできなくはないけど…。
一応、現在起動してるブラウザの表示を更新する「だけ」のプラグインがある・Windows上でも動作することは確認できたので、ブラウザを起動してファイルを渡してやる操作と、ブラウザを更新する操作と、別々に分けて使いこなせばどうにかなるのかもしれない。が、他のエディタと比べたら面倒臭いような…。なんだか惜しい印象。
しかし、HTMLプレビューをする方法が分からず。Mac環境ならプラグインがあるらしいけど、Windows 用の何かしらは見つからず。ブラウザを起動して渡してやる、みたいな設定はできるらしいけど、それでは使い勝手が悪いんじゃないかと…。まあ、Alt+Tabでウインドウを切り替えてF5キー押してまたAlt+Tabで戻ってくる、ということもできなくはないけど…。
一応、現在起動してるブラウザの表示を更新する「だけ」のプラグインがある・Windows上でも動作することは確認できたので、ブラウザを起動してファイルを渡してやる操作と、ブラウザを更新する操作と、別々に分けて使いこなせばどうにかなるのかもしれない。が、他のエディタと比べたら面倒臭いような…。なんだか惜しい印象。
◎ Emacs を試用、できず。 :
Zen Coding は使えるらしいが、HTMLを書く際に使えそうなモードが何種類かあるらしくて、どれが良さそうなのかさっぱり分からず。その時点で挫折。~/.emacs を修正していくのも面倒臭い。エラーが出てハマりそう。
◎ StyleNoteを試用。 :
HTMLタグ挿入系のエディタなれど、Zen Coding にも対応していたり、HTML5 や CSS3 にも対応し始めているらしく。
試用してみたけれど、例えば画像を挿入(imgタグ挿入)などは、さすがにタグ挿入系のエディタだけあって一番しっくりくるなと感心させられたり。起動直後からプレビュー画面を表示しているぐらいに、HTMLプレビューも当然可能で。
ただ、HTMLソースを整形する機能は全く見当たらなかった。まあ、他のタグ挿入系エディタでもそういう機能をほとんど見かけたことがないので、このジャンルはそういうもの、なのかも。
試用してみたけれど、例えば画像を挿入(imgタグ挿入)などは、さすがにタグ挿入系のエディタだけあって一番しっくりくるなと感心させられたり。起動直後からプレビュー画面を表示しているぐらいに、HTMLプレビューも当然可能で。
ただ、HTMLソースを整形する機能は全く見当たらなかった。まあ、他のタグ挿入系エディタでもそういう機能をほとんど見かけたことがないので、このジャンルはそういうもの、なのかも。
◎ HTMLソースを整形する別ツールがあればxyzzyでもいいのでは。 :
と思って調べてみたけど、例えば HTML Tidy などは HTML5 に未対応だったのですな。xyzzy に限らず、HTML5に未対応のまま歩みを止まってしまったツールが意外と多そうな、そんな気もしてきたり。
_Dirty Markup - Tidy and Beautify your HTML, CSS, and JavaScript code というサイトで、HTMLソースの整形ができるらしいのだけど。そこから辿って、一応、HTML5対応版の HTML Tidy もあるらしいと知った。 _w3c/tidy-html5 - GitHub で公開されてるらしい。だが、*NIX上でコンパイルするソレのようで。Windows版は無いのだろうか？
_Warin/SublimeTidyHTML - GitHub は、Sublime Text 2 用のソレに見えるけど、.exe も中に入っているみたいだ…。ということは、Windows用のバイナリも、どこかにある…？
_HTML Tidy for Windows with HTML5, tidy.exe download, batch files が、もしかして Windows用バイナリ？ だとすれば、ありがたいのだけど。
_Dirty Markup - Tidy and Beautify your HTML, CSS, and JavaScript code というサイトで、HTMLソースの整形ができるらしいのだけど。そこから辿って、一応、HTML5対応版の HTML Tidy もあるらしいと知った。 _w3c/tidy-html5 - GitHub で公開されてるらしい。だが、*NIX上でコンパイルするソレのようで。Windows版は無いのだろうか？
_Warin/SublimeTidyHTML - GitHub は、Sublime Text 2 用のソレに見えるけど、.exe も中に入っているみたいだ…。ということは、Windows用のバイナリも、どこかにある…？
_HTML Tidy for Windows with HTML5, tidy.exe download, batch files が、もしかして Windows用バイナリ？ だとすれば、ありがたいのだけど。
◎ Meryを試用。 :
_MeryWiki
プラグインでHTMLプレビューもできるし、起動も早いほうなので、手軽に使えるエディタだけど。それに加えて、 _Haijin Boys Online の記事によると、Mery も Zen Coding が使えるらしい。知らなかった…。試してみたけど、たしかに動いてるように見える。
しかし、htmlタグは生成してくれるけど、css編集時もhtmlタグを生成する…そこはcssのプロパティ等を出してくれないと…。何か修正が必要なのだろうか？ 検索してみても解決策は見つからず。なんだか惜しい印象。
各種マクロを呼び出そうとしてショートカットキー割り当てをしてみたのだけど。Altキーとの組み合わせはほとんどできない / Ctrl+○○○+カーソルキーは、Ctrl+カーソルキーとして扱われてしまう等、明確になってない制限がいくつか隠れているようで、その点も惜しい印象が。
まあ、Altキーを使うショートカットキーは、アプリメニューを呼び出す関係で、Windowsアプリ上ではほとんど無視されてるから、そういう仕様です、Windowsが悪いんです、で終わっちゃうのだろうけど。 Altキーを併用したキー割り当てができるのって、*NIX文化圏に近いemacs系エディタぐらいだよな…。
上下左右に何かを行う機能は、○○＋カーソルキーを割り当てたいものだけど。Ctrl+カーソルキー、Ctrl+Shift+カーソルキーが既に使われていると、もう割り当てられる組み合わせが残ってない。viのようにhjklを割り当てるか、ゲームのようにwasdを割り当てるか…。独立して配置されてるカーソルキーと比べてしまうと、それらは分かりづらいわけで…。
カーソルキーと組み合わせて使えるキーが、あと3〜4個あるのが当たり前だったら、もうちょっと便利だったのかなあ…。いや、モード切替を積極的に導入すればどうにか…。ああ、そうか、なるほど。それが vi なのだな。なんだか納得。
プラグインでHTMLプレビューもできるし、起動も早いほうなので、手軽に使えるエディタだけど。それに加えて、 _Haijin Boys Online の記事によると、Mery も Zen Coding が使えるらしい。知らなかった…。試してみたけど、たしかに動いてるように見える。
しかし、htmlタグは生成してくれるけど、css編集時もhtmlタグを生成する…そこはcssのプロパティ等を出してくれないと…。何か修正が必要なのだろうか？ 検索してみても解決策は見つからず。なんだか惜しい印象。
各種マクロを呼び出そうとしてショートカットキー割り当てをしてみたのだけど。Altキーとの組み合わせはほとんどできない / Ctrl+○○○+カーソルキーは、Ctrl+カーソルキーとして扱われてしまう等、明確になってない制限がいくつか隠れているようで、その点も惜しい印象が。
まあ、Altキーを使うショートカットキーは、アプリメニューを呼び出す関係で、Windowsアプリ上ではほとんど無視されてるから、そういう仕様です、Windowsが悪いんです、で終わっちゃうのだろうけど。 Altキーを併用したキー割り当てができるのって、*NIX文化圏に近いemacs系エディタぐらいだよな…。
上下左右に何かを行う機能は、○○＋カーソルキーを割り当てたいものだけど。Ctrl+カーソルキー、Ctrl+Shift+カーソルキーが既に使われていると、もう割り当てられる組み合わせが残ってない。viのようにhjklを割り当てるか、ゲームのようにwasdを割り当てるか…。独立して配置されてるカーソルキーと比べてしまうと、それらは分かりづらいわけで…。
カーソルキーと組み合わせて使えるキーが、あと3〜4個あるのが当たり前だったら、もうちょっと便利だったのかなあ…。いや、モード切替を積極的に導入すればどうにか…。ああ、そうか、なるほど。それが vi なのだな。なんだか納得。
[ ツッコむ ]
以上です。