2010年11月30日火曜日

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になる。
コマンドのショートカットのカスタマイズもできるっぽい。詳細は上記ページを確認のこと。