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

  • 1,102
Loading comments...

More from Nobuhide Tsuda