VIM (GVIM) で Zen-Coding する方法とサンプルいくつか

dev

Zen-Codingってご存知ですか？ ご存知なければ今すぐググるべき。 google:zen-coding

一言で言うと、ショートカット駆使してHTMLを高速に入力する方法、ツールです。

そのZen-Codingのプラグインを、私が愛用しているGVIMに導入する方法と、その後に素晴らしさがよくわかる例をご紹介します。

まずはダウンロード

配布ページからプラグインのファイルzencoding.vimをダウンロードしてきてください。内容はただのテキストファイルです。

http://www.vim.org/scripts/script.php?script_id=2981

ページの一番下です。

zendocing.vimの設置

ダウンロードしてきたファイルを以下の場所に設置してください。

<gvim.exeのあるディレクトリ>/runtime/plugin

GVIMを再起動

既に起動中であれば一度終了して、GVIMを起動します。

これで準備完了！

よし試そう！

Zen-Codingは"<c-y>,"、つまりCtrl+Yの直後に","を打つ事で使用します。

さっそく試してみましょう！ ちょっと長いですけど、こんなコードを打ち込んでみます。（コピペでいいです。）

html:4s>(head>title{Zen-Coding})+body>h1{Zen-Coding}+p#comment$.comment{まじﾊﾟﾈｪっす。}*5+p>a[href=http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html]{Aptanaに導入するならこちら！}

で、編集モード*1のまま"<c-y>,"して下さい。

すると！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title></title>
</head>
<body>
  <head>
    <title>Zen-Coding</title>
  </head>
  <body>
    <h1>Zen-Coding</h1>
    <p id="comment1" class="comment">まじﾊﾟﾈｪっす。</p>
    <p id="comment2" class="comment">まじﾊﾟﾈｪっす。</p>
    <p id="comment3" class="comment">まじﾊﾟﾈｪっす。</p>
    <p id="comment4" class="comment">まじﾊﾟﾈｪっす。</p>
    <p id="comment5" class="comment">まじﾊﾟﾈｪっす。</p>
    <p>
      <a href="http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html">Aptanaに導入するならこちら！</a>
    </p>
  </body>
  
</body>
</html>

なななんと、一気にHTMLコードができちゃいました！ Zen-Codingさん、まじﾊﾟﾈｪっす！

まあ普段はこんなに一気にやっちゃうことはないと思うんですが、入力してすぐに閉じタグまで書いてくれるのはすごく便利ですよ。

tableを作るのだってこんなに簡単！

もうひとつ強力な例を。今度はこれを試してみてください。

table+

こっちはシンプルでしょ。では例によって"<c-y>,"すると……

<table>
  <tr>
    <td></td>
  </tr>
</table>

すごーい、これは楽チン！

ちなみに私は<tbody>がないのが気になっちゃったので、zencoding.vimでの定義を編集してtable>tbody>tr>tdで作られるようにしちゃってます。

他にも使えるものがあるので、是非zencoding.vimの"expandos"の項目を見てみてくださいね！

タブ使わないよ派の人のために

そうそう、このプラグインではインデントがタブになっています。私はインデントはスペースだろ畑の人間なので、vimrcにこんな設定を追加しました。

let g:user_zen_settings = {
\  'indentation' : '  '
\ }

この例だとインデントはスペース2つになります。このあたりはお好みで。

CSSの入力も助けてくれます

ここまでHTML例でしたが、CSSファイルを開いてるときはCSSの入力も補助してくれます。例えばこれ

p

を"<c-y>,"すると、こう

padding:;

なります。ちゃんとカーソルの位置も設定値のところに移動してくれるので便利です！

楽しいコーディングライフを！

以上で導入の説明を終わります。あとこのあたり

html:5
html:4t
html:4s
html:xs
html:xxs

とか

a
a:link
link:css
input:hidden
bq
cc:ie6

も試してみたらいいんじゃないかな、と思います。zencoding.vimの中身を見てみると色々面白いですよ。

他にも要素をヴィジュアル選択してくれたり、URLからリンク作ってくれたり、画像を参照して自動でサイズを入力してくれたりする機能があります。詳しくはこちら。

それではハッピーコーディングライフを！

参考

*1:コマンドモードでも動くんですが、カーソル位置がずれるとおかしくなってしまうので、編集モードのままやるようにした方が無難だと思います。