HTMLの記述速度が劇的に向上。「WebMatrix」で“Zen Coding”を実現する拡張機能

「ZenCoding」v0.3.0

　「ZenCoding」は、「WebMatrix」で“Zen Coding”を利用可能にする拡張機能。「WebMatrix」v2.0に対応するフリーソフトで、“WebMatrix Gallery”からダウンロードできる。

　“Zen Coding”とは、テキストエディターでHTMLやCSSなどを高速に記述するために生まれた記法、およびそれを実現するためのプラグインを指す。「Eclipse」「Notepad++」「Komodo Edit」などを公式にサポートするほか、「EmEditor」「サクラエディタ」などでも利用可能。現在は“Emmet”という名前で後継版の開発が進められている。

　記述方法はCSSセレクタのそれと似ており、CSSのコーディングに慣れた人にとっては馴染みやすい。たとえば、

div#page>div.logo+ul#navigation>li*5>a

と入力してトリガーキー（環境によって異なるが、多くの場合は［Tab］キー）を押せば、

<div id="page">  	<div class="logo"></div>  	<ul id="navigation">  		<li><a href=""></a></li>  		<li><a href=""></a></li>  		<li><a href=""></a></li>  		<li><a href=""></a></li>  		<li><a href=""></a></li>  	</ul>  </div>

というコードへと展開される。“*（数字）”という記述は、直前に指定した要素を指定回数出力することを示す。

CSSセレクタ風味の記法で複雑な構造のHTMLをすばやく記述できる

　そのほかにも、DOCTYPE宣言つきでHTML文書の雛形へ展開する“html:4s（HTML 4.01 Strict）”“html:4t（HTML 4.01 Traditional）”“html:5（HTML5）”という記法や、CSSへのリンクタグを生成する“link:css”といった記法も用意されている。高度なスニペット機能の一種だと思えばよいだろう。

　「WebMatrix」向けの「ZenCoding」拡張機能は、“拡張機能ギャラリー”からインストールする。なお、拡張機能を有効化するには「WebMatrix」を再起動する必要がある。

　“Zen Coding”記法の展開には、［Tab］キーまたは［Tab］＋［,］キーを押す。編集部にて試用したところ、現時点ではHTMLへの展開のみが利用可能で、CSSの展開はサポートされていないようだ。

　“Zen Coding”記法がHTMLコードへ展開されると、カーソルは自動的に空の要素内にセットされ、［Tab］および［Shift］＋［Tab］キーで空の要素間を相互に移動できるようになる。「WebMatrix」は単なるHTML/CSSのエディターとしても非常に優秀だが、“Zen Coding”を使いこなすことができれば、さらなる開発効率の向上が期待できる。

拡張機能のインストールは“拡張機能ギャラリー”から

インストールが成功したら再起動を忘れずに