2009-08-20

opensocial-jquery と Google Gadget Editor を使って iGoogle production でガジェットを開発しよう

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

2009年8月12日 米国の iGoogle は OpenSocial に正式対応しました。残念ながら日本はまだですが、近いうちに対応することが予想できます。なので、今後 iGoogle に向けた OpenSocial ガジェット (アプリ) の開発も広がってくるでしょう。

もちろん opensocial-jquery も iGoogle を熱烈サポートしていきます。なんたって最終的には全世界がターゲットになるのですからね。そこで iGoogle を使った opensocial-jquery のチュートリアルを用意しました。Google アカウントさえあれば WEB ブラウザ 1つだけで体験できる構成にしています。

それではチュートリアルをはじめます。

はじめに iGoogle (米国) http://www.google.com/ig?hl=en にログインしてください。



続けて iGoogle に Developer Gadget を追加してください。



続けて iGoogle に Google Gadget Editor を追加してください。そして Hello, world! ガジェットのソースコードが表示されるのを確認してください。



Google Gadget Editor で File メニューから Save を選択してください。続けて playground.xml と入力して OK ボタンをクリックし、Hello, world! ガジェットを保存してください。



playground.xml の URL を確認します。playground.xml のリンクを開いてください。



このときの playground.xml の URL を手元に控えてください。次のような URL になるはずです。数値の部分は各自によって異なります。

http://hosting.gmodules.com/ig/gadgets/file/(数値)/playground.xml

Developer Gadget で、手元に控えた playground.xml の URL を入力して Add ボタンをクリックし、iGoogle にガジェットを登録してください。



iGoogle に playground.xml として保存したガジェットが表示されます。



iGoogle が playground.xml をキャッシュしないように cached チェックボックスを OFF にします。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>

]]></Content>
</Module>
ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボックスが表示されるのを確認してください。

※ playground.xml に HTML を記述すると、そのままガジェットで表示されます。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
$(document.form).submit(function() {
alert(this.q.value + ' ' + this.c.value);
return false;
});
});
</script>

]]></Content>
</Module>
ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そしてSearch ボタンをクリックし、入力内容が alert 表示されるのを確認してください。

※ opensocial-jquery は http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js のアドレスで配信しています。詳しくは opensocial-jquery on the cloud を見てください。
※ playground.xml に JavaScript を記述すると、そのままガジェットで実行されます。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
$(document.form).submit(function() {
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { alt: 'json',
vq: this.q.value,
'max-results': this.c.value
};
$.getJSON(url, data, function(json) {
$.each(json.feed.entry, function() {
$('<img />')
.attr('src', this.media$group.media$thumbnail[0].url)
.appendTo('#videos');
});
});

return false;
});
});
</script>
]]></Content>
</Module>
ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、入力内容にしたがって YouTube から動画を検索し、サムネイルがリスト表示されるのを確認してください。

※ opensocial-jquery は jQuery の Ajax API をクロスドメイン対応に拡張します。
※ YouTube の動画検索は YouTube Data API を使っています。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>

<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
$(document.form).submit(function() {
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { alt: 'json',
vq: this.q.value,
'max-results': this.c.value
};
$.getJSON(url, data, function(json) {
$.each(json.feed.entry, function() {
$('<img />')
.attr('src', this.media$group.media$thumbnail[0].url)
.appendTo('#videos');
});
});
$(window).adjustHeight();
return false;
});
});
</script>
]]></Content>
</Module>
ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、サムネイルの数に応じて、ガジェットの高さが自動調整されるのを確認してください。

※ playground.xml に <Require feature="dynamic-height"> を記述すると、jQuery.fn.adjustHeight がロードされます。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<style>
#videos img { margin: 2px; width: 80px; hegith: 60px; }
</style>

<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
$(document.form).submit(function() {
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { alt: 'json',
vq: this.q.value,
'max-results': this.c.value
};
$.getJSON(url, data, function(json) {
$.each(json.feed.entry, function() {
$('<img />')
.attr('src', this.media$group.media$thumbnail[0].url)
.appendTo('#videos');
});
});
$(window).adjustHeight();
return false;
});
});
</script>
]]></Content>
</Module>
ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search タンをクリックし、CSS が適用されるのを確認してください。

※ playground.xml に CSS を記述すると、そのままガジェットで適用されます。



これでチュートリアルはおしまいです。

これ以降は opensocial-jquery のドキュメント を参照してください。その中で質問や要望が出てきましたら、お気軽にコメントください。

2009-08-19

opensocial-jquery on the cloud (大げさなタイトルでごめんなさい)

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

OpenSocial ガジェット (アプリ) を開発するとき、jQuery や Dojo、YUI などメジャーなライブラリを Google AJAX Libraries API からロードしてるのをよく見かけます。

Google AJAX Libraries API を使うと...

* ライブラリをホストする必要がない
* ライブラリのロード効率がロケーションに左右されない
* ライブラリのブラウザ(コンテナ?)キャッシュを共有できる

といったよいことがあり、システム上の都合のみならず、ユーザ体験の向上にもつながる効果が期待できます。

そこで opensocial-jquery でも同じ効果を期待して Amazon CloudFront という CDN サービスを使って opensocial-jquery を配信することにしました。

アドレスは、次のとおりです。特に制限などはしませんので、自由に使ってください。

http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js

不審な点がありましたら、レスポンスヘッダを参照してください。こんな感じです。
x-amz-id-2: (省略)
x-amz-request-id: (省略)
Date: Fri, 14 Aug 2009 01:54:08 GMT
Expires: Wed, 01 Jan 2020 00:00:00 GMT
Last-Modified: Fri, 14 Aug 2009 01:23:02 GMT
Etag: "1b7460e4035ac8cb3d0f1c4a9e2c1d59"
Content-Type: text/javascript
Content-Length: 73683
Server: AmazonS3
Age: 86386
X-Cache: Hit from cloudfront
Via: 1.0 d8c8b41b52e430ca9dc4842099bfe99a.cloudfront.net:11180 (CloudFront), 1.0 dfd248577076af79b5214034bb864f31.cloudfront.net:11180 (CloudFront)
Connection: keep-alive
Amazon CloudFront は転送量で課金されますが、よっぽど膨大なアクセスがない限り、ちょっとした課金で済みますので、今のところ心配はしていません。もしも高額になったり、負担が増えることがあれば、事前に相談の周知をします。むしろそのくらい使って貰えたらうれしいです。

また Expires ヘッダを使って 2020年1月1日までキャッシュを促すようにしていますので、ブラウザやコンテナがキャッシュ制御してくれれば、思ってるほどアクセスは発生しなかもしれませんね。

2009-08-14

opensocial-jquery と Google Gadget Editor を使って gooホーム sandbox でガジェットを開発しよう

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

opensocial-jquery のチュートリアルを用意しました。Google と goo のアカウントさえあれば、WEB ブラウザ 1つだけで体験できる構成にしています。

opensocial-jquery は jQuery を使って WEB サイトを開発する手法を OpenSocial のガジェットにも持ち込もうという目的ではじめたものです。

ですので、このチュートリアルは、日々 jQuery を使って WEB サイトを開発しているがOpenSocial 環境でガジェットを開発したことがないとか、開発しようとしたが新しいことを覚えるのに抵抗を感じているという方々に体験して貰いたいものです。

まずは OpenSocial のガジェットは特別なもの... という感覚をリセットして、jQuery を使って WEB サイトを開発した経験を opensocial-jquery によって OpenSocial のガジェット開発にも再活用できないか...という視点で再確認してはどうかと提案します。その中で新しい発見があればうれしい限りです。

それではチュートリアルをはじめます。

はじめに Google にログインしてください。



次に Google Gadget Editor を開いてください。そして Hello, world! ガジェットが表示されるのを確認してください。



Hello, world! ガジェットを赤字のとおり修正してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
description="hello world example" />
<Content type="html" view="profile,home,canvas"><![CDATA[
Hello, world!
]]></Content>
</Module>
File メニューから Save を選択してください。続けて playground.xml と入力して OK ボタンをクリックし、Hello, world! ガジェットを保存してください。



playground.xml の URL を確認します。playground.xml のリンクを開いてください。



このときの playground.xml の URL を手元に控えてください。次のような URL になるはずです。数値の部分は各自によって異なります。

http://hosting.gmodules.com/ig/gadgets/file/(数値)/playground.xml

続けて goo ホーム sandbox にログインしてください。そして、ガジェット開発管理へをクリックしてください。

※ goo ホーム sandbox のアカウントを持っていないときは ディベロッパー申請 をしてください。数営業日で受理されます。



手元に控えた playground.xml の URL を入力して新規作成ボタンをクリックし、ガジェットを登録してください。



そして、このガジェットを追加ボタンをクリックし、ガジェットをインストールしてください。



ガジェットを追加ボタンをクリックしてください。



このガジェットを見るボタンをクリックしてください。



playground.xml として保存したガジェットが表示されます。

このときのガジェットの URL を手元に控えてください。次のような URL になるはずです。gooID や英数字の部分は各自によって異なります。

http://sandbox.home.goo.ne.jp/gadget/canvas/(gooID)/(英数字)/(英数字)



Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
description="hello world example" />
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>

]]></Content>
</Module>
goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボックスが表示されるのを確認してください。

※ playground.xml に HTML を記述すると、そのままガジェットで表示されます。



Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>

<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<script>
jQuery(function($) {
$(document.form).submit(function() {
alert(this.q.value + ' ' + this.c.value);
return false;
});
});
</script>

]]></Content>
</Module>
goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、入力内容が alert 表示されるのを確認してください。

※ playground.xml に <Require feature="opensocial-jquery"> を記述すると、opensocial-jquery がロードされます。
※ playground.xml に JavaScript を記述すると、そのままガジェットで実行されます。



Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<script>
jQuery(function($) {
$(document.form).submit(function() {
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { alt: 'json',
vq: this.q.value,
'max-results': this.c.value
};
$.getJSON(url, data, function(json) {
$.each(json.feed.entry, function() {
$('<img />')
.attr('src', this.media$group.media$thumbnail[0].url)
.appendTo('#videos');
});
});

return false;
});
});
</script>
]]></Content>
</Module>
goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、入力内容にしたがって YouTube から動画を検索し、サムネイルがリスト表示されるのを確認してください。

※ opensocial-jquery は jQuery の Ajax API をクロスドメイン対応に拡張します。
※ YouTube の動画検索は YouTube Data API を使っています。



Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
description="hello world example">
<Require feature="opensocial-jquery" />
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<script>
jQuery(function($) {
$(document.form).submit(function() {
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { alt: 'json',
vq: this.q.value,
'max-results': this.c.value
};
$.getJSON(url, data, function(json) {
$.each(json.feed.entry, function() {
$('<img />')
.attr('src', this.media$group.media$thumbnail[0].url)
.appendTo('#videos');
});
});
$(window).adjustHeight();
return false;
});
});
</script>
]]></Content>
</Module>
goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、サムネイルの数に応じて、ガジェットの高さが自動調整されるのを確認してください。

※ playground.xml に <Require feature="dynamic-height"> を記述すると、jQuery.fn.adjustHeight がロードされます。



Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<style>
#videos img { margin: 2px; width: 80px; hegith: 60px; }
</style>

<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<script>
jQuery(function($) {
$(document.form).submit(function() {
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { alt: 'json',
vq: this.q.value,
'max-results': this.c.value
};
$.getJSON(url, data, function(json) {
$.each(json.feed.entry, function() {
$('<img />')
.attr('src', this.media$group.media$thumbnail[0].url)
.appendTo('#videos');
});
});
$(window).adjustHeight();
return false;
});
});
</script>
]]></Content>
</Module>
goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、CSS が適用されるのを確認してください。

※ playground.xml に CSS を記述すると、そのままガジェットで適用されます。



これでチュートリアルはおしまいです。

これ以降は opensocial-jquery のドキュメント を参照してください。その中で質問や要望が出てきましたら、お気軽にコメントください。

2009-08-13

opensocial-jquery 1.0.4 をリリースしました



こんばんは。なかじまんです。opensocial-jquery 1.0.4 をリリースしました。

opensocial-jquery
http://code.google.com/p/opensocial-jquery/

1.0.4 は Google Friend Connect (GFC) 対応の強化とバグ対応です。

言語の選択

jQuery.container.locale を使って、サイトの言語を指定できるようにしました。あらかじめ GFC の管理画面でサイト言語を設定しておけますが、その設定よりも優先します。省略したときは、既定のサイト言語になります。

jQuery.container.locale = 'en';

jQuery.fn.gadget を使って、ガジェットを表示するとき、対象の要素に lang か xml:lang 属性があれば、その言語でガジェットを表示するようにしました。このときjQuery.container.locale より優先します。

<script type="text/javascript">
$('div.gadget').gadget('http://example.com/gadgets.xml');
</script>
<div class="gadget" lang="ja"></div>
<div class="gadget" xml:lang="ja"></div>

キャンバスビュー

jQuery.fn.gadget を使って、ガジェットを表示するとき、対象の要素のクラス名に canvas を含むとき、ガジェットをキャンバスビューで表示するようにしました。

<script type="text/javascript">
$('div.gadget').gadget('http://example.com/gadgets.xml');
</script>
<div class="gadget" class="canvas"></div>

スキン

jQuery.skin を使って、スキンを参照できるようにしました。BG_COLOR といった Gadgets API 形式のほかにも bgColor といった JavaScript ライクなキー名でも参照できるようにしてあります。以下の実例は、同じ結果になります。

$.skin('BG_COLOR');
$.skin('bgColor');

バグ対応

Issue 19: fields.split(',') した後、trim すべきじゃないか。

その他

ガジェットや Google Friend Connect でもない普通のサイトで、普通の jQuery としても使えるようにしました。

デモ

Google Friend Connect In-page integration



Golazo GeoNotes

2009-08-12

Golazo GeoNotes is available. It's social web app that integrated with Google Friend Connect highly.

Hello,

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!

Thank you very much for the chance to introduce Golazo GeoNotes.

Golazo GeoNotes
http://golazo.aptanacloud.com/



Golazo GeoNotes is the social web application that integrated with Google Friend Connect (GFC) highly. I developed this demo app from the following purpose.

* What kind of a social web application can we build when we use GFC platform and API?

* When we use GFC platform and API, how far we can develop a social Web application effectively?

In this app, you post a geographic text, and can associate a geographic coordinate automatically. And you can share the text with a friend.

This app depends on GFC platform and API for the following social functions.

* With sign-in button of GFC and and two-legged OAuth by fcauth this app authenticate an account and link a profile.

* This app displays Site View, Home View, Profile View, and Canvas View with a social graph of GFC.

* This app displays members, friends, footprints, activities, chat, comment, and recommend with a Social Gadgets in each
view.

* This app depends on Members Gadgets for the management of the profile, a search and the invitation of the friend.

A development environment and the volume of this app are as follows.

* Aptana Cloud (Jaxer, Apache2, MySQL5)
* ActiveJS
* opensocial-jaxer-client
* opensocial-jquery
* jQuery XML to JSON Plugin
* CSS Browser Selector

* 896 lines of JavaScript on client and server.
* 10 pages of HTML
* 2 tables on database
* 9 social gadgets

I want to contribute to the Jaxer, GFC, and OpenSocial with this demo app. Did you think to develop the custom social web application that used Jaxer and GFC?

Thank you.

2009-08-10

Google Friend Connect をベースとしたウェブアプリのデモサイトを公開しました

こんばんは。なかじまんです。ブログの投稿は久しぶりです。

Google Friend Connect をベースとしたウェブアプリのデモサイトを公開しました。Golazo GeoNotes という位置付きメモを投稿して、友達とそのメモをタイムラインで共有しようというものです。

Golazo GeoNotes
http://golazo.aptanacloud.com/

Golazo GeoNotes を開発した目的は 2つあります。1つ目は Google Friend Connect というプラットフォームと API を使うと、どんなソーシャルなウェブアプリが構築できそうか、その可能性を確認することです。2つ目は、プラットフォームと API を活用することで、どのくらい作らずに済みそうか、その効率を確認することです。

これらの考察は、いろいろな方から助言などを貰いながら、今後じっくり検討していきます。ここでは、まず Golazo GeoNotes がどんなウェブアプリなのかざっと紹介します。Google Friend Connect の使い方(使われ方)がなんとなく伝わると期待しています。

サイトビュー

いわゆるトップページです。すべての位置付きメモを新着順でリスト表示します。

Recent members は、最近アカウント登録したユーザのサムネイルを表示します。Recommended notes は、人気のあるメモのランキングを表示します。これらは、ガジェットを使って実現しています。



ホームビュー

サインインして使う自分専用ページです。自分と友達の新着メモをリスト表示します。また、位置表現を含むテキストを入力して投稿すると、そのテキストから緯度経度を検出して、位置付きメモとして保存します。

Friends' footprints は、友達のあしあとをリスト表示します。Eiji Kitamura さん作の あしあとガジェット を使っています。Friends' activity は、友達のアクティビティをリスト表示します。こちらも、ガジェットを使って実現しています。



プロフィールビュー

第三者から見えるアカウント各自のページです。各自の新着メモをリスト表示します。アカウントの簡易プロフィールを表示します。その View full profile から詳細プロフィールを表示します。

Friends は、アカウント各自の友達をサムネイル表示します。Activity は、各自のアクティビティをリスト表示します。これらは、ガジェットを使って実現しています。



キャンバスビュー

位置付きメモの詳細ページです。投稿したメモをすべて表示します。

メモのコメントをリスト表示します。また、メモにコメントを投稿できます。メモをお気に入りに投票して、人気ランキングに参加できます。そして、その下でランキングを表示しています。いずれも、ガジェットを使って実現しています。



メンバーと友達

サイトの参加メンバーをリスト表示します。また、自分の友達をリスト表示します。友達を探したり、招待したりできます。ガジェットを使って実現しています。



プロフィールの詳細

サイトの参加メンバーの詳細プロフィールを表示します。アカウント各自の参加サイトや、友達、アクティビティを確認できます。こちらも、ガジェットを使って実現しています。



チャット

オンラインのメンバーとチャットなどリアルタイムにコミュニケーションができます。ガジェットを使って実現しています。



設定

簡易プロフィールを表示して確認できます。メールアドレスを変更できます。Edit Profile から Google Friend Connect のプロフィールや設定を編集できます。



サインイン

Google Friend Connect ボタンを使ってサインインします。



Google, Yahoo!(US), AIM, NetLog, OpenID のアカウントが使えます。



Google を選択すると、おなじみのページでログイン手続きします。



OpenID を選択すると、OpenID の入力を求められます。入力すると、各プロバイダにページ遷移してログイン手続きします。



アカウントの登録

はじめに Google Friend Connect ボタンを使ってサインインします。



次に Google Friend Connect とリンクした簡易プロフィールを表示します。



(必要に応じて)メールアドレスを入力し、Create my account ボタンでアカウントを登録します。



アカウントの削除

Delete my account ボタンでアカウントを削除できます。



こんな感じです。ざっと紹介しました。雰囲気は伝わったでしょうか。今後は目的やテーマを絞って、考察していこうと考えています。