Web 制作の人たちのなかで今話題の Zen Coding。これを使うと HTML タグが簡単に入力できるようになる。
この前の OSC で、某 Drupal のコミュニティで親しくしてくれているディレクタ(兼エンジニア)の人に教えてもらった。
TextMate とか NetBeans とかの主要エディタ用にあるらしいんだけど、僕は Emacs を常用しているんで Emacs 用のものを探していた(どうでもよいが、僕に Zen Coding を教えてくれたディレクタさんは、Komodo Edit を使っている。これはこれで凄い)。EmacsWiki の Zen Coding のページには、zencoding-mode.el というマイナーモードが紹介されている。このファイルを開発マシンに入れてみた。
zencoding-mode.el ファイルは http://github.com/chrisdone/zencoding/raw/master/zencoding-mode.el からダウンロードすることが出来る。これを load-path に設定されているディレクトリにインストールして M-x load-library で呼び出す。
Load library: zencoding-mode
たぶん、今後はいつも使う事になるだろうから、.emacs に以下のように書いておく。
(require 'zencoding-mode)
で、さっきも書いたけど zencoding-mode はマイナーモードなので、他のモードと一緒に利用することが可能。例えば、PHP mode や Smarty mode や HTML mode の中で使うことが出来る。.emacs に書いておくならこんな感じ。
(add-hook 'smarty-mode-hook 'zencoding-mode) (add-hook 'php-mode-hook 'zencoding-mode)
実際に使ってみるとどんなけ便利かわかる。例えば、以下のような記述をして、
html>body>h1#title+(ul#main-menu>li.menu-item*5)+p
Ctl + RET キーを押す。すると、どんな風になるかが表示されるので、
<html>
<body>
<h1 id="title"></h1>
<ul id="main-menu">
<li class="menu-item">
</li>
<li class="menu-item">
</li>
<li class="menu-item">
</li>
<li class="menu-item">
</li>
<li class="menu-item">
</li>
</ul>
<p>
</p>
</body>
</html>
問題なければ、RETキーを押す。気に入らなければ RETキーを押さずに修正すれば良い。修正中は、リアルタイムでプレビューのところも変化する。文章じゃわかりにくいけど、実際やってみるとその便利さがわかると思う。
僕は、あまり HTMLを書くことが無いので覚える必要も無いかと思ったけど、意外と簡単に覚えられたし、便利なのでしばらく使うんじゃないかなと思う。
新しいコメントの投稿