KOJIKA17

Zen-Coding、0.7のすすめ

HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。
使いこなしてコーディング速度が3倍になっていますか?

SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。
(Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。)

追記:

Zen-Codingの最新版は、「Emmet」に名前が変更されて2013年2月24日に正式リリースされました

Zen-Codingとは

Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。
エディタのサポートは、3つの分類に分かれます。

公式サポート

  • Aptana/Zend Studio/Eclipse (Win/Mac/Linux)
  • TextMate (Mac)
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (Win/Mac/Linux)
  • Notepad++ (Win)
  • PSPad (Win)

サードパーティー

  • Dreamweaver (Win, Mac)
  • Sublime Text (Win)
  • Sublime Text 2 (Win/Mac/Linux)
  • UltraEdit (Win)
  • TopStyle (Win)
  • GEdit (Win/Mac/Linux)
  • BBEdit/TextWrangler (Mac)
  • Visual Studio (Win)
  • EmEditor (Win)
  • サクラエディタ (Win)
  • EditPlus (Win)
  • NetBeans (Win/Mac/Linux)

非公式

  • IntelliJ IDEA/WebStorm/PHPStorm (Win/Mac/Linux)
  • Emacs (Win/Mac/Linux)
  • Vim (Win/Mac/Linux)
  • Visual Studio (Win)

以前はサードパーティー(Dreamweaverなど)のZen-Codingは機能が制限されていました。
しかし現在では、公式サポートとほぼ同様の機能が使えるものも多くなっています。

Zen-Codingの使い方

ショートカットはOSやエディタによって違うので、名称のみで紹介します。

Expand Abbreviation (略語の展開)

Zen-Codingで最もよく使う展開です。
展開の方法を覚えれば、6割使いこなせたといえます。

div#header>h1{ロゴ}+p.caption{てすとです。}

これを展開すると

<div id="header">
  <h1>ロゴ</h1>
  <p class="caption">てすとです。</p>
</div>

解説

#
IDを指定します
.
classを指定します
>
階層が1つ下がります
+
隣接する要素
{ }
テキストを入れることができます

CSSに近い表記でHTMLコーディングをサポートしてくれます。
次は難しい例を出します。

#wrapper>(#header>(h1>a>img[src="logo.png" alt="test"])+p.caption)+(ul#navigation>li*5>a[href="test$.html"]>img)+#contents

これを展開すると

<div id="wrapper">
  <div id="header">
    <h1><a href=""><img src="logo.png" alt="test" /></a></h1>
    <p class="caption"></p>
  </div>
  
  <ul id="navigation">
    <li><a href="test1.html"><img src="" alt="" /></a></li>
    <li><a href="test2.html"><img src="" alt="" /></a></li>
    <li><a href="test3.html"><img src="" alt="" /></a></li>
    <li><a href="test4.html"><img src="" alt="" /></a></li>
    <li><a href="test5.html"><img src="" alt="" /></a></li>
  </ul>
  
  <div id="contents"></div>
</div>

解説

( )
1つのブロックとしてくくる事ができます。
*
*(アスタリスク)の後に数字を置くと、その数だけ要素を繰り返してくれます。
$
カウントアップ。連番などに有効です。アスタリスクと一緒に使用します。
[ ]
srcやhref, titleなど属性を追加したい時に使います。

また要素を書かずに、#. から始めると自動的に div が付いてくれます。
一見、難しく見えますが、やってみると簡単に覚えられます。

フィルター

HTMLの展開をサポートするフィルターも用意されています。
|(バーティカルバー)で区切って、最後にフィルターのコードを記述して下さい。

コメントアウト (c)
#header>h1#logo|c

<!-- #header -->
<div id="header">
	<!-- #logo -->
	<h1 id="logo"></h1>
	<!-- /#logo -->
</div>
<!-- /#header -->
エスケープ (e)
#header>h1#logo|e

&lt;div id="header"&gt;
	&lt;h1 id="logo"&gt;&lt;/h1&gt;
&lt;/div&gt;
Haml (haml)
#header>h1#logo|haml

#header
	%h1#logo

ショートコード

ショートコードが用意されています。
特にCSSは多くのショートコードが用意されています。

HTML
  • html:5
  • html:xt
  • link:css
  • script
  • script:src
  • ul+
  • fig
  • str
  • など...
CSS
  • d
  • d:ib
  • fl:l
  • p
  • m:a
  • bg+
  • bd+
  • c
  • op
  • op:ie
  • など...

CSSのショートコードはプロパティのほとんどに割り当てられているので、覚えるには時間がかかります。
ただZen-Codingを使いこなす上では、ショートコードを覚える必要があります。
学習コストがかかりますが、そのコストに見合っただけのコーディングスピードが得られると思います。

ショートコードを覚える場合は、チートシートを見て覚えるのがいいかもしれません。
github - zen-coding(ZenCodingCheatSheet.pdf )

Wrap with Abbreviation (略称の包括処理)

これを覚えるとリストなどをコーディングするのが楽になります。

リストにしたい時

あ
い
う
え
お

リストにしたい部分をドラッグして、実行すると、ダイアログボックスが出てきて入力できるはずです。

そのダイアログに、ul>li* と入れて、Enterを押すと


// ダイアログボックスに入力する文字
ul>li*

// Zen-Codingの結果
<ul>
  <li>あ</li>
  <li>い</li>
  <li>う</li>
  <li>え</li>
  <li>お</li>
</ul>

上記のようになります。
*n(数字) は数字の数だけ繰り返す役割をはたしますが、包括処理時に*だけを使用すると、改行された文字列ごとに要素で囲むことができます。

また$(カウントアップ)や、>などと組み合わせると

あ
い
う
え
お

// ダイアログボックスに入力する文字
ul#alpha>li.list$*>a <!-- または --> ul#beta>li.list$>a*

それぞれの結果

// ul#alpha>li.list$*>a
<ul id="alpha">
  <li class="list1"><a href="">あ</a></li>
  <li class="list2"><a href="">い</a></li>
  <li class="list3"><a href="">う</a></li>
  <li class="list4"><a href="">え</a></li>
  <li class="list5"><a href="">お</a></li>
</ul>


// ul#beta>li.list$>a*
<ul id="beta">
  <li class="list1">
    <a href="">あ</a>
    <a href="">い</a>
    <a href="">う</a>
    <a href="">え</a>
    <a href="">お</a>
  </li>
</ul>

#alpha と #beta で * の位置を変更しています。
包括処理を行う場合は、 * が肝になります。
li や a をサンプルにしていますが、br で多くの改行を入れるということもできます。

Next/Previous Edit Point (次、前の編集ポイントに移動)

空の属性、要素に移動できます。
使いこなせば包括処理よりも使用頻度が高くなります。

移動するポイント

空のところに移動するだけの機能です。 この機能のみでは利点をあまり見出せません。
しかしコピー&ぺースト支援ツールと一緒に使うと、便利な機能になります。

コピー&ぺースト支援ツールに、HTMLのテキスト, alt, できればURLなど、すべて保存します。
そしてZen-Codingを使い編集ポイントを移動しつつ、コピー&ぺースト支援ツールの情報を流し込めば、異常なスピードでテキストやaltを流し込むことができます。
場合によって、Wrap with Abbreviationと組み合わせると良いでしょう。

CSSの場合は、Valueごとではなく、Declaration Block({ } 括弧の中)ごとになります。

selector { 
  Property: Value;
  Property: Value;
  Property: ; /* ここには飛ばない */
} /* ここに飛ぶ */

Toggle Comment (コメントの表示、非表示)

コメントアウトにしたり、コメントを解除できます。

例えば、100行先まで table をコメントしなければならない場合。

親要素にカーソルを合わせて、Toggle Comment を実行するだけで、一瞬にして100行先までコメントアウトしてくれます。

親要素に合わせなくても、ドラッグ選択でのコメントアウトにも対応しています。

Remove Tag (タグを外す)

名前の通り、タグを外します。
以下のタグで、aタグを外したい場合。

<li><a href="zen">Zen-Coding</a></li>

aにカーソルを移動し、Remove Tag を実行すると、

<li>Zen-Coding</li>

任意のタグを外すことができます。

Evaluate Math Expression (四則演算)

四則演算ができます。

.test {
  margin:16*5/2;
}

数式の後ろにカーソルを移動し、Evaluate Math Expression を実行。

.test {
  margin:40;
}

16*5/2+(10*4) のような数式は計算できません。
簡易的な計算しかできませんが、電卓などをわざわざ出さなくても、エディタ上で計算できてしまうので地味に便利です。

Reflect CSS Value (CSSの値の反映)

Sassなどを使ってる人は不要ですが、プレフィックスで指定されているCSS3の値を他にも反映してくれます。

.test {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: ;
  box-sizing: ;
}

上記の場合、content-boxという値を下の2つに当てはめるのが面倒です。
そこで、下のプロパティには適当な値を入れます。

.test {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: 0;
  box-sizing:0 ;
}

先頭プロパティ(今回は -webkit-box-sizing:)にカーソルを移動し、Reflect CSS Value を実行します。

.test {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

実行すると、下のプロパティにも値が反映されます。
プレフィックス付のCSS3コーディングする時に便利になります。
ただし、下のプロパティには「何か値」がなければ反映されないので、先ほど0を入れたように、適当な値を入れてから実行する様にして下さい。

Zen-Codingは他にも機能はありますが、私がよく使う機能や便利そうな機能をピックアップしました。
Zen-Codingは、省略形からの展開が基本であり、覚えて使いやすい部分ではあります。
しかしコーディングを向上させるには、他の機能を学習することも重要になってくると思います。

またZen-Codingをカスタマイズすると、より使いやすく、思い通りのルールを与えることができるようになります。
コーディングスピードはまだ上がる!!Zen-Coding カスタマイズ : Web Design KOJIKA17

Zen-CodingとSassなどのメタ言語を一緒に使うと、入力の省略と設計が効率化されるので、さらにコーディングスピードを向上させることも可能です。
多くのエディタで使えるので、是非使ってみることをオススメします。