Aptana StudioへのZen-Codingの導入

はじめに

前回の記事の末尾で「つまりAptanaのプラグインとして何かしらのパッケージをインストールする、ということではなくて、各プロジェクト毎にZen-Coding用のスクリプトを配置していくんですね。」と書きましたが、どうやら別に各プロジェクト毎に設定する必要はないようです。

Aptanaでは、複数のプロジェクト（サイト）を同時に開いて作業を行うことができるようなので、Zen-Coding用のプロジェクトを予め作っておいて、常にそれを開いた状態にしておけば、他のプロジェクトのHTMLファイルを編集している時にもZen-Codingが使えるようです。

今回は、AptanaにZen-Codingを導入する方法について見てみます。

Zen-Codingのダウンロード

まずはZen-Codingのダウンロード。Zen-Codingのオフィシャルサイトのダウンロードページから、「Zen Coding for Aptana vX.X.X.X（本記事執筆時点での最新版はv0.6.0.1）」をダウンロードします。
ss1
Downloads – zen-coding – Project Hosting on Google Code

ちなみに3つほど上にDreamweaver用のZen-Codingが見えますが、これはDreamweaver CS4向けのようです。試しに自分のマシンに入ってるDreamweaver CS3に導入してみましたが、なんもできませんでした。

Zen-Coding用プロジェクトの生成

Aptanaを起動し、「ファイル＞新規＞プロジェクト」を選択します。

「新規プロジェクト」ウィンドウが開いたら、「一般」の「プロジェクト」をクリックして「次へ」。
ss2

プロジェクト名はわかりやすいように「Zen-Coding」としてみました。ロケーションについては、特定のプロジェクトのみで使うわけじゃないので、デフォルトロケーションのままにしています。
ss3

Zen-Codingスクリプトの保存

先ほどの「Zen-Coding」プロジェクトの直下に「scripts」というフォルダを生成します。
ss4

そして、そのフォルダの中に先ほどダウンロードした「Zen.Coding-Aptana.v0.6.0.1.zip」の内容を展開します。この際、_MACOSXというフォルダは展開しなくても大丈夫です（展開しちゃっても構いませんが）。
ss5

ショートカットキーの設定（アンバインド）

Zen-Codingではコーディングの際に独自のショートカットキーを使用します。しかし、中にはAptanaの方に既に割り当てられてしまっているショートカットキーも結構あります。そこで、Zen-Coding用のショートカットキーとかぶってしまっているAptanaのショートカットキーの設定を削除（アンバインド）します。

「ウィンドウ＞設定＞一般＞キー」を開きます。
ss6

「フィルター入力」の欄に「Ctrl+E」など、Zen-Codingで使うショートカットキーを入力します。もしまるっきりかぶってるコマンドがリストに表示されたら、それを選択して「コマンドのアンバインド」をクリックします。Zen-Codingで使うショートカットキーについては下記記事などを参照。

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

ちなみに私は下記のショートカットキーをアンバインドしました。

Ctrl+E
Ctrl+Shift+D
Ctrl+D
Ctrl+L
Ctrl+I
Ctrl+Shift+I

デフォルト言語設定の変更

Zen-Codingの初期設定では、作成するHTMLページの言語が英語（US）に設定されています。それを日本語に変更しましょう。

先ほどのscriptsフォルダーにあるzen_settings.jsをエディタで開きます。

ss7

先頭の方にある言語設定系の記述を、下記のように変更しておけばOK。

	'variables': {
		'lang': 'ja',
		'locale': 'ja-JP',
		'charset': 'UTF-8',
		'profile': 'xhtml',
		
		/** Inner element indentation */
		'indentation': 't'     // TODO take from Aptana settings
	},