キャンペーン、サンネットブログ｜zen-codingのコード構造を可視化する

今、個人的にzen-codingが熱いです。

zen-codingとは何かについては

• 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた
• Zen-Codingで楽々コーディング! + コツ1つ
• マークアップ効率化 - zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)

や、弊社スタッフ安村の書いたコーディング作業の効率化（Zen-Coding！！）|キャンペーン、サンネットブログに紹介されています。

zen-codingにはまっている私としては、2番目のサイトに

展開とCtrl+Zの「やり直し」を繰り返しながら、色々な構造を頭に描いてナゾナゾみたいに挑戦していくと覚えるまでが楽しいです!

と書かれている点に大変共感しますが、一つ不満が出てきました。

それは、zenのコード（って呼べばよいのかな？）は、見返してみると構造があまりにも分かりにくいことです。そこで「(」と「)」に着目して、構造が少しでもわかるように可視化するツールを作成してみました。

zen-coding（zenコーディング）の編集サポートツールです。

このツールでは、上記3番目のYAHOOスタッフ岡部様が紹介されている、

html:4t>#wrapper>(#header>#masthead+#emg+#searchbox+#hdBar)+(#contents>#toptxt+#navi+#division>#main+#sub)+#footer>address

という記述を最初のテキストエリアに貼り付けると、

 html:4t>#wrapper>
　　　(#header>#masthead+#emg+#searchbox+#hdBar
　　　)
　　　+
　　　(#contents>#toptxt+#navi+#division>#main+#sub
　　　)
　　　+#footer>address

という形で３番目のテキストエリアに表示し、構造の可視化を図っています。この形なら、#wrapperの中に#headerと#contentsと#footerが並列の関係にあることがつかみやすいかと思います。

完成度は低いツールですが、こんなツールがあったら良いなというものを自作してみました。もし似たようなより良いツールをご存知の方、あるいは改良してくださる方、ご意見を頂ける方がいらっしゃれば、私のtwitterアカウント宛にでもお知らせ頂ければと思います。（@herikutuへツイートする）