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 based on jQuery 1.3.2 is available:
http://code.google.com/p/opensocial-jquery/
opensocial-jquery is jQuery based concise JavaScript Library for rapid OpenSocial Applications development.
opensocial-jquery is designed to change the way that you write OpenSocial Applications When you use it, you can develop OpenSocial Applications by the method of developing the website by jQuery.
Therefore OpenSocial JavaScript API is good, Lightweight JavaScript API is better, and opensocial-jquery is best.
opensocial-jquery 1.3.2.5
* The opensocial-jquery 1.3.2.5 is based on jQuery 1.3.2 (courtesy of @lackac @jonca.rafal)
* The function of this release is the same as opensocial-jquery 1.0.5
opensocial-jquery 1.2.6.5
* The opensocial-jquery 1.2.6.5 is based on jQuery 1.2.6.
* The function of this release is the same as opensocial-jquery 1.0.5.
* This release is supported but is not currently the recommended release for jQuery 1.2.6.
Changelog
* issue #18
* issue #20
Thank you.
2009-10-12
お待たせしました。jQuery 1.3.2 ベースの opensocial-jquery をリリースしました。
こんにちは。なかじまんです。
お待たせしました。jQuery 1.3.2 版の opensocial-jquery をリリースしました。
OpenSocial JavaScript API is good, Lightweight JavaScript API is better, and opensocial-jquery is best.
http://code.google.com/p/opensocial-jquery/
opensocial-jquery 1.3.2.5
jQuery 1.3.2 ベースの opensocial-jquery です。機能は jQuery 1.2.6 ベースである opensocial-jquery 1.0.5 とまったく同じです。
opensocial-jquery 1.2.6.5
jQuery 1.2.6 ベースの opensocial-jquery です。機能は jQuery 1.2.6 ベースである opensocial-jquery 1.0.5 とまったく同じです。
このとおり、バージョン番号の体系を見直して振り直しています。上位 3桁はベースとなる jQuery のバージョンを、末尾 1桁は opensocial-jquery のバージョンを表すようにしました。
今後もしばらくは jQuery 1.3.2 ベースと jQuery 1.2.6 ベースの両方とも提供していく予定ですが、状況によっては jQuery 1.2.6 ベースをサボることも考えています。ですので、何かタイミングがありましたら jQuery 1.3.2 ベースへの移行をおすすめします。
opensocial-jquery 1.3.2.5 は @lackac と @jonca.rafal からソースコードの提供を受けてリリースすることができました。ありがとうございました。
お待たせしました。jQuery 1.3.2 版の opensocial-jquery をリリースしました。
OpenSocial JavaScript API is good, Lightweight JavaScript API is better, and opensocial-jquery is best.
http://code.google.com/p/opensocial-jquery/
opensocial-jquery 1.3.2.5
jQuery 1.3.2 ベースの opensocial-jquery です。機能は jQuery 1.2.6 ベースである opensocial-jquery 1.0.5 とまったく同じです。
opensocial-jquery 1.2.6.5
jQuery 1.2.6 ベースの opensocial-jquery です。機能は jQuery 1.2.6 ベースである opensocial-jquery 1.0.5 とまったく同じです。
このとおり、バージョン番号の体系を見直して振り直しています。上位 3桁はベースとなる jQuery のバージョンを、末尾 1桁は opensocial-jquery のバージョンを表すようにしました。
今後もしばらくは jQuery 1.3.2 ベースと jQuery 1.2.6 ベースの両方とも提供していく予定ですが、状況によっては jQuery 1.2.6 ベースをサボることも考えています。ですので、何かタイミングがありましたら jQuery 1.3.2 ベースへの移行をおすすめします。
opensocial-jquery 1.3.2.5 は @lackac と @jonca.rafal からソースコードの提供を受けてリリースすることができました。ありがとうございました。
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 認証して、外部ホストにデータを送信できます。
詳しくは API リファレンス を見てください。なお OAuth リクエストと認証は gooホームでのみ動作確認しています。今後、他のコンテナでも動作確認をしつつ対応を進めていきます。
アルバムリストの取得
jQuery.ajax を使って VIEWER の アルバムリストを取得できます。
アルバムの写真リストの取得
jQuery.ajax を使って VIEWER の アルバムの写真リストを取得できます。URL でアルバムID を指定します。
プロフィールとアプリデータの同時取得
プロフィールや友達リストを取得するとき、appData パラメータを指定して、アプリケーションのデータを同時に取得できます。アプリケーションのデータ項目はカンマ区切りで指定します。
今までは、プロフィールや友達リストの取得と、アプリケーションのデータの取得が別々の 2段構えでしたが、これが 1回の jQuery.ajax で取得できるようになりますので、さらにソースコードがシンプルになるのではと期待しています。
質問や不具合の報告などのフィードバックは大歓迎です。また、修正パッチや拡張コードの提供も歓迎します。
海外の方から opensocial-jquery 1.0.4 や 1.0.5 を jQuery 1.3.2 に書き直したものの提供も受けています。近いうちに公開しますので、もう少しお待ちください。
追記です。jQuery.param のエンコード方法を書き換えました。今までは、空白を + にエンコードしていましたが、これを %20 でエンコードするようにしました。おそらく影響はないと思いますが、お伝えしておきます。
追記です。@datoka さん。フィードバックありがとうございました。
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>jQuery.ajax は OAuth リクエストの認証を必要とするとき、エラーイベントをコールバックします。このとき status は oauth を表します。続けて jQuery.oauth を使って OAuth リクエストを認証できます。このとき、指定した 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>
詳しくは 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で動いております！パラメータ指定は（元々）無視されますが
2009-04-18
Enhancing of jQuery.ajax with JSDeferred 1.0.0 をリリースしました
こんばんは。なかじまんです。Enhancing of jQuery.ajax with JSDeferred 1.0.0 をリリースしました。
http://plugins.jquery.com/project/ajax-deferred
Enhancing of jQuery.ajax with JSDeferred は jQuery.ajax とショートカットのチェーンとエラーハンドリングを実現するものです。基本的な使い方は、過去エントリの Enhancing of jQuery.ajax with JSDeferred: jQuery.ajax チェーンとその short cut のエラーハンドリング を見てください。
今回のリリースでは、次のとおり jQuery.ajax とショートカットで deferred チェーンできるようにしました。
また jQuery.ajax 以外から deferred チェーンを開始できるように jQuery.next を追加しました。さらに deferred チェーンを同期できるように jQuery.call を追加しました。これで、より複雑な状況にも対応できるようになりました。
また jQuery.wait を追加して、ちょい待ちにも対応できるようになりました。
まとめると、次のメソッドが使えることになります。
以上は、次のバージョンの opensocial-jquery でも使えるようにします。
http://plugins.jquery.com/project/ajax-deferred
Enhancing of jQuery.ajax with JSDeferred は jQuery.ajax とショートカットのチェーンとエラーハンドリングを実現するものです。基本的な使い方は、過去エントリの Enhancing of jQuery.ajax with JSDeferred: jQuery.ajax チェーンとその short cut のエラーハンドリング を見てください。
今回のリリースでは、次のとおり jQuery.ajax とショートカットで deferred チェーンできるようにしました。
$.getJSON('/foo').next(function(foo) {
console.log('next', foo);
return $.getJSON('/bar').next(function(bar) {
console.log('bar', bar);
return [foo, bar];
});
}).next(function(foobar) {
console.log('foobar', foobar[0], foobar[1]);
}).post('/foo.json', { foo: 'bar' }).next(function() {
}).error(function(status) {
console.log('error', status);
});
また jQuery.ajax 以外から deferred チェーンを開始できるように jQuery.next を追加しました。さらに deferred チェーンを同期できるように jQuery.call を追加しました。これで、より複雑な状況にも対応できるようになりました。
$.next(function() {
function foo(a, b) {
return a + b;
};
return $.call(foo, 10, 1);
}).next(function(sum) {
console.log(sum);
});
また jQuery.wait を追加して、ちょい待ちにも対応できるようになりました。
$.wait(10).next(function() {
});
まとめると、次のメソッドが使えることになります。
jQuery.wait
jQuery.next
jQuery.call
jQuery.ajax
jQuery.get
jQuery.getJSON
jQuery.post
Deferred.next
Deferred.error
Deferred.call
Deferred.fail
Deferred.cancel
Deferred.wait
Deferred.next
Deferred.call
Deferred.ajax
Deferred.get
Deferred.getJSON
Deferred.post
以上は、次のバージョンの opensocial-jquery でも使えるようにします。
2009-02-27
opensocial-jquery を jQuery Plugins サイトに登録しました
おはようございます。なかじまんです。
opensocial-jquery を jQuery Plugins に登録しました。↓こんな感じです。
jQuery Plugins は、アカウントさえ作成すれば、誰でもいつでもプラグインを登録できちゃうんですね。申請とか許可とか、そいう手続きは不要でした。また、リポジトリは備えていませんが、release や issues, patchs といった管理もできるので、プラグインのプロジェクトポータルとしての使い方もありかもしれません。
opensocial-jquery を jQuery Plugins に登録しました。↓こんな感じです。
jQuery Plugins は、アカウントさえ作成すれば、誰でもいつでもプラグインを登録できちゃうんですね。申請とか許可とか、そいう手続きは不要でした。また、リポジトリは備えていませんが、release や issues, patchs といった管理もできるので、プラグインのプロジェクトポータルとしての使い方もありかもしれません。
2009-02-01
opensocial-jquery 0.5.0 jQuery.ajax deferred と appdata の対応と people の強化
なかじまんです。opensocial-jquery 0.5.0 をリリースしました。主な内容は、次のとおりです。
次のとおり、プロフィールや友達リストを取得するとき、プロフィール項目、フィルタ条件、ソート条件、ページング条件を指定できるようになりました。指定できる項目や条件は は Wiki にまとめています。
次のとおり、アプリケーションのデータを保存できるようになりました。指定できるデータや条件 は Wiki にまとめています。
また、次のとおり、アプリケーションのデータを取得できるようになりました。取得するデータや条件 は Wiki にまとめています。
Enhancing of jQuery.ajax with JSDeferred を組み込みました。これにより、JSDeferred を使って jQuery.ajax が拡張され、次のとおり、非同期メソッドのチェーンとエラーハンドリングが容易になりました。
次のとおり、feature が利用できるか確認でき、その feature パラメータを取得できるようにしました。
MySpace Developer Platform での動作を確認しました。MySpace はいろいろな経緯(でしょうかね)から、インタフェースが同じでも、他の OpenSocial コンテナと振る舞いが異なるところがあります。opensocial-jquery では、他のコンテナのソースコードをそのまま MySpace でも動作するように、その差異を吸収しています。
実用性も考慮し、今回から YUI Compressor を使って、jQuery を含めて 1つにまとめて圧縮したファイルを、アーカイブに含めるようにしました。
OpenSocial jQuery plugin - jOpenSocial
次のとおり、プロフィールや友達リストを取得するとき、プロフィール項目、フィルタ条件、ソート条件、ページング条件を指定できるようになりました。指定できる項目や条件は は 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 を使えるようにしましたので、この場で補足しときます。
2009-01-24
jQuery.extend でオブジェクトの deep コピーができるの知らなかったよ
次のように jQuery.extend でオブジェクトの deep コピーができる んですね。シラナカッタよ。
第1引数に true を指定すると、以降のオブジェクトを再帰的に 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 を使うと、次のようなコードが書けるようになります。
はじめに (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 メソッドを使ってエラーのハンドリングができます。
もちろん、次のとおり、オリジナルのコードもそのまま動きます。そのときの状況に応じて使い分けることができます。
はじめは、非同期のコールバックをチェーンするという仕掛けが理解しにくい印象があったのですが、使ってみると慣れてきて、だんだん手放せなくなってきています。JSDeferred を開発している cho45 さん に大感謝です。
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 さん に大感謝です。
2009-01-13
opensocial-jquery 0.4.0 jQuery.ajax で People を操作できるようにしました
おはようございます。なかじまんです。opensocial-jquery 0.4.0 リリースのお知らせです。
opensocial-jquery 0.4.0 では、jQuery.getData を使って、OWNER、VIEWER とその友達のプロフィールを取得できるようにしました。
次のソースコードは、OWNER のプロフィールを取得する例です。
次のソースコードは、OWNER の友達のプロフィールを取得する例です。
jQuery.getData は、プロフィールの取得対象を URL で表現するところがミソです。@ の部分が対象を意味的に表すセレクタです。
jQuery.getData は、プロフィールの取得条件を URL パラメータで表現するところもミソです。
jQuery.getData は jQuery.ajax の上に成り立っています。ですので、次のソースコードも同じ振る舞いをします。
"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 プロパティの改良と変更があります。
jQuery.container.ig は igoogle に改名しました。また myspace とその sandbox を判別できるようにしました。$.container.domain を追加 しました。
jQuery.getData は、どこまで実現するべきか、今後その評価を進めていきます。プロフィールの取得条件は、何らかの形ですべてサポートする予定です。バッチリクエストをサポートするべきか悩み中です。シンプルさを保つために、捨てるべきところは捨てたいのですが...。あと、MySpace たけ他のコンテナと振る舞いが違ったりするようなので、その差を吸収していきます。
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 たけ他のコンテナと振る舞いが違ったりするようなので、その差を吸収していきます。
2009-01-12
Dreamweaver で jQuery API のコード補完ができる jQuery API extension for Dreamweaver
こんにちは。なかじまんです。
Dreamweaver で jQuery API のコード補完ができる jQuery API extension for Dreamweaver というのがあり、さっそくインストールしてみました。
jQuery API extension for Dreamweaver | XTND.US - Xtnd urslf! Extensions for Adobe Dreamweaver, Drupal, jQuery, Flex, Fireworks, Prototype, APIs
これは絶対に手放せないというほとではありませんが、普段使わない API とか、API の使い方を度忘れしたときなど、曖昧な記憶を呼び出すのに役立ちます。また、jQuery を使っていると、ある一定の API のみを使ってパターン化してくる傾向があるのですが、そのシーンに即した別の API があることに気が付くという効果もありそうです。
前述の引用だと jQuery UI API のコード補完も含むとあります。jQuery UI の知識は浅いので、どのくらい役立ちそうかは判断できていません。もしかすると jQuery UI のコード補完が肝だったりするのかも。
Dreamweaver で jQuery API のコード補完ができる jQuery API extension for Dreamweaver というのがあり、さっそくインストールしてみました。
jQuery API extension for Dreamweaver | XTND.US - Xtnd urslf! Extensions for Adobe Dreamweaver, Drupal, jQuery, Flex, Fireworks, Prototype, APIs
Reduce tons of typing. If you are into jQuery and use Dreamweaver then you really need this extension. Let us save you tons of time by reducing keystrokes with our jQuery API extension for Dreamweaver which provides code coloring, Snippets, and code hints that list every jQuery and jQuery UI function for you.インストールは、Download the extension からアーカイブをダウンロードし、Extension Manager で登録するだけです。インストールすると、↓こんな感じで jQuery API のコード補完ができるようになります。
これは絶対に手放せないというほとではありませんが、普段使わない API とか、API の使い方を度忘れしたときなど、曖昧な記憶を呼び出すのに役立ちます。また、jQuery を使っていると、ある一定の API のみを使ってパターン化してくる傾向があるのですが、そのシーンに即した別の API があることに気が付くという効果もありそうです。
前述の引用だと jQuery UI API のコード補完も含むとあります。jQuery UI の知識は浅いので、どのくらい役立ちそうかは判断できていません。もしかすると jQuery UI のコード補完が肝だったりするのかも。
2009-01-05
opensocial-jquery 0.3.0 Preference と Window の強化と見直しをしました。
おはようございます。なかじまんです。opensocial-jquery 0.3.0 を公開しました。
Preference と Window の強化と見直しをしました。
Preference
次のとおり、ユーザ設定を保存できるようにしました。feature/setprefs を必要とします。
次のとおり、キーと値の組を指定できます。直感的でいいでしょ?
次のとおり、値として配列も保存できます。直感的でいいでしょ? gadgets.Prefs.setArray を代替するものです。なぜか gadgets.Prefs.setArray は、ユーザ設定を永続化しません。バグでしょうかね。$.pref は、配列であっても永続化するようにしてあります。
そして、次のとおり、配列として値を取得できます。
次のとおり、ユーザ設定を取得するとき、HTML エスケープしないように振る舞いを変更しました。$.prefArray も同様です。gadgets.Prefs.getString と getArray は HTML エスケープしていて使い勝手が悪かったのです。
次のとおり、URL パラメータも取得できるようにしました。ユーザ設定と URL パラメータを区別する線引きが難しい... つまり、URL パラメータは、ユーザ設定の一環としてみなしてもよいと整理し、よい意味で妥協しています。このほうが覚えやすいでしょ?
URL パラメータとユーザ設定のキーが同名のときは、URL パラメータを優先します。同名にならないような命名を推奨しますが、どうしても区別したいときは、ユーザ設定のキーの先頭に "up_" を付与してください。
Window
次のとおり、ガジェットの横幅を取得できます。iframe@width に相当します。直感的でいいでしょ?
次のとおり、ガジェットの縦幅を取得できます。iframe@height に相当します。直感的でいいでしょ?
$(window).width と height は、gadgets.window.getViewportDimensions を代替するものです。
次のとおり、ガジェットの高さを変更できます。$(window).height(height) は、gadgets.window.adjustHeight(opt_height) を代替するものです。直感的でいいでしょ?
次のとおり、ガジェットのタイトルを設定するとき、その中で HTML エスケープするように振る舞いを変更しました。つまり、HTML エスケープする前のタイトルを指定できるようにしました。
opensocial-jquery 0.3.0 では、jQuery.container プロパティと CSS container selector という新しい考え方を導入しました。これは、別途エントリを投稿して説明します。
Preference と Window の強化と見直しをしました。
Preference
次のとおり、ユーザ設定を保存できるようにしました。feature/setprefs を必要とします。
$.pref('foo', 'foo1');
$.pref('bar', 123);
$.pref('buz', false);
次のとおり、キーと値の組を指定できます。直感的でいいでしょ?
$.pref({
foo: 'foo1',
bar: 123,
buz: false
});
次のとおり、値として配列も保存できます。直感的でいいでしょ? gadgets.Prefs.setArray を代替するものです。なぜか gadgets.Prefs.setArray は、ユーザ設定を永続化しません。バグでしょうかね。$.pref は、配列であっても永続化するようにしてあります。
$.pref('foo', ['foo1', 123, false]);
そして、次のとおり、配列として値を取得できます。
var foo = $.prefArray('foo');
console.log(foo); // => ['foo1', '123', 'false']
次のとおり、ユーザ設定を取得するとき、HTML エスケープしないように振る舞いを変更しました。$.prefArray も同様です。gadgets.Prefs.getString と getArray は HTML エスケープしていて使い勝手が悪かったのです。
$.pref('foo', '<b>foo</b>');
var foo = $.pref('foo');
console.log(foo); // => '<b>foo</b>'
次のとおり、URL パラメータも取得できるようにしました。ユーザ設定と URL パラメータを区別する線引きが難しい... つまり、URL パラメータは、ユーザ設定の一環としてみなしてもよいと整理し、よい意味で妥協しています。このほうが覚えやすいでしょ?
var lang = $.pref('lang'); // 言語
var country = $.pref('country'); // 地域
var moduleId = $.pref('mid'); // モジュールID
var lang = $.pref('up_lang');
URL パラメータとユーザ設定のキーが同名のときは、URL パラメータを優先します。同名にならないような命名を推奨しますが、どうしても区別したいときは、ユーザ設定のキーの先頭に "up_" を付与してください。
Window
次のとおり、ガジェットの横幅を取得できます。iframe@width に相当します。直感的でいいでしょ?
var width = $(window).width();
console.log(width); // => 257
次のとおり、ガジェットの縦幅を取得できます。iframe@height に相当します。直感的でいいでしょ?
var height = $(window).height();
console.log(height); // => 200
$(window).width と height は、gadgets.window.getViewportDimensions を代替するものです。
次のとおり、ガジェットの高さを変更できます。$(window).height(height) は、gadgets.window.adjustHeight(opt_height) を代替するものです。直感的でいいでしょ?
$(window).height(400);
// $(window).adjustHeight(400); と同じ
次のとおり、ガジェットのタイトルを設定するとき、その中で HTML エスケープするように振る舞いを変更しました。つまり、HTML エスケープする前のタイトルを指定できるようにしました。
$(window).title('<b>foo</b>');
// gadgets.window.adjustHeight('<b>foo</b>'); と同じ
opensocial-jquery 0.3.0 では、jQuery.container プロパティと CSS container selector という新しい考え方を導入しました。これは、別途エントリを投稿して説明します。
2008-12-30
opensocial-jquery 0.2.0 view の操作をサポートしました
こんばんは。なかじまんです。opensocial-jquery 0.2.0 をリリースしました。
opensocial-jquery 0.2.0 では、次のとおり、view の操作を追加しました。
現在の view 名を取得できます。view 名は "profile", "home", "canvas", "preview" などの文字列です。
現在のコンテナで使用できる view 名を配列として取得できます。
view 名を指定して、view を切り替えることができます。
view を切り替えるとき、パラメータを引き渡すことができます。
そのパラメータは ready イベントの引数として取得できます。
view の切り替えとパラメータの引渡しの実例を用意しました。
http://opensocial-jquery.googlecode.com/svn/tags/0.2.0/samples/picasa.xml
jQuery.getJSON を使って Picasa Web Albums から新着の写真を取得し、リスト表示しています。このときの view は "profile" です。
写真をクリックすると、jQuery.view を使って "canvas" view に切り替えます。そして、クリックした写真を拡大して表示します。このとき、切り替えた view でどの写真をクリックしたか判別できるように、jQuery.view のパラメータとして、写真の URL を引き渡しています。
上のスクリーンショットは Orkut sandbox のものですが、iGoogle sandbox でも動作します。 以前は動作していたと思うのですが、Orkut sandbox で jQuery(window).title (gadgets.window.setTitle) を呼び出すとエラーが発生するようになっています。あれれ。
opensocial-jquery 0.2.0 では、次のとおり、view の操作を追加しました。
現在の view 名を取得できます。view 名は "profile", "home", "canvas", "preview" などの文字列です。
var name = jQuery.view();
// console.log(name) => "home"
現在のコンテナで使用できる view 名を配列として取得できます。
var names = jQuery.views();
// console.log(names) => ["home", "canvas"]
view 名を指定して、view を切り替えることができます。
jQuery.view("canvas");
view を切り替えるとき、パラメータを引き渡すことができます。
jQuery.view("canvas", { name: "nakajiman" } );
そのパラメータは ready イベントの引数として取得できます。
jQuery(function($, data) {
// console.log(data) => { name: "nakajiman" }
}
jQuery(document).ready(function($, data) {
// console.log(data) => { name: "nakajiman" }
}
view の切り替えとパラメータの引渡しの実例を用意しました。
http://opensocial-jquery.googlecode.com/svn/tags/0.2.0/samples/picasa.xml
jQuery.getJSON を使って Picasa Web Albums から新着の写真を取得し、リスト表示しています。このときの view は "profile" です。
写真をクリックすると、jQuery.view を使って "canvas" view に切り替えます。そして、クリックした写真を拡大して表示します。このとき、切り替えた view でどの写真をクリックしたか判別できるように、jQuery.view のパラメータとして、写真の URL を引き渡しています。
上のスクリーンショットは Orkut sandbox のものですが、iGoogle sandbox でも動作します。 以前は動作していたと思うのですが、Orkut sandbox で jQuery(window).title (gadgets.window.setTitle) を呼び出すとエラーが発生するようになっています。あれれ。
2008-12-25
opensocial-jquery OpenSocial ガジェット向けにカスタマイズした jQuery とそのプラグインです
おはようございます。なかじまんです。opensocial-jquery 0.1.0 をリリースしました。
opensocial-jquery は、OpenSocial ガジェット (アプリケーション) 向けにカスタマイズした jQuery とそのプラグインです。opensocial-jquery を使うと、OpenSocial API と Gadgets API をほとんど意識することなく、jQuery を使ってウェブサイトを開発するノリで OpenSocial ガジェットを開発できます。
実例
まずは、サンプルのソースコードを紹介します。ガジェットのソースコードですが、jQuery を使ってウェブサイトを開発するのと変わらないでしょ?
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 タグは不要です。
今後の予定
(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 ガジェットの開発に貢献できればと願っています。以上、リリースのお知らせでした。
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 ガジェットの開発に貢献できればと願っています。以上、リリースのお知らせでした。
2008-11-15
自ページのリンクを削除する jQuery remove self link plugin を公開します。
ページから自ページのリンクを削除してユーザビリティを改善する
私が手がけたいくつかのサイトで使っていますし、今後も使っていく予定です。一般性のある JavaScript コードである(だった)という結論です。そこで、この機会に jQuery プラグインとして整理して公開しましたので、よかったら試してみてください。
jquery.removeSelfLink.js
次のように、コンテンツがロードした後に、jQuery.fn.removeSelfLink メソッドを呼び出してください。これだけで、ページ内から自ページのリンクを削除してくれます。また、アンカー(#flagment)による自ページのリンクは削除しないようにしてあります。
ページ全体ではなく、特定の要素を対象とすることもできます。
jQuery と同じライセンスにしておきますね。お役に立てれば幸いです。
ホームページのユーザビリティを改善できると知りながら、何も手を打たないのは歯がゆいことです。そこで WEB ブラウザでページを表示したときに JavaScript (jQuery) を使って、ページの中から自ページのリンクを削除する方法を考えました。↑のエントリを投稿しから１年になりましたが、JavaScript を使ってページ内から自ページのリンクを削除するという手法は、とてもバランスのよい妥協で有効であったことが確認できました。
私が手がけたいくつかのサイトで使っていますし、今後も使っていく予定です。一般性のある JavaScript コードである(だった)という結論です。そこで、この機会に jQuery プラグインとして整理して公開しましたので、よかったら試してみてください。
jquery.removeSelfLink.js
次のように、コンテンツがロードした後に、jQuery.fn.removeSelfLink メソッドを呼び出してください。これだけで、ページ内から自ページのリンクを削除してくれます。また、アンカー(#flagment)による自ページのリンクは削除しないようにしてあります。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$(document).removeSelfLink();
});
//]]>
</script>
ページ全体ではなく、特定の要素を対象とすることもできます。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#foo').removeSelfLink();
});
//]]>
</script>
jQuery と同じライセンスにしておきますね。お役に立てれば幸いです。
2008-10-01
Aptana Jaxer から Mextractr を使ってメモから位置表現と緯度経度を抽出する(前編)
Aptana Jaxer から LocoSticker を使ってメモから位置表現と緯度経度を抽出する
Golazo MA4 から Mextractr メタデータ自動抽出 API をどう呼び出しているか、実際のソースコードを引用して紹介します。
Mextractr メタデータ自動抽出 API の URL とクエリを準備します。クエリの URL エンコードは jQuery を使っています。text は抽出対象のテキストです。apikey は Mextractr API キー です。
Mextractr メタデータ自動抽出 API を POST メソッドで呼び出して、実行結果の XML を DOMDocument オブジェクトとして取得しています。as プロパティに xml を指定すると、XML をパースしてくれます。
jQuery XML to JSON Plugin を使って XML を JavaScript オブジェクトに変換しています。第2引数の true は、要素数に関わらず Array オブジェクトに変換することを意味しています。
実行結果から位置表現だけを取り出して、配列にまとめています。
Google Maps API を使って、位置表現から緯度経度を求めています。Google Maps API をどのように呼び出しているかは、後編で紹介しようと思います。
位置表現から緯度経度が取得した時点でループを抜け出します。つまり、メモの先頭よりの位置表現を採用しているということです。ですので、メモの意味するところと違う結果になることがありえます。まだまだ改善の余地があるところです。
Golazo MA4 は LocoSticker 位置表現特定 API を使って、メモから位置情報を自動抽出しています。... 1件も位置表現が抽出できないときは、別の API を使って、メモから位置情報を抽出しようと試みます。この続きは、後日、紹介します。Golazo MA4 は Mextractr メタデータ自動抽出 API も使って、メモから位置情報を自動抽出しています。 Mextractr メタデータ自動抽出 API は、場所などの位置表現に加えて、人名や法人名、日時表現、何をするかの表現など、テキストから様々な角度のデータを抽出できます。まさにメタデータ抽出といったところです。
Golazo MA4 から Mextractr メタデータ自動抽出 API をどう呼び出しているか、実際のソースコードを引用して紹介します。
// Mextractr Web API
// http://www.emetadata.net/doc
var url = 'http://api.emetadata.net/mextractr';
var data = $.param({ text: text, apikey: Golazo.MEXTRACTR_APIKEY });
Mextractr メタデータ自動抽出 API の URL とクエリを準備します。クエリの URL エンコードは jQuery を使っています。text は抽出対象のテキストです。apikey は Mextractr API キー です。
var xml;
try {
xml = Jaxer.Web.post(url, data, { as: 'xml' });
} catch (e) {
throw new Error(''+e);
}
Mextractr メタデータ自動抽出 API を POST メソッドで呼び出して、実行結果の XML を DOMDocument オブジェクトとして取得しています。as プロパティに xml を指定すると、XML をパースしてくれます。
// jQuery XML to JSON Plugin
// http://fyneworks.com/jquery/xml-to-json/
var feed = $.xml2json(xml, true);
if (feed.message)
throw new Error(feed.message[0].text);
jQuery XML to JSON Plugin を使って XML を JavaScript オブジェクトに変換しています。第2引数の true は、要素数に関わらず Array オブジェクトに変換することを意味しています。
// 位置表現だけを抜き出す
feed.entry.forEach(function(entry) {
if (entry.where) {
entry.where.forEach(function(where) {
response.push({ label: where.valueString });
});
}
});
実行結果から位置表現だけを取り出して、配列にまとめています。
// 位置表現から緯度経度を求める
Golazo.each(response, function(i, where) {
var geos;
try {
geos = Golazo.Geo.get(where.label);
} catch (e) {
throw new Error(''+e);
}
var geo = geos[0] || {};
where.latitude = geo.latitude;
where.longitude = geo.longitude;
where.altitude = geo.altitude;
if (where.latitude)
return false; // break
});
Google Maps API を使って、位置表現から緯度経度を求めています。Google Maps API をどのように呼び出しているかは、後編で紹介しようと思います。
位置表現から緯度経度が取得した時点でループを抜け出します。つまり、メモの先頭よりの位置表現を採用しているということです。ですので、メモの意味するところと違う結果になることがありえます。まだまだ改善の余地があるところです。
2008-09-27
Aptana Jaxer から LocoSticker を使ってメモから位置表現と緯度経度を抽出する
Golazo MA4 は LocoSticker 位置表現特定 API を使って、メモから位置情報を自動抽出しています。LocoSticker 位置表現特定 API は、住所やスポットのテキストを抽出することに加えて、テキストの主題との関連の強さを判断し、関連の強いものを抽出するという、頭の良さを備えた優れものの API です。
Golazo MA4 は Aptana Jaxer を使って JavaScript のみで動かしています
そこで、Golazo MA4 から LocoSticker 位置表現特定 API をどう呼び出しているか、実際のソースコードを引用して紹介します。
LocoSticker 位置表現特定 API の URL とクエリを準備します。クエリの URL エンコードは jQuery を使っています。text は抽出対象のテキストです。selection を on とすると、前述の頭の良さを発揮します。
LocoSticker 位置表現特定 API を POST メソッドで呼び出して、実行結果の JSON を JavaScript オブジェクトに変換しています。
実行結果から位置表現、緯度、経度を取り出して、配列にまとめています。
実行結果は、住所とスポットが入り混じっているので、スポットを優先に重み(スコアが高い)順で並べ替えをしています。
そして、その並べ替えた実行結果を使って、メモに位置情報を付与しています。1件も位置表現が抽出できないときは、別の API を使って、メモから位置情報を抽出しようと試みます。この続きは、後日、紹介します。
Golazo MA4 は Aptana Jaxer を使って JavaScript のみで動かしています
先日公開した Golazo MA4 ですが、サーバサイド JavaScript (Ajax Server) の仕組みを備えた Aptana Jaxer を使って、アプリケーションを構築し、運用しています。LocoSticker 位置表現特定 API は、GET や POST でクエリを与えると、JSON 形式で結果を返すという、よくあるパターンの API なので、具体的な呼び出し方を紹介する必要はないのですが、Golazo MA4 は Aptana Jaxer を使って、サーバサイドの JavaScript から LocoSticker 位置表現特定 API を呼び出していますので、どうやってるの？という関心があるかと思います。
そこで、Golazo MA4 から LocoSticker 位置表現特定 API をどう呼び出しているか、実際のソースコードを引用して紹介します。
// LocoSticker 位置表現特定 API
// http://okilab.jp/project/location/2007/11/locosticker_api.html
var url = 'http://api.locosticker.jp/v1/extract_place/';
var data = $.param({ text: text, selection: 'on' });
LocoSticker 位置表現特定 API の URL とクエリを準備します。クエリの URL エンコードは jQuery を使っています。text は抽出対象のテキストです。selection を on とすると、前述の頭の良さを発揮します。
var clusters;
try {
clusters = eval('(' + Jaxer.Web.post(url, data) + ')')
.result_select;
} catch (e) {
throw new Error(''+e);
}
LocoSticker 位置表現特定 API を POST メソッドで呼び出して、実行結果の JSON を JavaScript オブジェクトに変換しています。
// クラスタをフラットな配列に変換する
clusters.forEach(function(cluster) {
cluster.forEach(function(where) {
where.label = where.text;
where.latitude = where.lat;
where.longitude = where.lng;
where.altitude = Golazo.WHERE_TOKYO.altitude;
response.push(where);
});
});
実行結果から位置表現、緯度、経度を取り出して、配列にまとめています。
// 住所よりもスポットを優先し、重みでソートする
response.sort(function(a, b) {
if (a.type == b.type)
return a.weight - b.weight;
else if (a.type == 'spot')
return -1;
else
return 1;
});
実行結果は、住所とスポットが入り混じっているので、スポットを優先に重み(スコアが高い)順で並べ替えをしています。
// 位置表現が特定できたら継続しない
if (response.length > 0)
return response; // found.
そして、その並べ替えた実行結果を使って、メモに位置情報を付与しています。1件も位置表現が抽出できないときは、別の API を使って、メモから位置情報を抽出しようと試みます。この続きは、後日、紹介します。
2008-08-01
実践! Ajax フレームワーク jQuery
実践! Ajax フレームワーク jQuery という本が書店に並んでいました。パラパラっと流し読みした感じですと... (立ち読みしちゃった)
jQuery API のメソッドを1つ1つ取り上げて、サンプルコードとその実行結果を見せながら解説するというスタイルになっています。jQuery 公式サイトの API リファレンスにもサンプル(demo)がありますが、少し読みにくく分かりにくい印象があるので、それを補うための本としての活用があると感じました。ですので、jQuery を使って WEB サイトをどう構成して開発していくかといった視点は弱いですね。
jQuery API のメソッドを1つ1つ取り上げて、サンプルコードとその実行結果を見せながら解説するというスタイルになっています。jQuery 公式サイトの API リファレンスにもサンプル(demo)がありますが、少し読みにくく分かりにくい印象があるので、それを補うための本としての活用があると感じました。ですので、jQuery を使って WEB サイトをどう構成して開発していくかといった視点は弱いですね。
2008-07-19
jQuery リファレンスに素早く移動できる jQuery Menu Firefox Extension
jQuery Menu Firefox Extension
このアドオンをインストールすると、次のように、jQuery というメニューが追加されます。そして、メニューの項目を選択すると、該当するリファレンスページを表示します。
ほかに何か特別な機能はないようです。単なるブックマークです。
ですが、ブックマークから選択するよりは、数クリックほど省略できるかもしれません。また、jQuery のリファレンスページの構成が変わったとき、このアドオンのアップデートで反映されるかもしれません。
と、無理やり想像して役立ちそうなことを並べましたが、実際にインストールして使ってみると、そのブックマークとしての用途だけでもなかなか便利です。
For all those jQuery freaks out there. Clicking multiple times to get to documentation is for suckers - add this handy menu right into the top of your Firefox menu and save valuable seconds!jQuery のリファレンスページに素早く移動するための Firefox3 専用のアドオンです。
このアドオンをインストールすると、次のように、jQuery というメニューが追加されます。そして、メニューの項目を選択すると、該当するリファレンスページを表示します。
ほかに何か特別な機能はないようです。単なるブックマークです。
ですが、ブックマークから選択するよりは、数クリックほど省略できるかもしれません。また、jQuery のリファレンスページの構成が変わったとき、このアドオンのアップデートで反映されるかもしれません。
と、無理やり想像して役立ちそうなことを並べましたが、実際にインストールして使ってみると、そのブックマークとしての用途だけでもなかなか便利です。
2008-07-02
Jaxer 0.9.7 はレスポンスでリダイレクトできないので代替策をいろいろ試してみた
Aptana Jaxer 0.9.7.2472 は、HTTP レスポンスを使ったリダイレクトの仕組みを提供していません。Jaxer は単なるサーバではなく、Apache2 など WEB サーバのレスポンスフィルタとして機能する仕組みなので、もとのレスポンスを無効化して、リダイレクトするという考え方がフィットしないんだろうと推測します。
といっても、リダイレクトしたいという要望はいくつか上がっているようです。次の Issue は、現在のバージョンだとリダイレクトできないので、ステータスコードと URL を指定してリダイレクトできるようになればよいという趣旨のものです。間違ってたらごめんなさい。
[#JXR-173] add Jaxer.response.redirect(301,url);
[#JXR-182] Support jaxer redirect in mod_jaxer
HTTP レスポンスを使ったリダイレクトは実現できないため、クライアントサイドの仕組みを使ってリダイレクトする方法を2通り試してみました。
1つ目は、JavaScript を使ってリダイレクトする方法です。実際はリダイレクトじゃなくページ遷移です。Jaxer.clientData を使って、リダイレクト先の URL をサーバサイドからクライアントサイドに引き渡し ます。クライアントサイドは、Location オブジェクトにリダイレクト先の URL を指定してページ遷移させます。
2つ目は、ページをリロードするための meta 要素を追加する方法です。サーバサイドで meta 要素を生成して、head 要素に追加しています。このとき、ページのリロードを0秒後、リロード先の URL を指定し、リダイレクトに相当する振る舞いを促しています。
なお、今後公開される Jaxer 1.0 (RC1) では、Jaxer.Response.redirect(url) メソッドを追加してリダイレクトをサポートするとのことです。なので、次のように、サーバサイドからリダイレクトを指示できるようになるということですね。
といっても、リダイレクトしたいという要望はいくつか上がっているようです。次の Issue は、現在のバージョンだとリダイレクトできないので、ステータスコードと URL を指定してリダイレクトできるようになればよいという趣旨のものです。間違ってたらごめんなさい。
[#JXR-173] add Jaxer.response.redirect(301,url);
Currently there is no support(that i can find or that john knows about) in the framework for redirecting a page using the http header Location: {url} , and setting the resonse code to one of the 3xx values.次の Issue は、レスポンスに Location ヘッダを入れたらどうだろうという趣旨のものです。間違ってたらごめんなさい。
[#JXR-182] Support jaxer redirect in mod_jaxer
Done. Just need to set Location to the redirect URL in framework when needed.実際に手元の環境で、次のとおり、サーバサイドで HTTP レスポンスに Location ヘッダを追加してみました。確かに Location ヘッダは追加されるのですが、WEB ブラウザは Location ヘッダを認識せず、リダイレクトしてくれませんでした。
<script type="text/javascript" runat="server">
//<![CDATA[
Jaxer.response.addHeader("Location", "http://www.google.com/", true);
//]]>
</script>
HTTP レスポンスを使ったリダイレクトは実現できないため、クライアントサイドの仕組みを使ってリダイレクトする方法を2通り試してみました。
1つ目は、JavaScript を使ってリダイレクトする方法です。実際はリダイレクトじゃなくページ遷移です。Jaxer.clientData を使って、リダイレクト先の URL をサーバサイドからクライアントサイドに引き渡し ます。クライアントサイドは、Location オブジェクトにリダイレクト先の URL を指定してページ遷移させます。
<script type="text/javascript" runat="server">
//<![CDATA[
Jaxer.clientData.redirectUrl = 'http://www.google.com/';
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
if (Jaxer.clientData.redirectUrl)
window.location = Jaxer.clientData.redirectUrl;
//]]>
</script>
2つ目は、ページをリロードするための meta 要素を追加する方法です。サーバサイドで meta 要素を生成して、head 要素に追加しています。このとき、ページのリロードを0秒後、リロード先の URL を指定し、リダイレクトに相当する振る舞いを促しています。
<script type="text/javascript" src="jquery.js" runat="server"></script>
<script type="text/javascript" runat="server">
//<![CDATA[
jQuery(function($) {
var meta = $('<meta />')
.attr('http-equiv', 'Refresh')
.attr('content', '0; URL=http://www.google.com/');
$('head', document)
.prepend(meta);
});
//]]>
</script>
なお、今後公開される Jaxer 1.0 (RC1) では、Jaxer.Response.redirect(url) メソッドを追加してリダイレクトをサポートするとのことです。なので、次のように、サーバサイドからリダイレクトを指示できるようになるということですね。
<script type="text/javascript" runat="server">
//<![CDATA[
Jaxer.response.redirect("http://www.google.com/");
//]]>
</script>
2008-06-29
Jaxer.setEvent を使ってサーバサイドでイベントを指定する
Aptana Jaxer でイベントをサーバサイドで指定したとき、クライアントサイドでそのイベントが有効になるのか、有効なときどう振る舞うのか、いろいろなパターンを試してみました。
サーバサイドで onclick プロパティに Function を指定してみましたが、クライアントサイドでは動作しませんでした。
サーバサイドで setAttribute を使って onclick に JavaScript コードを指定してみたところ、クライアントサイドで期待どおり動作しました。
サーバサイドで addEventListener を使って onclick に Function を指定してみましたが、クライアントサイドでは動作しませんでした。
つまり、属性値として指定したイベントのみが対象ということです。サーバサイドの DOM をシリアライズして、クライアントサイドの HTML をレンダリングするという過程から捉えると、あたり前の結果といえます。
Jaxer.setEvent メソッドを使うと、もう少し直感的にイベントを指定できます。ただし、上記の仕組みを変えるものではなく、あくまでもヘルパメソッドですよ。
サーバサイドで Jaxer.setEvent を使って onclick に Function を指定してみたところ、クライアントサイドで期待どおり動作しました。
サーバサイドで Jaxer.setEvent を使って onclick に JavaScript コードを指定してみたところ、クライアントサイドで期待どおり動作しました。
サーバサイドで Jaxer.setEvent を使って、イベントから変数を参照してみましたが、undefined になりました。このときの foo は、サーバサイドではなく、クライアントサイドの foo を参照することになります。
ですので、クライアントサイドに foo という Function を定義し、サーバサイドで foo を呼び出すようにイベントを指定することができます。
これまでの結果から、サーバサイドで jQuery.fn.click (jQuery.fn.bind) を指定しても、期待どおり動作しないことは自明です。jQuery はイベントの状態を jQuery オブジェクトが保持するため、その状態クライアントサイドで失われます。
最後に参考として、Jaxer.setEvent のソースコードを抜粋します。ハンドラが文字列のときはそのまま、Function のときは文字列に変換してから setAttribute を使って指定しているだけでした。
Function.toSource メソッドを積極的に使ったコードをはじめてみた気がしますが、この使い方は妥当なんだろうか？という小さな疑問が残りました。
サーバサイドで onclick プロパティに Function を指定してみましたが、クライアントサイドでは動作しませんでした。
<script type="text/javascript" src="jquery.js" runat="both"></script>
<script type="text/javascript" runat="server">
//<![CDATA[
jQuery(function($) {
var element = $('#r')[0];
element.onclick = function() {
alert('bar1');
});
});
//]]>
</script>
<div id="r">foo</div>
サーバサイドで setAttribute を使って onclick に JavaScript コードを指定してみたところ、クライアントサイドで期待どおり動作しました。
jQuery(function($) {
var element = $('#r')[0];
element.setAttribute('onclick', 'alert(\'bar2\');');
});
サーバサイドで addEventListener を使って onclick に Function を指定してみましたが、クライアントサイドでは動作しませんでした。
jQuery(function($) {
var element = $('#r')[0];
element.addEventListener('click',
function() { alert('bar3'); },
false);
});
つまり、属性値として指定したイベントのみが対象ということです。サーバサイドの DOM をシリアライズして、クライアントサイドの HTML をレンダリングするという過程から捉えると、あたり前の結果といえます。
Jaxer.setEvent メソッドを使うと、もう少し直感的にイベントを指定できます。ただし、上記の仕組みを変えるものではなく、あくまでもヘルパメソッドですよ。
サーバサイドで Jaxer.setEvent を使って onclick に Function を指定してみたところ、クライアントサイドで期待どおり動作しました。
jQuery(function($) {
var element = $('#r')[0];
Jaxer.setEvent(element, 'onclick', function() {
alert('foo1');
});
});
サーバサイドで Jaxer.setEvent を使って onclick に JavaScript コードを指定してみたところ、クライアントサイドで期待どおり動作しました。
jQuery(function($) {
Jaxer.setEvent(element, 'onclick', 'alert(\'foo2\');');
});
サーバサイドで Jaxer.setEvent を使って、イベントから変数を参照してみましたが、undefined になりました。このときの foo は、サーバサイドではなく、クライアントサイドの foo を参照することになります。
jQuery(function($) {
var foo = 'foo4';
Jaxer.setEvent(element, 'onclick', function() {
alert(foo);
});
});
ですので、クライアントサイドに foo という Function を定義し、サーバサイドで foo を呼び出すようにイベントを指定することができます。
<script type="text/javascript" src="jquery.js" runat="both"></script>
<script type="text/javascript" runat="server">
//<![CDATA[
jQuery(function($) {
Jaxer.setEvent(element, 'onclick', 'foo();');
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function foo() {
alert('foo5');
}
//]]>
</script>
<div id="r">foo</div>
これまでの結果から、サーバサイドで jQuery.fn.click (jQuery.fn.bind) を指定しても、期待どおり動作しないことは自明です。jQuery はイベントの状態を jQuery オブジェクトが保持するため、その状態クライアントサイドで失われます。
jQuery(function($) {
$('#r').click(function() {
alert('foo3');
});
});
最後に参考として、Jaxer.setEvent のソースコードを抜粋します。ハンドラが文字列のときはそのまま、Function のときは文字列に変換してから setAttribute を使って指定しているだけでした。
var attribute;
if (typeof handler == "function")
{
if (handler.name == "")
{
attribute = "(" + handler.toSource() + ")()";
}
else
{
attribute = handler.name + "()";
}
}
else // handler should be a string (the handler function's body)
{
attribute = handler;
}
domElement.setAttribute(eventName, attribute);
Function.toSource メソッドを積極的に使ったコードをはじめてみた気がしますが、この使い方は妥当なんだろうか？という小さな疑問が残りました。
登録:
投稿 (Atom)