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 の差で困ったことがありましたら、ぜひ情報をお寄せください。クロスコンテナ開発の一環として、取り込みつつ解決できればと考えています。