Aptana StudioおよびEclipseでZen-Codingを利用する

テキストエディタのプラグインとして提供され、HTMLやCSSのコーディング効率を飛躍的に向上させてくれる「Zen-Coding」。単体のテキストエディタでなく、統合開発環境でZen-Codingがサポートされているツールとしては「Aptana Studio(以下、Aptana)」がある。AptabnaはWebアプリケーション開発用のEclipseベースの統合開発環境で、HTMLやJavaScriptの利用を手助けするさまざまな機能を備えている。Aptanaはこのサイトで無料で公開されており、スタンドアロンのアプリケーションとしても、Eclipseのプラグインとしてもインストールできる。

Aptana用のZen-Codingプラグインは、公式サイトのダウンロードページにある「Zen Coding for Aptana」がそれだ。このファイルはEclipseのプラグイン形式ではなく、Webアプリケーション・プロジェクトに対するJavaScriptライブラリという形になっている。

したがってこれを利用するには、Aptana上で任意のプロジェクトを作った上で、その直下に「scripts」というフォルダを作成する。そしてこのフォルダに、ダウンロードしたファイルの中身を展開する(図1)。その上でAptanaを再起動すれば、図2のように[Scripts]-[Zen Coding]というメニューが追加されており、エディタ上ではZen-Codingによるコードの展開が利用できるようになっているはずだ。

ところで、Aptana版Zen-Codingによるコード展開のデフォルトのショートカットキーは[Ctrl]+Eだが、Aptanaのような多機能なIDEの場合にはこれは他の機能のショートカットとして設定されている場合がある。その場合はAptana側のキー設定を変えるか、Zen-Codingの設定を変更する必要がある。Aptana版Zen-Codingの設定はscriptsフォルダ以下の各JavaScriptファイルに分かれているが、コード展開のためのショートカットキーが設定されているのはそのうちの「Expand Abbreviation.js」である。このファイルのコメント部にある「Key: M1+E」を変更することで、ショートカットキーの設定を変えられる。

このファイルでは、「M1」「M2」「M3」が、それぞれ「Ctrl」「Shift」「Alt」を表すエイリアスになっている。したがって、たとえばショートカットを[Alt]+Eに変更したい場合には、この1行を次のように書き換える。

リスト1 ショートカットを[Alt]+Eに変更

 * Key: M3+E

コードの展開に関する設定は「zen _settings.js」ファイルにある。このファイルの中身はNotepad++のstart.jsの該当部分と同様のコードなので、まったく同じ感覚でカスタマイズすることができる。

EclipseでZen-Codingを使う

Aptana Studioではなく、通常のEclipseでZen-Codingは使えるだろうか。実はAptana版のZen-Codingは、Aptana本体の機能ではなく、「Eclipse Monkey」というプラグインの機能を利用して実装されている。Eclipse Monkeyは、Eclipseに対してJavaScriptを利用したマクロ機能を追加するためのプラグインである。Eclipse Monkeyそのものの使い方はこの記事に詳しく解説されているので、そちらを参照してもらうといいだろう。

Eclipse Menkeyはアップデートサイト経由でインストールすることができる。Eclipse Monkey本体のほかにMozilla Rhinoも必要なので、両方ともインストールしよう(図3)。

インストール後Eclipseを再起動すると、メニューバーにScriptsメニューが追加されているはずだ。あとはAptanaの場合と同様に、Zen-Codingのスクリプトファイルを追加すればよい。

EmacsでZen-Coding(っぽい機能)を利用する

最近は高機能なテキストエディタやIDEの選択肢が広がっているが、依然としてEmacsを使っているユーザもいることだろう。そこで、EmacsでもZen-Codingが使えたらと考えるのは自然なことだ。実はEmacsにも、Emacs Lispで実装した「ZenCodingモード」が公開されている。ただし利用できるのは一部のコード展開の機能のみであり、しかも筆者の環境では動作しない略語パターンが多かった。しかし、今後への期待も込めてここで紹介しておきたい。

EmacsのZenCodingモードはこのサイトで公開されている。ページ中ほどにあるリンクか、GitHubのリポジトリより「zencoding-mode.el」をダウンロードし、任意の場所に保存する。そして.emacsなどの設定ファイルに、リスト2の設定を追加する。これは「~/emacs/zencoding/」にzencoding-mode.elを配置した場合の例である。

リスト2

;------ for Zen-Coding mode ----
(add-to-list 'load-path "~/emacs/zencoding/")
(require 'zencoding-mode)

(add-hook 'sgml-mode-hook 'zencoding-mode) ;; Auto-start on any markup modes
(add-hook 'xml-mode-hook 'zencoding-mode)
(add-hook 'html-mode-hook 'zencoding-mode)

コメントを除く上の2行はZenCodingモードを読み込む設定で、下の3行はそれぞれSGMLモード、XMLモード、HTMLモードの場合に、自動的にZenCodingモードを有効にするという設定である。なお、コード展開のためのデフォルトのショートカットキーは『[Ctrl]+[Enter]』となっている。

以前も書いたように、今回紹介した以外にもさまざまなエディタでZen-Codingがサポートされている。まずは自分の使い慣れたエディタに導入して試してみるといいだろう。きっと手放せなくなるのではないかと思う。