Edited at

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

More than 5 years have passed since last update.

Emacsのはなしです。

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

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


zen-coding

このあいだ入れた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 1C-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に助けてもらいつつコーディングスピード上げようと思います。