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

コーディング速度が"3倍!10倍!上がる"と言われてる

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

ツイート
このエントリーをはてなブックマークに追加
次の記事
HTML5のarticleとsectionの違いを書いてみた
前の記事
めんどうくさがりの新米ブロガーが1日/10,000PVを達成した方法
HOMEに戻る