ぼくのかんがえたさいきょうの Zen-Coding / Zen-Coding Textarea Extension を作った

HTML5 JavaScript Chrome ZenCoding

Zen-Coding Textarea Extension
Zen-Coding Textarea Extension という Google Chrome Extension を作った。

タイトルはホッテントリメーカーで作ったけれども、僕にとっては本当にこれが最強の Zen-Coding 。

Zen-Codingはちょうど去年くらいに流行っていた( Google トレンド: Zen-Coding )。

Zen-Coding とは

Zen-Coding をすごく簡単に表現すると、特定の記法でHTMLを展開することのできる様々なエディタに対応したプラグイン。オープンソースで開発されていてい、MITライセンスとなっている。

例えば以下のようなコードが

html:5>.main>ul.list>li.list$*3>a

いっぱつでこんな感じで展開される。

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div class="main">
	  <ul class="list">
	    <li class="list1"><a href=""></a></li>
	    <li class="list2"><a href=""></a></li>
	    <li class="list3"><a href=""></a></li>
	  </ul>
	</div>
</body>
</html>

記法の簡潔さと、HTMLの展開がとても強力。

Zen-Coding の使い方

Zen-Coding自体については、いろいろな記事やエントリを読んだけど、以下の3つがいちばんわかりやすかった。なによりその場で動かせるのがいい。

ここでは Zen-Coding for <Textarea> が利用されている。僕が作ったのは、この機能を全ての textarea で利用出来るようにする Extension 。

さらに以下のスライドを見れば、基本的な操作はばっちりだと思う。

スライドでは DreamWeaver を前提としているので、ショートカットキーはいくつか読み替える必要がある。Extensionのデフォルトだとこんな感じ。

Meta + E Expand Abbreviation タグを展開する
Shift + Meta A Wrap With Abbreviation 文字列を囲んでタグを展開する
Meta + / Toggle Comment コメントアウトする

細かい使い方については、チートシートがあるので、一度眼を通しておくといいと思う。

僕と Zen-Coding

僕が Zen-Coding を知ったのはここ1-2ヶ月くらい。どこで知ったのかは忘れてしまった。とても便利だ、と思ったけど、僕は本格的なマークアップはあまりしないので、そこまで気にしていなかった。

その後 Zen-Coding for Textarea というものがあるのを知って、これが他のテキストエリアでも使えたら便利だなと思った。ちょっと探してみると、UserScript は見つかった。

これだ！と思いしばらく使っていたが、徐々に不満が出てきた。インデントが tab (スペースふたつがいい)、HTMLタグを展開すると lang=en (jaがいい)、タグを展開するショートカットが Meta(WinだとCtrl/MacだとCommand)+E (Eclipseに慣れているので Ctrl+Space がいい)など。

ここがスタート。

僕と Chrome Extension

そういえば Google Chrome は UserScript を簡単に Extension にできたな、Extension の Option で設定を持たせればいいじゃん、と思った。そしてちょうどよく「第0回 html5-developers-jp杯 HTML5プログラミング&クリエイティブ・コンテスト」が開催された。そこの プログラミング部門に Google Chrome Extension のカテゴリがあった。
この締切りをモチベーションに頑張って実装してみた。Chrome Extension の開発はそこまで難しくないと思うけど、それでも初めての Extension 開発ではいろいろ躓いた。α版が大体10時間くらいでできて、そこでとりあえず公開した。
その後しっかりバグがあったので修正したり、多少改善したりして、いまに至る。こんな感じになった。 Powered by ZenCoding のイメージをクリックすると簡単なヘルプが出てくる。



ちょっと書いたが、そもそも HTML をゼロから書くことが少ない。文書構造を考えたりすることも少ない。それでもちょっとHTMLは日常的に書く。それがどんな時かというと、こうやって blog を書いたりするとき。あるいは Wiki や CMS にちょっとしたものを書くとき。
そういった作業は基本的に textarea で行う。WYSIWYGエディタが付いていたりもするけど、いちいちマウスで選択したりするのが面倒だった。
僕と同じように感じているひとが、ちょっとしたマークアップをストレスなく行えるようになるといいな、と思う。

謝辞

Thanks for Zen-Coding Project !! ( http://code.google.com/p/zen-coding/ )
Extensionを書く上で、 id:os0x さんの連載：続・先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社 がとても参考になりました。。あと AutoPatchWork はソースが公開されていて、設定の保存方法やオプションページの構成を参考にさせていただきました。

参考 URL( Zen-Coding )

参考 URL( Google Chrome Extension )


Enjoy Mark Up!!