ぱせらんメモ このページをアンテナに追加 RSSフィード

とあるWeb系ソフトウェアエンジニアのブログ。
いちおう技術系ネタ帳ということで、日記はあまり書かない。

2010-02-23

Zen-Codingが楽しい

| Zen-Codingが楽しいを含むブックマーク 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/


vimプラグインはこっち。


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>

子要素も含めて入力

CSSっぽくということでこんなこともできる。

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

隣接した要素もまとめて入力
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>

テーブルを一気に書き上げるのは難しい。ここまでしなくてもいいかもw

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>」って感じだったので。


参考

Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。

Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力 : Serendip - Webデザイン・プログラミング

知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

Zen-Codingでできるあんなことこんなこと | gaspanik weblog

トラックバック - http://d.hatena.ne.jp/pasela/20100223/zencoding