Life is beautiful

今年の「書き初め」として作ったFacebookユーザー向けのグループウェアFruence、いくつか細かな機能アップしたので報告しておく。

• 他のユーザーによりプロジェクトに変更が加えられたるとプロジェクトのタイトルを太字で表示
• プロジェクトごとに掲示板をもうけた（プロジェクト内の"Active Threads"）

他にも色々と追加したい機能は沢山あるが、シンプルさを優先して機能を絞るという意味でも、ユーザーの声を聞きながら少しずつ改良して行きたいと思う（リクエストはこのブログのコメントとしていただけるとありがたい）。

ちなみに、クライアント側でHTMLを生成する仕組み（SNBinder）のオープンソース化の準備は着々と進んでいる。今までは Array として扱っていたためにインデックスの扱いが面倒だった部分を、Dictionary に変更したため、テンプレートの変更がとても楽になった。

オープンソース化が待てずに解析を進めている人もいるようだが、最初に見て欲しいのはFruenceで使っているテンプレートファイル。ソースを見ると、

{%}side_bar{%}
<div style='float:left;margin-right:5px'>
    <img src="http://graph.facebook.com/$(.fid)/picture" />
</div>
<div style='float:left'>
    <ul>
        <a id='my_profile' href='#'>
            <li style='font-size:14px;font-weight:bold'>$(.name)</li>
        </a>
    </ul>
</div>
<div style='clear:both'></div>

のようなセクションがいくつか含まれていることが分かると思うが、{%}...{%}で囲まれた部分が各セクションの名前、それ以下の部分がテンプレートである。テンプレート内の"$(.fid)"や"$(.name)"は、その部分を結合するJSONのプロパティで置き換えるべき場所だ。

このテンプレートファイルを前もって読み込んでおき、

$('div#sidebar').html(SNBinder.bind(s_parts['side_bar'], s_myself, 0));

のようにして、サーバーから取得したJSON（この場合は、s_myself）と結合（バインド）させてHTMLを生成して表示する。