gaspanik weblog

先日超速コーディング？としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。

HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします（どちらかと言えば、こっちが本当のZen-Codingなんでしょう）。

ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…（はず 笑）。

文書構造がわかってれば、1行書いて一気に展開できる

Zen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-TextMate.v0.5.zip」も忘れずに入れておきましょう。

たとえば、上図の中段下あたりにある

div#coding>h1#textmate-with-zen+p.tagline

を入力して、「Cmd+E（Coda版とDWのMXP版は、Ctrl+,）」で展開すると下記のコードがどーんと入ります。

<div id="coding">
 <h1 id="textmate-with-zen"></h1>
 <p class="tagline"></p>
</div>

この書式を見てすぐ気付く方もいると思いますが、まるでCSSのセレクタを書くかのように、「#」でid属性、「.」でclass属性、「>」で階層、「+」で隣接している要素を繋げられます。つまり、HTMLの文書構造が明確で頭の中で書くことが決まっている場合は、1行で書いて展開した方が圧倒的に速いってわけです。
※idは「Cmd+3」、classは「Cmd+2」のショートカットもある。

同じ事の繰り返しは「*」、数字を付けるなら「$」

構造がわかっていればこのように簡単に展開できますが、HTML文書というのは同じ要素の繰り返しというのも結構な確率で登場します。たとえば、ナビゲーションのli要素だったり、定型のdivとhとpの繰り返しだったり。

そんな時は「*繰り返す回数」を付け加えればオッケイ。

ul#nav>li*3>a

と書いて展開すれば、

<ul id="nav">
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
</ul>

こんな感じでコードが展開されます。TABキー（Shift+TAB）で、それぞれのhref属性とa要素の中身を移動できるので入力もスムーズィー。楽勝です（笑）。

まだあります。時には、連続する同じ要素にidやclass属性を割り当てて、それぞれの属性値に連番を付与しておきたい、といったことも考えられます。そんな時は変数的な意味の「$」を付ければ、自動的に番号が振られます。素敵ですね。

もろもろを組み合わせるとこんな感じになります。

div#box$*3>h3+p*2

と書いて展開すれば、

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


ほーら、使いたくなってきたでしょー（笑）。

というわけで、前回エントリーの続きということで、単純な略語ベースの展開だけではなくZen-Codingをさらに使いこなすためのいくつかの書式の紹介でした。ほかの記述についてはこちらで確認してみてください。

※一応今回もまた簡単なデモをアップしておきました（どう書こうかなって思いながらなので、なかなか指が進んでませんが 笑）。

Zen-Coding Ext. from komori, masaaki on Vimeo.

Tags: editor, productivity, textmate, tips, webdesign

This entry was posted on Monday, February 1st, 2010 at 3:21 PM and is filed under articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.