問題提起 Google Analytics API の AuthSub 認証を OpenSocial ガジェットで使うことの是非

こんにちは。なかじまんです。

多くの人が待ち望んでいた Google Analytics API がリリースされたんですってね。さっそく、次のエントリの解説とサンプルを参考にしながら、自分のサイトでも使えることを確認できました。どんな新しいことに結び付くのか、アイディアが浮かびませんが、何かすごいサービスやアプリケーションが登場するかもしれないですね。

Google Analytics APIのJavaScriptライブラリを使ってみた(準備/認証編) - F.Ko-Jiの「一秒後は未来」

どうやらページ上に画像を1個読み込ませておかないといけないらしい。その画像の存在確認をしているのだろうか。とりあえず1pxの画像を用意してアップロード。こんな風にimgタグを書いておいた。これでログインはうまくいく。不思議不思議。ちなみにログアウトの処理は以下のようにする。

気になったのは "An image of the same domain is required on this page for authenticated reads and all writes." というエラーです。同じドメイン上に画像を配置するっていう条件は必要なんでしょうか。どうもその条件が解せません。そこで、ページ上でどんなことが起こっているのか、HTTP のリクエストやレスポンス、DOM の変化などを観察してみました。

同じドメイン上の画像は google.com からクロスドメインでデータを受信するために使っているようです。具体的には、次のようなフレームウィンドウの入れ子になっていました。example.com は自ドメインを表しています。

<iframe src="http://google.com/...">
<iframe src="http://example.com/your.gif#chunk1..."></iframe>
<iframe src="http://example.com/your.gif#chunk2..."></iframe>
</iframe>

google.com のフレーム内から example.com のフレームを生成します。そのフレームの URL が前述の画像になります。そして、その URL のフラグメントを使って、google.com から example.com へデータを中継します。example.com ではインターバルタイマーを使って、該当画像の URL を含むフレームが出現するのを監視しているようです。

ですので、同じドメイン上の画像というのは HTML(DOM) に限った条件であって、実際に画像ファイルがあるかどうかは関係ないということになりそうです。試しに存在しない画像の URL を指定してみましたが、同じように期待どおり動作しました。さらにいうと、画像の URL である必要さえないということです。

※ とはいっても 404 NotFound が多発することになります。また、img 要素で画像以外のファイルをロードするのもよいことではありませんね。画像ファイルが配置できるなら、配置するべきです。

ということは、任意のファイルを配置できない OpenSocial ガジェットなどからも使える可能性がありますね。ただし、第三者のドメインで使うとなると、セキュリティ上のリスクもあります。Google Analytics API を認証すると、自ドメインの cookie に何かトークンを保存します。このトークンの用途を理解していません。おそらく AuthSub という認証プロトコルと関係があります。

OpenSocial ガジェットで使うとどんな問題があるのかは、認証やセキュリティに詳しい人に聞くとして、少なくとも OpenSocial コンテナは、異なるドメインで、各ユーザの各ガジェットをホストしていることが条件になります。そうでないと、他のユーザや他のガジェットから前述のトークンを奪われるかもしれません。また、サードパーティの cookie を許可していなければ、そもそも使えないでしょう。

Google Analytics APIのJavaScriptライブラリを使ってみた(準備/認証編) - F.Ko-Jiの「一秒後は未来」

ログアウトしないとCookieが2年間残るらしい。

わたしが試したときは cookie は expire されておらず、ブラウザのセッションを閉じると、ログイン状態は失われました。中のひとが日々いろいろ調整しているのでしょうかね。

Google Analytics API は OAuth をサポートする(している?)と聞いたので、OpenSocial ガジェットから使うときは OAuth Proxy を使えばいいのでしょうけれど、JavaScript だけで完結できるなら、それはそれで魅力があるんですよね。

実際のところどうなんでしょう。OpenSocial ガジェットの中から Google Analytics API をJavaScript だけ (AuthSub?) で使うと弊害がありますでしょうか。とっても知りたいです。何か悪いことが起きちゃいますかね。

補足です。Opera 9.5 で試したところ "Unsupported browser. Continue at your own risk." というアラートが表示され、そのまま継続しても期待どおり動作しませんでした。また Chrome で試したところ "No Analytics account was found for the currently logged-in user" というアラートが表示され、期待どおり動作しませんでした。Opera はともかく Chrome で動作しないのはなんでだろう。不思議です。

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 にアップロードするための加工や変換も必要ありません。これ。いいっす。大発見です。

Google Friend Connect での newFetchPeopleRequest OWNER/ADMINS はどういったものなのか調べてみた

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

Google Friend Connect の newFetchPeopleRequest は、いわゆる他の OpenSocial コンテナとは異なり、FRIENDS のほかに ADMINS という groupId を指定できます。この ADMINS がどんなものなのか、ざっと調べてみました。

ADMINS という groupId は、userId が OWNER のときだけ指定できます。Google Friend Connect の OWNER は、ガジェットの所有者ではなく、その SNS 化したいサイト(例えば、このブログ)を表します。ですので、OWNER の ADMINS とは、このサイトの管理者ということになります。

サイトの管理者はどう決まるかというと、はじめに Google Friend Connect の Set up a new site からサイトを登録したときの Google アカウントが管理者になります。また、管理者は追加して複数人とすることもできます。

管理者の追加や削除は、次のように Google Friend Connect サイトでできました。管理者はメールアドレスを指定して追加できます。このメールアドレスは Google アカウントである必要があります。つまり Google Friend Connect のユーザとは異なる管理体系です。また、はじめにサイトを登録したときの管理者は削除できないようです。



次のとおり newFetchPeopleRequest で OWNER の ADMINS を指定すると、サイトの管理者のプロフィールが取得できます。このときのプロフィールは Google Friend Connect ではなく Google Profile の内容になりました。前述のとおり、サイトの管理者は、管理体系が異なるようなので、サイトのメンバーや友達関係とも関係がありません。

$.getData(
'/people/@owner/@admins', { fields: 'profileUrl', count: 100 }
).next(function(people) {
console.log(people);
});

profileUrl を指定しているのですが、取得した内容に含まれませんでした。Google Profile の URL を期待したのですが、何か理由があるのかもしれません。また urls を指定しなくても、マイリンクがどっさり含まれていました。あとは id, aboutMe, displayName といったところです。これ以外に何が取得できるのかは試していませんが、profileUrl にあるように ADMINS は特別な振る舞いをするような予感がします。

上記の JavaScript コードは opensocial-jquery を使って newFetchPeopleRequest を実行しています。最新のリリースである opensocial-jquery 1.0.1
では @admins は使えませんが、次のバージョンで使えるようにします。trunk のものは対応してありますので、よかったら使ってみてください。

あと Google Friend Connect (API) の注目すべきところや、Google Friend Connect ガジェットの特徴や作り方は、次のエントリが詳しいです。一読をオススメします。

• Google FriendConnect API公開の衝撃｜gihyo.jp … 技術評論社
• Google FriendConnect APIとFacebook Connectという変態たち - snippets from shinichitomita’s journal
• Tender Surrender » FriendConnect向けあしあとガジェット公開とコード解説
• Tender Surrender » Google FriendConnect対応ガジェットが完成

(続) いくつかコンテナをピックアップして gadgets.io.makeRequest で SIGNED リクエストを投げてみました

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

いくつかコンテナをピックアップして gadgets.io.makeRequest で SIGNED リクエストを投げてみました。

いくつかのコンテナをピックアップして gadgets.io.makeRequest で SIGNED リクエストを投げてみました。リクエスト先にどのようなパラメータが届くのか気になっていたので、この機会にメモしましたのでお伝えします。何かの参考になれば幸いです。

続けて goo Social Platform と Google Friend Connect でも gadgets.io.makeRequest で SIGNED リクエストを投げてみました。

↓goo Social Platform です。長いパラメータ値は省略...しています。

POST /html.cgi?
oauth_nonce=481b41a1dfcf30e9104e1007d871d8bc&
oauth_timestamp=1240319903&
oauth_consumer_key=goo.ne.jp&
opensocial_owner_id=developmentor&
opensocial_viewer_id=developmentor&
opensocial_app_id=oLIhOpmAdmKz&
oauth_token=&
xoauth_signature_publickey=http%3A%2...&
oauth_signature_method=RSA-SHA1&
oauth_signature=oGyFzzLK1Z...

xoauth_signature_publickey は公開鍵の URL そのもののようです。opensocial_app_url は含まれないようです。

↓Google Friend Connect です。長いパラメータ値は省略...しています。

POST /html.cgi?
oauth_body_hash=2jmj7l5rSw0yVb%2FvlWAYkK%2FYBwk%3D&
opensocial_owner_id=06839264165111349771&
opensocial_viewer_id=12976690996215323511&
opensocial_app_id=16421886313376599907&
opensocial_app_url=http%3A%2F%2...&
xoauth_signature_publickey=pub.1229714852.-8759618427808416822.cer&
oauth_version=1.0&
oauth_timestamp=1240319353&
oauth_consumer_key=friendconnect.google.com&
oauth_signature_method=RSA-SHA1&
oauth_nonce=1240319353855292000&
oauth_signature=VlMwQPJ1Gm...

ガジェットの中から gadgets.io.makeRequest したものです。Important OAuth signing changes coming to a container near you で告知されていた oauth_body_hash (OAuth Request Body Hash) が含まれていますね。それ以外は iGoogle や Orkut と同じようです。

この OAuth Request Body Hash というものですが、とても後ろ向きな対応で、解せない感じがするのですが、これって本当に必要なものでしょうか。なんか複雑にしてるだけのような気がする...。理解不足だったらごめんなさい。

goo Social Platform と Google Friend Connect から gadgets.io.makeRequest で SIGNED リクエストを投げるコードを紹介しておきます。

var url = 'http://example.com/html.cgi';
$.ajax({
type: 'post', url: url, oauth: 'signed',
complete: function(xhr, status) {
console.log('complete: oauth: signed', xhr, status);
}
});

今のところ Google Friend Connect ガジェットからも opensocial-jquery は使えています。現在 Google Friend Connect ガジェットでの動作確認を進めているところです。次のバージョンで対応する予定です。

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 チェーンできるようにしました。

$.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 でも使えるようにします。

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 ドキュメント をみてください。

オンラインの友達ガジェットからアクティビティを登録するのをやめました。

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

オンラインの友達ガジェットを題材に goo Social Platform でアクティビティの登録を試してみた。

ちょっと前に紹介したオンラインの友達ガジェットをパワーアップして、オンラインになったとき、任意のメッセージをアクティビティに登録するようにしました。... このメッセージをアクティビティに登録するという機能は、積極的に役立つものでもなく、評判や反応もイマイチなので、週明けにもサポートを取りやめて元に戻そうと思います。もしも試してみたいというときは、それまでにお願いします。

予定どおり、オンラインの友達ガジェットからアクティビティを登録しないように差し替えました。また、差し替える前のソースコード を置いておきます。

オンラインの友達ガジェットを題材に goo Social Platform でアクティビティの登録を試してみた。

こんばんは。なかじまんです。周囲は Mixi Platform の話題が熱いですが、ここは goo Social Platform ネタでいきます。

goo Social Platform 向けオンラインの友達ガジェットを Orkut sandbox に対応させてみた

opensocial-jquery を使って goo Social Platform 向けに オンラインの友達を表示するガジェット を作成しました。オンラインである友達のサムネイルを並べて表示します。マイホーム(home view)の左列に配置するのをオススメします。

ちょっと前に紹介したオンラインの友達ガジェットをパワーアップして、オンラインになったとき、任意のメッセージをアクティビティに登録するようにしました。↓次のスクリーンショットのような感じです。

スクリーンショットは、マイホームの友達・コミュニティの更新情報を切り出したものです。"呼ばれて飛び出てジャジャジャジャーン" や "出まして来ましてアクビちゃ～ん" というやつが、オンラインの友達ガジェットから登録したアクティビティです。



サムネイルの横にある小さなアイコンは、オンラインの友達ガジェットを表すアイコンです。このアイコンは、次のように、ガジェットXML の /Module/ModulePrefs/Icon 要素で指定できます。

<Icon>http://developmentor.lrlab.to/favicon.ico</Icon>

また、このアイコンは、ガジェットの説明ページにリンクされています。ですので、このアイコンを工夫すれば、ガジェットへの関心が高まって、インストールして貰える確立が高まるかもしれないですね。

アクティビティのメッセージは、次のとおり、ガジェットの設定ページで指定できるようにしました。この挨拶というテキストボックスは、ガジェットXML の /Module/UserPref 要素で指定できます。



オンラインになったとき、指定したメッセージをアクティビティを登録すると、いつログインしたかその時刻が友達に伝わってしまうため、プライバシーを気にする人も出てくるかもしれません。かといって、これを気に入って積極的に使いたい人もいるかもしれません。

こういうときは、ガジェットの設定ページにある "ガジェットからアクティビティを更新" がうまく使えます。"ガジェットからアクティビティを更新" のチェックを OFF にすると、ガジェットからアクティビティを登録しようとするとき、次のように、許可を求めるダイアログを表示するようになります。



ここで "許可しない" を選択すれば、アクティビティが登録されずに継続します。"許可する" を選択すれば、アクティビティが登録されます。また、"許可する" を選択すると、今後はダイアログが表示されないようになります。

最後に改良したソースコードを抜粋します。最後にアクセスしてから 60分を経過していたとき、オンラインになったと判断して、メッセージをアクティビティに登録しています。ダイアログの表示は OpenSocial API の中で、自動的に処理してくれますので、特別なコードを書く必要はありません。

return $.getData(
'/appdata/@me/@self'
).next(function(appdata) {

var now = new Date().getTime();

var data = {};
for (id in appdata)
data = appdata[id] || {};

return $.postData(
'/appdata/@me/@self', { lastUpdate: now },
function () {
if ((data.lastUpdate || 0) + 3600*1000/*60min*/ < now)
$.postData(
'/activities/@me/@self', { title: $.pref('say') || $.msg('say') }
);
});
});

このメッセージをアクティビティに登録するという機能は、積極的に役立つものでもなく、評判や反応もイマイチなので、週明けにもサポートを取りやめて元に戻そうと思います。もしも試してみたいというときは、それまでにお願いします。

主要ブラウザのツールで document.write した JavaScript をデバッグできるか確認してみた

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

主要ブラウザのツールで eval した JavaScript をデバッグできるか に続いて document.write した JavaScript をデバッグできるか確認してみました。もとネタとした JavaScript は、次のとおりです。

<script type="text/javascript">
document.write(
' <script> ',
' function d2() { \n',
' var foo = 1; \n',
' var bar = 2; \n',
' foo += bar; \n',
' console.log(foo, bar); \n',
' }; ',
' <\/script> '
);
</script>
<input type="button" value="d2" onclick="d2();" />

IE8

標準の開発ツールでデバッグできませんでした。何か方法をご存知でしたら教えてください。

IE7 以前

調べていません。ご存知でしたら教えてください。

Firefox 3

Firebug を使ってデバッグできますが、実用レベルではありませんでした。JavaScript 中から debugger; を使ってデバッガを起動し、ステップ実行できるのですが、ソースコードと実行中の行がチグハグで、どの箇所をデバッグしているか判断できません。何か方法をご存知でしたら教えてください。

Firefox 2 以前

Firefox 3 と同じです。

Chrome

次のとおり、標準の JavaScript Debugger を使って、デバッグできませんでした。関数単位でブレークポイントは指定できましたが、行単位はできませんでした。具体的なファイル名が分かれば、行単位でデバッグできるのですが、document.write で生成した無名リソースは、関数が最小単位のようです。何か方法をご存知でしたら教えてください。



Safari 4

標準の Web Inspector を使ってデバッグできませんでした。何か方法をご存知でしたら教えてください。

Safari 3 以前

Safari 4 と同じです。

Opera 9.5, 9.6

次のとおり、標準の Dragonfly を使ってデバッグできました。



Opera 9.2 以前

調べていません。ご存知でしたら教えてください。

以上です。document.write した JavaScript をデバッグするときは Opera 9.5, 9.6 を使うとよさそうです。本当に困り果てたときは Firebug でガンバルという選択もありそうです。

goo Social Platform 向けオンラインの友達ガジェットを Orkut sandbox に対応させてみた

こんにちは。なかじまんです。

opensocial-jquery を使って goo Social Platform 向けに オンラインの友達を表示するガジェット を作成しました。

↓そのスクリーンショットです。オンラインである友達のサムネイルを並べて表示します。マイホーム(home view)の左列に配置するのをオススメします。また、ソースコードと解説 も用意しましたので、参考にしてください。



今回はさらに、このオンラインの友達ガジェットを goo Social Platform に加えて Orkut sandbox にも対応させてみました。

↓そのスクリーンショットです。goo Social Platform と Orkut sandbox は 1つの XML ファイルで対応しています。また、各 SNS のデザインに調和するように goo Social Platform と Orkut sandbox とで見た目が変わるようにしています。




詳しくは ソースコード を見てください。ここでは goo Social Platform と Orkut sandbox の差分や違いをどう表現しているのかピックアップして紹介します。

まず opensocial-jquery 自体は goo Social Platform や Orkut sandbox も含め、開発者が SNS の差をなるべく意識しないようにデザインしています。ですので、次のとおり XML ファイルを改版するだけで、goo Social Platform 向けのガジェットを Orkut sandbox に対応させることができました。

サムネイルの画像サイズ

SNS のデザインに合わせて、サムネイルのサイズを状況によって選択しています。$.container.goohome が goo Social Platform かを判断しています。もしくは $.container.orkut で判断することもできます。そして、goo Social Platform のときは、専用の API を使って 30px のサムネイル URL を使っています。それ以外(Orkut sandbox)のときは、64px のサムネイル URL をそのまま使っています。

var img = $('<img />')
.attr('alt', person.displayName)
.attr('src', $.container.goohome ? goohome.util.convertThumbnailSize(
person.thumbnailUrl, goohome.ThumbnailUrl.Size.SMALL
) : person.thumbnailUrl);

プロフィール URL

Orkut sandbox は、デフォルトでプロフィール URL を返却しなようです。ですので、プロフィールの項目として profileUrl を要求しています。

// people
$.getData(
'/people/@me/@friends/@app', { fields: 'profileUrl', count: 100 }
).next(function(people) {

Orkut sandbox の プロフィール URL は / からはじまり http:// という URL にならないようです。ですので parent パラメータから SNS の URL を取得して、プロフィール URL を補っています。

$('<a/>')
.attr('title', person.displayName)
.attr('href', (
person.profileUrl.indexOf('http://') == 0 ? '' : $.pref('parent')
) + person.profileUrl)
.attr('target', '_top')
.append(img)
.appendTo('#body');

なお、本来ならプロフィール URL は http:// はじまるべきなので、上のコード相当は opensocial-jquery で対応し、開発者が意識しないようにすべきです。次のバージョンで対応しますので、少しお待ちください。issue っときました。

デザイン, CSS

各 SNS のデザインに調和するように SNS 単位で CSS を指定しています。.goohome が goo Social Platform を、.orkut が Orkut sandbox の CSS を表しています。

#body {
padding: 5px;
}

.goohome #body img {
border: 1px solid #ccc;
margin: 1px;
padding: 1px;
width: 30px;
height: 30px;
}

.goohome #body img:hover {
border: 1px solid #333;
}

.orkut #body img {
background: #f0f0f0;
border: 0;
margin: 0 5px 5px 0;
padding: 5px;
width: 64px;
height: 64px;
}

このように opensocial-jquery は、開発者が SNS の差をなるべく意識しないようにデザインしています。さらに、開発者が SNS の差を意識して SNS 固有の対応もできるようにしています。これを opensocial-jquery ではクロスコンテナデ開発と呼び、重要な課題の1つとして取り組んでいます。

クロスコンテナ開発の対応状況は opensocial-jquery の ドキュメント を見てください。 もしも SNS の差で困ったことがありましたら、ぜひ情報をお寄せください。クロスコンテナ開発の一環として、取り込みつつ解決できればと考えています。

主要ブラウザのツールで eval した JavaScript をデバッグできるか確認してみた

こんにちは。なかじまんです。Twitter での言いだしっぺということもあり、少し泥臭いことしました。

主要ブラウザのツールで eval した JavaScript をデバッグできるか確認してみました。もとネタとした JavaScript は、次のとおりです。

<script type="text/javascript">
eval(
' function d1() { \n' +
' var foo = 1; \n' +
' var bar = 2; \n' +
' foo += bar; \n' +
' console.log(foo, bar); \n' +
' }; '
);
</script>
<input type="button" value="d1" onclick="d1();" />

IE8

次のとおり、標準の開発者ツールを使って、デバッグできました。



IE7 以前

デバッグできませんでした。アドインが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Firefox 3

次のとおり、Firebug を使って、デバッグできました。ただ、タイミングなどによって、うまく動作しないことがあります。何かコツがあるのかもしれません。



Firefox 2 以前

Firebug を使っても、デバッグできませんでした。JavaScript 中から debugger; を使って、デバッガを起動できるのですが、eval した JavaScript を行単位でデバッグできませんでした。また、他のアドオンが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Chrome

次のとおり、標準の JavaScript Debugger を使って、デバッグできませんでした。関数単位でブレークポイントは指定できましたが、行単位はできませんでした。具体的なファイル名が分かれば、行単位でデバッグできるのですが、無名リソースは、関数が最小単位のようです。無名リソースで、行単位にデバッグする方法をご存知でしたら教えてください。



Safari 4

次のとおり、標準の Web Inspector を使って、デバッグできました。



Safari 3 以前

デバッグできませんでした。アドオンが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Opera 9.5, 9.6

次のとおり、標準の Dragonfly を使って、デバッグできました。



Opera 9.2 以前

調べていません。ご存知でしたら教えてください。

以上です。最新か次世代のブラウザであれば、おおむねデバッグできるようですね。

Golazo MA4 のソースコードを公開しました。Mashup Awards や Aptana Jaxer で何かの役に立てばいいかなと。

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

Mashup Awards 4 で、沖電気工業賞と日産自動車賞をダブル受賞した Golazo MA4 のソースコードを公開しました。興味がありましたら、次のサイトからダウンロードしてみてください。

http://code.google.com/p/golazo/

次のような期待感から、ソースコードを公開することにしました。

Golazo MA4 は Aptana Jaxer 0.9.7 r2472 でアプリケーションを構築し、運用しています。残念なことに Aptana Jaxer を使ったアプリケーションの事例が少ない現状があります。そこで Aptana Jaxer の再評価のネタとして、または、聞いたことはあるけど、どんなものなんだろう... という関心に答えたいため、ソースコードを公開します。また Aptana Jaxer 1.0.0 以降では、多くの改善と機能の追加がされていますので、そのあたりも含めて、この機会に Aptana Jaxer の再発見につながればと期待しています。

Golazo MA4 は LocoSticker 位置表現特定 API と Mextractr メタデータ自動抽出 API を使っています。ブラウザからアプリケーションを操作するだけでは、具体的にどう API を使ったり、組み合わせているのかは、想像するしかなかったと思いますが、ソースコードを見れば一目瞭然です。それぞれの API の使い方や応用に役立つのではないかと期待しています。

Mashup Awards の応募作品のソースコードがどのくらい公開されているのか把握していません。Mashup Awards の応募作品って、どんなもので、どうなっているんだろうという関心もあるんじゃないかと思います。私もそのひとりです。Aptana Jaxer というちょっと特殊な動作環境ではありますが、今後 Mashup Awards に作品を応募してみようという方々のヒントになればと期待してます。

そう。Mashup Awards 5 が開催されるかは分かりませんが、たぶん継続するんじゃないかな。

Gadgeteer: Easy OpenSocial gadget development with Rails or Sinatra.

おはようございます。なかじまんです。次の取り組みの中で opensocial-jquery が使われています。

Gadgeteer: Easy OpenSocial gadget development with Rails or Sinatra.

Gadgeteer simplifies OpenSocial Gadget development by giving you helpers you can use in your Rails application to verify Signed Requests and access OpenSocial data.

OpenSocial ガジェットと SIGNED リクエストを使って、プロフィール (VIEWER や OWNER) のデータをバックエンドで扱うのを目的とした Rails アプリケーションの枠組みです。gnerate すると、ガジェットからバックエンドまで、この目的を実現するためのコードを生成してくれるようです。

opensocial-jquery は、ガジェットのための JavaScript ライブラリの中で使われています。ざっとソースコードを眺めてみましたが、jQuery.getData を使ったプロフィールの取得や jQuery.ajax を使った SIGNED リクエストの発行に使っているようです。また、jQuery.fn.adjustHeight などヘルパ的なものも使っていました。

プレゼンテーションの動画と スライド (PDF) を公開しています。どのような場なのか分かりません。英語でもないですかね。



opensocial-jquery を使った実例ということでお伝えしました。参考になればうれしいです。

Google Friend Connect JS API が Firefox2 だと遅い理由が分かったかも!?

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

Google Friend Connect JS API を使い始めてみたのですが、どうやって People や AppData などのサイズの大きいデータをクロスドメインで交換しているのか気になったので、次の実例を元にその仕掛けを調べてみました。

Welcome to the Friend Connect integration example site
http://www.ossamples.com/api/

基本的な仕掛けは Gadgets API の gadgets.rpc と同じようです。きっと実装も同じでしょう。ですので、IE6, IE7, Firfox2 など、旧世代の多くのブラウザでは、iframe と rpc_relay.html のフラグメントを使って、お互いにリレー(プロキシ)して、クロスドメインのデータ交換をすることになります。

そこで、大きな疑問にぶつかりました。IE6 や IE7 の URL 最大長は 4000 バイト弱です。もちろんフラグメントも含みます。4000 バイトでは People や AppData などのサイズの大きいデータは、とても収まりません。ですが、JS API は 4000 バイトを超えるであろうデータを取得できているのです... なんでだろう。

newFetchPersonRequest をよくよく観察してみると、1回の実行結果を分割して iframe と rpc_relay.html で繰り返しリレーしているようです。その1回のデータサイズは 4000 バイトに収まるようになっています。4000 バイトを超えるときは、分割してリレーしてるってことなんでしょう。ビビリました。

なお、Firefox3 など window.postMessage などフレームウィンドウ間でメッセージを交換できる API を備えたブラウザはその限りではありません。たぶん。そう見えます。

ですので、Google Friend Connect JS API は、ブラウザによって、かなりパフォーマンスのバラツキがあることになります。Firefox2 でなんだかロードが遅いなぁと感じるところがあったのですが、ここらへんが原因の1つのようですね。

ざっと調べたので、少し事実と異なることがあるかもしれません。あしからずです。