EC studio EC studio デザインブログ

2010年02月22日投稿者:谷 拓樹

Zen-Codingのショートカットをまとめてみました

前回の記事ではZen-Codingの導入方法について解説しました。

今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。
※2010/02/22現在の最新バージョン「Zen Coding for Aptana v0.6.0.1」を対象にしています。

なおAptana(Eclipse)の場合だとAptanaの方の機能に多くのショートカットが割り当てられているので、利用する環境によってはショートカットを変更する必要があります。Zen-Codingのデフォルトのショートカットが機能しない場合は、記事最後にまとめる変更方法を参考にしてください。

Expand Abbreviation(省略コードの展開)

Win:Ctrl+E
mac:Command+E

Zen-Codingの主な機能のひとつです。

HTML:
  1. div#content>ul#global.nav>li*3>a

こちらのサンプルの場合、末尾のaの後ろにフォーカスして、ショートカットを実行してください。
すると、

HTML:
  1. <div id="content">
  2.     <ul id="global" class="nav">
  3.         <li><a href=""></a></li>
  4.         <li><a href=""></a></li>
  5.         <li><a href=""></a></li>
  6.     </ul>
  7. </div>

こうなります。
省略コードはCSSセレクタの書き方がわかっていると、すぐに書けるようになると思います。
#id
.class
>が子供の要素というような感じです。
またサンプルのように*はその後ろに数字をつけることで、その数だけ行が展開されます。

このサンプル以外にも色々な書き方はありますが、今回は以上で。

Wrap with Abbreviation(省略コードで包括)

Win:Ctrl+Shift+A
mac:Command+Shift+A

要素を省略コードでマークアップします。

例えば下記のようにマークアップされていないリストのような要素があった場合、

HTML:
  1.     りんご
  2.     みかん
  3.     ばなな
  4. </div>

divの中にフォーカスして実行。
するとダイアログが出ますので、そこに省略コードを記述。
例えば下記のように書きます。

HTML:
  1. li*>a

すると、

HTML:
  1.     <li><a href="">りんご</a></li>
  2.     <li><a href="">みかん</a></li>
  3.     <li><a href="">ばなな</a></li>
  4. </div>

こうなります。素晴らしいですね。

Balance Tag Inward/Outward(要素の内側・外側を選択)

Balance Tag Inward

Win:Ctrl+Shift+D
mac:Command+Shift+D

Balance Tag Outward

Win:Ctrl+D
mac:Command+D

実行するとフォーカスした箇所の要素から、
Inwardは内側の要素を、
Outwardは外側の要素を選択します。

編集中の要素の開始タグと終了タグを認識するのに便利です。

[2010/02/23 追記]
ソースコードにもよるかもしれないですが、きれいに要素を認識してくれない場合があるようです。
もしかしたら仕様が少し違うかもしれないので、こちらの機能について詳しい方がいらっしゃったらコメントなどいただけたら嬉しいです。

Go to Next/Previous Edit Point(編集箇所への移動)

Next Edit Point

Win:Alt+Ctrl+]
mac:Option+Control+]

Previous Edit Point

Win:Alt+Ctrl+[
mac:Option+Control+[

実行すると空の属性や空の要素、空行を移動することができます。

Update <img> Size(画像サイズの取得)

Win:Ctrl+I
mac:Command+I

imgsrc属性で指定したファイルのサイズを取得します。

HTML:
  1. <img src="sample.jpg" alt=""/>

これが、

HTML:
  1. <img src="sample.jpg" alt="" width="185" height="300" />

このように実行すればサイズが取得されます。
img要素内にフォーカスして実行すればいいのですが、画像パスが正しくないと取得されません。
パスは相対パス、絶対パスの両方に対応しています。

Merge Lines(複数の要素を1行にする)

Win:Ctrl+L
mac:Control+L

HTML:
  1.     <li class="list1"></li>
  2.     <li class="list2"></li>
  3.     <li class="list3"></li>
  4. </ul>

こういう複数行に展開された要素があった場合に、まとめたい要素を選択状態にして実行すると、

HTML:
  1.     <li class="list1"></li><li class="list2"></li><li class="list3"></li>
  2. </ul>

このようになります。

Remove Tag(タグの削除)

Win:Ctrl+Shift+I
mac:Command+Shift+I

これは要素の内容をそのままに、タグだけを削除します。
対象のタグにフォーカスして実行すれば削除されます。

HTML:
  1. <div id="title"><span><a href="" class="next"></a></span></div>

こちらの例の場合、spanにフォーカスして実行すると、

HTML:
  1. <div id="title"><a href="" class="next"></a></div>

このようになります。

Split/Join Tag(タグの結合・分解)

Win:Ctrl+U
mac:Command+U

HTML:
  1. <div class="Split"></div>

このような記述の場合に実行すると

HTML:
  1. <div class="Split" />

このようになります。
逆に後者で実行すると、前者のように分解されます。

個人的にはちょっと利用頻度は少ないかなと思います。

Toggle Comment(コメントアウトの実行・解除)

Win:Ctrl+Shift+/
mac:Command+Shift+/

フォーカスしている要素をコメントアウトします。

以上がZen-CodingのWikiで解説されている主な機能となります。
http://code.google.com/p/zen-coding/wiki/Actions

紹介したショートカットで機能しない場合は?

冒頭に書いたよう、Aptana(Eclipse)の場合にはすでに色々キーが設定されてしまっていることが多いので、設定画面から変更するようにしましょう。
設定変更は2つあります。

  • Aptana側を変更する
  • Zen-Coding側を変更する
Aptana側を変更する場合

「ウインドウ」>「設定」>「一般」>「キー」

ここですべてのショートカットキーが設定されているので、紹介したキーに該当したコマンドをアンバインドしてください。
設定後は再起動しましょう。

Zen-Coding側を変更する

普段から使っているキーをZen-Codingのために変えたくないという人は、それぞれのJavascript上の記述を編集することで、ショートカットを変更できます。

例えば Expand Abbreviation の場合であれば、scriptsフォルダにあるExpand Abbreviation.jsの冒頭5行目あたりを編集すればOKです。

JavaScript:
  1. * Key: M1+E

これがデフォルトの記述なのですが、このM1というのはAptana(Eclipse)で定義されているキーです。
Windowsの場合はCtrl、Macの場合はCommandに該当します。
ここで定義できるショートカットキーなどは下記のページを参考にしてください。

Eclipse Monkey scripting with Ruby - Aptana

まとめ

これらを完全に使いこなすまでには慣れが必要ですが、HTML/CSSを扱える人であればすぐに慣れるでしょう。
Aptanaを中心に紹介していますが、キーは違えど他のアプリケーションでも活用できるのでぜひ試してみてください。


関連した記事:

この記事へのコメント

貴重な情報大変ありがとうございます。
是非挑戦してみようと私もEclipseのプラグインとしてAptana Sudio 2更に
ZenCodingを導入しました。ご紹介の記事の内容にAptanaとZenCoding設定
をできたのですが、ショートカットキーを実行してもZenCodingの機能が実行
されなく苦慮しています。解決の参考になるような情報をご教授いただけませ
んでしょうか?

環境 レノボ ThnkPad
Windows Xp pro sp3
インストールソフト
pleiades-e3.6-platform-jre_20110228
Aptana Studio 2 プラグイン
Zen.Coding-Aptana.v0.6
設定変更
ZenCodingプジェクトフォルダー内にscriptsを作成、その中にZenCoding
のスクリプトファイルを格納。ショートカットキーCtrl+EをTabに変更など
行っています。

投稿者: horigome | 2011/3/22 火曜日 14:23:43

上記の件についてですが、参考になるかわかりませんが、
私がショートカットを変更してみて問題なかったものを紹介したいと思います。

「Zen-Coding側を変更する」の「Abbreviation.js」ファイルの
5行目を「* Key: M1+E」から「* Key: TAB」に変更をおこないました。

上記の方法がお役に立てれば幸いです。

投稿者: 赤堀 巴絵 | 2011/3/22 火曜日 15:47:57

赤堀様

お忙しい中、情報ありがとうございました。
早速取り組んでみたいと思います。

投稿者: horigome | 2011/3/23 水曜日 15:42:40
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.