読者です 読者をやめる 読者になる 読者になる

ゴミ溜め@技術系日常系雑文

主にWeb技術やそのほかつまづいたこととか引っかかって調べたこととかをまとめてます。

はてなダイアリーから引っ越しました。)

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

環境最適化 null

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 + '>'; // ない場合は閉じタグのみ出力する。
                }
            }

こう。

以上です。