以前からZen-codingを導入すると効率的にコーディングが出来ると聞いてはいたのですが、私の場合MovableTypeのコーディングが中心であまりメリットを感じなかったので、これまで特に対応していませんでした。
今後サイトをhtml+cssでフルスクラッチで製作する機会がないともいえないので、今のうちにこっそり覚えることにしました。 私の製作環境はEclipse3.5+Aptanaなので「Zen Coding for Aptana」をダウンロードして設定してあげればよいみたいですね。

設定方法は既にサイトやブログなどで紹介されているのでそれらのエントリーを参考に環境を構築しました。以下、自分向け備忘録。

手順

• 1.サイトからZen Coding for Aptanaを検索してダウンロード
• 2.ダウンロードしたファイルを解凍
• 3.Eclipseを起動。起動後「ファイル」-「新規」-「プロジェクト」で任意のプロジェクトを作成（例：zencoding）
• 4.任意のプロジェクトを作成したら、その直下に「scripts」フォルダを作る
• 5.「scripts」フォルダに手順2.で解凍したファイル群をアップロードする
• 6.Eclipse再起動

コーディングしてみる

こちらのエントリーを参考に試しにコーディングして[Ctrl]+[E]を押下して見ましたが、すでにショートカットキーが割り当てられているようで変換できませんでした・・・。

ショートカットキーの変更

上記の問題はAptana側、Zen-coding側どちらかのショートカットキーを変更することで解決できるようです。今回はこちらのエントリーを参考に解決しました。

手順

• 1. scripts/Expand Abbreviation.jsファイルのコメント部　 * Key: M1+E　を修正
• 2.「M1」「M2」「M3」が、それぞれ「Ctrl」「Shift」「Alt」を表すエイリアスになっているとのこと
• 3. * Key: M3+E と記述することで[Alt]+[E]で変換されるようです

再度コーディングしてみる

もう一度適当にコーディングして[Alt]+[E]を押下したところ無事変換されました。確かに作法にしたがってコーディングしたておけば、ショートカットキーでまとめて変換されるので効率よくコーディングできそうですね。作法を覚えれば・・・。