赤いMSの如き速さを得られる、爆速コーディング補助ソフトです。
ビデオで使用デモを見ると、笑えるくらい効率的になりそうな予感。
Dreawweaver版もあるみたいなので、
自分もMac Dreamweaver CS4にインスコしてみました。
▼自分のインストールした手順
配布サイト
zen-coding - Project Hosting on Google Codeメニューの[downloads]タブから
DW用の機能拡張を落とします。
2010.2.24現在ではv0.6が最新なので、
「Zen Coding for Dreamweaver v0.6」と書いてある「Zen.Coding-Dreamweaver.v0.6.zip」をダウンロード
展開すると以下のような感じになってます。
Extention Managerが入っているので、インストールは簡単。
Zen Coding.mxi
をダブルクリックすると、Extention Managerが勝手に起動します。
「インストールを続行しますか？」と聞かれるので
問答無用で「承諾」するだけでインストール完了。
めっちゃ簡単じゃん！
・
・
・
とおもいきや、なんじゃーこりゃー！
DWのメニューが文字化けしたー！
DWの設定ファイルを初期化しに行くはめに。
我が家の場合はSnow Leopardなので
/User/ユーザ名/Library/Application Support/Adobe/Dreamweaver CS4/ja_JP/Configuration/
の「Menus」フォルダを削除し、DWを再起動
※Windowsとは微妙に設定ファイルの場所が違うのね
今度は無事にメニューも初期化されて、立派な日本語に復活。
気を取り直して、さっそく弄ってみました
デモビデオでやってたように
「div#head」と打って、「Ctrl+,（カンマ）」同時押し！
すると
ぼくにもできたよ、ママン
調子に乗って
「div#wrap>(div#head>ul.navi>li.item$*3)+(div#cnt>(h1>img)+p)+div#foot」
と一見意味不明な記述で「Ctrl+,（カンマ）」同時押し！
僕たち未来にきちゃったよー！キーを打つのが悲しいくらい遅い自分には、まさに天の恵みですじゃ。
()の使い方で入れ子を制御したり、$とか*とか使いこなせばかなりの武器になりそう。
DWのショートカットなどとうまく組み合わせて、より効率アップを狙います。
作業じゃなくて、設計とかデザインにもっと時間を有効に使えそうですね。
欲を言えば、
idとかclassの入っているdivの閉じタグ前or後に、コメントの自動挿入
インデントいらねなどできれば入れられたら嬉しいな。
なお、詳しい書式などは以下を参考にどうぞ。
ZenHTMLSelectorsEn - zen-coding - Selectors and aliases for Zen HTML plugins - Project Hosting on Google Code※自分も英語はあんまし読めませんが、記述と変換後のコードの対応表なのでなんとか分かりました。