手軽にお試しZen-Coding

ツール メモ

HTMLとCSSのコーディングを高速に行なえるプラグイン、「Zen-Coding」なるものが話題になっています。
http://blog.gaspanik.com/coding-with-textmate-and-zencoding


使っているエディタがZen-Codingに対応していない場合、
あるいはプラグインの追加の手間をかけずに機能を試してみたい場合。

ブラウザだけで、Zen-Codingの主要機能を使える「Zen Coding for textarea」が配布されているので、これを試してみると良いかと思います。


Zen-Codingのデモ動画を見て、まず「これは凄い」と思いました。
HTMLおよびCSSのDOM指定ベースで変換するので、jQueryに馴染んだ身としては、取っ掛かり易そうでもあります。


しかし。


このZen-Codingは主にMacOnlyエディタのプラグインであり、
Windows版でフリーで試せるものも、情報は主にEclipse系のみ。
http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html
そして私は、個人的にEclipseがあまり好きではないため、微妙に気乗りしません・・・


また正直、今CakePHPメインでやっていると、ヘルパー使うからメリットがどのくらいあるかと考えると、微妙でもあります。


探してみたら、ブラウザ上でZen-Codingの一部機能を使える「Zen Coding for textarea v0.6」というものがあったので、ひとまずこれで使い勝手を試してみることにしました。
http://code.google.com/p/zen-coding/downloads/list

  1. 「Zen Coding for textarea v0.6」ダウンロード＆解凍
  2. example.htmlをブラウザで開き、
  3. TEXTAREA内にZen-condingで変換したいコードを記入。
  4. [Ctrl+適宜キー](DOM→タグ変換ならCtrl+E)

　でZen-Codingの主要機能を使えます*1

テキストエリアの下にある、「Powered by Zen Coding」という青いボタンを押すと、どのショートカットキーを使えばよいか、簡易ヘルプも表示されます(英語ですが）


しばらくこれでZen-Codingの変換機能→エディタにコピペ　で使ってみて、エディタで直接使いたいくらいに思ってきたら、正式にプラグイン導入検討しようと思います。

*1:動作確認FireFox3.6