ZenCodingでHTML記述速度を上げる1 #JavaScript

自分はコーディングが遅いので、常々少しでも早くできないものかと考えています。
その一環でZenCodingというものを見つけたので、防備録的なものを。
ZenCodingを導入した際に参考にしたサイト様を一番下に置いときます。

WinではEclipse、MacではNetBeansをいれています。
展開キーは
Win ……Ctrl +E
Mac……comand +E

（僕がMacに入れたときには何か別のコマンドと重なっていた（ように思う）、別のショートカットキーをあてました。

とりあえずテンプレート的なもの作成

htmlFive.html

/* html:5と書いて、展開キーを押すと以下が展開される */
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

linkCss.html

/* link:cssと書いて、展開キーを押すと以下が展開される */
<link rel="stylesheet" href="style.css" media="all" />

参考にしているサイトとちょっと出力が違う。バージョンの違い？
（この記事は基本WinのEclipseで確認してる）
→Macで確認したら、href="${l:style}.css　の属性が増えてた。

script.html

/* scriptと書いて、展開キーを押すと以下が展開される */
<script type="text/javascript" src=""></script>

書いてて気づいたけど、なぜかWinだと出てくれない（<script></script>となる）。
Macの方では動いた。
細かい挙動の違いはちょっと分からないので、保留。。。

div.html

/* divと書いて、展開キーを押すと以下が展開される */
<div></div>

これだけだとインテリセンス’（タブキー）と変わらない。

divTest.html

/* div#testと書いて、展開キーを押すと以下が展開される */
<div id="test"></div>

#がid属性の指定

divSample.html

/* div.sampleと書いて、展開キーを押すと以下が展開される */
<div class="sample"></div>

.がclass属性の指定

div3.html

/* div*3と書いて、展開キーを押すと以下が展開される */
<div></div>
<div></div>
<div></div>

*3で3つ並べる

組み合わせ.html


/* div#test*3 */
<div id="test"></div>
<div id="test"></div>
<div id="test"></div>

/* div.sample*3 */
<div class="sample"></div>
<div class="sample"></div>
<div class="sample"></div>

/* div#test.sample*3 */
<div id="test" class="sample"></div>
<div id="test" class="sample"></div>
<div id="test" class="sample"></div>

id class 並べる数の順に指定

メモ

Eclipseのショートカットキー変更
ウィンドウ→設定の「一般」のキー項目から変更可能
NetBeansのショートカットキー変更
右上の検索フォームから「一般オプション」と検索
→オプションウィンドウの「キーマップ」タブから変更可能
Eclipse(Win)でのHTMLコメントアウト(ZenCodingのショートカットでできなかったのでメモ）
範囲指定　Ctrl+ Shift+ /
NetBeans(Mac)でのHTMLコメントアウト
範囲指定　Command+/
参考サイト

//ゆるふわ☆エンジニアリング EclipseにZen Codingをインストールする
http://www.yuhei-tsukahara.com/2012/11/eclipsezen-coding.html?spref=tw

//NetBeans 7.2 へ Zen-codingプラグインを導入する
http://krakenbeal.blogspot.jp/2012/12/netbeans-72-zen-coding.html#.UgG51cU6GMM.twitter

//@IT
http://www.atmarkit.co.jp/fwcr/design/tool/zencoding02/02.html

//Zen-codingの基本を理解しよう
http://dotinstall.com/lessons/basic_zencoding/5803

参考書籍

『HTML+CSSコーディングが10倍速くなるZen Coding 』　著こもり　まさあき、岡部和昌