Zen Codingはほんと便利だねえ
「Zen Codingはほんと便利だねぇ」
ってうちのおばあちゃんが生前よく言ってたか言ってなかったかちょっと記憶にないんですが自分も使い始めました。
使ってみると、まーーーーーーーーー便利。
jQueryライクな短縮書式でガッツリHTMLが書けちゃいます。
たとえばこんな風に書けます
Zen Codingをいれた後に
ul>li.menu_list*5
これ書いてタブ（Ctrl+E）押せば、こんなHTMLに展開される。
<ul>
<li class="menu_list"></li>
<li class="menu_list"></li>
<li class="menu_list"></li>
<li class="menu_list"></li>
<li class="menu_list"></li>
</ul>
あら便利。
html:5>div#wrapper>header+(section>div#main)+footer
これ書いてタブ（Ctrl+E）押せば、これに変わる。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="wrapper"> <header></header> <section> <div id="main"></div> </section> <footer></footer> </div> </body> </html>
あららら 便利。
ちなみに、めんどくさいtableとかだとぱないっす。
table>(thead>(tr>td)*2)+(tbody>(tr>td)*10)
これだけ書いてタブ（Ctrl+E）押せばこれに変わります。
<table> <thead> <tr> <td></td> </tr> <tr> <td></td> </tr> </thead> <tbody> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </tbody> </table>
あららららら。どんだけ便利なんですか。
ではさっそくセットアップ。今回はEclipse上で使えるようにしてみました。
eclipseを起動
上部ツールバーの
Help > Install New SoftWare からプラグインを追加します。
検索サイトに
http://zen-coding.ru/eclipse/updates/
を追加して
検索窓に
Zen Coding for Eclipse
を入力して検索。
Zen Coding for Eclipse 0.7.0.201103132329
インストールして再起動。
以上でzen-codingがeclipse上で使えるようになりました。
（ツールバー上のメニューに「Zen Coding」というメニューが生成されていればOK）
書いてみる
eclipse上でhtmlファイル開いて
html:xt
って書いてタブもしくはCtrl+E
を押すと、HTMLコードが展開されます。
あら素晴らしい。
書式としてはこんな感じで使えます。
html:xt html:5 link:css ul>li*5 div#wrapper div.clearfix div+div+div div>div input[name=age][value=3]
どう展開されるかは確認してみてください。
便利ですなー。
