WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

Vim に Zen-Coding プラグインをインストールしてHTMLやCSSを高速コーディングする

      2012/12/20

Zen-Coding とは?

Zen-Coding は、簡単な記述をするだけで構造化された HTML/CSS コーディングが行えるという「HTML/CSS ショートカット用ライブラリ」です。
例えば、以下のような ul 要素を記述したいと仮定します。


  • echo htmlspecialchars($codeBlock); ?>

    通常のテキストエディタで編集する場合は li 要素をコピペで増やしたり、 Vim で編集する場合は #entities#”3i

  • “#/entities# などのコマンドを入力するかもしれません。
    Zen-Coding を利用すれば、これらを以下のような簡単な略記で記述することができます。

    ul>li*3
    

    具体的には、ZenCoding.vim というプラグインをインストールした後、上記の様な Zen-Coding の表記規則に従った略記を行い、カーソルを行末に置いたまま(インサートモードのままでOK)、,(Ctrl+yのあとカンマ)を押すと先述の ul 要素を記述できます。

    このような略記を Zen-Coding では”セレクタ”と呼びます。セレクタのフォーマットについては下記URLで確認できます。
    http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

    ZenCoding.vim のインストール

    ZenCoding.vim は下記URLからダウンロードできます。
    http://www.vim.org/scripts/script.php?script_id=2981

    プラグインのインストールは非常に簡単で、プラグインディレクトリにダウンロードした vim スクリプトを保存するだけです。詳しくは”:h plug”でヘルプを参照するか、下記URLのヘルプをご覧ください。
    http://www.ac.cyberhome.ne.jp/~yakahaira/vimdoc/usr_05.html#05.4

    なお、Zen-Coding はテキストエディタ本体ではなく、プラグインなので、いろいろなソフトウェア上で動作します。
    例えば DreamWeaver や Eclipse などの IDE や 秀丸エディタや EmEditor などのテキストエディタ、 WordPress や MovableType などの CMS にもインストールすることができるようです。

     - Vim , , ,