KOJIKA17

Zen-Codingの次期バージョン、Emmet について

Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。

Zen-Codingについて

Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、ほどから日本でも多くのサイトがZen-Codingを紹介しています。

そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。

Product rename (Zen Coding → Emmet)

Emmet(beta)

Emmetは、開発中です。
正式リリースはまだですが、機能は試すことができます。

Emmetは、2013年2月24日に正式リリースされました

基本的には、今までのZen-Codingと変わりません。
Zen-Codingを使っていた人は、そのまま拡張機能を使用することができます。
Emmetから使ってみようと思う人は、今までのZen-Codingのドキュメントでも、ある程度は学習が可能です。

Emmetの新しい機能

^ (HTMLの機能)

Zen-Codingで、やりたかったけどできなかった『上の階層に戻る』機能。
今までは、"()"を駆使する形になっていましたが、"^"で階層を1段上がることができるようになりました。

<!-- 展開前 -->
(.header>.nav)+.logo <!-- Zen-Coding v0.7 -->
.header>.nav^.logo <!-- Emmet -->

<!-- 展開後 -->
<div class="header">
	<div class="nav"></div>
</div>
<div class="logo"></div>

"^"をつなげることで、階層をさらに、さかのぼる事ができます。

.header>.wrap>.nav^^.logo

ダミーテキストの生成

“Lorem ipsum”のダミーテキストを自動で生成されてくれるようになりました。

loremlipsumと入力して、展開するとダミーテキストが生成されます。
最低8単語から、後ろに数字を付け加えることで、単語数を調整できます。

<!-- 展開前 -->
p>lorem
p>lorem8

ul>li*2>lorem10

<!-- 展開後 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam harum quasi voluptatum nisi repudiandae eius mollitia voluptatibus dolorum asperiores recusandae natus quis eligendi voluptas! Deleniti fugiat nulla ratione officiis quod?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt optio.</li>
  <li>Iusto similique aliquam animi illo aliquid asperiores reprehenderit minus accusantium!</li>
</ul>

高度なCSSサポート

今回のEmmetによって、CSSが痒いところまで届くようになりました。
以前のZen-Codingでは、任意の数値を入れることができませんでした。

Zen-Coding v0.7

/* 展開前 */
m:a
m:2
m:3

/* 展開後 */
margin: auto;
margin: 0 0;
margin: 0 0 0;

簡単な展開は可能でしたが、margin: 8px;などの数値を展開前に設定することができません。

Emmetでは、数値を入力して展開することが基本になります。

Emmet

/* 展開前 */
m:a
m:4
m8
m0-8
m0--8-8
z3
w100p
w100e

/* 展開後 */
margin: auto;
m::; /* 今までの書き方が一部エラーになる */
margin: 8px;
margin: 0 8px;
margin: 0 -8px 8px;
z-index: 3;
width: 100%;
width: 100em;

接頭辞

Zen-Coding v0.7には、Reflect Valueがありましたが、使い勝手悪く接頭辞は自分で追加しなければなりませんでした。 Emmetでは、先頭に"-(ダッシュ)"を付けることによって、接頭辞を簡単に付け加えることができます。

/* 展開前 */
bdrs8 /* - なし */

-bdrs8


/* 展開後 */
border-radius: 8px; /* - なし */

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;

未知のプロパティ

CSS3, CSS4では、新しいものができたり、名前が変わったりすることがよくあります。
対応していないプロパティは、不明なプロパティとなります。
Zen-Coding v0.7では、不明なプロパティは、CSSではなく、要素として変換されていました。

Zen-Coding v0.7

/* 展開前 */
image-set

/* 展開後 */
<image-set></image-set>

style要素の中やCSSファイルでも、HTMLのように展開されていましたが、これが修正されています。
-(ダッシュ)を組み合わせることによって、接頭辞もサポートされます。

Emmet

/* 展開前 */
image-set
-image-set

/* 展開後 */
image-set: ;
-webkit-image-set: ;
-moz-image-set: ;
-ms-image-set: ;
-o-image-set: ;
image-set: ;

追記: Fuzzy search

Emmetから、Fuzzy searchという機能が加わりました。
この機能はCSSを「短縮形っぽく」書いて展開すると、その形式に似たプロパティ、または値が展開されます。

.foo {
  fl
  fll
  flol
  flr
}

/* 展開 */
.foo {
  float: left;
  float: left;
  float: left;
  float: right;
}

ノリでかけば、それっぽく展開してくれるので、CSSをEmmetで使用する敷居が低くなりました。
「Dreamweaverの補完機能と何が違うの?」と思われる方も少なくないでしょう。
慣れもある程度必要ですが、実際にやってみるとDwの補完機能よりもスピーディーにCSSを入力できるようになります。

Emmetのカスタマイズ

機能が充実しただけではありません。
スニペットとキーの配置情報が、jsonファイルによって独立化。
カスタマイズが行いやすくなりました。

  • keymap.json
  • snippets.json

snippets.jsonを触ることによって、スニペットを拡張することができます。
カスタマイズの方法は、以前と変わりません。

Zen-Coding カスタマイズの方法

Emmetが使えるIDE/エディタ

2013年6月3日時点でEmmetが使えるアプリケーションは以下のようになっております。
なおダウンロードは公式サイトから行えます。

Official support

  • Dreamweaver
  • Sublime Text
  • Eclipse/Aptana
  • TextMate
  • Coda
  • Espresso
  • Chocolat
  • Komodo Edit
  • Notepad++
  • PSPad
  • textarea
  • CodeMirror
  • Brackets
  • NetBeans

Third-party support

  • SynWrite
  • WebStorm
  • PhpStorm
  • Vim

Emmetを入れる時は、特にDreamweaverの場合は、必ずバックアップをとって入れてみてください。
Zen-Codingよりも素晴らしい機能を体感できるしょう。