Let's Zen Coding !!!
先日、書店へネタを漁りに行った際、こんな本に出会った。
何何?Zen Coding?Xenなら知ってるけど…ほほぉぅ。
って感じにグッときたので評価してみることにした。(が、本は買ってません。ごめんなさい。)
ZenCodingのインストールについては下記のblogを参考にさせて頂きました。
- EC studio デザインブログ | 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた
- OTCHY.NET | Aptana 以外の Eclipse で Zen-Coding を有効にする方法
ついでに前から気になっていたAptana Studioも一緒に入れてみる。
Aptana, Eclipse Monkeyときて、肝心のZenCodingのところで躓いた。
ちょっと方法が変わったのか?readme をよく読んでみる。
あった。Update site を使えということらしい。
さて、これでインストール完了。[ウインドウ>設定>Zen Coding>変数] で設定変えておくのを忘れないように。
lang | en → jalocale | en-US →ja-JP
肝心の Zen Coding ですが、こんな感じで使います。
CSS のセレクタや XPath などに慣れ親しんでる方であれば、この威力がどれほどかお分かり頂けるでしょう。
特に手打ち大好きな職人さんにもってこい。
例えば、3行3列のテーブルにアンカーと説明文を入れるとしましょうか。
<table>
<tr>
<td class="cell">
<blockquote></blockquote>
</td>
<td class="cell">
<blockquote></blockquote>
</td>
<td class="cell">
<blockquote></blockquote>
</td>
</tr>
<tr>
<td class="cell">
<blockquote></blockquote>
</td>
<td class="cell">
<blockquote></blockquote>
</td>
<td class="cell">
<blockquote></blockquote>
</td>
</tr>
<tr>
<td class="cell">
<blockquote></blockquote>
</td>
<td class="cell">
<blockquote></blockquote>
</td>
<td class="cell">
<blockquote></blockquote>
</td>
</tr>
</table>
わざと長くしたけど、コピペもできるけど、やっぱりHTML直打ちするのは面倒ですよね。
こういう時に最強なわけですよ。Zen Coding。
table>tr*3>td.cell*3>a+blockquote
上の長ったらしいタグを手打ちしなくても、これだけ書いて、Ctrl (Command) + E。
わっしょーい!!
それからこれ、
ul>li#list$*5
こんな感じになっちゃいます。
<ul>
<li id="list1"></li>
<li id="list2"></li>
<li id="list3"></li>
<li id="list4"></li>
<li id="list5"></li>
</ul>
欲を言うと属性もこんな感じでできたら最強なんだけど、もしかしたら知らないだけかもしれません。
もうちょっといじり倒してみないとな。
table@border="1">tr*3>td.cell*3>a#link$@target="_blank"+blockquote
とにかくこれ、直打ち派にはたまらないアイテムです。今まで知らなかったのが残念なくらい。
WYSIWYGじゃないと嫌な人にはさっぱり分らんでしょうけど、ソースコードが見えないと気持ち悪い人にとってはそんなものなのです。