Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加

公開

divの終了タグ（閉じタグ）の前後にコメントを付け、id名／class名を書くことはよくあるかと思います。ただこれが意外と手間のかかる作業なので、何とかならないか？と思い、「Zen Coding for Dreamweaver v0.6」をカスタマイズしてみたところ、上手く動作するようになりました。

デフォルトのZen Codingでもdiv#main|cを展開するとコメントが入りますが、それだと要素の前後にコメントと改行が入ってしまうので、このカスタマイズの方が自分には効率的かなと思います。

カスタマイズ方法

ZenCoding/filters/html.jsの96～97行目（2011年12月25日現在の最新版、v.0.7.5の場合は123〜124行目）に手を加えます。本当は関数を定義するのがよい気がしますが、時間の都合もありとりあえず下記で。

カスタマイズ前
 } else {
 start = '<' + tag_name + attrs + '>';
 end = '</' + tag_name + '>';
 }
カスタマイズ後
 } else {
 if(tag_name.toLowerCase() == 'div') {
 var commentStr;
 var getAttrPattern = /(id|class)="(.*?)"/;
 var matchStrs = attrs.match(getAttrPattern);
 if(matchStrs) {
 if(matchStrs[0].indexOf('id') > -1) {
 commentStr = '#' + matchStrs[2];
 } else {
 commentStr = '.' + matchStrs[2].replace(' ', ".");
 }
 start = '<' + tag_name + attrs + '>';
 end = '</' + tag_name + '><!-- /' + commentStr + ' -->';
 } else {
 start = '<' + tag_name + attrs + '>';
 end = '</' + tag_name + '>';
 }
 } else {
 start = '<' + tag_name + attrs + '>';
 end = '</' + tag_name + '>';
 }
 }

カスタマイズファイルの場所

Windows
C:\Users\（ユーザー名）\AppData\Roaming\Adobe\Dreamweaver CS（バージョン）\ja_JP\Configuration\Commands\ZenCoding\filters
Macintosh
/Users/（ユーザー名）/Library/Application Support/Adobe/Dreamweaver CS（バージョン）/ja_JP/Configuration/Commands/ZenCoding/filters
  • Mac OS X 10.7.xの場合、Libraryが不可視になっているため、Finderの[移動]--[フォルダへ移動]などを利用して下さい。