Emmet で a-blog cms コーディングな実験 - 気づいたら、ここだった

これを遅刻した新幹線の中で書いている。とりかえしのつかない時間を、なんとか有効に(ry

Sublime Text 2 を最近良く使うようになってきたけど、先週WTMに参加してみたら某井上くんがEmmet（旧 Zen Coding）なんてものを紹介してくれていたので、早速入れておいた。

そしたら、a-blog cms を単に公式にあるスニペットを貼り付けるより、Emmet的に追加しておいたほうが楽なんじゃまいかと言う疑惑がでてきたので、実験してみることにしました。

だって、スニペットって一旦入れて、いらないところを消したり書き換えたりして使うよね？
最初から必要なところだけサクッと展開できたら楽かな？と

とりあえずやってみる

Sublime Text 2 のメニューで Preferences > Package Settings > Emmet > Setttings - User を選んで、そこにsnippetを書くと適用されるらしい。

たとえばこう

 "acm:eb": "<!-- BEGIN_MODULE Entry_Body id=\"${id}\" -->\n${child}|\n<!-- END_MODULE Entry_Body -->",

そうすると、acm:eb と打って ctrl + e でEntry_Bodyが展開される。
${child} に子要素が入ってくれるので、例えば

acm:eb>#body>p>a

と打って ctrl + e で

<!-- BEGIN_MODULE Entry_Body id="id" -->
<div id="body">
	<p><a href=""></a></p>
</div>
<!-- END_MODULE Entry_Body -->

と展開できるようになるのね。

どうタイプするようにしようか悩ましいけど、a だけだとアンカータグみたいだし、acms は長いし・・・とりあえず基本は ac モジュールは acm で入れてみた。
・・・というわけで、とりあえずEntry_Bodyに関連する部分だけ書いてみたのをgithubに置いといた。
これで、モジュールID testModule の Entry_body に entry:loop を入れて、カスタムフィールド hogehoge を表示するには

acm:eb[id="testModule"]>ac:el>#body>.title{{title}}+p{{hogehoge}}

で、

<!-- BEGIN_MODULE Entry_Body id="testModule" -->
<!-- BEGIN entry:loop -->
<div id="body">
	<div class="title">{title}</div>
	<p>{hogehoge}</p>
</div>
<!-- END entry:loop -->
<!-- END_MODULE Entry_Body -->

と出てくる。じぇじぇじぇ。

こいつを入れて、a-blog cmsにオマケでついてくるスニペットを再現するコードは・・・・・こう！

acm:eb>ac:nf>p{お探しのエントリーは見つかりませんでした。}^ac:sn>ul>li>ac:prnf{prev not found}+ac:prl>a[href="{url}"]{<< {name}[trim(27, '...')|escape]}^^li>a[href="{upperUrl}"]{一覧へ}^li>ac:nenf{next not found}+ac:nel>a[href="{url}"]{{name}[trim(27, '...')|escape] >>}^^^^ac:el>div>ac:date>p{{date#Y}.{date#m}.{date#d}}^ac:new>p{新着}^^div>ac:inc[file="/admin/entry/title.html"]+ac:ti>div>h2>a[href="{titleUrl}"]{{title}[raw]}^ac:ca>p{カテゴリー：}>ac:cal>span>a[href="{url}"]{{name}}^ac:gl{<}^^^^^div>ac:co>ac:inc[file="/include/column.html"]+hr^ac:cont>p>a[href="{continueUrl}"]{「{continueName}」の続きを読む}^^ac:admee>ac:inc[file="/admin/entry/edit.html"]+ac:inc[file="/admin/entry/add.html"]^ac:tag>p{関連タグ：}>ac:tagl>a[href="{url}"]{{name}}^^^ac:inc[file="/admin/entry/action.html"]^ac:foo>div>p{Posted by {posterName} at {date#H}:{date#i}  }>a[href="{inheritUrl}#permalink"]{パーマリンク}+ac:tba>a[href="{trackbackUrl}#trackback"]{トラックバック ( {trackbackAmount} )}^ac:coma>a[href="{commentUrl}#comment"]{コメント ( {commentAmount} )}^^^^^^ac:pa>p{全 {itemsAmount} 件中 {itemsFrom} 〜 {itemsTo} 件目を表示}>ac:pal>ac:palink+ac:gl{, }^ac:lastp{...}>a[href="{lastPageUrl}"]{lastPage}^^p>ac:blin>a[href="{url}"]{« 前の{backNum}件}^ac:flin>a[href="{url}"]{次の{forwardNum}件 »}^^^ac:mic>p{全 {itemsAmount} 件中 {itemsFrom} 〜 {itemsTo} 件目を表示}>>ac:pal>ac:palink+ac:gl{, }^ac:lastp{...}>a[href="{lastPageUrl}"]{lastPage}^^p>ac:blin>a[href="{url}"]{« 前の{backNum}件}^ac:flin>a[href="{url}"]{次の{forwardNum}件 »}^^^^ac:micv>ac:miclin>p>a[href="url"]{{label}}

なげぇわ！
・・・ショートカット acm:eb! に入れといたよ。意味あるかわかんないけど、やってみたというだけ。

Emmet使いな人が居るなら今後の展開も考えたい（いまのところ需要がないかもしれない）
・・・特に、かなり適当に書いたので。