デザイナーが使えるZen-coding環境

2010.06.14

ワールドカップのパブリックビューイングを会社近くの映画館で見てみたいminamiです。

以前tanakaがNetBeanでのZen-codingを紹介していましたが、デザイナー、コーダーがよく使うであろう環境でのZen-coding対応事情を調べてみました！

秀丸でZen-codingができるようになるマクロが配布されています。

マクロをダウンロード
マクロフォルダのパスを確認。[その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されてるフォルダにダウンロードしたzencoding-for-hidemaru.zipから展開したzencoding.mac と zencoding.iniを移動
[マクロ] - [マクロ登録] で、zencoding.mac を任意の番号に、別々に2つする※重要!
[その他] - [キー割り当て]で上記２つのマクロに別々のキーを割り当てる。Wrapモード（後述）を使いたい場合はShiftキーを必ず含める

このマクロではZen-Coding の「記法からのHTML生成」と「生成したHTMLで既存のソースをラッピング」を秀丸エディタに導入することができます。

ここではCtrl+Eを「記法からのHTML生成」、Ctrl+Shift+Eを「生成したHTMLで既存のソースをラッピング」に割り当ててみました。

div

と打ってCtrl+Eとすると、

<div></div>

このように変換されます！

div#main>ul>li*3>a

これもCtrl+Eで

<div id="main">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

この通り！便利ですね。さらに使えるのがWrapモードです。範囲を囲むようにタグを付けることができるのです。例えば

りんご
バナナ
みかん

この3つの果物をリストで表したい場合、文字を選択してCtrl+Shift+Eを押すとプロンプトが現れます。ここにul>li*>aと入力すると・・・

<ul>
<li><a href="">りんご</a></li>
<li><a href="">バナナ</a></li>
<li><a href="">みかん</a></li>
</ul>

大量のリストタグをつけなければいけない場合など、とても重宝します！

DreamWeaver用のZen-coding拡張も公開されています。

DreamWeaver8は最新のv0.6は対応していないため、v0.5をインストールします。

Extension Managerでファイルを開いてインストールします。 doctype宣言がデフォルトではenになっているため、jpに変更する場合は、

ユーザ名\Application Data\Macromedia\Dreamweaver 8\Configuration\Commands\ZenCoding\

の中にあるzen_settings.jsを設定します（WinXP、DreamWeaver8の場合）

なんとFlashDevelopも3.1.0からzen-codingが使えるようになりました！

ファイル→XHTMLドキュメントでファイルを作り、Ctrl+B or Ctrl+spaceでタグを変換できます。ただ、まだWrapモードなどには対応していないようです・・・将来的に使えるようになることを期待しましょう！

自分の良く使う環境があれば是非導入してみてください。慣れると本当に3倍くらい早くコーディングできる気がします！

この記事を読んだ人にオススメ