イマドキのIDE事情(98) HTMLを高速コーディング! Zen CodingをEclipseで使ってみる

Zen Codingとは?

Zen CodingはHTML、XMLのコーディング支援機能を既存のエディタやIDEに追加するもので、サードパーティ製含めEclipse、Coda、TextMate、Komodo、NetBeans、Visual Studio、サクラエディタ、Dreamweaver、EmEditorなどさまざまなエディタ/IDE向けのプラグインが提供されている。

今回はこのZen CodingをEclipseで利用する方法を紹介する。Zen CodingをEclipseで利用するためのプラグインはこちらで開発されており、こちらの更新サイトからインストールすることができる。

図1 Zen Codingプラグインのインストール

基本的な利用方法

プラグインをインストールするとEclipseのエディタでZen Codingの機能が利用できるようになる。たとえば任意のHTMLファイルを作成して

html>(head>title)+body

などと入力して[TAB]キーを押してみよう。以下のように変換されるはずだ。>はタグの親子関係、+はタグの兄弟関係を意味する。

<html>
 <head>
   <title></title>
 </head>
 <body></body>
</html>

別の例も試してみよう。

ul#list>li.item*3

は以下のように変換される。#でid属性の値、.でclass属性の値を指定することができる。このあたりはCSSの記法と同じと考えるとわかりやすい。また、*でタグの繰り返し回数を指定することができる。

<ul id="list">
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
</ul>

このように少ない記述でHTMLを入力できるのがZen Codingの大きな特徴だ。

その他の便利機能

Zen Codingにはタグの展開以外にもいくつかの便利な機能があり、Eclipseの[Zen Coding]メニューから呼び出すことができる。

図2 Zen Codingメニュー

たとえばエディタ上で範囲選択した状態で[Wrap With Abbreviation]を選択すると選択した範囲を任意のタグで囲むことができる。すでに存在するテキストをマークアップしていく場合に便利な機能だ。たとえば以下のようなテキストを選択したとする。

Eclipse
NetBeans
IntelliJ IDEA

[Zen Coding]メニューから[Wrap With Abbreviation]を選択するとダイアログが表示されるので以下のようにZen Codingの記法で囲みたいタグを入力する。

ul>li*

すると以下のように変換される。*をつけないと選択範囲全体が1つのタグで囲まれてしまうので注意してほしい。

<ul>
 <li>Eclipse</li>
 <li>NetBeans</li>
 <li>IntelliJ IDEA</li>
</ul>

[Zen Coding]メニューから呼び出すことのできる機能はEclipseのキーバインドの設定でショートカットキーを設定することができる。[Wrap With Abbreviation]はデフォルトではCTRL+SHIFT+Aというショートカットキーが設定されているが、EclipseのWTPが提供する HTML/XML/JSPエディタでは他のアクションのショートカットキーと重複しているためキーボードから呼び出すことができない。WTPのエディタを使用する場合はEclipseのキーバインドの設定を変更しておくといいだろう。

まとめ

Zen Codingの機能はHTMLエディタだけでなく、Javaエディタなどでも使用することができるため、Javadocの記述時などにも活用することができるだろう(ただし、複数行で展開されてしまうようなケースだとJavadocコメントが崩れてしまうため、実用上利用できるのは単一のタグの展開などに限られる)。また、Javaを用いたWebシステムの開発ではJSPやXMLファイルを記述することも多いだろう。このようなシーンでもZen Codingは活用できるはずだ。

NetBeansやIntelliJ IDEAといったIDEや、テキストエディタ向けのプラグインも用意されているので、Eclipseユーザ以外の方もぜひ試してみてほしい。