2010-03-02
CodaにZen-Coding入れてみたらちょっと感動した。
今日まで全然知らなかったんですが、何やら流行ってるらしくはてブ数がすごいことになっている、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
DreamweaverでZen-Coding
zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOG
※DWはCS3じゃダメ説も見た。
Permalink | コメント(0) | トラックバック(0) | 21:22 
