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]は入力されなかったことになります。間髪入れずに次のキーをタイプしましょう。
カスタマイズ
カスタマイズの手順は、
- プラグインのソースからカスタマイズしたい機能に関わる部分を見つけて読む。
- どのタイミングでどの変数をいじればいいか特定する。
- .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" あたりで幸せになれるはず。
参考リンク
- Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。
"ZenCoding for Vim" の作者mattnさんによる解説。 - Big Sky :: zen-codingの殆どの機能をzencoding.vimに取り込んだ。
同じくmattnさんによるチュートリアル。 - zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting
Zen-Coding のプロジェクトページ。 - Zen Coding - Wikipedia, the free encyclopedia
Zen Codign プラグインが存在するエディタの一覧など。 - Vimmerなプログラマは迷わずZen-Codingしろ！ - idesaku blog
読み物としても面白すぎるZen-Codingのすすめ。
Permalink | コメント(4) | トラックバック(4) | 05:54
- 1577 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDEQFjAA&url=http://d.hatena.ne.jp/sakurako_s/20110126/1295988873&ei=BHYqT4f-Ns-HmQX7ruT8Dw&usg=AFQjCNFifWcmJcrOo_4JtG_EypehpgMJLA&sig2=W2Z2jVcBQgFln2FNVGp7gg
- 1549 https://www.google.co.jp/
- 771 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&ved=0CDAQFjAB&url=http://d.hatena.ne.jp/sakurako_s/20110126/1295988873&ei=Ce8xT9iZIeXwmAW7wKHGBQ&usg=AFQjCNFifWcmJcrOo_4JtG_EypehpgMJLA
- 457 http://www.google.co.jp/url?sa=t&rct=j&q=vim zencoding&source=web&cd=2&ved=0CCUQFjAB&url=http://d.hatena.ne.jp/sakurako_s/20110126/1295988873&ei=7y6FTq7DHeGHmQXKxsgh&usg=AFQjCNFifWcmJcrOo_4JtG_EypehpgMJLA
- 279 http://hisasann.com/housetect/2012/01/vim.html
- 258 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=0CEEQFjAC&url=http://d.hatena.ne.jp/sakurako_s/20110126/1295988873&ei=JaxFT8msAoedmQW74-SbBA&usg=AFQjCNFifWcmJcrOo_4JtG_EypehpgMJLA&sig2=l_xqhLVi4vnONEo1fgOk4w
- 212 http://pipes.yahoo.com/pipes/pipe.info?_id=tDfBdGWF3RGl9XNm1L3fcQ
- 209 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cts=1331065908867&ved=0CEAQFjAD&url=http://d.hatena.ne.jp/sakurako_s/20110126/1295988873&ei=5HNWT6C4HLHKmAWHwdnVCQ&usg=AFQjCNFifWcmJcrOo_4JtG_EypehpgMJLA&sig2=xO46aTwYW8w3GXDudFf
- 196 http://www.google.co.jp/url?sa=t&rct=j&q=zencoding vim&source=web&cd=3&ved=0CCoQFjAC&url=http://d.hatena.ne.jp/sakurako_s/20110126/1295988873&ei=PlGETuRFquaYBaPGrBs&usg=AFQjCNFifWcmJcrOo_4JtG_EypehpgMJLA
- 169 http://b.hatena.ne.jp/
