Zen Coding(ゼンコーディング)を使ってコードを3倍早く書く

HTMLでもCSSでもCでもJavaScriptでも、プログラーマーたちは自分たちの書くコードを一秒でも早く書くため手に様々ツールを開発してきたが、今回、ロシアからこれからのコーディングを全く新しい方法で行う、ZenCodingが注目を浴びている。
ゼンコーディングとは、特定の文字配列をつかうことで特定のコードを簡単に呼びだすことができます。
これだけ聞いてもパッとこないと思いますので、早速見てましょうか。

1. 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 をダウンロード

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が使われているか見る事ができます。

Facebook
Google+
Twitter
LinkedIn
Pinterest

ご相談ください

弊社では、案件のサイズに関係なくコストパフォーマンスの高いウェブ制作サービスを提供しております。

気軽にご相談ください。

Email: info@unilance.co.jp
Tel: 03 5830 7277

Wordpress、Laravel、React Natvieを得意としたウェブシステム開発会を行っております。社多言語対応も可!
気軽にお問合せください。

About

  • Stories
  • Community
  • Blog
  • Careers
  • Brand Assets

Downloads

  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...

© All rights reserved

Made with ❤ in Sugito, Saitama, Japan