CodaにZen-Coding入れてみたらちょっと感動した。

Web

今日まで全然知らなかったんですが、何やら流行ってるらしくはてブ数がすごいことになっている、Zen-Codingとやらを導入してみた。
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
エディタに入れると、HTMLコーディングを楽にしてくれるイケてるプラグインらしく、詳しくは上記のエントリに動画なども貼ってある。
上記のエントリはAptanaでの利用法ですが、私の使っているエディタ"Coda"でも使えるようなので、さっそく入れてみたら、これが楽しい！すごい！
Codaでの導入方法はこちらがわかりやすかったです。
CodaにZen-Codingを入れてみると… | gaspanik weblog
ただし、展開方法が「control+,」とあるのだけど、私の環境だと「F1」キーで展開しました…なんでだろう。。バージョン違いかな。まぁいいや。
今日初めて入れてちょこちょこ使いはじめたところなので、3倍速くなるかどうかはわからないが、コマンドにも規則性があって美しく、HTMLやCSSに慣れ親しんでる人なら直感的に覚えやすい感じ。コーディングがとても楽しくなった。感動的だ。

どういうことか、例えば、

div#box$*3>h3+p.cont
と書いて、「ctrl+,」等の決まったキーを押してでワンタッチで展開すると、

<div id="box1">
  <h3></h3>
  <p class="cont"></p>
</div>
<div id="box2">
  <h3></h3>
  <p class="cont"></p>
</div>
<div id="box3">
  <h3></h3>
  <p class="cont"></p>
</div>

というソースを勝手に書いてくれる。

  • 「#」：id属性
  • 「.」：class属性
  • 「>」：階層
  • 「+」：隣接する要素をつなげる
  • 「$」：勝手に順番に番号を振ってくれる
  • 「*」：指定した回数繰り返す

…ということらしい。ヤバイ。便利すぎる。
さらに詳しくは、これまた↓こちらのページがとてもわかりやすかったのでぜひこちらをどうぞ。
Zen-Codingでできるあんなことこんなこと | gaspanik weblog
上記の他にも色々便利なスニペット的な機能があるらしいけど、とりあえずこのHTMLの展開コマンドだけで結構感動的で、わー！わー！すごーい！楽しいーー！と一人でテンション上がってしまった。他はおいおい試してみようと思います。
このZen-Coding、秀丸やDreamweaverなどでも使えるらしい。
素晴らしいですなー。

秀丸でZen-Coding

秀丸マクロでZen-Coding

DreamweaverでZen-Coding

zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOG
※DWはCS3じゃダメ説も見た。