昨日から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 + emacs – tototoshiの日記
- Emacs で Zen-Coding を試す | OSANAI.ORG
- Emacs に、Zencoding.el と YASnippet.el の二つのスニペットをインストール:Goodpic
- EmacsのZenCoding設定メモ | input*output
これでバッチリのはずなので、テストしてみます。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でも問題なく使えそうです。
これで私の作業効率が改善してくれれば良いのですが・・・。