はじめに
こんにちは。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のバージョンが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>」という形に展開されます。
このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。
基本的な記法
ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。
まずものすごく基本的な記法である、単独タグの記法について説明を行います。
cssのセレクタをイメージしながら見ていくと納得しやすいと思います。
タグだけ変換
変換前
div
変換後
<div></div>デモ
文末でtabを押してください
変換後、div要素の間にカーソルが移動するので、すぐにテキストの入力が可能となります。
ですが、これだけではzen-codingのすごさは体感できないかと思います。
気にせず次はidやclassをつけてみます。
idを付与するタグ変換 （E#name）
変換前
div#wrapper
変換後
<div id="wrapper"></div>デモ
文末でtabを押してください
classを付与するタグ変換 (E.name)
変換前
div.box
変換後
<div class="box"></div>デモ
文末でtabを押してください
属性を付与するタグ変換 ([attr])
変換前
div[title=タイトル]
変換後
<div title="タイトル"></div>デモ
文末でtabを押してください
ここまでが1つのタグに対する最も基本的な部分でした。
まだすごさは伝わらないですね。では上記を組み合わせていってみましょう。
基本的な記法の組み合わせ
idとclassを付与するタグ変換
変換前
div#wrapper.box
変換後
<div id="wrapper" class="box"></div>デモ
文末でtabを押してください
idとclass2つを付与するタグ変換
変換前
div#wrapper.box.current
変換後
<div id="wrapper" class="box current"></div>デモ
文末でtabを押してください
基本すべてを付与するタグ変換
変換前
div#wrapper.box.current[title=タイトル rel]
変換後
<div id="wrapper" class="box current" title="タイトル" rel=""></div>デモ
文末でtabを押してください
idやclassを付与していきたい場合、続けて書いていけば追加されます。
また属性の追加は[属性1=値1 属性2=値2]の様に半角スペースを続けて追加することが出来ます。値を記入しなかった場合は値なしの状態で追加されます。
構造化を含めた記法
次は構造化を現す記法を説明したいと思います。
ここからだんだんzen-codingの素晴らしさが分ってくるかと思います。
兄弟要素にタグを追加 (E+E)
変換前
div#main+div#sub
変換後
<div id="main"></div>
<div id="sub"></div>デモ
文末でtabを押してください
子要素にタグを追加 (E>E)
変換前
div#main>div#sub
変換後
<div id="main">
<div id="sub"></div>
</div>デモ
文末でtabを押してください
複数個まとめてタグを追加 (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を押してください
連番を付与しながら複数個まとめてタグを追加 (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を押してください
けたを指定した連番を付与しながら複数個まとめてタグを追加 (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を押してください
定型のタグをまとめて追加 (E+)
変換前
table+
変換後
<table>
<tr>
<td></td>
</tr>
</table>デモ
文末でtabを押してください
複雑な構造をグルーピングしてタグを追加
変換前
(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を押してください
そのほかの記法
開始・終了コメントをタグの前後に追加 (|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を押してください
HTMLエンティティ化（ブラウザでタグを表示できる様に）して表示 (|e)
※記法の文末に「|e」を追加してください。
変換前
div#header>ul#nav>li.menu$*3>a|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>デモ
文末でtabを押してください
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を押してください
IE用出し分けコメントアウトを追加 (Conditional Commentst)
変換前
cc:ie6
変換後
<!--[if lte IE 6]>
<![endif]-->デモ
文末でtabを押してください
そのほかの便利な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>デモ
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)
変換前
@i
変換後
@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を押してください
※ちなみにdivは省略して書くことが出来ます。div#wrapperと#wrapperは同義です。
まとめ
利点
- cssセレクタに近い書き方で、可読性が高い
- ショートカットキーやcssの省略記法などを覚えるだけで使用が可能
- いろいろなエディターに対応しているので、対応しているエディターならば乗り換えても覚えた記法をそのまま使える
- タグの閉じ忘れや、不正な入れ子構造が発生しなくなる
欠点
- 使用しているエディターにzen-codingが対応していない場合は使えない
- 暗記が必要なので、ある程度使って記法を覚えなければ使えない
利点・欠点を並べると上記の様になるかと思います。
実際に触ってみて、ショートカットキーなどを覚えて行くことで徐々に作業効率が良くなること間違いないかと思いますので、使っているエディターがzen-codingに対応していたらぜひ使ってみてください！
参考リンク
こちらの記事のご感想を聞かせください。
- 学びがある
- わかりやすい
- 新しい視点
ご感想ありがとうございました
