全国１億８千万人のzen-codingファンの皆様、如何お過ごしでしょうか。先日の記事でzen-codingをpure vimscriptに移植した「zencoding.vim」をご紹介させて頂きました。
あの時は略語の展開(Expand Abbreviation)しか機能がなく物足りなかったかもしれません。まぁ殆どの移植品はExpand Abbreviationしか無いのですが。
zen-codingには他どんな機能があるかというと、実はまだ便利な機能があったりします。 オフィシャルのサイトによると
- Expand Abbreviation
- Wrap with Abbreviation
- Balance Tag Inward/Outward
- Go to Next/Previous Edit Point
- Update Image Size
- Merge Lines
- Remove Tag
- Split/Join Tag
- Toggle Comment
Zen-Codingのショートカットをまとめてみました - EC studio デザインブログ以前までのzencoding.vimが対応していたのは一番上のExpand Abbreviationだけです。
前回の記事ではZen-Codingの導入方法について解説しました。今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。
http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html
ここ数日、zencoding.vimのコードを弄りまくって、残りのあと少しで100移植出来る所まで来ました。
以下チュートリアル的なものを書いておきます。
Expand Abbreviation
まずは略語展開。もう皆さん知ってると思いますが
div>p#foo$*3>a{こんにちわ}
と書いて<c-y>,(コントロールとyを押してカンマ)をタイプすると
<div>
<p id="foo1">
<a href="">こんにちわ</a>
</p>
<p id="foo2">
<a href="">こんにちわ</a>
</p>
<p id="foo3">
<a href="">こんにちわ</a>
</p>
</div>
と展開してくれる機能です。括弧によるグルーピングもサポートしています。Wrap with Abbreviation
ラップを作成する略語展開です。
おはよう
こんにちわ
こんばんわ
とあるテキストをビジュアル選択して<c-y>,をタイプすると「Tag:」とタグを聞かれます。ここにラップするタグを記述します。
Tag: bq
とすると
<blockquote>
おはよう
こんにちわ
こんばんわ
</blockquote>
といった感じにラップしてくれます。また
Tag: ul>li*>a>span
とすると
<ul>
<li>
<a href=""><span>おはよう</span></a>
</li>
<li>
<a href=""><span>こんにちわ</span></a>
</li>
<li>
<a href=""><span>こんばんわ</span></a>
</li>
</ul>
こんな感じになります。便利す。Balance Tag Inward/Outward
タグの外側、内側を選択します。
<ul>
<li>
<a href=""><span>おはよう</span></a>
</li>
<li>
_ <a href=""><span>こんにちわ</span></a>
</li>
<li>
<a href=""><span>こんばんわ</span></a>
</li>
</ul>
上記"_"の位置にカーソルがある状態で<c-y>dをタイプすると
<ul>
<li>
<a href=""><span>おはよう</span></a>
</li>
<li>
<a href=""><span>こんにちわ</span></a>
</li>
<li>
<a href=""><span>こんばんわ</span></a>
</li>
</ul>
こんな感じに選択してくれます。もちろん<li>の前で実行すると<ul>全体が選択されます。なお、タグの内側で実行するとタグ自身が選択されます。これとは逆にタグを含まないで中身のみを選択する場合には
<c-y>Dをタイプします。Go to Next/Previous Edit Point
編集位置へカーソルを移動します。<c-y>nで空の属性値や中身が空のタグ内側へジャンプします。逆向きは<c-y>Nです。Update Image Size
IMGタグの画像サイズを更新します。
<img src="http://mattn.kaoriya.net/images/logo.png"/>
この様なIMGタグの上で<c-y>iをタイプするとwidth/heigth属性を埋めてくれます。ローカルのファイルだと絶対パスもしくは編集中のファイルからの相対パスが扱え、URLも対応しています。
<img src="http://mattn.kaoriya.net/images/logo.png" width="96" height="96" />
こんな感じです。ちなみにvimが不得意とする
<img id="foo" src="logo.png"/> <img src="github-logo.png" class="bar" />
<img src="http://mattn.kaoriya.net/images/logo.png"/>
この様な１行複数個のIMGタグでも正しく動作します。この画像ファイルを扱う部分だけperl拡張を使いました。モジュールとしてはImage::Infoが入っていれば動くはずです。ちなみにこの機能さえ使わなければ、別にperl拡張が入っていなくても良いです。
Merge Lines
これはvimだけの機能で出来るので実装していません。ビジュアル選択してJですね。Remove Tag
以下の様なHTMLで「cursor is here」の部分にカーソルがあった場合
<div class="foo">
<a>cursor is here</a>
</div>
<c-y>kをタイプすると
<div class="foo">
</div>
となり、さらに<c-y>kをタイプすると
となる機能です。Split/Join Tag
先ほどと同様のカーソル位置で
<div class="foo">
<a>cursor is here</a>
</div>
<c-y>jをタイプすると
<div class="foo"/>
となります。なお、このdivタグの上で再度タイプすると今度は
<div class="foo">
</div>
と分割されます。Toggle Comment
タグの上で<c-y>/をタイプするとそのタグ全体をコメントアウトしてくれます。
<blockquote>
<a href="">aaa</a>
</blockquote>
このHTMLのaの上でタイプすると
<blockquote>
<!-- <a href="">aaa</a> -->
</blockquote>
となり、aの前あたりでタイプすると
<!-- <blockquote>
<a href="">aaa</a>
</blockquote> -->
となります。おまけ１
URLの上で<c-y>aをタイプするとHTMLを取得してきてアンカータグを作ってくれます。
http://www.google.com/
これが
<a href="http://www.google.com/">Google</a>
こうなります。おまけ2
おまけ1とさほど変わりませんが... URLの上で<c-y>Aをタイプすると本文抽出して引用文を作ってくれます。
http://www.google.com/
これが
<blockquote class="quote">
<a href="http://www.google.com/">Google</a><br />
<p>広告掲載 - ビジネス ソリューション - Google について - Google.com in English©2010 - プライバシー ...</p>
<cite>http://www.google.com/</cite>
</blockquote>
こうなります。ほぼ俺様用！100% zen-coding 互換まであと少しです。
mattn's zencoding-vim at master - GitHub
zen-coding for vim: http://code.google.com/p/zen-coding/
http://github.com/mattn/zencoding-vim
