Zen-Codingで楽々コーディング! + コツ1つ

話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。

zen-codingって何？使い方は？という人は以下のページを見てくださいね。

• Zen-Codingでできるあんなことこんなこと
• 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた
• Zen-Codingが楽しい

ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。

たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは少ないですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)

だから、HTMLの設計は楽しんでも打ち込む作業はできれば飛ばしたい。だいたいさ、HTMLなんてほとんど<と>ばっかりだし、薬指とか小指とか、ブラインドタッチのウィークポイントを狙ったような書式になってるってのが、なーんか、何となく、ま、別にいいか。

たぶん、zen-codingを少し使ったら、普通にタグ打つの絶対いやんなると思うから、みんなとっとと触ろう。色々なソフトに対応しているよ。

• zen+coding download
• チートシート このPDFのコマンドリストが見やすいです。
• 使えるスニペットコマンド HTML編
• 使えるスニペットコマンド CSS編

ちょっとしたコツ

zen-codingを使い始めれば自ずと、どんなに複雑な脳内HTMLでも、それを1行で、そして1発でエディター画面に出力させようと魂を燃やし始めます。

みんなの反応を見ていると、「凄い！革命的だ！でも、ちょっと思ったように書けない時がある」と、変な動作をしてると感じる人がいるようです。触ってみて、なんとなーくそのシチュエーションの予想がついたので、ちょっとしたコツを書いてみあす。

zen-codingの基本的な使い方は、前述したサイトを見てください。

まずは簡単なの

以下のHTMLの場合は、

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

zen+codingのルールでは以下のように記述します。

#header+#content+#footer

+で兄弟要素を追加しています。+は、CSSの兄弟セレクタ (E + E)と似たルールで、超近未来にはCSSで当たり前に利用するものになるし、きっとCSSの選択肢のルールに沿ってzen+codingも拡張されると思うから、良く分からない人は調べちゃおう!

最初つまづきそうなとこ

次は、div#header内に子要素(h1)がある場合はどう書くか考えてみる

<div id="header">
 <h1></h1>
</div>
<div id="content"></div>
<div id="footer"></div>

単純に#headerの後に>h1を追加すると、

#header>h1+#content+#footer

h1以降の要素もdiv#headerの子要素という意味になり、div#headerが全てを包み込んでしまいます。

<div id="header">
 <h1></h1>
 <div id="content"></div>
 <div id="footer"></div>
</div>

こういう場合は()を使って階層を示せばいいようです。

(#header>h1)+#content+#footer

複雑な構造を1行で書くならこれがいいかも

「bodyの中に#header, #content, #footerのdivを作って、#contentの中にdiv.sectionが5こあって〜」みたいに、深くネスト(入れ子)した構造を1発で書く時は、大きな構造はあらかじめ()つきで書くとやりやすそうですね。

(#header)+(#content)+(#footer)

さらに中に記述する要素も、大きな親要素として君臨・発展しそうなものは、()付きで書いちゃう。(#mainと#utilitiesに注目)

(#header>h1)+(#content>(#main)+(#utilities))+(#footer>address)

これを1発で左から書くのは難しいだろうけど、各()の中を少しずつ追記するようなやり方なら、かなり複雑で巨大なHTMLでもいけそう！

Twitterに、1回発言するぐらいの文字数と時間で、Webページが1つ完成する!

(#header>h1)+(#content>(#main>h2+div#entry$.section*5>(h3>a)+div>p*3+ul+)+(#utilities))+(#footer>address)

出来た!と思ったらこれを ZEN! すると

情報結合開始。

<div id="header">
 <h1></h1>
</div>
<div id="content">
 <div id="main">
  <h2></h2>
  <div id="entry1" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry2" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry3" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry4" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry5" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
 </div>
 <div id="utilities"></div>
</div>
<div id="footer">
 <address></address>
</div>

一瞬でオワタわー。

...。

展開とCtrl+Zの「やり直し」を繰り返しながら、色々な構造を頭に描いてナゾナゾみたいに挑戦していくと覚えるまでが楽しいです!

以下の行をZEN!すると、Vicunaテンプレートの基本構造が情報結合されます!

(#header>(p.siteName>a)+p.description)+(#content>(#main>((p.topicPath+h1+(.section.entry#entry$*3>(h2>a)+(ul.info>li*2)+(div.textBody>p*3)+ul.reaction>(li.comment>a)+(li.trackback>a)))+p.topicPath)+(#utilities>(dl.navi>dt+dd)+(dl.others>dt+dd))+p.return>a)+(#footer>address)

そのうち配布するものがこれ1行だけになったら楽だなぁ... でもやだな！

コツ1つ　の　まとめ

左からツラツラ書いて1発1行で複雑な構造のHTMLを書く場合は、大きな要素を書くときに予め()で囲っておくと、後で親の兄弟要素を追加したくなったときに、わざわざカーソルで行を戻ったりしなくていいから、いいかも！　

• zen+coding download
• チートシート このPDFのコマンドリストが見やすい。
• 使えるスニペットコマンド HTML編
• 使えるスニペットコマンド CSS編

• Zen-Codingでできるあんなことこんなこと
• 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた
• Zen-Codingが楽しい

本記事は、Zen-Coding 0.6.01を用いました。バージョンによっては対応していないスニペット・コマンドがあります。