Zen-Coding + Eclipse を導入する

昨夜、「Ustreamで生Zen-Codingやってみましょうか」という内容がTwitter上で賑わっていました。

Zen-Codingってなに？

HTMLとCSSを効率良く記述するためのスニペット生成マクロです。効果の程については、まずこの動画を見てもらえればわかると思います。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

こういう手法はEmacs使いの人には馴染み深い物と思います。過去にはRuby on RailsのデモがTextMateを使って、上記のようなコーディング動画を配信されていました。私もその当時、TextMateいいな！と思って導入しましたが、日本語対応がうまくできず、EclipseベースのIDEに戻りコード補完をガシガシ使ってコーディングしてきました。

Zen-Codingはどうやって使うの？

現在ですと、Aptana, NetBeans, Coda, Espresso, TextMate, VisualStudio, Dreamweaver CS4とクロスプラットフォームで使用できます。これは素晴らしいことですね。私は現在、Eclipse + PDT + Aptanaという開発環境で諸々の言語を使用していますので、今回はEclipseで使うための方法について補足したいと思います。

前提として、EclipseMonkeyというプラグインが必要になります。これはEclipse上で動かせるマクロを作成するためのプラグインです。マクロは標準ではJavaScriptで記述することになっており、Rubyで書いたりもできるようです。Zen-CodingはJavaScriptで記述されています。

Zen-Codingを導入する前の準備

公式サイトにてインストール方法が紹介されています。まずは、Installingの手順に従ってAptanaのインストールとEclipseの再起動までを行いましょう。インストール時に依存関係を追って、一通りのツールがインストールされます。

その後、Zen Coding for Aptana v0.6 をダウンロードし、中のファイルすべてを以下の画像のように配置します。

新規プロジェクトで一般のプロジェクトを作成した後、scripts/libというディレクトリを作成しています。すると、メニューのスクリプトに「Zen Coding」という項目が現れます。早速、デモのように適当なHTMLファイルを作って試しましょう！Expand Abbreviation という項目がスニペット展開を行ってくれます。快適です。

Zen-Codingのショートカットキーをカスタマイズ

ショートカットキーをカスタマイズするには、まず該当するマクロのファイルを開きます。5行目にKeyという内容があるので、そこを編集します。M3って何だ？と思うかと思いますが、以下のような対応になっています。

M1->コマンド(Mac)
M2->Ctrl
M3->Alt or Option(Mac)
M4->Ctrl(Mac) 上記画像の設定だと Alt + E で Expand Abbreviation が実行されるということになります。

ショートカットキーが動かない？

Eclipseデフォルトのショートカットキーと競合している可能性があります。ウィンドウ->設定->一般->キーで競合しているショートカットキーを探し、別なショートカットキーを割り当てるか、コマンドのアンバインドで削除します。ちなみにフィルターのところで Ctrl+Shift などと入力するとCtrl+Shiftから始まるショートカットキーを探すことができて便利です。

ここまでできれば、快適なコーディングライフの歩みを一歩進めることができるでしょう。逆にZen-Codingの内容を参考にして、よく使うスニペットマクロを作成して行くと、楽しみが広がってくると思います。