Home JavaScript Greasemonkey PHP

Aptana 以外の Eclipse で Zen-Coding を有効にする方法2010-02-24


【2011-05-27 追記】
EC studio さんで紹介されているからか、未だに多くアクセスがあるんですが、現在であれば ぼんずーず : eclipse + zen-coding プラグイン3.6Helios動作確認済み「eclipse-zencoding」 で紹介されている方法の方が推奨です。

知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ で紹介されていた、Zen-Coding が激しく気になって、常用している Eclipse で使いたいと思ったのですが、どうも Aptana で無いとすんなりとは動いてくれない様子。

調べていくと、Zen-Coding は、Aptana 自体の機能ではなく、Eclipse Monkey なる Eclipse プラグインの機能を用いて実現しているようだったので、普通の Eclipse でもちゃんと設定すれば動作するのではないかと踏んで、試してみました。
以下、普通の Eclipse で Zen-Coding を有効にする方法です。

Eclipse Monkey のインストール

  • ヘルプ → ソフトウェア更新 → 検索およびインストール
  • サイトの追加 → http://download.eclipse.org/technology/dash/update/
  • 「Eclipse Monkey」「Mozilla Rhino」をインストール
  • しばし待つ → Eclipse 再起動
[参考]Part4 Eclipse Monkeyで統合開発環境に機能を追加 - マクロで始める実用プログラミング:ITpro

Zen-Coding (Eclipse Monkey スクリプト) の導入

  • Downloads - zen-coding - Project Hosting on Google Code
  • 「Zen Coding for Aptana v0.6.0.1」をダウンロード
  • Eclipse 上、任意のプロジェクト直下に、scripts フォルダを作成
  • ダウンロードしたファイルの中身を scripts フォルダ内に展開
  • Eclipse 再起動
[参考]知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

動作確認とショートカット変更

導入が成功すれば、メニューに「スクリプト」が追加され、導入済みのスクリプト一覧が表示されているはずです。
このメニューから選択しても、Zen-Coding の各機能を使うことが出来ます。

ショートカットの設定が適切であれば、メニュー内にもショートカットが表示されるのですが、元々 Eclipse には大量のショートカットが設定されているため、そのどれかとバッティングしていると、Zen-Coding のショートカットは使用することが出来ません。

ショートカットを利用するためには、参考リンク先にもあるように、Eclipse 側のショートカットを逃がすか、Zen-Coding のショートカットを変更する必要があります。
ここでは、Zen-Coding 側のショートカットを変更する方法を紹介します。

ショートカットの変更は、scripts フォルダ以下にある *.js ファイルを編集して行います。
例えば、HTML の展開だったら、"Expand Abbreviation.js" です。

冒頭 5 行目に Key: という値があり、ここでショートカットが定義されています。この辺は Zen-Coding の設定と言うよりも、Eclipse Monkey の設定ですね。
ここでショートカットを変更して *.js ファイルを保存すれば、即座に反映されるので、スクリプトメニューで確認して下さい。
また、仮想キーについては、下記のエイリアスが設定されているようです。

M1 = Ctrl
M2 = Shift
M3 = Alt

…と思ったら、CTRL、SHIFT、ALT と直接書いても大丈夫でした。こっちの方が分かりやすいですね。

[参考] Zen-Codingのショートカットをまとめてみました - EC studio デザインブログ

以上で、すんなりと動作させることが出来ました。
Zen-Coding すげぇ面白いし楽ちんです。素晴らしい!

カテゴリ: Development タグ: eclipse zen-coding