HTMLでもCSSでもCでもJavaScriptでも、プログラーマーたちは自分たちの書くコードを一秒でも早く書くため手に様々ツールを開発してきたが、今回、ロシアからこれからのコーディングを全く新しい方法で行う、ZenCodingが注目を浴びている。

ゼンコーディングとは、特定の文字配列をつかうことで特定のコードを簡単に呼びだすことができます。
これだけ聞いてもパッとこないと思いますので、早速見てましょうか。

1. ZEN Codingのインストール

まずZEN Codingは、Google Codecよりダウンロードできますが、使っているエディタによっては、他のサイトよりダウンロードする必要があります。現在Zen Codingがサポートされているエディターとダウウロード先は以下をご覧ください

私は、Codaを使ってますので、Tea for Coda をダウンロードして、ダブルクリックすると、CodaのPlugin のメニューにZen Coding が表示されます。

Screen shot 2010 11 07 at 3.44.39 PM 577x360 Zen Coding(ゼンコーディング)を使ってコードを3倍早く書く

ショートカットが使いにかったので、System Preference -> KeyBoard -> Application Shortcuts を選んでから、Coda用のショートカットを少し変更しました。これで、Command + ; で展開されます。

Screen shot 2010 11 07 at 3.47.36 PM 577x522 Zen Coding(ゼンコーディング)を使ってコードを3倍早く書く

オフィシャルにサポートしているエディタ

以下のエディタ用に作られたプラグインは、Zen Codingのチームメンバーによって作られていますので、最新の機能が使えることを保証しています。

Aptana/Eclipse (Mac/Windows)
Zen Coding を Aptana/Eclipseへのインストール方法

TextMate (Mac).
Text Mate用のZen Codingをダウンロード

Coda (Mac) —
私はこのCodaを使っています。今回インストールする方法は、 TEA for Coda を使います。
Coda 用のZen Coding をダウンロード

Espresso (Mac) —
Espresso 用のZen Coding をダウンロード

Komodo Edit/IDE (Mac / Windows) —
Komodo 用のZen Coding をダウンロード

Notepad++ (Windows).
Notepad++ 用のZen Coding をダウンロード

PSPad (Windows). Scripts > Zen Coding menu item
PSPad 用のZen Coding をダウンロード

アンオフィシャル プラグイン
Zen Codingチーム以外の方々が作られています。すべて機能がサポートされていると言う保証はございません。

Dreamweaver (Windows, Mac)
Dreamweaver 用のZen Coding をダウンロード

Sublime Text (Windows)
Sublime 用のZen Coding をダウンロード

UltraEdit (Windows)
UltraEdit 用のZen Coding をダウンロード

TopStyle (Windows)
TopStyle 用のZen Coding をダウンロード

GEdit (Windows, Mac) —
GEdit 用のZen Coding をダウンロード

BBEdit/TextWrangler (Mac) —
BBEdit/TextWrangler 用のZen Coding をダウンロード

Visual Studio (Windows) —
Visual Studio 用のZen Coding をダウンロード

EmEditor (Windows) —
EmEditor 用のZen Coding をダウンロード

Sakura Editor (Windows) —
Sakura Editor 用のZen Coding をダウンロード

NetBeans (Windows, Mac) —
NetBeans 用のZen Coding をダウンロード

Zen Coding コピー版
以下のプラグンインは第三者がZen Codingの使い更なる、自分たちの必要な機能の追加や編集などを行っている物です。多少使い方が事なる場合があります。
IntelliJ IDEA/WebStorm/PHPStorm (Windows、Mac) —
IntelliJ IDEA/WebStorm/PHPStorm 用のZen Coding をダウンロード

Emacs (Windows, Mac) —
Emacs 用のZen Coding をダウンロード

Vim (Windows, Mac) —
Vim 用のZen Coding をダウンロード / Sparkup をダウンロード

ReSharper plugin for Visual Studio
Visual Studio 用のZen Coding をダウンロード

2. ZEN HTML Selector (ゼン HTML セレクター)

例えば以下の様に打ち込んで

div#header

展開すると

<div id=”header”></div>

になります。
どうですか?ワクワクくわくしてきました。もちろん以下の様なのも有効です

div#header.first.full

展開すると

<div id=”header” class=”firt full”></div>

となります。どうですか?今ので、3倍ぐらい早くなりましでしょ?

3. Zen Selector – チャイルド

それでは、本格的にZen Selectorを使ってレイアウトでも作りましょか?
とりあえず、Header div を作ってその中にul一個にliを5個ぐらいメニュー用に作って,liの中にリンクのa herfでも作って見ましょうか?

div#header>ul>li.menu-$*5>a

展開しますと

<div id="header">
    <ul>
        <li id="menu-1"><a href=""></a></li>
        <li id="menu-2"><a href=""></a></li>
        <li id="menu-3"><a href=""></a></li>
        <li id="menu-4"><a href=""></a></li>
        <li id="menu-5"><a href=""></a></li>
    </ul>
</div>

4. Zen Selctor – DOCTYPE& CSS Link

ゼンコーディングにはDOCTYPEやヘッダー内のリンクなども、簡単に作れるようになっています。

html:4t

を展開しますと。

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

</body>
</html>

となります。他にも、strickタイプも HTML5などもすべて用意されています。
CSSやJavaScriptのリンクの挿入は、

link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
script:src
<script type="text/javascript" src=""></script>

5. Zen Coding – コメント

もちろんHTMLのコメントなども一度に入れることができます。

div#header|c

展開しますと

<!-- #header -->
<div id="header"></div>
<!-- /#header -->

6.一覧表をダウンロード

これで、ゼン コーディングのパワーを分かっていただけたと思います。
使用できる、早速文字配列の一覧表をダウンロードして、プリントしてパソコンの横にでも貼っといて使ってみてください。
zen coding 一覧表のダウンロード

7.実際の使用例

ウェブサイトを HTML&CSSに基礎から作成-最終回のチュートリアルで実際にどんな様にZen Codingが使われているか見る事ができます。