レビュー

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

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

「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”を使いこなすことができれば、さらなる開発効率の向上が期待できる。

拡張機能のインストールは“拡張機能ギャラリー”から
インストールが成功したら再起動を忘れずに

ソフトウェア情報

「ZenCoding」
【著作権者】
Mads Kristensen 氏、Yishai Galatzer 氏
【対応OS】
(編集部にてWindows 8で動作確認)
【ソフト種別】
フリーソフト
【バージョン】
0.3.0(12/12/05)

(柳 英俊)