スピリッツオブゼロ@blog > Javascriptテンプレートエンジンを使ってWebサービスアプリを作ってみる

前回の記事でXMLをJSONに変換するライブラリ(jkl-parsexml.js)を利用してビッダーズのアプリをざっと作ってみました。今回はそれに＋してテンプレートエンジン(jkl-hina.js)も使用してWebアプリっぽくしてみました。

jkl-hina.jsとはjkl-parsexml.jsと同じくkawasakiさんのJavascriptライブラリの一つです。HTML部に書いたテンプレートにもとずいてJSONデータを展開してくれます。

<div id="TEMPLATE">
	タイトル: [/title]<br>
	価格: [/price]<br>
</div>

<div id="HERE"></div>

こんな感じにして使うんですが、div#TEMPLATEの[]で囲んだテンプレート変数を展開して、div#HEREに出力します。テンプレートを使用することによってJavascript内で煩雑になりがちな出力画面設計が、キチンと処理とデザインに分離されて後から修正しやすくなると思います。

細かい使い方はjkl-hina.jsのページを見てもらうとしてですね、今回ビッダーズの検索サイトを作った上で苦労したところでも書いてみましょう。

<div title="@if [/bool]">
  真のときはここを表示する
</div>

<div title="@unless [/bool]">
  偽のときはここを表示する
</div>

テンプレート内での条件指定なんですけど、@if [/TITLE]ってな感じでします。これは変数TITLEが存在すればと言うものです。値が存在するか否かを条件指定で使っています。シンプルでいいと思うんですがちょっと複雑な分岐だと出来ません。今回のアプリは、「すべて」「オークション」「即決」「ショッピング」「共同購入」という区分をタブ表示にして、現在検索している区分に色をつけています。

PerlとかJS内部で処理をするなら、kubun=1だったら「すべて」、2だったら「オークション」と言うように変数の値で処理したかったりします。そういう複雑な条件指定が出来ないもんですから、今回とった手段はitem["すべて"]="1"、item["オークション"]="1"という具合に区分をそのまま連想配列の添え字に使ってやれました。そうすれば現在の検索区分だけ連想配列内存在するので、@if [/すべて]、@unless [/すべて]ってな感じで指定する事によりタブ表示ができるようになりました。

あとは複雑な表ができないのかな？これは悩みました。Webサービスは大体10件単位でデータを取ってきます。普通に表示するなら

----------
|　1件目　|
----------
|　2件目　|
----------
|　3件目　|
----------
|　4件目　|
----------
以下続く

こんな感じに縦で表示する事がほとんどです。今回はちょっと違う表示にしたかったので

--------------------
|　1件目　|　2件目　|
--------------------
|　3件目　|　4件目　|
--------------------
|　5件目　|　6件目　|
--------------------
|　7件目　|　8件目　|
--------------------
以下続く

2列5行とか5列2行のTABLEを作りたかったんですけど、自分で試した感じではできなさげだったので固定幅にしちゃってdivをfloat:left;にして逃げちゃいました。divでfloatするとたまに文字数とかが予想を越えて、高さ取っちゃってはみ出たりするんですよね。。。かといって余分に高さの値を与えると、余白ばっかになっちゃうしね。

今回作ったビッダーズアプリのサンプルサイト。

今回作ってみた感想はですね、テンプレ自体に凝らなければ簡単に出来ますね。XML→JSONでビッダーズの商品データをJSONデータに変更して、そのデータを元に加工を加えて新しいJSONデータを作成してテンプレートを適応するって流れですよね。

メールソフト、RSSリーダー、掲示板とかも上手くやってあげればJavascirptとかでいい感じに作れちゃいそうですね。

PS. Javascriptはほとんど知らないのでリファレンスサイトとかで、その都度調べてコード書いていましたけどようやく感じがつかめてきました。

2005-05-29 11:50 PM | Permalink | Web Programing | Comments (0) | TrackBack (1)