2010年 03月 03日
先週くらいから爆発的な注目を集めている、HTML/CSSショートカット用ライブラリ「zen-coding」。
「zen-coding」とは、カンタンな記述で構造化されたHTML/CSSが生成されるという、コーダー感涙の超絶便利なライブラリです。
その便利さ、コーディングが驚くほど簡略化されるというコトで、AptanaやDreamWeaverをはじめ、WordPressやCodaにもzen-codingプラグインが続々と登場しております。
そこで今回のエントリーでは、そんなzen-codingの各種エディタ用プラグインをまとめてみました。
まだ触ったコトの無いコーダーさん！もし自分の愛用エディタのプラグインがあったら、ぜひ騙されたと思って導入してみてください♪
zen-codingとは
先ほども書きましたが、zen-codingとは「カンタンな記述で構造化されたHTML/CSSが生成される」というモノです。
文章だけでは伝わらないと思うので、早速ですが実例を。
<div id="header"> <h1></h1> <ul id="topmenu"> <li class="menulist"><a href=""></a></li> <li class="menulist"><a href=""></a></li> <li class="menulist"><a href=""></a></li> </ul> </div>
上記のような雛形HTMLを作りたい場合、下記を入力します。
div#header>h1+ul#topmenu>li.menulist*3>a
たったコレだけを入力して、あらかじめ決められたショートカットキー（F4 とか Ctrl+, とか）を押すだけで、上にあったHTMLが瞬時に生成されます。
軽く説明しますと、”＞”は入れ子関係を表し、”＋”は兄弟関係を意味します。
idは”＃”、classは”．”というCSSと同じ表記になり、”＊”は繰り返す回数を表します。
単純計算ではありますが、フツーにコーディングすると186回のキータッチ（タブや改行も含む）を必要としますが、zen-codingを使えば40キータッチ、約4.5倍もの差になります！
また、DOCTYPEなんかも一瞬で記述が可能です。
html:xt
たった7文字を入力するだけで、下記の文言が生成されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> </head> <body> </body> </html>
ね？もはや自動生成と言っても過言じゃないほどのラクチンさ。これは使いこなせば絶大な効率化になりますよー！
細かな使い方に関してはホスト先のGoogle Project HostingにあるZen HTMLセレクタ一覧にてご確認下さい。
というワケで、以下より各種エディタのzen-codingプラグインのまとめ ＋ 具体的な解説をなさっているブログエントリーになります。
いろんなエディタのzen-codingプラグイン
Dreamweaver
・Dreamweaverでzen codingを使ってみた。 | vayu : soft true fossil
・zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOG
秀丸
・秀丸マクロでZen-Coding（via exoego.net）
・Zen-Codingを秀丸マクロで試しました。 – E-riverstyle Vanguard
Vim
・Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。
・Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力 : Serendip
WordPress
・WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」 – Rewish
・WordPressでzen-codingを使えるようになるプラグイン・WP Zen-Codingが凄く便利 – かちびと.net
Movable Type
・MT Zen-Coding に名前を変えてちょっとパワーアップさせました – かたつむりくんのWWW
EmEditor
・EmEditorで Zen-Coding | trapon
Emacs
・簡単な入力するだけでHTMLタグを生成してくれるZenCoding | Happy My Life
Coda
・Coda で Zen-Coding を使う – p15.jp
TextMate
・TextMate+Zen-Codingで超速コーディング？ | gaspanik weblog
Eclipse
・Aptana 以外の Eclipse で Zen-Coding を有効にする方法 – OTCHY.NET
Aptana Studio
・Aptana Studio 2.0 日本語化とzen-coding｜skuare.net
ちなみに自分は「EmEditor」と「さくらエディタ」とWINDOWSデフォルトのメモ帳を使い分けてます。
有料版EmEditor、個人的にはオススメですよー。
ソーシャルブックマーク:
付けられたタグ: 
関連した記事:
[...] つけたし いろんなエディタのzen-codingプラグインという記事で、秀丸でもマクロで使えるということを知りました！早速使ってみたらさくらエディタと同じように使えました。私は普段 [...]
[...] いろんなエディター用のバージョンがあるんですが､ 僕はPythonで作られたVim用のZen Codingを使います｡ ソースコードも気になりますし｡ [...]