Zen Coding の使い方

最近、「EmEditor は Zen Coding に対応していますか?」という質問をユーザーの皆様からいただくようになりました。Zen Coding は、HTML などのコードを革新的に速く書くためのライブラリです。たとえば、次のようなテキストを書いて


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

変換用のキーを押すと、


<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>

のように書き換わります。このように、あらかじめ HTML の構文がわかっている場合、Zen Coding を使用すると、すべて一文字ずつ入力するのに比べ、格段に速く入力することができるのです。

Zen Coding と親和性が高い EmEditor

Zen Coding は、ロシアの Sergey Chikuyonok 氏によって作成されていますが、GNU ライセンスとして公開されています。このライブラリのコアの部分は、JavaScript と Python 2.5+ の 2 つの言語で開発されています。そして、さまざまなテキストエディタで使えるように、コアの部分とインターフェイスの部分を切り離して設計されているところが良い点です。つまり、実装するテキストエディタによって、Zen Coding とテキスト
エディタの間のインターフェースの部分だけを書き換えることにより、共通なコアを再使用できるように設計されています。これによって、たとえば、テキストエディタによって機能の実装が異なったり、不具合が発生したり、という問題を最小限にしています。

EmEditor Professional は、JavaScript によるマクロをサポートしているため、実は、Zen Coding のサポートを行いやすいと言えます。EmEditor が、Zen Coding のサポートを行うためには、Zen Coding のインターフェイスの部分を書き換えるだけで済み、コアの部分はほとんど変更せずに済みます。実際、筆者は、Zen Coding について調べ始めてから 2 日目で、EmEditor
への移植を完成させました。一度、インターフェイスの部分ができあがってしまえば、将来、Zen Coding のバージョンが上がっても、コアの部分だけを入れ替えるだけで済むので、次からの移植はさらに速くなります。つまり、Zen Coding と EmEditor は、親和性が高いため、Zen Coding の最新の機能を、不具合や未実装などの心配なく使用することができます。

Zen Coding のダウンロードとインストール

EmEditor 用の Zen Coding は、ライブラリ – スニペットよりダウンロードしていただけます。この補足説明にインストール方法が書かれていますので、スニペットを利用する方法でインストールします。すると、次のように、スニペットカスタムバーに Zen Coding というフォルダができ、その中に 10
個のアクションが登録されていることがわかります。これらのアクションは、カッコ内に記述されているショートカットキーを入力することにより、実行することができます。

省略形の展開

Zen Coding の 10 種類のアクションのうち、もっとも頻繁に使用するのは、「省略形を展開」というアクションになります。このアクションは、入力した省略形を通常の HTML に展開するもので、ショートカットキーは F12 に割り当てられています。このアクションを利用するには、省略形を入力して、F12 を押すだけです。省略形は、CSS セレクタの構文に似ています。たとえば、


div#name

と入力して F12 を押すと、


<div id="name"></div>

と展開されます。つまり、# は、HTML 要素の id を指定するのに使用します。また、同様に、# の代わりに . を使用すると class を指定することができます。たとえば、


div.name

と入力して F12 を押すと、


<div class="name"></div>

と展開されます。

# や . の代わりに > を使用すると、今度は、チャイルドの要素を指定することになります。たとえば、


table>tr>td

を展開すると、


<table>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>

と展開されます。

+ を使用すると、2 個以上の要素を並べて展開します。たとえば

 p.one+p.two

を展開すると、


<p class="one"></p>
<p class="two"></p>

となります。

p[title] というように、括弧 [] で囲んで属性を指定することもできます。たとえば、

p[title]

を展開すると、


<p title=""></p>

となります。

さらに、Zen Coding には、フィルタという機能があります。フィルタを指定するには、| を使います。たとえば、

p.title|e

と指定して展開すると


<p class="title"></p>

となります。つまり e というフィルタは、XML ではそのまま使用できない <、>、& の 3 文字をエスケープします。他にもさまざまなフィルタが利用できます。

複数の似た要素を繰り返し記述したいこともあるでしょう。そういう場合、* と数字で、繰り返し回数を指定することができます。たとえば

p*3

として展開すると、


<p></p>
<p></p>
<p></p>

となります。さらに、$ を使用して、id 名や class 名に順番に並んだ数字を含めることもできます。たとえば、

p.name-$*3

として展開すると、


<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>

となります。

さらに、ul+、table+、dl+ などという特別な省略形も存在し、入力する手間を減らしてくれます。たとえば、

ul+

として展開すると、


<ul>
 	<li></li>
</ul>

となります。

詳細については、

を参考にしてください。

その他にも、Zen Coding には、さまざまなスニペットが用意されています。たとえば、EmEditor 側で、HTML の設定が選択されているときに、

html:4t

と入力して展開すると、


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

と展開されます。

また、CSS の設定のときに、

@i

と入力して F12 を押すと、

@import url();

と展開されます。

使用できるスニペット一覧は、

を参照してください。

また、便利な Zen Coding のチートシートも公開されています。

チートシート

をご覧ください。

その他の機能

省略形の展開は、Zen Coding の機能のほんの一部に過ぎません。詳しくは、

アクション

をお読みください。

以上のように、Zen Coding を使用すると、HTML のコード開発の効率が著しく良くなることがわかります。是非、Zen Coding を活用して HTML、XML などの開発を楽しんでください。

← スニペットの使い方 (2) Web プレビュープラグイン →