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 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に助けてもらいつつコーディングスピード上げようと思います。