HTML+CSSコーディングが10倍速くなるZen Coding

はじめに

「Zen Coding」といっても、聞いたことがない方も多いかもしれません。

Zen Codingは、HTML/CSSコーディング支援ツールで、DreamweaverなどのWebオーサリング環境や、Windows/MacOS/Unixのテキストエディタ用のマクロ／プラグインとして配布されています。

欧米圏では、実に2年以上前から話題を呼んでいました。筆者自身もブームに乗って導入し、今ではHTML/CSSのコーディング作業はすべてこれを使って行っています。

日本ではあまり知られていませんでしたが、2010年はじめから、ネット上では知る人ぞ知る存在として、隠れたブームとなっています。筆者のひとり、こもりのブログのZen Codingについての記事は多くの方に読まれ、USTREAMで行ったライブコーディングも大好評でした。たくさんのWeb制作者の「こんな便利なものがあったなんて！」という驚きと、「ぜひ使ってみたい」という感動の声が聞けました。

Zen Codingでは、HTMLタグの短縮形のような「省略語」を入力して「展開」し、HTML/CSSのコードを生成することができます。複雑な長いコードや、同じタグのくり返しも、かんたんな指定でまとめて生成できるので、構造さえわかっていれば、2時間でまったく新しいサイトが1つ作れてしまうくらいです。

HTMLやCSSを手で入力していると時間もかかり、わかっていても文法間違いや入力ミスをしてしまいがちです。Zen Codingを使えば、このようなミスをなくし、作業効率を大幅にアップすることができるのです。

Web制作のプロだけでなく、企業のブログ担当者や、Webショップの更新担当者など、日常的にHTML/CSSを入力する人は、いますぐ使ってみることをおすすめします！

本書は、導入から基本入力方法、応用までを解説した、はじめてのZen Codingの解説書です。

ぜひお使いの環境で、Zen Codingを試してみてください。これまで時間のかかっていためんどうなHTML/CSS入力作業が、3倍、いや10倍速にスピードアップすることは間違いありません。

本書がみなさんのHTML/CSSコーディング作業効率化のお役に立てば幸いです。

2010年11月　　こもりまさあき・岡部和昌

作者のことば

コンセプト

「Zen Coding」という名前は、コーディングの新しい哲学を表しています。これでもう、1文字1文字HTML/CSSコードの入力に時間を費やす必要はありません。頭の中でコードを書いたら、あとはZen Codingの「省略形」を入力するだけです。

ヒストリー

Zen Codingの最初のドラフトは、2008年8月31日、私のブログで公開しました。TextMateに「text」→「<input type="text"/>」や「bg」→「background」のようなシンプルなショートカットを実装したもの（Zen HTML/Zen CSS）でした。

456bereastreet.comのロジャー・ジョンソンは、

「これはすごいツールだよ。とくにHTML用のほう。教えてくれたことに感謝しちゃうね！」

という感想を寄せてくれました（2008年11月26日）。

現在の「Zen Coding 2.0」のコンセプトは、2009年4月2日に発表しました※。それはまだアイディアの段階で、実装されていませんでした。

そこに、セルゲイ・チクヨノックが現れたのです。Zen Codingプラグインの新時代のスタートでした。

現在は、セルゲイがZen Codingプラグインの開発を担当し、私はドキュメント作成を担当しています。

2010年11月　Zen Coding開発者　ヴァディム・マケエフ
Вадим Макеев

私はWebフロントエンドの開発者で、毎日大量のHTML/CSS/JavaScript/XML/XSLを扱っています。この毎日の作業をラクにするツールが作れれば、と思っていましたが、どうしたらいいかわかりませんでした。

2009年4月、ヴァディム・マケエフがHTMLタグ／CSSセレクタ入力支援ツールのコンセプトを発表しました。これはいいと思い、そのときたった2日間で最初のプロトタイプを作ったのです。最初のZen Codingプラグインは、AptanaのIDE用でした。このときの反響は、とても大きいものでした。

次に、Zen Codingで2番目に重要な、開始タグ／終了タグの対応機能を開発しました。この機能はHTML/CSSに限らず、Web開発者に限りない可能性を与えてくれます。省略形の展開がHTMLからJavaまでどんなファイルでも使え、ほかの言語の関数定義もできるのです。

それなりに使えるものになってきたので、「Smashing Magazine」に発表しました。このとき、ふと既存のテキストを省略語でラップする方法を思いついたのです。こうしてZen Codingに選択範囲を省略語でラップする機能が付きました。

バグフィックスして、省略語と構文を追加し、タグの削除や分割／統合などの機能を追加して、Zen Codingを改良しました。

ところで、以前から、要素のID属性の終了タグの後ろに「<!-- #id -->」を追加するなど、HAML（HTML/XHTML生成用のマークアップ言語）のような機能がほしいという要望がありました。

第3の機能は、フィルタでした。それまでは省略語を直接HTML出力していましたが、省略語をツリーに展開し（ちょうどDOMのように）、最終出力を定義するフィルタをツリーに適用するようにしました。フィルタを使えば、かんたんに新しい構文を追加でき、Zen Codingのコアをいじらなくても、独自の出力レイアウトを定義することができるのです。

将来的にはさらに機能を追加し、CSSやHTMLの編集モードもふやすつもりです。今は、オンラインで使えるZen Codingエディタの開発に注力しています。これは、CMSやブログ、ウィジェットの開発に、正に驚異的に役立つツールになると思います。

2010年11月　Zen Coding開発者　セルゲイ・チクヨノック
Sergey Chikuyonok