sakurako_sの日記

2011年01月26日(水)

ZenCoding for Vim 導入方法(初心者さん向け)

Vim愛を自覚する機会が増えてきたので、Vim系エントリ。

1年くらい前から話題になっている Zen-Coding プラグインのインストール手順や、使い方のさわりの部分など。

Zen-Coding とは

Zen-Codingというのは、HTML/XMLやCSSを高速入力するためのテクニック/プラグインです。

具体的にどう利用するのかというと、テキストエディタなどに Zen-Coding プラグインを入れ、独自の略記法でコードを入力していきます。

Vimでは、たとえば、挿入モードで

div#side>ul.localnav>li*3>a[Ctrl+y][,]

とタイプするだけで、以下のようにHTMLコードが展開します。

<div id="side">
    <ul class="localnav">
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>
</div>

すさまじく便利です。

他にも、こんなのとか。

html:xs
# 展開すると…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>
    
</body>
</html>

詳しくは、こちらの記事がおすすめ。
知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
紹介されている動画で、Zen-Coding の速さをたっぷり鑑賞できます。

インストール手順

以降では、Vim で Zen-Coding するためのプラグインの1つ、"ZenCoding for Vim"をインストールする手順を紹介します。Debian系ディストリビューション向けの説明なので、環境の違う方はパスなどを適宜読み替えてください。

手順0. Vimのバージョンの確認

最初に、インストールされているVimのバージョンが、"ZenCoding for Vim"に必要な7.0以上かどうかを確認しておきます。

$ vim --version

つらつらっと結果が表示されますが、バージョン番号は1行目を見れば分かります。私の場合は、「Vi IMproved 7.3」となっていました。

手順1. Vimプラグインの置き場を作る

Vimプラグインは、ホームディレクトリ直下の .vim ディレクトリ以下に整理して納める習わしとなっています。

ホームディレクトリに以下のディレクトリを作ってください。

~/.vim
|-- autoload
|-- doc
`-- plugin

Nautilus(GUIファイルマネージャ)から作る場合は、[表示]-[隠しファイルを表示する]へのチェックをお忘れなく。

手順2. Vim設定ファイル .vimrc を作る

Vimの設定は、ホームディレクトリ直下の .vimrc というファイルに記述するのが一般的です。

/etc/vim/vimrcというファイルのコピーを、ホームディレクトリ直下に.vimrcという名前で保存してください。(すでに.vimrcが存在する場合は、何もせずに手順3に進んでください。)

以上で下準備は完了です。

ここで、今までに登場したファイル/ディレクトリの説明を簡単に。

/etc/vim/vimrc 別名「システムvimrc」。全ユーザ共通の設定ファイルで、Vim起動時に自動的に読み込まれる。
*~/.vimrc 別名「ユーザvimrc」「.vimrc」。ユーザ専用のVim設定ファイルで、システムvimrcの後で読み込まれる。通常はこちらを編集する。
システムvimrcとユーザvimrcの設定が重複する場合は、後から読み込まれたユーザvimrcの内容で上書きされる。
*~/.vim/plugin Vimプラグイン本体の置き場所。ここに置かれたプラグインは、Vim起動時に自動的に読み込まれる。
*~/.vim/autoload 必要に応じて自動的に読み込まれるプラグインの置き場。
*~/.vim/doc プラグインのヘルプファイルの置き場。

手順3. "ZenCoding for Vim"の入手

"ZenCoding for Vim"のソースファイルをmattn/zencoding-vim ? GitHubからダウンロードして解凍(または git clone)します。(コンパイルは不要です)

現在の最新版0.51では、中身は以下のようになっています。

.
|-- Makefile
|-- TUTORIAL
|-- autoload
|   `-- zencoding.vim
|-- doc
|   `-- zencoding.txt
|-- plugin
|   `-- zencoding.vim
|-- unittest.vim
`-- zencoding.vim.vimup
手順4. インストール

上記の太字になっている3つのファイルを、手順1で作ったプラグイン置き場の同名ディレクトリに配置します。

plugin/zencoding.vim   -> ~/.vim/plugin/zencoding.vim
autoload/zencoding.vim -> ~/.vim/autoload/zencoding.vim
doc/zencoding.txt      -> ~/.vim/doc/zencoding.txt

さらに、Vimにヘルプファイルの位置を教えるために、.vimrc に次の1行を追加します。

helptags ~/.vim/doc

以上でインストールは完了です。Vimを起動するとZenCodingできるようになっています。

Zen-Coding してみる

Vimを起動して、さっそく Zen-Coding してみましょう。

挿入モードで、

ul>li*3[Ctrl+y][,]

「ul>li*3」と入力した後、改行せずに挿入モードのまま[Ctrl]と[y]を同時押しして、間髪入れずに[,]キーを押すと、次のようにHTMLコードが展開します。

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

展開前に戻すには、ふつうにコマンドモードで[u]を。

ヘルプを見るには、コマンドモードで次のようにタイプします。

:help zencoding

注意点

"ZenCoding for Vim"を利用するにあたって、知らないと「あれっ?」となってしまいそうな注意点を2つ。

デフォルトのキーバインドは[Ctrl+y]

"ZenCoding for Vim"の解説によっては、キーバインドが[Ctrl+y]ではなく[Ctrl+z]となっていることがありますが、2010年3月8日以降のバージョンのデフォルトは[Ctrl+y]です。解説につられてうっかり[Ctrl+z]すると、Vimのプロセスが停止してしまうので、気をつけたいところです。(止めてしまったプロセスを再開するには、fgコマンドを使います。)

テンポよく入力する

[Ctrl+y]と入力した後に時間を置くと、[Ctrl+y]は入力されなかったことになります。間髪入れずに次のキーをタイプしましょう。

カスタマイズ

カスタマイズの手順は、

  1. プラグインのソースからカスタマイズしたい機能に関わる部分を見つけて読む。
  2. どのタイミングでどの変数をいじればいいか特定する。
  3. .vimrcに設定を追加する。

というのが王道だと思います。

私自身は、設定を変えたいHTMLタグが多かったので、ソースコードを直接編集して使わせていただいてます。

タブインデントをスペースに変更する

スペースインデント派に欠かせないのが、indentationのカスタマイズ。

~/.vim/autload/zencoding.vim を直接編集する場合は、以下の"\t"の部分をスペース数個に書き換えます。

1326 let s:zen_settings = {
1327 \    'indentation': "\t",

.vimrcで設定する場合は、以下のように書き加えます。

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

「HTMLではタブインデントがいいの。filetypeがjavascriptのときだけスペースインデントしたいの」なんて方は、「:help zencoding」の "3. Define Tag's Behavior" あたりで幸せになれるはず。


参考リンク

mattnmattn 2011/01/26 11:09 こんにちわ。zencoding-vim作ってますmattnといいます。
かなり詳しい記事、ありがとうございます。
できればいくらか手を入れさせて頂いて、日本人向けヘルプもしくはチュートリアルとして配布したいのですが構わないでしょうか?

sakurako_ssakurako_s 2011/01/26 18:55 こんばんは。
いつも超愛用させていただいてます。
大変ありがとうございます。

どうぞどうぞ、どのようにでもお使いくださいませ。
必要な方の目に留まるといいな、という思いで書いたものなので、どなたかに役立てていただけるのなら誠に幸いです。

xxkickerxxxxkickerxx 2011/01/26 22:50 「ul>li*5」と入力した後、改行せずに挿入モードのまま[Ctrl]と[y]を同時押しして、…
~~~~~~~~~~~
(多分、「ul>li*3」です…(コソリ))

sakurako_ssakurako_s 2011/01/26 23:08 (ありがとうございます。訂正しました。(コソリ))

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元