OpenSocial Templates サブセットの opensocial-jquery templates 0.1.0 をリリースしました

こんにちは。なかじまんです。

opensocial-jquery の付加機能として opensocial-jquery templates をリリースしました。opensocial-jquery templates は OpenSocial Templates (v0.9) のマークアップ言語である OSML のサブセットとその互換性を提供します。

テンプレートエンジンの中核は Apache Shindig のソースコードを使っています。が、OpenSocial Templates は XML ベースのテンプレートですので、これを HTML ベースになるように書き換えて(かなり苦労してます) jQuery との親和性を高めています。

新しいマークアップ言語を覚える必要はありますが、OpenSocial Templates と互換性があるため、OpenSocial v0.9 時代になっても、その知識や実績が無駄になりにくいと考えていますので、ちょっとした先行投資の意味合いも兼ねて、使ってみて貰えるとうれしいです。

opensocial-jquery templates は、別ファイルにしてありますので、opensocial-jquery に続けて script をロードしてください。

<script src="opensocial-jquery.min.js"></script>
<script src="opensocial-jquery.templates.min.js"></script>

jQuery.getData を使って友達リストを取得し、jQuery.fn.render とテンプレートを使って、その内容を表示する例を紹介します。iGoogle US で実行した結果です。



次の HTML がテンプレートです。友達リストを repeat 属性で繰り返し、サムネイルとニックネームを表示します。また、友達リストの取得位置、1ページあたりの取得件数、総件数を表示します。友達リストが 0件のときは、メッセージを表示します。

<div id="wrapper" style="display:none;">
<div repeat="${people}" class="person">
<img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}" width="30" height="30">
<a title="${Cur.displayName}" href="${Cur.profileUrl || '#'}" 
  target="_top">${Cur.displayName}</a>
</div>
<div if="${people.length > 0}" class="pager">
Showing friends from ${people.startIndex + 1} 
  to ${people.startIndex + people.length } 
  of ${people.totalResults}
</div>
<div if="${people.length == 0}" class="pager">There's no friend yet.</div>
</div>

次は JavaScript です。jQuery.getData を使って OWNER の友達リストを取得します。そして jQuery.fn.render を使って、その友達リストをテンプレートに適用します。

  var url = '/people/@owner/@friends';
  var data = { fields: 'profileUrl' };
  $.getData(url, data, function(data) {
    $('#wrapper').render({ people: data }).show();
  });

詳しくは opensocial-jquery のドキュメント にまとめましたので、参照してください。OpenSocial Templates のサポート範囲や未実装の機能を確認できます。

今のところ opensocial-jquery templates では OpenSocial Templates の全仕様を実装しようとは考えていません。JavaScript のヒアドキュメントの代替として、小さな HTML の組み立てをサポートできるような存在を目的としています。とはいってもまだ発展段階です。何かありましたらコメントください。要望や状況に応じて対応していきます。

opensocial-jquery templates は Apache Shindig の実装を使っているため Apache License 2.0 ライセンスを採用しています。opensocial-jquery 本体とは異なりますので注意してください。今後 opensocial-jquery templates が使えると判断できて opensocial-jquery 本体に組み込むことがあれば、opensocial-jquery 本体も Apache License 2.0 にしたほうがいいのかなと考えています。