Zenって禅？ いやそんな……

投稿者:shingoyoneda

昨日からZen-Codingの勉強を始めました。どうも、shingoyonedaです。

Zen-Codingというのは、まぁ、大雑把に言えばCSSセレクタ風にHTMLを記述するというか、そんな感じのものです。詳しくはこちらをご覧ください。

で、このZen-Codingですが、Aptana StudioやWindowsのNotepad++などが公式サポートされている他、DreamweaverやVisual Studioなどのプラグインがあるようです。また、非公式ながらVimプラグインやEmacs Lispもあるみたいです。えっ、Emacs！

そんな訳で、Emacsにzencoding-modeを入れてみたのですよ。

さてリンクをたどってファイルをダウンロードしなきゃ……というところで「あれ、もしかしてEmacsのパッケージにあるかも」と気付きました。Emacs24にはパッケージ管理システムがビルトインされているので、

M-x list-packages

とコマンドすることでパッケージ一覧をダウンロードします。ちなみに、私は紹介マニアさんの記事に習って以下の2つのリポジトリ（というのですか？）を追加設定しています。

  • http://melpa.milkbox.net/
  • http://marmalade-repo.org/

ということで早速パッケージを確認すると、ばっちりzencoding-modeというのがあるではありませんか。これはもうインストールするしかありません。

インストールが完了したら、次はinit.elの編集をしなくてはいけません。とりあえずサクっと設定してみました。

(require 'zencoding-mode) 
(add-hook 'sgml-mode-hook 'zencoding-mode)
(add-hook 'html-mode-hook 'zencoding-mode)
(setq zencoding-indentation 0)
(define-key zencoding-mode-keymap (kbd "M-m") 'zencoding-expand-line)

尚、設定の記述にあたり以下のサイトを参考にさせていただきました。ありがとうございます。

これでバッチリのはずなので、テストしてみます。zencoding-modeの操作方法は、Zen-Coding形式で記述した後にzencoding-expand-line（デフォルトではC-Enterに設定）を実行、展開プレビューが表示されますのでOKなら[Enter]、NGならC-gを入力という流れです。

例えば、

html lang=ja>(head>meta/ charset=utf-8+title)+body>(header#header>h1)+(section#content>section#main+section#sidebar)+(footer#footer)

このような記述をしておもむろにzencoding-expand-line（私のキーマップ設定ではM-m）を実行すると、以下のHTMLがプレビューとして表示されます。

<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<body>
<header id="header">
<h1></h1>
</header>
<section id="content">
</section><section id="main">
</section>
<section id="sidebar">
</section>

<footer id="footer">
</footer>
</body>
</html>

OKなら[Enter]で確定です。良いじゃな〜い。

実はこのzencoding-modeは、オフィシャルなものに比べて実行可能な書式が少ないようです。例えば、公式サポートされているNotepad++で以下の記述でHTML5の雛形が展開されます。

※展開前
html:5

※展開後
< !DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</meta></head>
<body>

</body>
</html>

しかし、zencoding-modeでは、

※展開前
html:5

※展開後
<html:5>
</html:5>

となってしまいました。

何ができて何ができないのかは、Zen-Codingの構文説明ページとzencoding-modeのREADME.mdを比較してみるのが良いかもしれません。

とはいえ、基本的な部分はzencoding-modeでも問題なく使えそうです。

これで私の作業効率が改善してくれれば良いのですが・・・。