Zen-coding、使ってますか？
Zen-codingといえば、コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 | Webookerという記事で、2年前にご紹介したことがあります。
あまりに便利なのでそれ以来ずっと愛用しています。
例えば、Zen-codingをプラグインとして入れたDreamweaverで、
ul>li*3
と書いて「command(control)+,（Sublime Text2ではtabキー）」を押します。
すると、あら不思議！
<ul> <li></li> <li></li> <li></li> </ul>
一瞬にしてリストタグが書けましたね。
他にも
table+
で
<table> <tr> <td></td> </tr> </table>
テーブル一式がセットで書けちゃったり、
div#Wrapper>div.box>p
と打つだけで、
<div id="Wrapper"> <div class="box"> <p></p> </div> </div>
なんてボックス一式が書けちゃったりします。
というのがZen-codingです。便利でしょう？
今回必要になった場面は、絶対配置で指定する日本地図のコーディング
例えばこんな日本地図、よく見かけませんか？
賃貸の【レオパレス21】-マンスリーマンションや賃貸の物件情報満載
全国の都道府県から絞り込んでいくサイトってよくありますよね？Flashで作っちゃうところもあるみたいですが、HTMLで作る場合、47都道府県を絶対配置で置いていく必要があります。
position:absolute; top:10px; left:45px;
こんな感じで。
そうすると、HTMLの方は47個のリンク付き画像が必要になってきます。１つ１つ位置指定が異なるため、id名 ((classでもいいと思いますが、たぶん唯一無二なのでidでマークアップしました。))もつけなくてはなりません。うわー、面倒です、腱鞘炎になります。
というわけで、楽に書くためにZen-codingの書き方をおさらいしてみました。
※今回は、こちらの記事を参考にしています。
Zen-Codingでできるあんなことこんなこと | gaspanik weblog
Zen-Codingの応用でもっと超速に – 原稿ありきの変換について – Yahoo! JAPAN Tech Blog
一行でどこまで指定できるかチャレンジ
自動で連番の数字を降るには、「$」マークがいいらしい。今回は47個なので、二桁必要。そういう場合は「$$」でOK。
空リンクも入れておこう。hrefなど、属性を指定するには[ ]で括れば良いようです。
ってなわけで書いた一行がこれ。
div.mapBlock>a.mapImage#Map$$[href="#"]*47>img[src="./images/map$$.gif"]
展開すると…
↓
<div class="mapBlock"> <a href="#" class="mapImage" id="Map01"><img src="./images/map01.gif" alt=""></a> <a href="#" class="mapImage" id="Map02"><img src="./images/map02.gif" alt=""></a> <a href="#" class="mapImage" id="Map03"><img src="./images/map03.gif" alt=""></a> （略） <a href="#" class="mapImage" id="Map46"><img src="./images/map46.gif" alt=""></a> <a href="#" class="mapImage" id="Map47"><img src="./images/map47.gif" alt=""></a> </div>
無事に必要なコードが生成されました。ちゃんとidも画像名も連番になっています。捗るわー、これ！
実は次期バージョンも！その名も”Emmet”
Zen-codingの作者によって、次期バージョンが制作されているようです。Emmetというそうです。どんな内容かはこちらのサイトに詳しく書かれています。サンプルテキストが入れられるらしい…。それってめっちゃ重宝しそうです。
Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17
今から楽しみです。
ちょっとでもZen-codingの記法に慣れて、Emmetを待ち受けたいと思います。