GoodPic.Com

巷で話題のZen Coding。emacs 版もあるようなので、Mac のCarbon Emacsに入れてみた。今までスニペット機能は、emacs + snippet.el を使っていましたが、この動画を見ると（YouTube - Emacs with HTML, Zencoding and YASnippet）、そういうのは YASnippet 使えという雰囲気なので、ついでに YASnippet に切り替えてみた。

• zen-coding - Project Hosting on Google Code

まずは、zencoding.elをインストール。

• EmacsWiki: Zen Coding

上記のページから、zencoding-mode.elを取得して、load-path を通しているフォルダに配置。emacsの設定ファイル（.emacs.el ）に以下を追加するだけ。キーバインドは Ctr-z に変更しています。

;; Zen Coding Mode

(require 'zencoding-mode)

(add-hook 'sgml-mode-hook 'zencoding-mode)

(add-hook 'html-mode-hook 'zencoding-mode)

(add-hook 'text-mode-hook 'zencoding-mode)

(define-key zencoding-mode-keymap "\C-z" 'zencoding-expand-line)

ただし、この emacs 版はAbbre的な部分のみの実装していて、ZenHTMLElements みたな派手な補完には対応していないよう。あと、スニペット補完後のカーソルの位置が、あまり使いやすくない。Zen Codingのミソは、Snippetの内容を様々なエディタで共有できることだと思うので、そのあたりは今後のzencoding-mode.el の進化に期待というところでしょうか。とりあえず今のところは YASnippet で。

• yasnippet - Project Hosting on Google Code

Bundle版ではなく、カスタマイズが可能な通常版をインストールしました。ちなみにemacsの設定ファイルはDropboxにおいて、色々なMacでシェアしています。

;; Yasnippet
(add-to-list 'load-path "˜/Dropbox/emacs/yasnippet-0.6.1c")
(require 'yasnippet)
(yas/initialize)
(yas/load-directory "˜/Dropbox/emacs/yasnippet-0.6.1c/snippets")
(setq yas/prompt-functions '(yas/dropdown-prompt))

独自のスニペットの作成方法は以下のドキュメントで。

• Writing snippets

基本的には、M-x yas/new-snippet で編集モードを起動して、以下のような書式で独自のスニペットを作成する。作成している最中に、C-c C-t で動作テストをおこなえる。

# -*- mode: snippet -*-
# name: div h4
# key: div4
# --
<div class="section" id="$1">
  <h4>$2</h4>
  $0
</div> <!-- $1 -->

どのように記述するかは、 yasnippet-0.6.1c/snippets/text-mode/html-mode に既存のスニペットが沢山あるので、参考にすればよい。

なんだか、最終的にZen Codingをあまり使わない方法になっている気もしますがw、色々とすっきりしたのでよしとします。