つぶやく時間でweb１ページが出来上がるZEN Cordingがステキっ

はろにちわん。久しぶりのポストです。
トレーディング禁止命令がまだ解除されてないので今日はちょっとしたWEBネタ。Kellyはというと、今更ながらCSS３とJQueryの魅力に取り憑かれてます。ハマりだすと止らない。最初のきっかけって、みんな同じと思うけど、例えば尖ったボックスじゃなくてまるっこい方がかわいいなーとか、暑苦しいボールドの文字にグラデーションあったらオッサレじゃない？でもどうやるんだ～？みたいなことから始まるわけ。CSSで思い出したけどさ、最近いろんなテクニックサイトで話題になっていたZEN Cording、Kellyも入れてみた。そしたら、わお～すげー。ツイッターのつぶやきより短いコード入力でWeb１ページのファンデーションが出来上がりっと！２年まえのわたしなら何がすごいんだよ？くらいに意味不明だったと思われるけど、これの良さが分ってきたってことは進化した証拠だおー。
今このブログで使っているvicuna CMSの開発者もブログで絶賛してた。プロにはたまらないツールが誕生したわけですね。
ただしこれを効率よく使う前提は、基本のエレメンツをDeployできるスキルが必要。スタイリングがすでに先走っていて脳内HTMLが出来上がっている人にとってはサイコーだな。ボクちゃんも頑張るぞっと。


説明するよりムービーみた方が早いお。
USTでZEN cordingしちゃったコモリさんのライブもステキ♫

<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の繰り返しだったり。そんな時は「*繰り返す回数」を付け加えればOK。

ul#nav>li*3>a と 書いて展開してすると、

一瞬でこれ。
<ul id="nav">
 <li><a href=""></a></li>
 
<li><a href=""></a></li>
 
<li><a href=""></a>
</li>

</ul>

で、これを書いていて一瞬呪いにハマった。この< > は今度どうやって表示させるんだっけ？　アふぉ～　そのままかけばいいんじゃん。って思ったけど、カンタンにはいかないのが特殊文字のやっかいなところ。くぅめんどくさい
→　&lt; &gt; これを記事内に表示させる方法を説明しようとすると更にイラっとくるわけです。
&lt;の頭に&amp;と書く。


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

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