Zen-Coding
for HTML
自己紹介
名前:津田伸秀
サイト: http://vivi.dyndns.org/ twitter:vivisuke
facebook:https://www.facebook.com/nobuhide.tsuda
年齢不詳のおじさん、ぼちぼちソフト作家、自宅研究員(主席)
趣味:テニス、オセロ、思考ゲーム・パズル類
Qt/C++ 使い, webアプリ(PHP, JS, jQ, SQL)も出来るよ
Windows用テキストエディタ ViVi を延々開発中
パズルアプリ(Android・tmlib)も公開中だよ
最近は、世界最速「さくさくエディタ」 開発中だよ
迷走中、お仕事募集中でござるぞ
Zen-Coding
Zen-Coding とは
-
HTML, XML, SGML 等のマークアップ言語を短縮入力
- 3倍高速と言われている
- HTML等には表記の冗長性がある
- → タイピングを短縮するメソッドが存在する
- 冗長性を低減するために表記を変える方法もある
- → マークダウン
-
2008年にVadim Makeevが開発開始
- MIT ライセンス
- 最近は「Emmet」と改名された
- 各種エディタ用スクリプト/マクロが公開されている
例
div#page>div.logo+ul#navigation>li*5>a
例
div#page>div.logo+ul#navigation>li*5>a
↓Ctrl + , (commma)
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
「さくさくエディタ」に実装
- マクロ/スクリプト ではなくネイティブ実装
- セットアップ不要ですぐに使えます
- 参照:Zen-Coding for HTML
Zen-Coding 使い方
Zen-Coding 使い方
- タグ・パラメータを入力し、展開コマンド実行
- さくさくエディタ、ViVI:Ctrl + ,
- Ctrl + E が多いかも
- < > を省いたタグ名をそのまま入力
- クラスは.(ピリオド)、idは#
- これらはCSSと同じ
- 階層は > 指定
- +は並列、*Nは繰り返し回数、$は連番
- html:5, ul+ など
< > はいらない
- tag■ → <tag>■</tag>
- ※ ■ はカーソル位置を表す
- 数種のタグは属性が自動的に付加
- a → <a href="■" />
- img → <img src="■" alt="" />
- 先にテキストが入力済みだと少し面倒
- テキスト
- tag■テキスト
- <tag>■</tag>テキスト
- <tag>テキスト</tag>
. で class
pre.prettyprint■
↓
<pre class="prettyprint">■</pre>
#でid
div#hoge
↓
<div id="hoge">■</div>
階層は > で指定
tr>td■
↓
<tr>
<td>■</td>
</tr>
+で並列指定
div+p■
↓
<div>■</div>
<p></p>
*数値 で繰り返し
ul>li*3■
↓
<ul>
<li>■</li>
<li></li>
<li></li>
</ul>
$ 連番指定
div#box$*3■
↓
<div id="box1">■</div>
<div id="box1"></div>
<div id="box1"></div>
[属性名=属性値 …]
input[type=text]
↓
<input type="text">■</input>
省略形
ul+
↓
<ul>
<li>■</li>
</ul>
tr td 生成
<table>
■
</table>
↓
<table>
<tr>■</tr>
</table>
比較・評価
vs コピペ
- コピペするにはコピペ元が必要
- あってもスクロールする必要がある場合がある
vs 終了タグ補完
- Zen-Coding の方が手数が少ない
- タグ文字列を補完入力 → Zen-Coding という合わせ技は可能
vs 自動補完
- パラメータの処理は Zen-Coding の方が実装が楽
- 自動補完の方が覚えることが無いので初級者向け
- 自動補完は候補確定に余分に1ストローク必要な場合がある
vs マークダウン
- 高速編集
- ソースの可読性
- 自由度の高さ
- 普遍性
評価
- ほとんどのテキストエディタで使用可能
- コーディング速度はかなり(3倍?)向上
- 比較的上級者向け
- 成果物は普遍性があるので、独自に使用することが可能
まとめ・今後の課題
- まとめ
- Zen-Coding を使うと、3倍高速にコーディング可能
- Zen-Coding を「さくさくエディタ」にネイティブ実装したよ
- 日々HTMLをさくさく書いています
- 今後の課題
- CSS 対応
- Emmet で追加された機能対応
- テキストをタグで囲む手順がいまいち
Zen-Coding for HTML
By Nobuhide Tsuda
Zen-Coding for HTML
- 2,159