opensocial-jquery 0.5.1 MySpace と Partuza フィード形式のクロスコンテナ対応

おはようございます。なかじまんです。opensocial-jquery のマイナーアップデートのお知らせです。MySpace と Partuza (Shindig PHP) との互換性を高めました。

MySpace

MySpace 独自のフィード形式を Shindig 形式に変換するようにしました。これにより、次のソースコードが MySpace でも他のコンテナでも、修正や調整することなく、同じ振る舞いをするようになりました。

http://code.google.com/p/opensocial-jquery/wiki/AjaxFeed

$.ajax({
url: 'http://rss.rssad.jp/rss/gihyo/feed/rss2',
data: {},
dataType: 'feed',
success: function(feed) {
console.info(feed.URL);
console.info(feed.Link);
console.info(feed.Title);
console.info(feed.Description);
console.info(feed.Author);
$.each(feed.Entry, function(i, entry) {
console.info(entry.Link);
console.info(entry.Title);
// console.info(entry.Summary);
console.info(entry.Date);
var date = new Date();
date.setTime(entry.Date);
console.info(date.toLocaleString());
});
},
error: function(xhr, status, e) {
console.info(xhr, status, e);
}
});

また、MySpace はエラーレスポンスも独自の形式 であるため、MySpace のときだけ固有のエラーハンドリングをし、その差を吸収するようにしました。

MySpace でいろいろ気が付くことがありました。どうやら RSS 2.0 形式しか扱えないようです。また、gadgets.io.makeRequest のオプションに GET_SUMMERIES を指定すると、必ずエラーになるようです。何か勘違いしてるかもしれませんが、参考までお伝えしておきます。

Partuza (Shindig PHP)

Partuza (Shindig PHP) は Entry.Date が秒単位であるため、Partuza (Shindig PHP) のときだけミリ秒に変換し、その差を吸収するようにしました。長瀬さん のコメントによる対応です。貴重な情報をありがとうございました。

サンプルの訂正

Picasa Web Albums 中の JavaScript のロード URL が間違っていましたので訂正しました。

opensocial-jquery の日本語ドキュメントを公開します。

おはようございます。なかじまんです。opensocial-jquery 日本語ドキュメント公開のお知らせです。

今まで opensocial-jquery は、このブログのエントリで、特徴や技術的なトピックを断片的にしかお伝えしていませんでした(つまり、サボっていました)。が、ちょっとだけ頑張って、日本語ドキュメントを用意できました。

opensocial-jquery 日本語ドキュメント



ドキュメントは、なるべく 読む というストレスを感じないように、小さなソースコードの実例を並べて、小さく説明するというスタイルをとっています。ですので、ざっと流し見をして 何か感じてもらえれば... というのが目標としているところです。

いままでは、謎が多く、ソースコードを解析しないと使えない印象があったと思いますが、このドキュメントを見れば、何ができて、何ができないのか、どんなメリットがあるのか、デメリットがあるのか、手軽に判断できるようになったと期待しています。

デブサミの日程に合わせてでしょうか? mixi に続いて gooホーム も OpenSocial プラットフォーム化のアナウンスがありました。プラットフォームが広がってくると、どうアプリケーションを開発するか、といった議論が広がってくるに違いないです。その中で opensocial-jquery が1つの選択や方向性のヒントになればいいなという感じです。

安藤日記 [&] Developer Summit 2009 (OpenSocial)
天使やカイザーと呼ばれて: デブサミ2009「OpenSocialパネルディスカッション」に参加してきました
デブサミ2009で『OpenSocial パネルディスカッション』開催 Kawa.netブログ（川崎有亮）/ウェブリブログ
デブサミ2009で『OpenSocial パネルディスカッション』開催 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ
デブサミ2009のOpenSocial関連の話題がほとんどない件に関して - 0-9

opensocial-jquery 0.5.0 jQuery.ajax deferred と appdata の対応と people の強化

なかじまんです。opensocial-jquery 0.5.0 をリリースしました。主な内容は、次のとおりです。

次のとおり、プロフィールや友達リストを取得するとき、プロフィール項目、フィルタ条件、ソート条件、ページング条件を指定できるようになりました。指定できる項目や条件は は Wiki にまとめています。

$.ajax({
url: '/people/@viewer/@friends',
data: {
fields: 'profileUrl,addresses',
filterBy: 'hasApp',
sortBy: 'name',
startIndex: 0, count: 10
},
dataType: 'data',
success: function(people) {
console.info(people.startIndex);
console.info(people.itemsPerPage);
console.info(people.totalResults);
$.each(people, function(i, person) {
console.info(person.id);
console.info(person.nickname);
});
},
error: function(xhr, status, e) {
console.info(xhr, status, e);
}
});

次のとおり、アプリケーションのデータを保存できるようになりました。指定できるデータや条件 は Wiki にまとめています。

$.ajax({
type: 'post',
url: '/appdata/@viewer/@self',
data: {
comment: { text: 'Say Hello!', lastModified: new Date().getTime() },
feeling: 'well',
footprint: true
},
dataType: 'data',
success: function() {},
error: function(xhr, status, e) {
console.error(xhr, status, e);
}
});

また、次のとおり、アプリケーションのデータを取得できるようになりました。取得するデータや条件 は Wiki にまとめています。

$.ajax({
url: '/appdata/@viewer/@friends',
data: { fields: 'comment,feeling' },
dataType: 'data',
success: function(data) {
$.each(data, function(userId, data) {
console.info(data.comment.text);
console.info(data.comment.lastModified);
console.info(data.feeling);
});
},
error: function(xhr, status, e) {
console.error(xhr, status, e);
}
});

Enhancing of jQuery.ajax with JSDeferred を組み込みました。これにより、JSDeferred を使って jQuery.ajax が拡張され、次のとおり、非同期メソッドのチェーンとエラーハンドリングが容易になりました。

$.ajax({
url: '/people/@viewer/@friends',
data: {},
dataType: 'data'
}).next(function(people) {
return $.ajax({
url: '/appdata/@viewer/@friends',
data: {},
dataType: 'data'
}).next(function(data) {
return $.map(people, function(person) {
if (data[person.id])
person.data = data[person.id];
return person;
});
});
}).next(function(people) {
$.each(people, function(i, person) {
console.info(person.id);
console.info(person.data);
});
}).error(function(e) {
console.error(e);
});

次のとおり、feature が利用できるか確認でき、その feature パラメータを取得できるようにしました。

var params = $.feature('locked-domain');
if (!params ) {
// locked-domain is not supported.
} else {
console.info(params.foo);
console.info(params.bar);
}

MySpace Developer Platform での動作を確認しました。MySpace はいろいろな経緯(でしょうかね)から、インタフェースが同じでも、他の OpenSocial コンテナと振る舞いが異なるところがあります。opensocial-jquery では、他のコンテナのソースコードをそのまま MySpace でも動作するように、その差異を吸収しています。

実用性も考慮し、今回から YUI Compressor を使って、jQuery を含めて 1つにまとめて圧縮したファイルを、アーカイブに含めるようにしました。

OpenSocial jQuery plugin - jOpenSocial

こちらや、こちらの方が、同じようなものを作ってらっしゃいますが、カスタマイズされたjQueryを使いたくなかったり、AppDataを取り扱いたかったり、Simpleにはしたくなかったので、jQuery用OpenSocialプラグインを作りました。

opensocial-jquery をリンクしてくださったのでリンクをお返しします。opensocial-jquery と jOpenSocial はコンセプトが違うようですね。その違いから触発されるものがあります。そう。今回から AppData を使えるようにしましたので、この場で補足しときます。

jQuery.extend でオブジェクトの deep コピーができるの知らなかったよ

次のように jQuery.extend でオブジェクトの deep コピーができる んですね。シラナカッタよ。

var obj = $.extend(true, {}, {}, ... {});

第1引数に true を指定すると、以降のオブジェクトを再帰的に deep コピーしてくれます。

Enhancing of jQuery.ajax with JSDeferred: jQuery.ajax チェーンとその short cut のエラーハンドリング

Enhancing of jQuery.ajax with JSDeferred は、JSDeferred を使って、jQuery.ajax チェーンとその short cut のエラーハンドリングを実現するものです。

Enhancing of jQuery.ajax with JSDeferred は JSDeferred の内、Deferred オブジェクトのみを抜き出して、jQuery.ajax を上書きするという作りにしています。

jquery.ajax.deferred.js

もともと JSDeferred も jQuery サポートを提供していますが、フルスペックの JSDeferred は不要だし、jQuery.ajax のエラーハンドリングが期待どおりじゃなかったので、コンセプトを絞って小さくまとめてみました。ですので、まずはオリジナルの JSDeferred をあたってみてください。

Enhancing of jQuery.ajax with JSDeferred を使うと、次のようなコードが書けるようになります。

$.getJSON('/foo.json').next(function(foo) { // -- (1)
console.log('next', foo);
return $.getJSON('/bar.json').next(function(bar) { // -- (2)
console.log('bar', bar);
return [foo, bar];
});
}).next(function(foobar) { // -- (3)
console.log('foobar', foobar[0], foobar[1]);
}).error(function(status) { // -- (4)
console.log('error', status);
});

はじめに (1) の $.getJSON で /foo.json のデータを取得します。成功したときは (2) に続きます。失敗したときは (4) でエラーハンドリングして終了します。

次に (2) $.getJSON で /bar.json のデータを取得します。成功したときは (3) に続き、このときの引数が /foo.json と /bar.json の配列になります。失敗したときは (4) でエラーハンドリングして終了します。

(4) のエラーハンドリングは、jQuery.ajax の error イベントの status ("error" や "parseerror" など)か、throw したオブジェクトが引き渡されます。

このコードからも分かるとおり、Enhancing of jQuery.ajax with JSDeferred は、次のような利点があります。

jQuery.ajax の非同期のコールバックを next メソッドでチェーンして、その順番どおり実行させることができます。このとき、上から下に向かって、ネストしているときは、親から子に向かってという順番になります。

そして、そのチェーンの中でエラーが発生したとき、error メソッドでエラーをハンドリングできます。チェーンのはじめや途中でエラーが発生したときは、そこでチェーンが中断するので、エラーのハンドリングは 1つで済むということです。

また、jQuery.ajax の short cut はエラーのコールバックをサポートしていませんが、jQuery.getJSON や jQuery.post でも error メソッドを使ってエラーのハンドリングができます。

もちろん、次のとおり、オリジナルのコードもそのまま動きます。そのときの状況に応じて使い分けることができます。

$.ajax({
url: '/foo.json', dataType: 'json',
beforeSend: function(xhr) {},
success: function(data, status) {},
error: function(xhr, status, e) {},
complete: function(xhr, status) {}
});

はじめは、非同期のコールバックをチェーンするという仕掛けが理解しにくい印象があったのですが、使ってみると慣れてきて、だんだん手放せなくなってきています。JSDeferred を開発している cho45 さん に大感謝です。

ガジェットの中から MySpace Developer Platform で開発中かどうか判別する方法

opensocial-jquery 0.3.0 JavaScript コンテナセレクタと CSS コンテナセレクタという試み

現在は "ig", "orkut", "hi5" のコンテナしか判別できませんが、代表的なコンテナは評価しつつ追加していきます。MySpace も追加しようと試みてはいますが、iframe@src の内容が iGoogle 仕様とはかなり異なるので、どう判断しようか思案中です。よいアイディアはないでしょうか。

ガジェットの中から MySpace Developer Platform で開発中かどうか判別する方法を見つけました。

MySpace Developer Platform で開発中のときだけ iframe@src に v パラメータが付与され、その値が "dev" となるようです。この違いを検出することで、開発中かどうか判別できます。

var params = gadgets.util.getUrlParameters();
var v = params['v'] || '';
if (v == 'dev') {
// MySpace Developer Platform
}

これで igoogle, orkut, hi5, myspace とそのサンドボックス(開発中)を判別する方法が分かりました。次はどこのコンテナを調べようかな。

opensocial-jquery 0.4.0 jQuery.ajax で People を操作できるようにしました

おはようございます。なかじまんです。opensocial-jquery 0.4.0 リリースのお知らせです。

opensocial-jquery 0.4.0 では、jQuery.getData を使って、OWNER、VIEWER とその友達のプロフィールを取得できるようにしました。

次のソースコードは、OWNER のプロフィールを取得する例です。

var url = '/people/@owner/@self';
var data = {};

$.getData(url, data, function(people) {
var person = people[0];

console.info(person.id);
console.info(person.displayName);
console.info(person.thumbnailUrl);
console.info(person.name.familyName);
console.info(person.name.givenName);

});

次のソースコードは、OWNER の友達のプロフィールを取得する例です。

var url = '/people/@owner/@friends';
var data = {
startIndex: 2, // 取得位置 0..n -- 省略時 0
count: 10 // 取得件数 1..n -- 省略時 20
};

$.getData(url, data, function(people) {

console.info(people.startIndex); // 取得位置
console.info(people.itemsPerPage); // 取得件数
console.info(people.totalResults); // 総件数

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

console.info(person.id);
console.info(person.displayName);
console.info(person.thumbnailUrl);
console.info(person.name.familyName);
console.info(person.name.givenName);

});
});

jQuery.getData は、プロフィールの取得対象を URL で表現するところがミソです。@ の部分が対象を意味的に表すセレクタです。

/people/@owner -- OWNER
/people/@owner/@self -- OWNER
/people/@owner/@friends -- OWNER FRIENDS
/people/@viewer -- VIEWER
/people/@viewer/@self -- VIEWER
/people/@viewer/@friends -- VIEWER FRIENDS
/people/@me -- VIEWER
/people/@me/@self -- VIEWER
/people/@me/@friends -- VIEWER FRIENDS

jQuery.getData は、プロフィールの取得条件を URL パラメータで表現するところもミソです。

/people/@owner/@friends?count=10 -- 10件取得
/people/@owner/@friends?startIndex=10 -- 11件目から取得
/people/@owner/@friends?startIndex=10&count=10 -- 11件目から10件取得

jQuery.getData は jQuery.ajax の上に成り立っています。ですので、次のソースコードも同じ振る舞いをします。

$.get('/people/@owner', {}, function(people) {}, "data");
$.ajax({
url: '/people/@owner',
dataType: 'data',
success: function(people) {}
});

"data" は新しい dataType です。"data" は OpenSocial のソーシャルなデータという意味を表しています。Ajax のグローバルイベントや、jQuery.ajax のローカルイベントも使えますので、通常の Ajax と同じように OpenSocial のソーシャルなデータを扱えます。

簡単なサンプルを用意しました。OWNER のプロフィールを取得して表示するものです。

Self - samples - opensocial-jquery



OWNER の友達のプロフィールを取得して表示するものです。

Friends - samples - opensocial-jquery



opensocial-jquery 0.4.0 では、jQuery.container プロパティの改良と変更があります。

console.info($.container.igoogle);
console.info($.container.myspace);
console.info($.container.sandbox);
console.info($.container.domain); // "google.com", "myspace.com"

jQuery.container.ig は igoogle に改名しました。また myspace とその sandbox を判別できるようにしました。$.container.domain を追加 しました。

jQuery.getData は、どこまで実現するべきか、今後その評価を進めていきます。プロフィールの取得条件は、何らかの形ですべてサポートする予定です。バッチリクエストをサポートするべきか悩み中です。シンプルさを保つために、捨てるべきところは捨てたいのですが...。あと、MySpace たけ他のコンテナと振る舞いが違ったりするようなので、その差を吸収していきます。