Emacsで「<」「>」を手打ちしないHTML編集 #HTML

Emacsのはなしです。
さいきんEmacs Rocksというのを見つけて興奮しております。

その中で見た、HTMLに関わるEmacsコマンド等を勉強したのでメモ。

Emacs Rocks! Episode 12: Working with HTML

zen-coding

こまかい説明は省きますが、zen-codingを使うと
手打ちするのがダルい、ネスト深めなHTMLとかも一瞬で出せます。

例えば、zen-codingのmodeで開いたファイルで、

html>head+body>div>ul>li*5

こんな感じのものを書いて、TABを押すと、

<html>
    <head>
    </head>
    <body>
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
</html>

わさぁっ、とこんなのが出てきます!

上で書いたくらいのzen-codingの書式なら、

ネストは>
隣接は+
繰り返しは*(数字)

だけ覚えておけばすいすい書けるので、
勉強コストが低いのもいいですね。

ちなみに、「HTMLはインデントなしじゃー!!」派の方は、.emacsかinit.elに

(setq zencoding-indentation 0)

と書いておきましょう。
というか、zen-coding使いつつインデントありにするのは結構しんどそう。。

sgml-mode

つい先程気づいたんですが、Emacsにzen-codingを入れた時に、
sgml-modeというのも付いてきていたようです。

zen-codingが内部で使ってそうな関数が色々入っているので、
このあたりもマスターすると、更に小回りの利く編集ができそうです。

sgml-tag

関数sgml-tagは、たぶんC-c C-oにバインドされてます。
タグ名だけ打てばHTMLタグを入れてくれるというやつです。

<body>
|
</body>

この状態でC-c C-o RET sectionすると

<body>
<section>|</section>
</body>

でん! とsectionタグができて、カーソルはその中に移動してます。

そしてもう少し小回りの利くところ!
さっきの状態から、<section></section>を選択して、
C-c C-o RET divとすると、

<body>
<div><section></section></div>|
</body>

はい、選択部分をdivで囲んでくれました! いいかんじ!

また一部のタグでは、タグ自体を生成した後にattributeも聞いてくれるので、黙々とこたえると吉です。

例えば、C-c C-o RET inputして、
type → text → name → email → value → foo@bar
とぽちぽち書いていれば、

<input type="text" name="email" value="foo@bar">

ちゃんとこうなります。
記号を一切タイプしないというのがすごい。

なお、M-x describe-function RET sgml-tagすると解説が読めます。
Emacsの関数すべてにおいてこれは使えるので、べんりですよ。

sgml-electric-tag-pair-mode

これがすごい。
M-x sgml-electric-tag-pair-modeでmodeをonにしておいて、

<div|></div>

タグ名を編集すると…(hogeと入力)

<divhoge|></divhoge>

閉じタグも変わった!!
というわけで修正の手間が半分で済みます。

もちろん、開きタグと閉じタグが遠くはなれていてもOKです。

そのほか

ほかにもsgml-modeで使えるものはいっぱいあります。
キーバインドはどれもC-cで始まるものになっていて、
比較的覚えやすいのではないでしょうか。

sgml-close-tag: C-c C-e
いまいる場所のHTMLタグを閉じます。
タグ書きすぎて、ネストの訳が分からなくなったときにも使えそう。
sgml-skip-tag-forward: C-c C-f
HTMLタグ単位で、前に移動します。
sgml-skip-tag-backward: C-c C-b
HTMLタグ単位で、後ろに移動します。
(このあたりは、1タイプで済むキーバインドに差し替えてもいいかなぁという気も)
sgml-sgml-tags-invisible: C-c TAB
HTMLタグを非表示/表示。テキストブラウザみたいな表示になる。
sgml-delete-tag: C-c DELETE
HTMLタグを削除。(カーソルのいる位置を囲んでいるタグだけ削除。中身はそのまま残る)
html-headline-1: C-c 1
h1タグを入力。C-c 1〜C-c 6まである。
html-check-boxes: C-c C-c c
チェックボックスをまとめて、ダイアログで入力。
だいたいvalueだけ入力すれば勝手に書いてくれるので、かなり早い。
同様のhtml-radio-buttons: C-c C-c rもあり。
html-href-anchor: C-c C-c h
aタグを(ry
html-image: C-c C-c i
imgタグを(ry

まとめ

今回実は、記事を書くにあたって新しくインストールしたものはゼロで、
ぜんぶzen-codingを入れたときに付いてきたものなんですね。。。
これだけいろいろ入っていたのに、使ってなかったとはもったいない。

これから仕事でもばりばりHTMLを書きそうなので、
Emacsに助けてもらいつつコーディングスピード上げようと思います。