EC studio 企画デザインブログ

前回の記事では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の主な機能のひとつです。

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

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

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

Wrap with Abbreviation（省略コードで包括）

Win：Ctrl+Shift+A
mac：Command+Shift+A

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

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

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

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

これが、

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

Merge Lines（複数の要素を1行にする）

Win：Ctrl+L
mac：Control+L

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

このようになります。

Remove Tag（タグの削除）

Win：Ctrl+Shift+I
mac：Command+Shift+I

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

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

このようになります。

Split/Join Tag（タグの結合・分解）

Win：Ctrl+U
mac：Command+U

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

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

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

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です。

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

Eclipse Monkey scripting with Ruby - Aptana

まとめ

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

関連した記事：

• 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた
• 見出しをCSSでシンプルに装飾するtips
• ページネーションのマークアップ考察
• ブラウザ上でWebページをリアルタイム編集できる簡単な方法
• Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法