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 の方が実装が楽
  • 自動補完の方が覚えることが無いので初級者向け
  • 自動補完は候補確定に余分に１ストローク必要な場合がある

vs マークダウン


  • 高速編集
  • ソースの可読性
  • 自由度の高さ
  • 普遍性

評価


  • ほとんどのテキストエディタで使用可能
  • コーディング速度はかなり（３倍？）向上
  • 比較的上級者向け
  • 成果物は普遍性があるので、独自に使用することが可能

まとめ・今後の課題


  • まとめ
    • Zen-Coding を使うと、３倍高速にコーディング可能
    • Zen-Coding を「さくさくエディタ」にネイティブ実装したよ
    • 日々HTMLをさくさく書いています
  • 今後の課題
    • CSS 対応
    • Emmet  で追加された機能対応
    • テキストをタグで囲む手順がいまいち

Zen-Coding for HTML

By Nobuhide Tsuda

Made with Slides.com

Zen-Coding for HTML

  • 2,129

More from Nobuhide Tsuda