KOJIKA17

コーディングスピードはまだ上がる!!
Zen-Coding カスタマイズ

コーディング速度が"3倍!10倍!上がる"と言われてるZen-Coding
もうすでに使っていらっしゃる方はDreamweverやAptana、Coda等に入れてZen-Codingライフを楽しんでいらっしゃる方も多いかと思います。
逆に今までのインデントが違ったり、imgだとsrcとaltの位置が違ったり、コーディングに微妙な差が出てきて、使わなくなった方もいると思います。

元々私もインデントや微妙に自分と違うコードを出されることが嫌で、Zen-Codingをやめていました。
しかしカスタマイズすることにより凄い使いやすく、手放せなくなったので、Zen-Codingのカスタマイズ方法をご紹介致します。

追記:

Zen-Codingの最新版は、「Emmet」に名前が変更されて2013年2月24日に正式リリースされました

カスタマイズするZen-Codingの設定ファイルの場所

カスタマイズするjsの場所はソフトにより違います。
例としてZen-Codingの設定ファイルの場所は以下のような場所にあります。

Dreamweaver
Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js
Aptana
[任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js")
Notepad++
[Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js

HTMLの言語を修正する(ついでにインデントも)

例えばhtml:xsで展開するとデフォルトでは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	
</body>
</html>

xml:lang="en"になっているので、ここを一々jaに変更するのが面倒です。
そこで使用ソフトのZen-Codingの設定ファイルを開きます。

ファイルを開くと上部に

'variables': {
	'lang': 'en',
	'locale': 'en-US',
	'charset': 'UTF-8',
	'profile': 'xhtml',
		
	/** Inner element indentation */
	'indentation': '\t'     // TODO take from Aptana settings
}

とあるので、これらを

'variables': {
	'lang': 'ja',
	'locale': 'ja-JP',
	'charset': 'UTF-8',
	'profile': 'xhtml',
	
	/** Inner element indentation */
	'indentation': ''     // TODO take from Aptana settings
}

と変更して下さい。

さらにindentationという項目があります。これはZen-Codingした際のインデントを決める部分です。
インデントを入れないようにしたり、スペースを2つにしたり、必要な場合は変更して下さい。

Zen-Coding設定ファイルの基本構成

設定場所が分かれば、JavaScriptが分からない方でも修正が簡単!
設定ファイルの基本構成は以下のようになっています。

'variables': {
		//言語やインデントの設定
},
'css': {
	'filters': 'html,css',
	'snippets': {
		//CSSの設定
	}
},
'html': {
	'filters': 'html',
	'snippets': {
		//IEの分岐やDoctypeの設定		
	},
	'abbreviations': {
		//HTMLの設定
	},
	'element_types': {
		//空要素、ブロック・インライン要素の設定
	}
},
'xsl': {
	'extends': 'html',
	'filters': 'html, xsl',
	'abbreviations': {
		//xslの設定
	}
},
'haml': {
	'filters': 'haml',
	'extends': 'html'
}

HTMLに何か要素を追加したい場合は、'html'の中の'abbreviations'に要素を追加します。
CSSに何か要素を追加したい場合は、'CSS'の中の'snippets'に要素を追加します。

Zen-Codingの修正(2012-05-25追記)

デフォルトのZen-codingだと、CSSが

"c": "color:#000;",
"bgc": "background-color:#fff;",

だったりします。
しかし、colorbackground-colorを呼び出したい時っていうのは、当然色を変更したい時です。
なのに、#000など入っていると、わざわざ消して入力し直さなければなりません。面倒臭いです。

カラー指定の部分を消して、|(バーティカルバー)を代わりに入れてあげましょう。

"c": "color:#|;",
"bgc": "background-color:#|;",

バーティカルバーを入れると、Zen-codingで変換後、カーソルが自動的にそこにフォーカスされるので、より便利になります。

要素の追加方法

例えばHTML5のfigreタグの短縮"fig"があるのに、なぜかfigcaptionがない・・・
そこでfigcaptionを入れてみます。

HTML要素を追加する時は'html'の中の'abbreviations'であればどこでも良いのですが、分かりやすいように"fig"の下に改行を入れます。

'acr': '<acronym></acronym>',
'fig': '<figure></figure>',
// ここに改行をいれた。
'ifr': '<iframe></iframe>',
'emb': '<embed></embed>',
'obj': '<object></object>',
'src': '<source></source>',
'cap': '<caption></caption>',

上記のソースを見て頂けたら分かりますが、非常にシンプルです。
ここに同じようにfigcaptionのタグを追加します。

'acr': '<acronym></acronym>',
'fig': '<figure></figure>',
'figc': '<figcaption></figcaption>', // ここに追加した。
'ifr': '<iframe></iframe>',
'emb': '<embed></embed>',
'obj': '<object></object>',
'src': '<source></source>',
'cap': '<caption></caption>',

figcのショートハンドができました。
これでfigcと打てばfigcaptionタグが出てくるのですが、figureとfigcaptionは一緒に使用することが多いので、ul+やol+のようにfig+で展開できるようにします。 'html'の中の'abbreviations'の末尾辺りに

'ol+': 'ol>li',
'ul+': 'ul>li',
'dl+': 'dl>dt+dd',
'map+': 'map>area',
'table+': 'table>tr>td',

と固まっている部分がありますので、管理がしやすいように、この場所に追記します。

'ol+': 'ol>li',
'ul+': 'ul>li',
'dl+': 'dl>dt+dd',
'map+': 'map>area',
'table+': 'table>tr>td',
'fig+': 'fig>figc', // ここに追加した。

これでfigureのショートハンドが行えるようになりました。
さらにhdr+でheader>hgroupが出たり、table:th+でtable>tr>th+tdが出るようにしても良いかもしれません。

Doctype等も修正してみる

デフォルトのテンプレートだと必要な要素が少なすぎます。
例えば、Meta Descriptionやlink rel="stylesheet"がないので、あとから一々、meta:desclink:css等打つのも面倒です。

そこで'html'の'snippets'の中にDoctype等が格納されているので、そこを修正します。

Zen-CodingのデフォルトのHTML5

'html:5': '<!DOCTYPE HTML>\n' +
			'<html lang="ja-JP">\n' +
			'<head>\n' +
			'<meta charset="UTF-8">\n' +
			'	<title></title>\n' +
			'</head>\n' +
			'<body>\n\t${child}|\n</body>\n' +
			'</html>'

私的仕様のHTML5

'html:5': '<!DOCTYPE HTML>\n' +
			'<html lang="ja-JP">\n' +
			'<head>\n' +
			'<meta charset="UTF-8">\n' +
			'<meta name="description" content="">\n' +
			'<title></title>\n' +
			'<link rel="index" href="index.html">\n' +
			'<link rel="stylesheet" href="">\n' +
			'<script src=""></script>\n' +
			'<!--[if lte IE 9]>\n' +
			'<script src="js/html5.js" type="text/JavaScript"></script>\n' +
			'<![endif]-->\n' +
			'<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>\n' +
			'<script>new gweb.analytics.AutoTrack({profile: "UA-xxxxxxxx-x"});</script>\n' +
			'</head>\n' +
			'<body>\n\t${child}|\n</body>\n' +
			'</html>'

生成される私的仕様のHTML5

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<title></title>
<link rel="index" href="index.html">
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="js/html5.js" type="text/JavaScript"></script>
<![endif]-->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<script>new gweb.analytics.AutoTrack({profile: "UA-xxxxxxxx-x"});</script>
</head>
<body>

</body>
</html>'

シングルクォートの中で改行させたい場所に\nを記入します。
またシングルクォート同士を+で囲めば、スニペットを繋げることができます。

さらに私の場合は'css'の'snippets'にこれと同じようにして、re:cssと入れればCSSリセットが出てくるようにしています。

Zen-Codingを使っている方も、やめてしまった方も、さらに使いやすく、楽しくコーディングができるようになります。
カスタマイズはほんまにおすすめです!