Jemplateを試してみた

Jemplate というJSON的テンプレートエンジンができていて、ちょっと注目していました。 概要は下記がわかりやすいです。 naoyaのはてなダイアリー – JSON を Template-Toolkit で展開する Jemplate

FOR 文などのループ処理もできるようになったそうで。だんだん進化してるみたいです。

自分も簡単なものから、ちょっと試してみることに。

このblogトップに出している del.icio.us/masawo の一覧を出すやつは、del.icio.us/help/jsonによるJSON Feedを使って表示させています。 これをDOMで出力しているところを、代わりにJemplateを使ってみるテスト。

delicious.tt (テンプレート)

<ul>
[% FOR item = list %]
<li><a target="_blank" href="[% item.u %]"[% IF item.n %] title="[% item.n %][%
END %]">[% item.d %]</a>
[% END %]
</ul>

…これを jemplate コマンドを使って、js/delicious.js にコンパイルしたものをHTMLに読ませます。

delicious.html (実際に表示させるHTML)

<html>
<head>
<script type="text/javascript" src="js/Jemplate.js"></script>
<script type="text/javascript" src="js/delicious.js"></script>
<script type="text/javascript" src="http://del.icio.us/feeds/json/masawo?count=2
0"></script>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
var obj = { 'list' : Delicious.posts };
var elem = document.getElementById('output');
elem.innerHTML = Jemplate.process('delicious.tt', obj);
</script>
</body>
</html>

おお、ちゃんとブックマーク一覧が表示されました。すばらC。

サンプルはこちら。

JSONを提供しているサイトであれば、いろいろ応用が利きそうですね。Yahoo!inc. のとか。

XML を JSON に変換するサービス などの力を借りればXMLを提供しているサイトでもOKですね。

【つまずいた点】

テンプレートに [% FOR item = list %] と書いたうえで、呼び出しHTML側で当初

var obj = Delicious.posts;

とやってみたが、オブジェクトがないYOというエラーになってしまった。

del.icio.us のJSON Feed だと、

Delicious.posts = [{"u":"…", "d":"…", "t":"…"}, {"u":"…", "d":"…", "t":"…"}, …]

のように一番上の要素のkeyに何も指定がない形式なので、テンプレートに指定した通りに読ませるには

var obj = { ‘list’ : Delicious.posts };

のようにしなければならないのだった。ここで小一時間ハマりましたとさ。orz