テクノロジー

2010.03.16

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

はじめに

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

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

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

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

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

※本サンプルを実際にお試しいただく方への注意事項
IE6-8、Firefox3.5、Opera9.64、chrome 4,Mac Safari3,Mac Firefox3での動作については確認済みです。

zen-codingの概要

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

変換前

div#wrapper>(div#header>h1+ul#nav>li*5>a)+(div#contents>div.box*4)+div#footer

変換後

<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公式ページを確認してみてください。

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

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

Dreamweaverへの導入例	zen codingは超便利！Dreamweaverで使ってみました。 \| VIVID COLORS + BLOG コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 - Web:a piece of cake!;
EmEditorへの導入例	EmEditorで Zen-Coding \| trapon : experience
TextMateへの導入例	TextMate+Zen-Codingで超速コーディング？ \| gaspanik weblog
Aptanaへの導入例	知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
秀丸への導入例	秀丸マクロでZen-Coding
Vimへの導入例	Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力 : Serendip - Webデザイン・プログラミング
textarea（wordpress）への導入例	WordPress等の投稿もZen-Codingで楽々編集できるJSライブラリ Zen Coding for ><textarea> :: 5509(+1)

HTMLの記法について

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

基本的な記法

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

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

タグだけ変換

変換前

div

変換後

<div></div>

デモ

文末でtabを押してください

div

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

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

変換前

div#wrapper

変換後

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

デモ

文末でtabを押してください

div#wrapper

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

変換前

div.box

変換後

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

デモ

文末でtabを押してください

div.box

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

変換前

div[title=タイトル]

変換後

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

デモ

文末でtabを押してください

div[title=タイトル]

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

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

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

変換前

div#wrapper.box

変換後

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

デモ

文末でtabを押してください

div#wrapper.box

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

変換前

div#wrapper.box.current

変換後

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

デモ

文末でtabを押してください

div#wrapper.box.current

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

変換前

div#wrapper.box.current[title=タイトル rel]

変換後

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

デモ

文末でtabを押してください

div#wrapper.box.current[title=タイトル rel]

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

構造化を含めた記法

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

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

変換前

div#main+div#sub

変換後

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

デモ

文末でtabを押してください

div#main+div#sub

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

変換前

div#main>div#sub

変換後

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

デモ

文末でtabを押してください

div#main>div#sub

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

変換前

div.box*5

変換後

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

デモ

文末でtabを押してください

div.box*5

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

変換前

div.box$*5

変換後

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

デモ

文末でtabを押してください

div.box$*5

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

変換前

div.box$$$*5

変換後

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

デモ

文末でtabを押してください

div.box$$$*5

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

変換前

table+

変換後

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

デモ

文末でtabを押してください

table+

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

変換前

(div#header>h1+div#nav>ul+)+(div#contents>div#main+div#sub)+div#footer

変換後

<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>

デモ

文末でtabを押してください

(div#header>h1+div#nav>ul+)+(div#contents>div#main+div#sub)+div#footer

そのほかの記法

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

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

変換前

div#header>ul#nav>li.menu$*3>a|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 -->

デモ

文末でtabを押してください

div#header>ul#nav>li.menu$*3>a|c

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

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

変換前

div#header>ul#nav>li.menu$*3>a|e

変換後

&lt;div id="header"&gt;
	&lt;ul id="nav"&gt;
		&lt;li class="menu1"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li class="menu2"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li class="menu3"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;

デモ

文末でtabを押してください

ul#nav>li.menu$*3>a|e

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

変換前

html:4t

変換後

<!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>

デモ

文末でtabを押してください

html:4t

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

変換前

cc:ie6

変換後

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

デモ

文末でtabを押してください

cc:ie6

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

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

Ctrl+E Tab	zen-coding記法をタグに変換
Ctrl+D	任意のタグを内包する親要素を選択
Shift+Ctrl+D	任意のタグの内包している子要素を選択
Shift+Ctrl+A	任意のタグを指定したタグで囲む
Ctrl+Alt+→	次の編集ポイントへ移動
Ctrl+Alt+→	前の編集ポイントへ移動
Ctrl+L	任意のタグがある行を選択
Ctrl+/	任意のタグのコメントアウトを切替
Ctrl+J	任意のタグを結合
Ctrl+K	任意のタグを除去

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

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

変換前

1行目の内容。
2行目の内容。
3行目の内容。

変換後

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

デモ

1行目の内容。 2行目の内容。 3行目の内容。

cssの記法について

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

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

基本的な記法

プロパティーと値を追加

変換前

d:b

変換後

display:block;

デモ

d:bの文末でtabを押してください

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

変換前

d:b|fc

変換後

display: block;

デモ

d:b|fcの文末でtabを押してください

@importを追加 (Special Rules)

変換前

変換後

@import url();

デモ

@iの文末でtabを押してください

!importantを追加 (Special Rules)

変換前

変換後

!important

デモ

!の後でtabを押してください

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

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

変換前

html:4t>wrapper>(#header>#masthead+#emg+#searchbox+#hdBar)+(#contents>#toptxt+#navi+#division>#main+#sub)+#footer>address

変換前

<!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>

デモ

文末でtabを押してください

html:4t>#wrapper>(#header>#masthead+#emg+#searchbox+#hdBar)+(#contents>#toptxt+#navi+#division>#main+#sub)+#footer>address

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

まとめ

利点

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

欠点

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

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

参考リンク

Yahoo! JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。

前の記事へ

一覧へ戻る

次の記事へ

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

はじめに

zen-codingの概要

変換前

変換後

導入について

対応エディタ

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

HTMLの記法について

基本的な記法

タグだけ変換

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

構造化を含めた記法

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

デモ

そのほかの記法

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

変換前

変換後

デモ

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

変換前

変換後

デモ

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

変換前

変換後

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

iOS/Android上で変化に強いプロダクトを提供するための工夫〜 Yahoo!広告での事例