こもりまさあきさんのエントリー「TextMate+Zen-Codingで超速コーディング？」を発端にして、ブログやTwitterでZen-Codingに関する話題が熱くなっています。

こもりさんのエントリーではTextMateにZen-Codingを追加していますが、僕は持っていないのでDreamweaverに入れて使ってみました。

Dreamweaverへのインストール方法

zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOGを参考にインストールしましたので、ご参照ください。

これできないのかー、ということでちょっとカスタマイズ

こもりさんのエントリーを参考にいろいろと書いてみました。Dreamweaverのコードビューを良く使う自分にはたしかにめっちゃ便利ですね。ただインストールした段階ですとちょっと足りないなと思うこともあります。

table要素を記述している際に、th要素にscope属性を簡単に書ける方法ないのかなーと思ったのですが、デフォルトではないような、ないですよね？まちがってたらご指摘ください！で、ないなーと判断したので、例えばth:sなんかってうつと<th scope=""></th>って入ったら素敵じゃね？と思ったわけです。さらにいえば、th:scで<th scope="col"></th>、th:srで<th scope="row"></th>も入れて置いた方が便利でしょう。

カスタマイズ方法

僕のMacの場合ですと、「ユーザー名/ライブラリ/Application Support/Adobe/Dreamweaver9/Configuration/Commands/ZenCoding」内にある「zen_settings.js」をいじります。560行目付近から、個々の要素を記述するための指定がされていますので、どこか良い感じのところに以下を追加しておきました。

’th:s’: ’<th scope=""></th>’,
’th:sc’: ’<th scope="col"></th>’,
’th:sr’: ’<th scope="row"></th>’,

これで希望した記述が可能になります。

もっとカスタマイズしたいのですが、方法がわかりません。どなたか教えてください！

もっとカスタマイズしたら、個人的には便利になるなーと思ったのですが、方法がわからずに断念したのが以下2点です。どなたかわかる方いらっしゃいましたら教えていただければ嬉しいです！ビール1杯くらいならおごります！

• #hogeや、.hogeなどの利用して要素を記述した場合に、閉じタグの前に<! --#ID名.class名-- >というように（ID/class両方が指定された場合は両方が、片方の場合は片方の）コメントが入るようにしたい。
• タグの入れ子構造でインデントがかかるようになっているけど、インデントはなしにしたい。まぁ、Dreamweaverを使っているのであれば、全選択してからのShift+tabで一気にインデントを消せますが、最初から無いにこしたことはないということで。

特に1つ目、できたらめちゃめちゃ便利だと思うんですよねー。