Ad Network

あわせて読みたい

  • あわせて読みたい

« FacebookアプリFruence:掲示板機能追加 | Main | 組み込みデバイスの開発にこそ必要な「おもてなし設計」 »

JavaScript HTMLテンプレートエンジン SNBinder 公開

先日予告したSNBinderのオープンソース化、GitHubに簡単なREADME付きでアップロードしたのでご覧いただきたい。

    https://github.com/snakajima/SNBinder

SNBinderは、ひと言で言えば「ブラウザー上でView(テンプレート)とData(JSON)を結合して HTML を生成するテンプレートエンジン」である。

90年の半ばから急速に広まったインターネット。サーバー側でダイナミックに生成したHTMLページをブラウザーで閲覧するだけ、というシンプルでエレガントなアーキテクチャゆえの成功だ。しかし、ブラウザーの高機能化に伴い、JavaScriptを駆使して使いやすさを向上しようという試みが色々なウェブサイトで行われている。GMail、Google Docs、Facebookなどは良い例だ。

その方向性を究極にまで突き詰めると、サーバー側は(MVCのModelとして)JSON over HTTPのAPIだけを提供し、ユーザーとのやりとりはJavaScriptが(Controllerとして)100%担当する "ピュアAJAXアーキテクチャ" (参照)になる。

このアーキテクチャは、利点としては、

  • サーバー側とクライアント側がAPIで明確に分離された疎結合になる
  • ブラウザーとモバイルアプリ(例えばiPhoneアプリ)でAPIを共有できる
  • デスクトップ・アプリのような使い勝手(おもてなし)を実現することが可能になる

などがあるが、一方では、

  • サーチエンジンがアプリ内の個別ページを見つける事が出来ない
  • ページへのパーマリンクを張ることが出来ない

という性質(用途によっては欠点)がある。つまり、先に挙げたGMail、Google Docs、Facebookのような、個別ページをサーチエンジンでクロールされる必要のない(もしくはして欲しくない)、ユーザーごとに異なるデータを表示したいアプリ(パーソナルアプリ、ソシアルアプリ、グループウェア、業務アプリなど)に適している。

そんなアーキテクチャのアプリを実現するには、上に書いた通りブラウザー上で View(HTMLテンプレート)とData(サーバーから取得したJSONオブジェクト)の結合をする必要があるが、それを担うのがこの SNBinder である。

詳しい使い方は、READMEを読んでもらうのが一番だが、簡単に解説すると、

    var template = "<p>Hello, $(.name)!</p>";
    var user = { "name":"Leonardo da Vinci" };
    $('.body').htm(SNBinder.bind(template, user));

とすることにより、"<p>Hello, Leonardo da Vinci!</p>"というHTMLを生成する、というのがSNBinderの役目。実際のアプリではテンプレートもJSONオブジェクトもサーバーから取得するので、

    SNBinder.load_named_template("/static/templates.htm", function(templates) {
        SNBinder.get("/user/info", nil, true, function(user) {
            $('.body').htm(SNBinder.bind(templates("main", user));
        });
    });

のように書く事になる。

SNBinderを使った具体例としては、Facebookユーザー向けのグループウェア Fruence が公開済みなので、興味のある方はそちらのソースも参照していただきたい。

ライセンスはMITライセンスで、私のコピーライト表示を含んだヘーダーを維持したままであれば再配布も変更も自由にしていただいてかまわない。

【追記】試していただいた方から2、3の不具合がレポートされていたので(参照)、修正したものをGitHubにあげておいた(バージョンナンバーは同じ)。変更点は、

  • 一カ所、IEで不具合を起こすtrailing commaがあったのでこれを削除
  • JSONを自動的にパースするjQueryの最新版(1.4.4)でも動く様に修正
  • グローバル空間を汚していた debug という変数を封じ込めた
  • READMEのタイポを修正

の4つである。最初のうちはIEでもテストを繰り返していたのだが、最近はすっかり安心して Safari/Firefox/Chrome上でのテストで十分と甘く見ていたのがいけなかった。あと、jQueryは1.3.2以来アップデートしていなかったので、ある時点で$.ajaxがJSONを自動パースするように変更されていたとは知らなかった。

ちなみに言い忘れていたが、ローカルな環境(localhost://8xxx)で走らせると意図的に通信の部分に200msの遅延を挿入している。ローカルならサクサク動くのに、サーバーにアップロードしたとたんに使い勝手が悪くなった、ということを避けるためのものだ。

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef0147e1d04412970b

Listed below are links to weblogs that reference JavaScript HTMLテンプレートエンジン SNBinder 公開:

Comments

aaa

これは良さそうなので機会があれば使ってみます。

bear.mini

jQuery Templates Plugin (http://api.jquery.com/category/plugins/templates/) との違いはどう言った点が挙げられるのでしょうか?また、jQuery Templates Plugin と共存はできるでしょうか?

jQuery Templates は HTML の中に script タグとしてヒアドキュメント的にテンプレートを書くことができたり、テンプレートにテンプレートをネストさせたりできるので、これで十分間に合ってるのですが、もし SNBinder のほうが優位な点があるなら、導入してみたいですね。
(個人的にはとりあえず使ってみて違いを理解しようと思いますが、多数の人にアプローチするなら、そういった比較優位性をアピールしておいたほうがいいかなと思いまして。)

Akiyah

興味があってサンプルを作ってみました。
http://jsdo.it/Akiyah/uPDQ

テンプレートを別ファイルにおいておけるのは良いですね。
(別ファイルではまだ試していませんが)

SNBinder.getは同じドメインのJSONオブジェクトしか呼べないようですね。上記サンプルにコメントをもらって気がつきました。優先順位は高くないかもしれませんが、いつか対応していただければとおもいます。

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.