Zen Codingを導入してみた

Amazonで、『HTML+CSSコーディングが10倍速くなるZen Coding』なる書物を見かけたので、ちっとばかり調べてみた。
ばりばり使うことがあるかというとかなり疑問だったけど、便利そうなので手もとのEmEditorやAptanaに導入してみた。


1. EmEditor


EmEditor向けにはマクロとして提供されている。
http://www.emeditor.com/modules/mydownloads/singlefile.php?cid=18&lid=281


上記ページで、FDマークの右の「Zen Coding macros and snippets」という部分をクリックすると、マクロのファイルがダウンロード可能。


同ページの手順書によると、

1. 「マイドキュメント」フォルダに「My Macros」（MyとMacrosの間は半角スペース）というフォルダを探す。
2. ない場合は、EmEditorでマクロを一度も使用したことがないことが原因と思われる。ない場合は、自分で作成してしまうこと（EmEditorで何でもいいのでマクロを記録、名前をつけて保存しようとすると自動で作成される）。
3. My Macrosフォルダに、zen_emeditor.jseeをコピーする。
4. もしスニペット・カスタムバーが表示されていなければ、メニューから＜ツール→プラグイン→スニペット＞をクリックし、表示する。
5. スニペット・カスタムバーの上で右クリック＜インポート／エクスポート→ルートにインポート＞をクリック。
6. zen-coding-en.eesnip（もしくは～ja.eesnip）を選択。
7. もしスニペット・カスタムバーが表示されていない状態でもZen Codingマクロを使用したい場合は、＜メニューからツール→プラグイン→プラグインの設定＞をクリック。
8. プラグイン一覧からスニペットを選択し、プロパティをクリック。
9. 「バックグラウンドでも実行する」にチェックを入れ、OK。

（以上、意訳・補足あり）

これでZen Codingマクロが有効化し、「div#name」とか何とか入力してF12を押すと、コードの展開が可能になる。編集設定がCSSの場合はCSS向けのZen Codingも可能。

また、ほかにもコマンドがあるらしいけど、そこら辺は上記ページを確認のこと。

2. Aptana（Eclipse）


Aptana（Eclipse）向けには、プラグインの形式でリリースが行われはじめている。
以前、Zen Codingについて調べたときにはまだなかったように思うので、隔世の感？


プラグインは、以下のページで配布されている。
https://github.com/sergeche/eclipse-zencoding


インストール手順にしたがうと、

1. メニューから＜Help→Install New Software...＞と進む。
2. アップデートサイトのロケーションとして、http://zen-coding.ru/eclipse/updates/を追加する。
3. 利用可能なプラグインのリスト中、「Zen Coding for Eclipse」（Uncategorized...→Zen Coding for Eclipse）にチェックを入れ、Nextボタンをクリック。インストール手続きを進める。
4. インストール後、（Aptana／Eclipseに促されるまま）再起動する。

（以上、意訳・補足あり）


これだけで、Aptanaのテキストエディター中でZen Codingが使用可能になる。
例によって「div#name」とか何とか入力してTabキーを押すと直前のコードが展開されて、HTMLになる。
コマンドのショートカットのカスタマイズもできるっぽい。詳細は上記ページを確認のこと。