ブログ

EspressoのZen-Codingをカスタマイズ(おまけでDreamweaverも)

僕はHTMLのマークアップに使うソフトに、主にEspressoというアプリを使用しています。CSSEditeという、Mac使いのマークアップエンジニアがかなりの割合で使っているであろうソフトのMacRabbit社が出しているソフトです。

最近、「Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加|Blog|Skyward Design」というエントリーを読み、Espressoでも同じようなことができるのかなと思って実験してみました。

元記事では、<div>要素のみに終了タグの前にコメントを付けるための方法として紹介していますが、HTML5のことを考えると、デフォルトのZen Codingでも「要素名+id名/class名|c」(例:div#hoge|c)を展開すると入るコメント部分をカスタマイズしてみたほうがなにかと便利かと思います。

デフォルトのZen Codingでも「要素名+id名/class名|c」(例:div#hoge|c)を展開すると、要素の終了タグの前にコメントが入り、ついでに個人的には邪魔な要素の前後に入るコメントを消してみようと思います。

元記事とは違うファイルでカスタマイズ

最初、元記事と同じファイルをカスタムしてみようとしたら、全然うまくいかなかったです。
ついで、DreamWeaverのZen CodingはJavaScriptで記載されていて、一方、EspressoのZen CodingはPythonで記載されているため面倒だったのでやめました、

ということで一瞬あきらめたのですが、どこかに指定されているファイルがあるかと思い探しまくりました。
いろいろファイルを確認したあげく、TEA for Espresso.sugar(EspressoのZen Codingファイル)の中に見つけました。

以下にファイルの説明とカスタマイズの方法を記載します。
ちなみに、自己責任でお願いします。

TEA for Espresso.sugarを右クリックから「パッケージを開く」を選んで中身を表示します。

TEA for Espresso.sugarを右クリックから「パッケージを開く」を選んで中身を表示

続いて「/Support/Library/zencoding/」ディレクトリに移動し、「zen_settings.py」というファイルをテキストエディタで開きます。

zen_settings.pyを開く

このファイルをカスタマイズするので、バックアップを取るなどしておくといいでしょう。

コメントに入るid・classの表示方法をカスタマイズする。

まずは、コメントの中に入るidやclassの表示方法をカスタマイズします。

26行目あたりに記載されている以下のコードを探します。

この部分は以下のようなコードに差し替えてみます。

このコードにすることで、[id="hoge"]・[class="hoge"]という書式に変更できます。
id・classを同時に指定するときにも、[id="hoge"][class="hoge"]という形式でコメントが入ります。

終了タグの前にコメント記載するようにする

次に、終了タグの前にコメント記載するようにする

29行目あたりに記載されている以下のコードを探します

この部分は以下のようなコードに差し替えてみます。

上記記載に差し替えることにより、実際にHTML上で展開・表示されるコードは以下のようになります。

実際にカスタマイズするときには、「end」を「/」に変更したりするなど、使われる人の実態に合わせてカスタマイズすればいいかと思います。

まとめ・そしておまけでDreamWeaverも

これで、デフォルトのZen Codingでも「要素名+id名/class名|c」(例:div#hoge|c)を展開すると、終了タグの前にコメントが入るようになりました。

そもそも、終了タグの前にコメントを追加するのは、HTMLを修正して、その要素の場所が移動してもコメントが取り残されないようにするためなので、必要に応じてカスタマイズしたり、コマンドを追加したりしたらいいかと思います。

最後に、おまけ的にDreamWeaverでのカスタマイズ方法を紹介します(Dreamweaver CS5の場合)。

「/Users/(ユーザー名)/Library/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/Commands/ZenCoding/filters/comment.js」というファイル名を探します。

あとは、Espressoのやり方と一緒です。行数とかが違うだけで全く記載されている内容が同じでした。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。