Dreamweaver用ZenCodingで閉じタグの後ろにコメントを加える

Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加
http://www.skyward-design.net/blog/archives/000090.html
を参考に、ちょっとだけ改良してみた。

2012/04/09 追記。
コードが間違ってました。
以前のままだと条件分岐しても結局同じコード書くだけと言うアホな子に。

要するに、

div#foo.bar.hoge を展開すると
<div id="foo" class="bar hoge"></div><!--/#foo.bar.hoge-->
となる

こんな機能を「Zen Coding for Dreamweaver v.0.7.5」に付けたという話。

元記事の動作

• コメントを加える対象はdivのみ（ul#foo → </ul>（コメントつかない））
• idがある場合はclassは無視される（div#foo.bar.hoge → </div><!--/#foo--> ）

それに対して、改良した点

• 閉じタグがあるタグならなんでもコメント付加
• id、class全部書きだす

まあぶっちゃけ、好みとルールの問題。

適応方法

下記のフォルダを参照。

Win XP : C:\Documents and Settings\<あなたの名前>\Application Data\Adobe\\Configuration\Commands\ZenCoding\filters

Win 7 : C:\Users\<あなたの名前>\AppData\Roaming\Adobe\\Configuration\Commands\ZenCoding\filters

の中にある、「html.js」を見る。

大体100行目あたりに、「processTag(item, profile, level)」という関数がいます。
この関数の中の、下記の部分を書き換えます。

            } else {
                start = '<' + tag_name + attrs + '>';
                end = '</' + tag_name + '>';
            }

これを

/* 
            } else {
                start = '<' + tag_name + attrs + '>';
                end = '</' + tag_name + '>';
            }
 */
            } else {
            // 閉じタグにコメントを加える
            // ex. div#id.cls1.cls2 -> </div><!-- /#id.cls1.cls2 -->

                var commentStr = ''; // ID名、Class名を列挙する変数。
                var match_id    = attrs.match(/(id)="(.*?)"/); // タグの属性からid=hoge"の書式を抽出。
                var match_class = attrs.match(/(class)="(.*?)"/); // 同、Class抽出。

                if(match_id || match_class) {
                    if(match_id) { // IDあれば
                        commentStr += '#' + match_id[2];
                    }
                    if(match_class) { // Classあれば
                        commentStr += '.' + match_class[2].replace(' ', ".");
                    }
                    start = '<' + tag_name + attrs + '>';
                    end = '</' + tag_name + '><!-- /' + commentStr + ' -->'; // ID,Classの指定がある場合は閉じタグ後にコメントを追加する。
                } else {
                    start = '<' + tag_name + attrs + '>';
                    end = '</' + tag_name + '>'; // ない場合は閉じタグのみ出力する。
                }
            }

こう。

以上です。