Zen-Codingとはhtmlを簡単に素早く記述する為のライブラリです。
Aptana Studioだけではなく、EclipseやNetBeansなどのIDEは勿論、
DreamWeaverといったWebオーサリングソフト、秀丸やVim、EmEditorといった
テキストエディタ、WordPressなどのCMSと幅広く使われています。
まずはインストールした上で、使い方を説明していきます。
1.Aptanaの「ヘルプ」メニューから「新規ソフトウェアのインストール」を選択します。
2.「作業対象」の項目に「http://emmet.io/eclipse/updates/」を入力します。
※emmetというのはZen-Codingの現バージョンの名前らしいです。
3.「名前」欄のチェックボックスをONにして「次へ」ボタンを押していきます。
4.インストールが無事に終了するとメニューに「emmet」が追加されます。
では、簡単な例から
html と入力してCtrl+Eを押します。すると
<html></html>と自動的に展開されます。
> を使うと階層的なタグを簡単に入力できます。
例えば、html>body と入力してCtrl+Eを押します。すると
<html>
<body>
</body>
</html>
と展開されます。
+ を使うと同一階層で展開されます。
例えば、html>head+body と入力してCtrl+Eを押す。すると
<html>
<head></head>
<body>
</body>
</html>
と展開される。
# はIDとなります。div#memo と入力すると
<div id="memo"></div> と展開
．はクラスです。div．boxとすると
<div class="box"></div> と展開
*と数字でその数字分繰り返しになります。br*4 と入力すると
<br /><br /><br /><br /> と展開
$と数字で採番になります。input#address_$*4 と入力すると
<input type="text" id="address_1" />
<input type="text" id="address_2" />
<input type="text" id="address_3" />
<input type="text" id="address_4" />
と展開
めんどうなtableなんかも、table+ と入力すると
<table>
<tr>
<td></td>
</tr>
</table>
と展開
さらにスニペットというより多くのものをセットとして扱ってくれるものがあり
html:5 と入力すると
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
こんなにまとめて展開してくれます。
慣れると流れるようにコーディングができるし、まだ多くの機能があるようです。
サンプル動画
http://vimeo.com/7405114