Life is beautiful

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

    https://github.com/snakajima/SNBinder

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

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

その方向性を究極にまで突き詰めると、サーバー側は（MVCのModelとして）JSON over HTTPのAPIだけを提供し、ユーザーとのやりとりはJavaScriptが（Controllerとして）１００％担当する "ピュア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ライセンスで、私のコピーライト表示を含んだヘーダーを維持したままであれば再配布も変更も自由にしていただいてかまわない。

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

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

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

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