opensocial-jquery OpenSocial ガジェット向けにカスタマイズした jQuery とそのプラグインです

おはようございます。なかじまんです。opensocial-jquery 0.1.0 をリリースしました。

opensocial-jquery は、OpenSocial ガジェット (アプリケーション) 向けにカスタマイズした jQuery とそのプラグインです。opensocial-jquery を使うと、OpenSocial API と Gadgets API をほとんど意識することなく、jQuery を使ってウェブサイトを開発するノリで OpenSocial ガジェットを開発できます。

実例

まずは、サンプルのソースコードを紹介します。ガジェットのソースコードですが、jQuery を使ってウェブサイトを開発するのと変わらないでしょ?



<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="jQuery.getJSON - samples - opensocial-jquery">
<Require feature="dynamic-height" />
<Require feature="settitle" />
</ModulePrefs>
<UserPref name="tag" default_value="dog" required="true" />
<Content type="html"><![CDATA[
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.gadgets.js"></script>
<script type="text/javascript">
jQuery(function($) {

// Retrieves a preference as a string.
var tag = $.pref('tag');

// Sets the gadget title.
$(window).title(tag + ' - YouTube');

// Fetches content from the YouTube that content into the callback function.
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { vq: tag, 'max-results': 21, alt: 'json' };

$.getJSON(url, data, function(json) {

$.each(json.feed.entry, function() {

var img = $('<img width="80" heieht="60" />')
.attr('src', this.media$group.media$thumbnail[0].url);

$('<a target="_blank" />')
.attr('href', this.media$group.media$player[0].url)
.append(img)
.appendTo('#videos');
});

// Adjusts the gadget height.
$(window).adjustHeight();
});

});
</script>
<style type="text/css">
<!--
#videos img {
border: 0;
margin: 2px;
width: 80px;
height: 60px;
}
-->
</style>
<div id="videos"></div>
]]></Content>
</Module>

opensocial-jquery は jQuery 本体の改良とプラグインから構成しています。

jQuery 本体

(1) jQuery.ajax

jQuery.ajax を介したリクエストは、すべて gadgets.io.makeRequest に橋渡しします。すべてのリクエストがガジェットサーバのプロキシで中継されます。そのため、クロスドメインリクエストの制約がありません。

text, html, xml, json, jsonp, script すべての dataType が使えます。jsonp や script であっても Gadgets サーバのプロキシで中継します。もちろん jQuery.ajax のショートカットである jQuery.fn.load, jQuery.get, jQuery.post, jQuery.getJSON, jQuery.getScript も使えます。

(2) dataType="feed" と jQuery.getFeed

jQuery.ajax の dateType として feed を追加しました。gadgets.io.makeRequest でgadgets.io.ContentType.FEED を指定したのと同じです。ショートカットとして jQuery.getFeed が使えます。

(3) jQuery(function() {}) と jQuery.ready

ガジェットコンテナのライフサイクルを尊重し、gadgets.util.registerOnLoadHandler のタイミングで ready イベントが起こるようにしています。

jQuery プラグイン

(4) jQuery(window).title

ガジェットのタイトルを変更できます。gadgets.window.setTitle に橋渡ししています。

(5) jQuery(window).adjustHeight

ガジェットの高さを自動調整します。高さを指定することもできます。gadgets.window.adjustHeight に橋渡ししています。

(6) jQuery.pref

ガジェットのユーザ設定を取得します。gadgets.Prefs.getString に橋渡ししています。

Shindig feature

opensocial-jquery は Shindig feature 形式でアーカイブしています。Shindig の feature として追加すると、次のように Require要素で opensocial-jquery の JavaScript 群をインポートできます。そのため script タグは不要です。

<ModulePrefs title="jQuery.getJSON - samples - opensocial-jquery">
<Require feature="opensocial-jquery" />
</ModulePrefs>

今後の予定

(a) jQuery.ajax を OAuth に対応することを検討しています。OAuth やその手続きをなるべく意識せずに使えればベストです。OAuth の深い知識が必要かな。やっぱり。

(b) gadgets.* を jQuery ライクに取り込んでいきます。よく使うと思われるものから優先的に取り組みます。はじめは gadgets.views が候補です。canvas ビューなど、複数のビューを使うことをサポートします。

(c) 各 opensocial.DataRequest を jQuery ライクに取り込みます。jQuery.getData を追加して "/people/@me/@friends" のように OpenSocial RESTful Protocol や RPC Protocol 的に条件指定できることを検討しています。各 opensocial.request* は jQuery.postData として追加することを検討しています。

opensocial-jquery を通じて、OpenSocial ガジェットの開発に貢献できればと願っています。以上、リリースのお知らせでした。