Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法

EC studio EC studio デザインブログ

EC studio
EC studio デザインブログ
EC studio デザインブログの記事一覧

2010年03月03日投稿者：谷拓樹

Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法

Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。

Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。
JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。

zen_setting.jsに秘密がある

Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。
実はその中に、省略コードやスニペットがすべて書き込まれています。
※アプリケーションによって、違う名前で存在する場合があります。
Textmateの場合は zen_settings.py になります。

このファイルの中に自分独自の記述を書き込んだり、既存のものを修正すればカスタマイズができます。

コードの種類

書込・修正ができる内容には2種類あります。

snippets・・・
スニペット。長い・複数行記述の場合はこちら。
abbreviations・・・
省略コード。短い・一行記述の場合はこちら。また特殊な書き方をすることで、省略コードの省略コード、みたいな書き方ができます。

上記は結構荒い説明ではありますが、そういった感覚で大丈夫です。
今回は前者のスニペットとして追加する方法を解説します。

よく使うコードをスニペット登録する

あまりHTMLでスニペット化をする例は少ないので、CSSでのスニペットを追加します。

zen_setting.js 21行目から

テキスト表示

JavaScript:

'css': {// 21行目
'snippets': {
"@i": "@import url(|);",
// ~省略~~~~~~~~~~~~~~~~~~~~~~~~~~
"pgba:l": "page-break-after:left;",
"pgba:r": "page-break-after:right;",
"orp": "orphans:|;",
"wid": "widows:|;"// 492行目
}// 493行目

これがCSSのスニペットが記述されているところです。
スニペットとして定型文登録したい内容を追加しましょう。

例えば、使われる頻度が多いであろう「Clearfix」のコードを登録します。
下記はClearfixのCSSサンプルです。

テキスト表示

CSS:

.clearfix {
zoom: 1;/*for IE 5.5-7*/
}
.clearfix:after {/*for modern browser*/
content: “.”;
display: block;
height: 0px;
clear: both;
line-height: 0;
visibility: hidden;
}

※コードの参照元：http://kennsu.jp/2008/11/cssclearfix.html

このコードを登録したければ、下記コードをzen_setting.js の492行目と493行目に差し込みます。

テキスト表示

JavaScript:

"wid": "widows:|;",// ←の","を忘れないようにする
'clearfix': '.clearfix {\n' +
' zoom: 1;/*for IE 5.5-7*/\n' +
'}\n' +
'.clearfix:after {/*for modern browser*/\n' +
' content: “.”;\n' +
' display: block;\n' +
' height: 0px;\n' +
' clear: both;\n' +
' line-height: 0;\n' +
' visibility: hidden;\n' +
'} '// 末行に","は不要

このような手順です。あとは CSSファイル内で
clearfixと書いて、Ctrl+Eすれば、コードが展開されます。

あまりJavaScriptなどに触れない人向けに、上記例で補足コメントをつけていますが、各行末の,（半角コンマ）の付け忘れや、最後の行には付けない、という文法にも気を付けるようにしましょう。

Aptanaの人はちょっと待った！

Aptanaの場合、親切にも「my_zen_setting.js」という独自のコードを追加するためのjsファイルが用意されています。
前述までの例は、直接元ファイルのソースを修正することになるので、それよりは別で管理されたファイルに書き込む方が問題は少ないですね。
書き方については、zen_setting.js を修正するのと同じです。

サンプルとして、僕のmy_zen_setting.jsの内容を書いておきます。
ダウンロードもできるようにしておくので、Aptanaを使っている方はそれをいれても良し、Aptana以外の方もzen_setting.jsを修正する参考にしてください。

内容は下記です。

CSS:clearfix
CSS:opacity（透過度指定スタイル）
HTML:jQuery 1.4.2
HTML:jQuery 1.3.2
HTML:Swfobject
HTML:Chrome Frame
HTML:html5.js
HTML:Microformats hCard
HTML:Microformats hReview

my_zen_setting.js

テキスト表示

JavaScript:

var my_zen_settings = {
'css': {
'snippets': {
'clearfix': '.clearfix {\n' +
' zoom: 1;/*for IE 5.5-7*/\n' +
'}\n' +
'.clearfix:after {/*for modern browser*/\n' +
' content: ".";\n' +
' display: block;\n' +
' height: 0px;\n' +
' clear: both;\n' +
' line-height: 0;\n' +
' visibility: hidden;\n' +
'} ',
'opacity': 'filter: alpha(opacity=50);\n' +
'-moz-opacity:0.5;\n' +
'opacity:0.5;'
}
},
'html': {
'snippets': {
'lib:jq14': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>',
'lib:jq13': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>',
'lib:swf': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js"></script>',
'lib:cf': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.js"></script>',
'lib:swf': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js"></script>',
'lib:html5': '',
'mf:hc': '<div class="vcard">\n' +
' <a class="url" href="http://www.example.com/" title="family-namelast-name">\n' +
' <img style="float:left; margin-right:4px" src="photo" alt="family-namelast-name photo" class="photo" />\n' +
' <span class="fn n">\n' +
' <span class="family-name">family-name</span>\n' +
' <span class="given-name">last-name</span>\n' +
' </span>\n' +
' </a>\n' +
' <a class="email" href="mailto:email" title="send to family-namelast-name">email</a>\n' +
' <div class="adr">\n' +
' <span class="postal-code">123-4567</span>\n' +
' <span class="region">region</span>\n' +
' <span class="locality">locality</span>\n' +
' <span class="street-address">street-address</span>\n' +
' </div>\n' +
' <div class="tel">tel</div>\n' +
'</div>',
'mf:hr': '<div class="hreview">\n' +
' <span class="item">\n' +
' <span class="fn">Name</span>\n' +
' </span>\n' +
' <span class="rating">3.5</span>\n' +
' <span class="reviewer">Smith</span>\n' +
' <span class="dtreviewed">2009-01-06</span>\n' +
' <span class="summary">"Delicious."</span>\n' +
'</div>'
}
}
};