デザイナもすなるZenCodingというものを、われもしてみむとてするなり

前々から、どうやったら楽にコーディングできるのかを悩んだ末に

自分なりにエディタにショートカットやスクリプトやらマクロを埋め込んでは自分なりに改良してきたのですが

ある日、ZenCodingという手法に出会いました。

ZenCodingというのはHTMLを省略表記で記述してから

それ展開するコーディング手法です。

例えば、次の様にコードを作成します

h1 + div#content.section > h2 + div.section > p*2

展開系は、以下のようになります。

<h1></h1>
<div id="content" class="section">
  <h2></h2>
  <div class="section">
    <p></p>
    <p></p>
  </div>
</div>

他にもHTMLを入力するための簡略記法は存在しますが

Zen Codingの最大の利点は、CSSのセレクタと文法をあわせているところ！

そのため、デザイナさんは非常に簡単に入力を行うことが出来ます。

私が、この手法を見た瞬間の感想は

「なんだ、私が今までやってきた手法とほぼ同じじゃないか」

でした、最終的に人のアイデアというのはにかよるものなのですね

それなら、JavaScriptだけで実装してしあめば、Webブラウザだけで稼動可能だし

結構色々な使いがあるんじゃないのか！

と思って、自分で実装してみました。

本家にある発展系の機能で、まだ未実装の物も多いですし

一応、自分で便利に使うつもりで作ったもので、これからもちょくちょく更新していく予定です

ついでに、愛用している萌ディタ向けに拡張スクリプトも作成してみましたので、よろしければご利用ください。

萌ディタのscriptフォルダ下に放り込んで、他の拡張子クラスの様に設定で読み込んでもらえば正常に動きます。

呼び出し方は、Ctrl+Shift+Xで呼び出せますので、入力バッファに、タグ名を入力して、Enterしてください

投稿者 baban 2010/07/26 at 21:00

Skyscraper