ZenCodingを改造して自分用スニペットを入力する
スポンサーリンク
Zen Codingをカスタマイズし、自分用のスニペットも入力できるようにする方法のメモ。以下はEmEditor用Zen Codingマクロをもとに書いているが、内容はJavaScriptなので、他のエディタ用ZenCodingでも使える内容になっていると思う。少なくともサクラエディタ用ZenCodingにはそのまま当てはまった。
概略
Zen CodingのExpanded Abbreviationは、例えばhtml:5と書いてからZen Codingで展開すると、html5形式のhtml一式が入力されるというもの。
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
初期状態では上のコードに展開される。この機能を改造し、自分用のものに変更したい。上の例では、head要素内にstyleやjavascriptの設定が無いが、これらも同時に展開されるようにしたい。
方法
ZenCodingファイルを開く（EmEditorの場合zen_emeditor.jsee）。html:5を検索すると以下の部分が出てくる。
'html:5': '<!DOCTYPE HTML>\n' +
'<html lang="${locale}">\n' +
'<head>\n' +
' <meta charset="${charset}">\n' +
' <title></title>\n' +
'</head>\n' +
'<body>\n\t${child}|\n</body>\n' +
'</html>'
この下にhtml:myという項目を追加し、自分用スニペットが入力されるように改造する。まず、'</html>'の後ろに“,”を付け足す。それからその下に、以下のコードを挿入する。
'html:my': '<!DOCTYPE HTML>\n' + '<html dir='ltr' lang='ja'>\n' + '<head>\n' + ' <meta charset='UTF-8'/>\n' + ' <title></title>\n' + ' <meta http-equiv='Content-Style-Type' content='text/css'/>\n' + ' <meta http-equiv='Content-Script-Type' content='text/javascript'/>\n' + ' <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script>\n' + '</head>\n' + '<body>\n' + '</body>\n' + '</html>'
ようするに展開したいコードを書き、１行ごとにシングルクオートで囲み、必要なら改行コード\nを入れ行末に+をつければいい。これでhtml:myから設定したhtmlが展開されるようになる。
この方法は新しい項目を付け足すやり方だが、既存のものを変更してもいい。例えばhtml:5の項目を以下のように改造しておけば、headerタグやsectionタグの入ったhtmlが展開されるようになる。
'html:5': '<!DOCTYPE HTML>\n' + '<html lang="ja">\n' + '<head>\n' + ' <meta charset="utf-8">\n' + ' <title></title>\n' + '</head>\n' + '<body>\n' + ' <header>\n' + ' </header>\n' + ' <section>\n' + ' </section>\n' + ' <footer>\n' + ' </footer>\n' + '</body>\n' + '</html>'
応用
ZenCodingの内部処理で$は文字列を置換する際のフックになっている。そのため、展開させたいスニペット中に$があると困ったことになる。どういうことかというと、例えばjQueryのコードをZenCodingで展開させたい時に、$がそのままでは処理できない。jQuery(function($){});というjQueryの基本的なコードでも、$はそのままでは表示されない。
ということで、対策として${dollar}で$と表示されるようにする。
ZenCodingファイルからvar zen_settingsを検索する。その少し下に、
'variables': {
'lang': 'en',
'locale': 'en-US',
'charset': 'UTF-8',
という部分があるので、この下に'dollar' : '$' ,と付け足す。
'variables': {
'lang': 'en',
'locale': 'en-US',
'charset': 'UTF-8',
'dollar' : '$' ,
これで${dollar}と入力すると、$と表示されるようになる。
先程のhtml:myを
'html:my' : '<!DOCTYPE HTML>\n' +
'<html lang="ja">\n' +
'<head>\n' +
' <meta charset="utf-8">\n' +
' <title></title>\n' +
' <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>\n' +
' <script type="text/javascript">\n' +
' jQuery(function(${dollar}){\n' +
' \n' +
' });\n' +
' </script>' +
'</head>\n' +
'<body>\n\t${child}|\n</body>\n' +
'</html>'
とすると、以下のように${doller}の部分が$と変換される。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
});
</script></head>
<body>
</body>
</html>
スポンサーリンク
