マークアップ効率化 - zen-codingでコーディングを倍速に

はじめに

こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌と申します。
Yahoo! JAPANトップページやMy Yahoo!のマークアップを担当しており、HTML,css,JavaScriptなどを用いて開発を行っています。

マークアップの効率化を行えていると思われる部分を、普段の業務のなかから取り上げて、記事を書いていきたいと考えています。

今回はBlogやTwitterなどで話題に上がってきているzen-codingについて触れてみようかと思います。
随分と前からある物らしいのですが、何やら最近盛り上がってきている印象を受けています。

このzen-codingですが自分自身も作業で使っていますが、非常に優秀でマークアップ効率化に貢献しています。

今回のエントリーはzen-codingについてあまりよく知らない方向けの物となっています。

zen-codingの概要

zen-codingとは、cssのセレクターと同等、または近しい記述を行って変換することでタグの自動補完をしてくれるエディタ用のプラグイン（拡張機能）です。

<div id="wrapper">
	<div id="header">
		<h1></h1>
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="contents">
		<div class="box"></div>
		<div class="box"></div>

		<div class="box"></div>
		<div class="box"></div>
	</div>
	<div id="footer"></div>
</div>

下記の動画を見ることで、zen-codingを知らない方はそのすごさが伝わるかと思います。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

また、今回説明しているのはzen-codingのバージョンが0.6で、それよりも前のバージョンだとこれから説明する内容がすべて使えるわけではないことを念頭においておいてください。

導入について

対応エディタ

公式では現段階で以下のエディタが対応しています。

Aptana、Coda、TEA for Coda、Espresso、TEA for Espresso、TextMate、editArea、Visual Studio、Komodo Edit/IDE、TopStyle、Sublime Text、GEdit、Dreamweaver CS4、UltraEdit、BBEdit/TextWrangler、Emacs、Web IDE、NetBeans

※エディターではありませんがHTMLのタグtextareaにも対応させることも可能です。（この記事で使っています）
※またエディターによって機能の実装具合が異なります。詳細はzen-coding公式ページを確認してみてください。

導入の仕方を説明しているエントリー

下記の外部リンクでそれぞれいろいろな導入方法について触れていますので、そちらを参照していただければと思います。

HTMLの記法について

基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。
このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。

• Zen HTML Elements
• Zen HTML Selectors
• Zen CheatSheets

基本的な記法

ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。

まずものすごく基本的な記法である、単独タグの記法について説明を行います。
cssのセレクタをイメージしながら見ていくと納得しやすいと思います。

タグだけ変換

<div></div>

変換後、div要素の間にカーソルが移動するので、すぐにテキストの入力が可能となります。
ですが、これだけではzen-codingのすごさは体感できないかと思います。
気にせず次はidやclassをつけてみます。

idを付与するタグ変換 （E#name）

<div id="wrapper"></div>

classを付与するタグ変換 (E.name)

<div class="box"></div>

属性を付与するタグ変換 ([attr])

<div title="タイトル"></div>

ここまでが1つのタグに対する最も基本的な部分でした。
まだすごさは伝わらないですね。では上記を組み合わせていってみましょう。

基本的な記法の組み合わせ

idとclassを付与するタグ変換

<div id="wrapper" class="box"></div>

idとclass2つを付与するタグ変換

<div id="wrapper" class="box current"></div>

基本すべてを付与するタグ変換

<div id="wrapper" class="box current" title="タイトル" rel=""></div>

idやclassを付与していきたい場合、続けて書いていけば追加されます。
また属性の追加は[属性1=値1 属性2=値2]の様に半角スペースを続けて追加することが出来ます。値を記入しなかった場合は値なしの状態で追加されます。

構造化を含めた記法

次は構造化を現す記法を説明したいと思います。
ここからだんだんzen-codingの素晴らしさが分ってくるかと思います。

兄弟要素にタグを追加 (E+E)

<div id="main"></div>
<div id="sub"></div>

子要素にタグを追加 (E>E)

<div id="main">
<div id="sub"></div>
</div>

複数個まとめてタグを追加 (E*N)

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

連番を付与しながら複数個まとめてタグを追加 (E*N$)

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>

けたを指定した連番を付与しながら複数個まとめてタグを追加 (E*N$)

<div class="box001"></div>
<div class="box002"></div>
<div class="box003"></div>
<div class="box004"></div>
<div class="box005"></div>

定型のタグをまとめて追加 (E+)

<table>
	<tr>
		<td></td>
	</tr>
</table>

複雑な構造をグルーピングしてタグを追加

<div id="header">
	<h1></h1>
	<div id="nav">
		<ul>
			<li></li>
		</ul>
	</div>
</div>
<div id="contents">
	<div id="main"></div>
	<div id="sub"></div>
</div>
<div id="footer"></div>

そのほかの記法

開始・終了コメントをタグの前後に追加 (|c)

※記法の文末に「|c」を追加してください。

<!-- #header -->
<div id="header">
	<!-- #nav -->
	<ul id="nav">
		<!-- .menu1 -->
		<li class="menu1"><a href=""></a></li>
		<!-- /.menu1 -->
		<!-- .menu2 -->
		<li class="menu2"><a href=""></a></li>
		<!-- /.menu2 -->
		<!-- .menu3 -->
		<li class="menu3"><a href=""></a></li>
		<!-- /.menu3 -->
	</ul>
	<!-- /#nav -->
</div>
<!-- /#header -->

HTMLエンティティ化（ブラウザでタグを表示できる様に）して表示 (|e)

※記法の文末に「|e」を追加してください。

<div id="header">
	<ul id="nav">
		<li class="menu1"><a href=""></a></li>
		<li class="menu2"><a href=""></a></li>
		<li class="menu3"><a href=""></a></li>
	</ul>
</div>

HTMLの宣言と大枠の骨組みを追加 (Root Element)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

IE用出し分けコメントアウトを追加 (Conditional Commentst)

<!--[if lte IE 6]>
	
<![endif]-->

そのほかの便利なzen-codingショートカット

※エディターによってショートカットキーは異なると思うので、公式ページなどでご確認ください。（Macの場合、Ctrl→Commandです）

上記ショートカットで一番のおすすめはShift+Ctrl+Aです。
業務で良く見られるパターンを例にしてみます。下記の手順でショートカットを押してみてください。

1. テキストエリア内をすべて選択する
2. Shift+Ctrl+Aを押す
3. ダイアログが出てくるのでul>li*と入力する

<ul>
	<li>1行目の内容。</li>
	<li>2行目の内容。</li>
	<li>3行目の内容。</li>
</ul>

cssの記法について

cssはHTMLの記法と異なり、プロパティーや値を省略して変換する事ができます。
基本的にプロパティー:値という形の記法を取ります。
HTMLよりも暗記に近いものなので、自分が良く使うプロパティーと値は以下のドキュメントを見て、印刷したりして使えるようにしておきましょう。

• Zen CSS properties
• Zen CheatSheets

※cssの記法は、styleタグの中かcssファイル内でないと正しく動作しません。下記デモ内にstyleタグが入っているのはそのためです。

基本的な記法

プロパティーと値を追加

display:block;

プロパティーと値（値の前には半角スペース）を追加 (|fc)

display: block;

@importを追加 (Special Rules)

@import url();

!importantを追加 (Special Rules)

!important

Yahoo! JAPANトップページの骨組みを一気に追加

ここまで一気に書く必要はないですが、書き方によっては一筆書きの様に細かく指定していけば一回の変換で膨大なHTMLを作成することが可能だということが見てとれると思います。
複雑な構造になりそうな部分は（）をつけることによって一括で変換を行うことが可能になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<div id="masthead"></div>
			<div id="emg"></div>
			<div id="searchbox"></div>
			<div id="hdBar"></div>
		</div>
		<div id="contents">
			<div id="toptxt"></div>
			<div id="navi"></div>
			<div id="division">
				<div id="main"></div>
				<div id="sub"></div>
			</div>
		</div>
		<div id="footer">
			<address></address>
		</div>
	</div>
</body>
</html>

※ちなみにdivは省略して書くことが出来ます。div#wrapperと#wrapperは同義です。

まとめ

利点

• cssセレクタに近い書き方で、可読性が高い
• ショートカットキーやcssの省略記法などを覚えるだけで使用が可能
• いろいろなエディターに対応しているので、対応しているエディターならば乗り換えても覚えた記法をそのまま使える
• タグの閉じ忘れや、不正な入れ子構造が発生しなくなる

欠点

• 使用しているエディターにzen-codingが対応していない場合は使えない
• 暗記が必要なので、ある程度使って記法を覚えなければ使えない

利点・欠点を並べると上記の様になるかと思います。
実際に触ってみて、ショートカットキーなどを覚えて行くことで徐々に作業効率が良くなること間違いないかと思いますので、使っているエディターがzen-codingに対応していたらぜひ使ってみてください！

参考リンク

• Zen-Codingでできるあんなことこんなこと | gaspanik weblog
• HTMLコーディングが3倍速くなる？「Zen-Coding」 | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]
• Zen-Codingのショートカットをまとめてみました - EC studio デザインブログ
• Zen-Codingで楽々コーディング! + コツ1つ
• ブラウザで動くZenCodingEditorを作りました！ | kzms2 – html,css,javascript