Google Friend Connect 対応した opensocial-jquery 1.0.3 をリリースしました!

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

opensocial-jquery 1.0.3 をリリースしました。opensocial-jquery は Google Friend Connect JavaScript API (GFC JS API) に対応し、いままでの OpenSocial ガジェットの開発に加えて、ソーシャルなウェブサイトも開発できるようになりました。

ひととおりの機能を盛り込んだデモを用意しましたので、まずは体験してみてください。

Google Friend Connect In-page integration (デモ)



デモのソースコードを抜粋して、使い方を紹介します。

初期化

ウェブサイトで opensocial-jquery を使うときは opensocial-jquery をロードする前に GFC JS API をロードします。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('friendconnect', '0.8');</script>
<script type="text/javascript" src="opensocial-jquery.min.js"></script>

GFC のサイト ID を指定します。必要に応じて canvas.html や rpc_relay.html を配置したディレクトリ、キャッシュの有無を指定します。そして、jQuery.ready を使って、GFC JS API を初期化します。初期化が終わると、jQuery.ready がコールバックします。

jQuery.container.id = '04434253654266747254';
jQuery.container.parentUrl = '/';
jQuery.container.cache = false;
jQuery(function($) {

リンク

サインイン、サインアウト、招待、アカウント設定のリンクを作成できます。

<div id="m1" class="menubar">
<a class="signin anonymous" href="#signin" style="display:none;">Sign in</a>
<a class="signout anonymous" href="#signout">Sign out</a>
<a class="invite anonymous" href="#invite">Invite</a>
<a class="settings anonymous" href="#settings">Settings</a>
</div>

jQuery.anonymous を使って、VIEWER がサインインしているどうかを確認できます。サインインしてないときは、不要なリンクを隠しています。

if ($.anonymous)
$('.anonymous').toggle();

jQuery.signIn を使って、サインインのポップアップを表示します。サインインするとコールバックします。ここではページをリロードしています。

$('#m1 .signin').click(function() {
$.signIn(function() {
location.reload();
});
return false;
});

jQuery.signOut を使って、サインアウトします。サインアウトとコールバックします。ここではページをリロードしています。

$('#m1 .signout').click(function() {
$.signOut(function() {
location.reload();
});
return false;
});

jQuery.invite を使って、招待のポップアップを表示します。

$('#m1 .invite').click(function() {
$.invite();
return false;
});

jQuery.settings を使って、アカウント設定のポップアップを表示します。アカウント設定を変更するとコールバックします。ここではページをリロードしています。

$('#m1 .settings').click(function() {
$.settings(function() {
location.reload();
});
return false;
});

認証プロバイダ

jQuery.signIn は、認証プロバイダを指定して、サインインのポップアップを表示できます。

<script type="text/javascript">
$('#f1').submit(function() {
$.signIn(this.provider.value, function() {
location.reload();
});
return false;
});
</script>
<form id="f1">
<select name="provider">
<option value="google">Google</option>
<option value="yahoo">Yahoo!</option>
<option value="aim">AIM</option>
<option value="openid">OpenID</option>
</select>
<input type="submit" value="Sign in" />
</form>

招待

jQuery.invite は、メッセージを指定して、招待のポップアップを表示できます。

<script type="text/javascript">
$('#f2').submit(function() {
$.invite(this.message.value);
return false;
});
</script>
<form id="f2">
<textarea name="message" rows="3" cols="40"></textarea><br/>
<input type="submit" value="Invite" />
</form>

ボタン

jQuery.fn.signIn を使って、サインインのボタンを表示できます。要素のテキストがボタンのテキストになります。また long や text の CSS で ボタンのスタイル を変更できます。

<script type="text/javascript">
$('#m2 .button').signIn(function() {
location.reload();
});
</script>
<div id="m2" class="menubar">
<div class="button"></div>
<div class="button long"></div>
<div class="button">Click here to join</div>
<div class="button text">Click here to sign in:</div>
</div>

ガジェット

jQuery.fn.gadget を使って、ウェブサイトにガジェットを追加できます。ここでは Google が開発した Members ガジェットを追加しています。このとき、ガジェットのスキンを VIEW パラメータとして引き渡しています。

<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';

$('#g1').gadget(
'http://www.google.com/friendconnect/gadgets/members.xml',
{ skin: skin }
);
</script>
<div id="g1" class="gadget"></div>

jQuery.fn.gadget を使って、指定したガジェット URL からウェブサイトにガジェットを追加しています。ここでは @agektmr さんが開発したあしあとガジェット を追加しています。

<script type="text/javascript">
$('#f3').submit(function() {
$('<div class="gadget" />')
.appendTo('#g2')
.gadget(this.url.value);
return false;
});
</script>
<form id="f3">
<input type="text" name="url" value="http://gadgets.agektmr.com/Footprints/friendconnect.xml" size="50" />
<input type="submit" value="Add gadget" />
</form>
<div id="g2"></div>

OpenSocial

jQuery.ajax と OpenSocial API を使って、ウェブサイトでプロフィールや友達リスト、アプリケーションデータ、アクティビティといったソーシャルデータを操作できます。ガジェットを開発するときと同じインタフェースを保っていますので、ガジェットを開発したときの経験や資産をそのまま活用できます。

<script type="text/javascript">
var url = '/people/@viewer/@self';
$.ajax({
url: url, dataType: 'data',
success: function(data) {
var person = data[0];
if (person.thumbnailUrl)
$('#person .thumbnail img')
.attr('src', person.thumbnailUrl)
.show();
$('#person .id')
.text(person.id);
$('#person .displayName')
.text(person.displayName);
},
error: function(xhr, status, e) {
$('#person').text(e || status);
}
});
</script>
<dl id="person">
<dt class="thumbnail"><img style="display:none;" /></dt>
<dd class="id"></dd>
<dd class="displayName"></dd>
</dl>

以上です。

Google Friend Connect API の initOpenSocialApi をもっとよく知る

initOpenSocialApi メソッドのコールバックは、何が引き金となって呼び出されたのか、判断することができません。ですが、何回目のコールバックか、cookie の有無とその変化を見て判断できそうな気もします。もうしばらく検討します。何かよい方法があったらお伝えします。

なお、見てのとおり、上記の不都合をうまく解決することができました。ここでは技術的な解説はしませんが、イベント発火元の要素やメソッドを特定できるインタフェースとし、最後の操作のみを有効とすることで解決しています。