AOUR:WZ EDITORとEmmet

WZ EDITORとEmmet

かつて、WZ EDITORがVersion 4～5の頃、WZ-XHTMLというプラグインマクロがあって、これを組み込めばWZが高機能なHTMLコーディングエディタとして機能した。自分もこのマクロとWZを使って幾つかサイトを作っていた。
WZ-XHTMLは特に文章系のHTML構造文書を作成するのに機能が充実していて、普段使い慣れたエディタの環境と、エディタの高度な編集機能がそのまま使えるのはもちろん、コマンド文字列をコメントとして挿入することにより、見出しを自動的に拾い集めて自動的にリスト形式の目次を作成・更新したり、リンクナビゲーションを自動作成・更新することもできた。ローカルで動作するようにしたAnother HTML-lintを直接駆動させて文法チェックを行うことも可能であった。
WZ EDITORには標準でもHTMLモードである程度のコーディング作業ができたが、このプラグインマクロを導入することで、DTDに忠実なXHTMLを書くことが出来たのである。

その後、サイト自体を作成するようなこともなくなり、一時期WZから秀丸に乗り換えていたこともあってコーディングのツールのことはあまり気にしない時期もあった。たまに必要があるときには秀丸のHTML作成支援マクロを探して使ったり、そのうちにZen-Codingという記法があるのも知り、それが秀丸エディタのマクロとしても提供されていたので組み込んでみたりもした。
これが、再び使い始めたWZでも使えるようにならないかと思っていたところ、WZ 9のマイナーバージョンアップでもZen-coding/Emmetに対応してくれた。EmmetはZen-Codingの拡張版ということらしいが、その後のWZ 10にも引き継がれている。
かつてのWZ-XHTMLと同等というものではないが、WZがHTMLコーディングエディタとしても十分な機能を果たせることになったのは有り難い。大規模にサイトを作成するようなことはないとしてもHTMLの編集をすることはあるので、そういう作業においてもWZは手放せない。

ところで、そのZen-Coding/Emmetの記法とWZのHTML編集機能はどう関係して、実際にどう使うのか。毎日使う機能というわけではないのですぐ忘れてしまう。正直なところ、ヘルプを見てもよくわからない部分も多い。
そこで、正しい解釈ではないかもしれないが、ここに少しコマンド操作の覚え書きを作っておくことにした。

WZでのEmmetの記法

WZでは、HTMLファイルを開いている時は次のキー操作でHTMLに関するコマンドが実行される。

[Shift]+[Enter］: カーソル位置に<br>と改行を挿入
[Alt]+[Enter］: カーソル位置のタグや、スタイルシートのプロパティを編集するダイアログを表示
[Ctrl]+[Enter]: カーソル位置によってタグ補完。範囲選択後は選択範囲を<p>で囲み、何もない場所で実行すると<p></p>が挿入される。

Zen-coding/Emmetへの記法対応に関しては、[Tab]の他にはキー割当はなくメニューからのコマンド実行のみであったが、次のように2ストロークキーで割り当てることにした。

[Tab]: 本文中に記述した省略記法を展開するコマンド(これはWZで最初から[Tab]に割り当てられているようだ)。でも[Ctrl]+[U][U]にも割り当てたり。
[Ctrl]+[U][H]: HTMLタグ展開のダイアログ。範囲選択状態で実行し特定の要素名を記述するとその要素で選択範囲を包む
[Ctrl]+[U][C]: Ctrl+UC CSSプロパティ展開のダイアログ
[Ctrl]+[U][M]: HTMLのコメントを挿入。又はカーソル位置の段落（論理行）ごとコメントアウト。

何故[Ctrl]+[U](系)かというと、その割当が他のコマンドで使われていなかったからに過ぎない。

WZ EDITORとEmmet

WZでのEmmetの記法

関連