opensocial-jquery は jQuery プラグインと組み合わせて使えます。

こんばんは。なかじまんです。

opensocial-jquery は OpenSocial ガジェット向けに jQuery 本体に手を入れていますが、jQuery.ajax の Deferred 対応 を除いては、jQuery 自体の機能やインタフェースの互換性を保っています。

ですので、jQuery で WEB アプリケーションを作るとの同じ方法で、OpenSocial ガジェットを作ることができます。また、jQuery で作った WEB アプリケーションがあれば、最低限の労力で OpenSocial ガジェットに転換できます。

1つガジェットの例を紹介します。次のガジェットは opensocial-jquery と jQuery Cycle Plugin を組み合わせて、自分の友達のプロフィールアイコンをスライドショーで表示するものです。

ガジェットのスクリーンキャプチャを用意しました。goo Social Platform で動かしています。スライドショーの動画でその様子を確認してください。



ガジェットのソースコードは、次のとおりです。ガジェットXML の Content 要素の部分を抜粋したものです。

opensocial-jquery に続けて jQuery Cycle Plugin をロードしています。$.getData や $.fn.minimessage は opensocial-jquery に含まれるプラグインです。それ以外のコードは、WEB アプリケーションを作るときの jQuery のコードと同じです。でしょう？

<Content type="html" view="home,profile"><![CDATA[
<script type="text/javascript" src="http://example.com/opensocial-jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
jQuery(function($) {

// people
$.getData(
'/people/@owner/@friends', { count: 100, sortBy: 'random' }
).next(function(people) {

var cycle = $('#cycle').empty();

$.each(people, function(i, person) {

var img = $('<img />')
.attr('alt', person.displayName)
.attr('src', goohome.util.convertThumbnailSize(
person.thumbnailUrl, goohome.ThumbnailUrl.Size.EXTRA_LARGE
))
.click(function() {
window.open(person.profileUrl, '_top');
})
.appendTo(cycle);
});

cycle.cycle({
fx: $.pref('fx')
});

// error
}).error(function(e) {

$('<span/>')
.text('An unexpected error occurred: ' + e)
.minimessage();
});

});
</script>
<div id="cycle">読み込み中 ...</div>
]]></Content>

スクリーンキャプチャの動画は Free Screen Recorder を使って作成しました。これ操作が簡単で YouTube にアップロードするための加工や変換も必要ありません。これ。いいっす。大発見です。