2009-09-24

opensocial-jquery templates 0.1.0 is available. It's HTML DOM based JavaScript template library for OpenSocial Application.

Hello,

My name is Nobuhiro Nakajima, Japanese programmer.

I'm afraid my expressions may be rude or hard to read, because I'm not so good at English. But please, please be patient! I will try hard to learn English!

opensocial-jquery templates 0.1.0 is available.
http://code.google.com/p/opensocial-jquery/

opensocial-jquery templates is HTML DOM based JavaScript template library for OpenSocial Application. It is based on implementation of Apache Shindig and has compatibility with subset of OpenSocial Templates.

opensocial-jquery templates supports the following markup in OSML:

* ${Expr} variables and expressions into a element text and a attribute
* Set of special variables: Top, Cur, Context.index, Context.Count and Msg
* Set of special attributes: if, repeat, and var

This example is fetching and rendering a group of people using Ajax and Template.



The HTML template is as follows:
<div id="wrapper" style="display:none;">
<div repeat="${people}" class="person">
<img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}" />
<a title="${Cur.displayName}" href="${Cur.profileUrl}">${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>
The JavaScript is as follows:
$.getData('/people/@owner/@friends', function(data) {
$('#wrapper').render({ people: data }).show();
});
View of the finished source code

opensocial-jquery templates is usable with the container which does
not support OpenSocial v0.9. And different from OpenSocial Templates of the XML base, you can edit opensocial-jquery templates by an HTML authoring tool visually. It will make a programmer and a designer happy.

Thank you.

2009-09-22

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 にしたほうがいいのかなと考えています。

2009-09-05

opensocial-jquery 1.0.5 をリリースしました。OAuth リクエストと認証、Album と MediaItem の取得、People と AppData の同時取得に対応しました。

おはようございます。なかじまんです。

opensocial-jquery 1.0.5 をリリースしました。今回のリリースは、OAuth リクエストと認証、アルバムと写真の取得、プロフィールとアプリデータの同時取得という 3つの対応が柱です。

OAuth リクエストと認証

jQuery.ajax を使って、OAuth リクエストを認証して、外部ホストからデータを取得したり送信したりできるようにしました。

gooホームのガジェットから FriendFeed にメッセージを投稿する サンプルのソースコードと解説 を用意していますので、ソースコードの雰囲気を体感してみてください。また、このガジェットが動作する様子をキャプチャして動画にしましたので、再生してみてください。



jQuery.ajax を使って、リクエストを OAuth 認証して、外部ホストにデータを送信できます。
  $.ajax({
type: 'post',
url: 'http://friendfeed-api.com/v2/entry',
data: { body: 'Say Hello!' },
dataType: 'json',
oauth: 'friendfeed',
success: function(data, status) {
console.info(data, status);
},
error: function(xhr, status, e) {
if (status == 'oauth')
$('<a href="#signin"/>')
.text('Sign in with FriendFeed')
.click(function() {
$.oauth('friendfeed', function() {});
return false;
})
.minimessage();
console.error(xhr, status, e);
}
});
このとき、jQuery.ajax の oauth オプションに、ガジェットXML の OAuth/Service@name を指定します。
  <OAuth>
<Service name="friendfeed">
<Request url="https://friendfeed.com/account/oauth/request_token"
param_location="uri-query"/>
<Authorization url="https://friendfeed.com/account/oauth/authorize"/>
<Access url="https://friendfeed.com/account/oauth/access_token"
param_location="uri-query"/>
</Service>
</OAuth>
jQuery.ajax は OAuth リクエストの認証を必要とするとき、エラーイベントをコールバックします。このとき status は oauth を表します。続けて jQuery.oauth を使って OAuth リクエストを認証できます。このとき、指定した OAuth/Service@name の認証ページをポップアップウィンドウで開きます。OAuth 認証してポップアップウィンドウを閉じると、コールバックしますので、その中から処理を再開できます。

詳しくは API リファレンス を見てください。なお OAuth リクエストと認証は gooホームでのみ動作確認しています。今後、他のコンテナでも動作確認をしつつ対応を進めていきます。

アルバムリストの取得

jQuery.ajax を使って VIEWER の アルバムリストを取得できます。
  $.ajax({
url: '/albums/@viewer/@self',
data: {},
dataType: 'data',
success: function(albums) {
$.each(albums, function(i, album) {
console.info(album.id);
console.info(album.title);
console.info(album.description);
console.info(album.thumbnailUrl);
console.info(album.ownerId);
console.info(album.mediaItemCount);
});
},
error: function(xhr, status, e) {
console.error(xhr, status, e);
}
});
詳しくは API リファレンス を見てください。なお、アルバムリストの取得は orkut 仕様に準じていて orkut のみで動作確認をしています。mixi での動作確認はしていませんので、フィードバックを期待してます。

アルバムの写真リストの取得

jQuery.ajax を使って VIEWER の アルバムの写真リストを取得できます。URL でアルバムID を指定します。
  $.ajax({
url: '/mediaitems/@viewer/@self/1251149609611',
data: {},
dataType: 'data',
success: function(mediaitems) {
$.each(mediaitems, function(i, mediaitem) {
console.info(mediaitem.id);
console.info(mediaitem.url);
console.info(mediaitem.title);
console.info(mediaitem.description);
console.info(mediaitem.thumbnailUrl);
console.info(mediaitem.albumId);
});
},
error: function(xhr, status, e) {
console.error(xhr, status, e);
}
});
詳しくは API リファレンス を見てください。なお、写真リストの取得は orkut 仕様に準じていて orkut のみで動作確認をしています。mixi での動作確認はしていませんので、フィードバックを期待してます。

プロフィールとアプリデータの同時取得

プロフィールや友達リストを取得するとき、appData パラメータを指定して、アプリケーションのデータを同時に取得できます。アプリケーションのデータ項目はカンマ区切りで指定します。

今までは、プロフィールや友達リストの取得と、アプリケーションのデータの取得が別々の 2段構えでしたが、これが 1回の jQuery.ajax で取得できるようになりますので、さらにソースコードがシンプルになるのではと期待しています。
  $.ajax({
url: '/people/@viewer/@self',
data: { appData: 'comment,feeling' },
dataType: 'data',
success: function(people) {
var person = people[0];
console.info(person.appData.comment);
console.info(person.appData.feeling);
},
error: function(xhr, status, e) {
console.error(xhr, status, e);
}
});
詳しくは API リファレンス を見てください。

質問や不具合の報告などのフィードバックは大歓迎です。また、修正パッチや拡張コードの提供も歓迎します。

海外の方から opensocial-jquery 1.0.4 や 1.0.5 を jQuery 1.3.2 に書き直したものの提供も受けています。近いうちに公開しますので、もう少しお待ちください。

追記です。jQuery.param のエンコード方法を書き換えました。今までは、空白を + にエンコードしていましたが、これを %20 でエンコードするようにしました。おそらく影響はないと思いますが、お伝えしておきます。

追記です。@datoka さん。フィードバックありがとうございました。
@datoka @nakajiman opensocial jquery v1.0.5 album, mediaitemともmixiで動いております!パラメータ指定は(元々)無視されますが