マークアップ作業効率が2〜10倍になると云われているZenCodingを、今更ながら試してみました。

ZenCodingの存在を知ってからというものの、フルスクラッチでやってた事自体恥ずかしいと感じるくらい残念な僕のマークアップ環境はAptanaかDreamweverなので、今回はDW中心に語ります。ほぼエディター機能しか使っていないですけど。

全手作業マークアップ作業のかゆいところ。

・ <ul,li>,<dl,dt,dd>,<table,tr,td>といった繰り返す要素の記述。

・コード補完があれど、要素を閉じる記述。

・コメントアウトの記述。

・width,height,display,font-sizeなどの頻出するスタイルシートの記述。

体感的にこのようなコピペを使い倒す場面が歯がゆいわけです。これを緩和してくれるのがZenCodingなので、導入してショートカットを覚えておいて損はないと思います。そもそも、マークアップ作業で時間を食う所ところを大きくわけると…

①レガシーブラウザへの対応

②文章、画像コンテンツのタグによる囲い込みと参照

③繰り返しが発生するタグの記述

があるとして、ZenCodingは2と3を主に解決するという認識です。サポートしているエディターの範囲もかなり広いので、自身の環境でインストールできると思います。

1.DreamWeaver + Zen-Coding準備

ZenCodingのプロジェクトから、Dreamweaverのコマンドプラグイン「Zen_Coding.xmp」をダウンロードしてインスト―ル。

2.使い方

Dreamweaverで適当に新規ドキュメントを開いて、

(ul#nav>li*5>a)+(div#contents$*3>p*3)

と打ち込み、行の末端でショートカット(⌘+,)を押すと…ぐぬぬ。

瞬時にタグが生成されました。まるで魔法をかけたかのようなマークアップ生成の気持ちよさ…!これはやみつきになりますね。

(参考)→zen codingは超便利!Dreamweaverで使ってみました。

3.導入後のチューニング

まず、さっきの参考記事の下部にある「zen_settings.js」に関する事項を参照しながら設定を書き換えてDoctype宣言等をJP仕様にしました。

次に、Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加 を参考にしながら、タグの開始/終了にあわせてコメントアウトを記述するために、設定ファイルをさらに書き換えました。

さらに、Coda、DreamWeaverの向けのZenCodingだとショートカットが(⌘+,)になっているので、他のエディターに移ってもすぐ慣れるように、主流のショートカット(⌘+E)で省略コードの展開ができるようにカスタマイズしておくのもいいと思います。範囲選択して包括した要素をマークアップするショートカット(⌘+Shift+A)も同様に変えちゃいました。

本家のチートシートや Zen-Codingを使いこなして、らくらくマークアップ こちらの記事などを参考にショートカットを覚える。

ひとこと

導入して早3日、HTML+CSSの書きやすさに涙がでる。

体感値ではとても早くマークアップできているように感じます。