HTMLでもCSSでもCでもJavaScriptでも、プログラーマーたちは自分たちの書くコードを一秒でも早く書くため手に様々ツールを開発してきたが、今回、ロシアからこれからのコーディングを全く新しい方法で行う、ZenCodingが注目を浴びている。
ゼンコーディングとは、特定の文字配列をつかうことで特定のコードを簡単に呼びだすことができます。
これだけ聞いてもパッとこないと思いますので、早速見てましょうか。
１. ZEN Codingのインストール
まずZEN Codingは、Google Codecよりダウンロードできますが、使っているエディタによっては、他のサイトよりダウンロードする必要があります。現在Zen Codingがサポートされているエディターとダウウロード先は以下をご覧ください。
私は、Codaを使ってますので、Tea for Coda をダウンロードして、ダブルクリックすると、CodaのPlugin のメニューにZen Coding が表示されます。
ショートカットが使いにかったので、System Preference -> KeyBoard -> Application Shortcuts を選んでから、Coda用のショートカットを少し変更しました。これで、Command + ; で展開されます。
オフィシャルにサポートしているエディタ
以下のエディタ用に作られたプラグインは、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 をダウンロード
２. ZEN HTML Selector （ゼン HTML セレクター）
例えば以下の様に打ち込んで
div#header
展開すると
<div id=”header”></div>
になります。
どうですか？ワクワクくわくしてきました。もちろん以下の様なのも有効です
div#header.first.full
展開すると
<div id=”header” class=”firt full”></div>
となります。どうですか？今ので、３倍ぐらい早くなりましでしょ？
３. Zen Selector – チャイルド
それでは、本格的にZen Selectorを使ってレイアウトでも作りましょか？
とりあえず、Header div を作ってその中にul一個にliを５個ぐらいメニュー用に作って,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>
４. 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>
５. Zen Coding – コメント
もちろんHTMLのコメントなども一度に入れることができます。
div#header|c
展開しますと
<!-- #header --> <div id="header"></div> <!-- /#header -->
６.一覧表をダウンロード
これで、ゼン コーディングのパワーを分かっていただけたと思います。
使用できる、早速文字配列の一覧表をダウンロードして、プリントしてパソコンの横にでも貼っといて使ってみてください。
zen coding 一覧表のダウンロード
7.実際の使用例
ウェブサイトを HTML&CSSに基礎から作成-最終回のチュートリアルで実際にどんな様にZen Codingが使われているか見る事ができます。
