opensocial-jquery 1.0.0, 1.0.1 とそのドキュメントを公開しました。

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

opensocial-jquery ドキュメント を見直して、最新バージョンである 1.0.0 と 1.0.1 を反映しました。opensocial-jquery 1.0.0 と 1.0.1 は、半月ほど前にリリースしていますが、まだ紹介していませんでしたので、この機会にアウトラインをお伝えします。

アクティビティ

jQuery.ajax を使って、アクティビティを保存できます。jQuery.post や jQuery.postData のショートカットも使えます。

$.ajax({
type: 'post',
url: '/activities/@viewer/@self',
data: {
title: 'Say Hello!'
mediaItems: [{
mimeType: 'image/gif',
url: 'http://example.com/data.gif'
}]
},
dataType: 'data',
success: function() {},
error: function(xhr, status, e) {
console.error(xhr, status, e);
}
});

jQuery.ajax を使って、アクティビティを取得できます。jQuery.get や jQuery.getData のショートカットも使えます。

$.ajax({
url: '/activities/@viewer/@self',
data: {},
dataType: 'data',
success: function(activities) {
$.each(activities, function(i, activity) {
console.info(activity.title);
$.each(activity.mediaItems, function(i, mediaItem) {
console.log(mediaItem.mimeType);
console.log(mediaItem.url);
});
});
},
error: function(xhr, status, e) {
console.info(xhr, status, e);
}
});

メッセージ

jQuery.ajax を使って、メッセージを送信できます。jQuery.post や jQuery.postData のショートカットも使えます。

{{{
$.ajax({
type: 'post',
url: '/messages/@viewer/@outbox',
data: {
recipients: '@owner',
title: 'Say hello!',
body: 'You should be shining!'
},
dataType: 'data',
success: function(data, status) {},
error: function(xhr, status, e) {
console.log('error', xhr, status, e);
}
});
}}}

キャッシュ

jQuery.proxy を使って、プロキシ経由の URL を取得できます。

$('<img/>').attr('src',
$.proxy('http://example.com/data.gif')
);

ガジェット間のメッセージ

jQuery.sub と jQuery.pub を使って、ガジェット間でメッセージを送受信できます。

$.sub('YOUR_CHANNEL', function(sender, data) {
console.info(sender, data);
});
$.pub('YOUR_CHANNEL', 'Say Hello!');
$.pub('YOUR_CHANNEL', { comment: 'Say Hello!' });

タブ

jQuery.fn.tabs を使って、タブを表示できます。

<script type="text/javascript">
jQuery(function($) {
$('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#dog" title="tab of dog">DOG</a></li>
<li><a href="#cat" title="tab of cat">CAT</a></li>
</ul>
<div id="dog">contents of dog</div>
<div id="cat">contents of cat</div>
</div>



クロスコンテナ

jQuery.container.goohome を使って、goo Social Platform かどうか判別できます。

if ($.container.goohome) {
// This container is goo home.
}

CSS のクラスを使って、goo Social Platform かどうかを判別できます。

.goohome div.photo img { /* This container is goo home. */ }

デモ

goo Social Platform で、オンラインの友達をサムネイル表示するガジェット です。次のスクリーンショットのように、左列に配置して使ってください。



以上です。さらに詳しくは opensocial-jquery ドキュメント をみてください。