オンラインの友達ガジェットを題材に 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つのようですね。

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