Zen-Codingが楽しい
最近ちょっと興味があったZen-Codingがvimでも出来るというプラグインがあったので試してみた。
Zen-Codingってのはプログラマが使うエディタについてるスニペット入力みたいな感じでHTMLがサクサク書けるようになるライブラリ。スニペットのHTML特化版。
CSSセレクタのような記法なので普段からWebの開発に関わってる人なら簡単に体得できると思う。
単体のエディタではなくプラグイン形式になっていて色々なエディタやIDEで使えるというのもいいところ。詳しくは下記サイトを参照。
zen-coding - Set of plugins for HTML and CSS hi-speed coding
http://code.google.com/p/zen-coding/
Sparkup
http://github.com/rstacruz/sparkup
ZenCoding.vim
http://www.vim.org/scripts/script.php?script_id=2981
SparkupはPythonで実装されているので、プラグインの実行にはPython 2.5以上が必要みたい。
ZenCoding.vimはpure vimscriptでできている。両者の細かい挙動の違いはわからない（そこまで使いこなしてない）。
こんなことができる
タグの入力
こう入力して実行すると、
div
こうなる。
<div></div>
ちなみにカーソルはタグの中に来るので、続けてタグの中身を書いていける。
※Sparkupの場合は、キーワード入力して<C-e>
※ZenCoding.vimの場合は、キーワード入力して<C-z>,
属性付きで入力
div.content
<div class="content"></div>
もっと色々指定してみる。
a[href=http://www.google.com/].foo#bar
<a id="bar" href="http://www.google.com/" class="foo"></a>
img[width=240][height=120][alt]
<img src="" alt="" width="240" height="120" />
srcは指定しなくても出力されるようだ。他のタグにもデフォルトでついてくる属性がある。
中身も指定して入力
{}で囲んで中身を指定することで、タグで囲まれた状態で入力できる。
a[href=http://www.google.com/].foo#bar{Google検索}
<a id="bar" href="http://www.google.com/" class="foo">Google検索</a>
隣接した要素もまとめて入力
p.foo + p.bar
<p class="foo"></p> <p class="bar"></p>
連続した入力
p.foo*3
<p class="foo"></p> <p class="foo"></p> <p class="foo"></p>
$記号を使うと連番に展開される。
select > option[value=item$]*3
<select id="" name=""> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select>
階層を上がることもできる
div.outer > div.inner > p{テキスト} < img
<div class="outer"> <div class="inner"> <p>テキスト</p> </div> <img src="" alt="" /> </div>
テーブルを一気に書き上げるのは難しい。ここまでしなくてもいいかもｗ
table > thead > tr > th.title + th.author << tbody > tr*3 > td{タイトル} + td{著者}
<table> <thead> <tr> <th class="title"></th> <th class="author"></th> </tr> </thead> <tbody> <tr> <td>タイトル</td> <td>著者</td> </tr> <tr> <td>タイトル</td> <td>著者</td> </tr> <tr> <td>タイトル</td> <td>著者</td> </tr> </tbody> </table>
テンプレートや短縮入力もある
html:4tならHTML 4.01 Transitionalのテンプレート、html:4sならStrict、html:xsならXHTML 1.0 Strict、html:5ならHTML5などのテンプレートに展開される。
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> </body> </html>
他にも
link:css
<link media="all" rel="stylesheet" href="style.css" type="text/css" />
とか
a:mail
<a href="mailto:"></a>
とか
ul+
<ul> <li></li> </ul>
※↑はZenCoding.vim v0.21では駄目だった＞＜
※↑v0.22でできるようになった！！
など色々定義されている。
実際のところテーブルの例みたいに一気に入力するのは相当慣れてないと難しいだろうけど、そこまで出来なくても簡単に閉じタグまで入力してくれたり属性まで付けてくれるだけでも十分便利。
ていうかね、サクサクとタグに展開されていくのが気持ちよくて癖になるよ！楽しいよ！
ちなみに自分はZenCoding.vimを使っていて、キーマッピングは<C-Enter>に設定してる。
秀丸時代から使ってたマクロが「タグ名入力」→Ctrl+Enter→「<tag></tag>」って感じだったので。
