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

/ 2013-06-03

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ファイルによって独立化。
カスタマイズが行いやすくなりました。

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

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

Emmetが使えるIDE/エディタ

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

Official support

Third-party support

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

ツイート
このエントリーをはてなブックマークに追加
次の記事
CSSの記述を高速化する、Emmet (Zen-Coding)
前の記事
デフォルトスタイルシートから考える、リセットCSSの留意点
HOMEに戻る