CodaのTEA for Codaの出力をカスタマイズしてみた

,

Mac専用のアプリケーションである「Coda」というエディタで、TEA for Codaというプラグインを入れている人がいるかと思います。TEA for Codaは、Zen codingというマークアップを簡単なショートカットで補足してくれるアプリで、CodaZen codingTEA for Codaという名前で配布されているプラグインです。

今回は、そのTEA for Codaのショートカットを変えて、もっと便利にしてみましょうという記事です。

Codaのダウンロード先:Mac App Store

どのように便利になるか?

例えば、”html:5″と入力して、”ctr + ,”をキーボードを叩いたなら、通常は下のように展開されるはずです。


<!DOCTYPE html>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

このあとに加えて、通常は


<!DOCTYPE html>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
	
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

のようにお決まりのマークアップをしていくと思います。

しかし、どうせなら最初から二番目に書いたhtmlを展開してくれれば、何回も書き加えていかなくても済むではありませんか。

やり方

/Users/ユーザー名/Library/Application Support/Coda/Plug-ins/TEA for Coda.codaplugin” を右クリックして “パッケージ内容を表示” を選択

Support/Library/zencoding/zen_settings.py” で “zen_settings.py” のPythonファイルをエディタで開く、Codaで開いちゃいましょう!

500行目あたりから先に、”html:~~” の展開した結果が書かれてあります。
ここまできたらわかるかと思いますが、これを書き換えてあげればいいのです。

自分の場合、


'html:5': '<!DOCTYPE html>\n' +
		'<html lang="${locale}">\n' +
		'<head>\n' +
		'	<meta charset="${charset}">\n' +
		'	<title></title>\n' +
		'	<meta name="description" content="" />\n' +
		'	<meta name="keywords" content="" />\n' +
		'	<link rel="stylesheet" type="text/css" href="style.css" media="all" />\n' +
		'</head>\n' +
		'<body>\n\t${child}|\n' +
		'<script type="text/javascript" src="js/jquery.js"></script>\n' +
		'<script type="text/javascript" src="js/script.js"></script>\n' +
		'</body>\n' +
		'</html>'

のようにしています。
簡単なプログラムなので、読めばどういうふうにカスタマイズすればいいかわかるはずです。

他にも、 “html:5″ で展開させるのではなくて、 “h5″ で展開させてみるとか、自分のお決まりのマークアップがあるなら、それで書き換えてみるとかができるはず。

更におすすめなのが、自分で新たにショートカットを作れること。
例えば、約696行目(カスタマイズしたなら人によって違います)より後ろに


			'select+': 'select>option',
			'optgroup+': 'optgroup>option',
			'optg+': 'optgroup>option',

#			オリジナル
			'wpr': '<div id="wrapper"></div>'
			'pg': '<div id="page"></div>'
			'cnt': '<div id="content"></div>'

などにして書き加えれば、いつものwrapperなどがショートカットで生み出せます。最強ですね

もしおすすめのカスタマイズなどあったら教えて下さいな。

参考にさせてもらったサイト