スキップしてメイン コンテンツに移動

zencoding.vimで、10倍速くHTMLを書く

ここ数日、Zen-CodingがLDCに上がってたので興味を持っていたのですが、手を出す事が出来ませんでした。
(環境構築とか面倒くさそうだったのでw)
ところが、mattnさんが、pure vim-scriptでZen-Codingを作成してたので、Vimmerな僕はさっそく導入してみました。

導入方法です。
3ステップで導入出来ます。

1.こちらからzencoding.vimをダウンロードします。
(僕のVim環境(Kaoriya版7.2.261)は若干古かったらしいので、Ver0.21を落としました)
2.vimをインストールしてあるディレクトリ/runtime/pluginにzencoding.vimをコピーする
3._vimrcに以下を追加
let g:user_zen_expandabbr_key = '<c-e>'


これで導入終了。

さあ、HTMLを構築しましょう。

html:5

と入力し、挿入モードのまま<c-e>を押すと……


<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>

</body>
</html>


はい。一瞬で出ます。
素晴らしい。
あと、例えば


<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>


みたいなコードも


#header+#content+#footer


と入力してから、<c-e>一発で作れるようになります。
これは気持ち良い!!
慣れれば今までの10倍速くHTMLを書けること間違いなしです。
VimユーザでWeb開発な人は是非zencoding.vimの導入をしてみましょう。

以上です

コメント

このブログの人気の投稿

Amazonの不正アクセス→注文履歴が表示されないという謎の現象

Amazon から身に覚えのない注文が飛んできた Amazonマーケットプレイス出品者「ngahuibaihuo」がお客様のご注文を承ったことをお知らせいたします。 というメッセージと共に全く身に覚えの無い注文が5点飛んできた。 値段は一つあたり11円と非常に低額であったが、これは不正アクセスだと判断。 すぐにアマゾンにログインしなおし、パスワードの変更を行った。 面倒臭がっていた2段階認証も設定した。 正直、かなり焦った。 この注文は、なぜか自動的に、「 非表示にした注文 」に変更されていた。 なので、注文履歴をぱっと見ただけでは、不正な注文があったと思われないようになっている。 非表示にした注文を表示する 注文履歴のページから、ドロップダウンリストを選び、一番下の「 非表示にした注文 」を選択する。 これで不正アクセスで注文された履歴が表示されるはず。 後は、それらの商品を選択してキャンセルすればOKだ。 残る謎 Amazonのパスワードは、自動生成で作成した難読系なので、そう簡単に不正アクセス出来るようなものでは無い。 しかしながら、2段階認証を設定していなかったのが、今回のような件を引き起こしてしまったのかもしれない。 注文の金額がやたらと低かったのも気になる。 11円の商品を3個とか2個とか購入していた。 この「ngahuibaihuo」というアカウントが被害にあった側なのか、むしろこいつが犯人なのかは全く分からないが、今回の手口はかなり凝ったやり方になっているので、似たような被害に合った方の参考になればと思っている。 良く分からない人は遠慮せずにAmazonのカスタマーセンターに電話して聞くのが一番だと思う。

ブラウザの拡張をつくろう!

いつもの前振り 初めましてもそうでない方もお元気ですか。 元気があれば何でも出来る!出来ません。 JavaScript Advent Calender 、13日目担当のArc Cosineです。 今回はJavaScriptのネタを何か書こうと思いましたが、どうせならツールの一つくらい作ったほうがいいだろうと言う事で土日に突貫工事で作ってみました。 Extension Maker http://www.tunsns.net/ExtensionMaker/ 時間切れで間に合いませんでしたが、Opera拡張だけは作れるようになっていますので、試してみてください。 チュートリアル トップヘアクセスしたら右下にある「今すぐ試してみる」をクリックしましょう。 そうしますと、基本情報を入力する画面が出ますので、必要な情報を入力してください。 今は入力チェックしていませんが、将来的にはちゃんとチェックするようにします。 次に、コードを入力する画面が出てきますので、ここにコードを貼り付けましょう。 Operaで動くUserScriptを試しに貼ってみると良いでしょう。 例えば、僕が昔書いたcolorful_favstarとかね! コード貼っておきますね。 コピペする場合は、view plainをクリックすると楽にコピペ出来ますよー。view plainの文字、薄くて見づらいけれど。 // ==UserScript== // @name Colorful Favstar.fm // @namespace http://moco.nond.es/ // @description Change tweet color and font size by favourites count like Favotter.net. // @version 0.1.1.20100808 // @include http://favstar.fm/* // @include http://ja.favstar.fm/* // @include http://de.favstar.fm/* // ==/UserScript== (function(doc){