OpenSocial/Friend Connectすごそう http://www.ark-web.jp/sandbox/wiki/313.html

OpenSocial/Friend Connectすごそう

米Google、Webサイトをソーシャルにできる「Friend Connect」発表
http://internet.watch.impress.co.jp/cda/news/2008/05/13/19519.html

Google Friend Connectを使うと、SNSのさまざまな機能をWebサイトに付加し、友人のコメントや行動をどんなサイトでも楽しめるようになる。そのために安全な認証APIを用意し、プログラミングの知識がなくても、こうした機能をサイトに付加できるような仕組みを開発した。

　認証APIとしては、OpenID、OAuth、OpenSocialに対応。また、Facebook、Google、MySpaceが提供しているデータポータビリティAPIなどに対応している。これらを使用してFacebook、Google Talk、hi5、orkut、Plaxoなどに対応する。

　例えば、フリーミュージシャンのIngrid Michaelson氏は、OpenSocialアプリケーションである「iLike」と、Google Friend Connectを利用したWebサイトを開設した。このサイトでは、コンテンツだけでなく、自分の友人たちがそれぞれのSNSで書いたプロフィールや、友人のコメント、誰がコンサートに行ったかといった情報をまとめて見ることができる。

うーん、よくわからないので、ちょっと試して見た。

サンプルにでてた、Ingrid Michaelsonさんのページを見てみる †

Ingrid Michaelson
http://ingridmichaelson.com/ilike/index.html

ソースを見てみると

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"> </script>

のように、friendconnect.jsというのが読み込まれてる。

それと、ガジェットに置き換わる用のHTMLタグが用意されてる。
ヘッダ部分。

<div id="div-1208542955474" 
     style="margin: 0pt auto;
            padding: 3px 0pt;
            width: 700px;
            height: 32px;
            background-color:#87785C;"></div>

メイン部分。

<div id="1208506981789" style="width:100%;border:1px solid #7AA5D6;"></div>

このidの数字はかわらないっぽいので、friendconnectを埋め込みたい人は、このHTMLスニペットをGoogleからもらうことになるっぽい。

ヘッダ部分のdivの中は、次のjsを読みこむ<script>タグとか、

<script src="http://www.google.com/friendconnect/script/opensocial-0.7.js">
</script>
<script src="http://www.google.com/friendconnect/script/psfeature.js?v=0.46.1">
</script>
<script src="http://www.google.com/friendconnect/script/gadgets.js?v=0.46.1">

あとは、「Sign In」の<a>とかが埋め込まれる

<a href="javascript:void(0);">Sign In</a>

あと、非表示のiframeも埋め込まれてる。
iframeになってて、iframeのURLは、のようになってた。

http://8fkcem1ves287v3g5lu9gep1j91p3kk1.orkut.gmodules.com/

メイン部分のdivの中は、iframeになっている。これのURLは次のように
```
http://8avf8abt22o9oh1ejn0fu1kph25ipfr4.orkut.gmodules.com/
```
メイン部分がOpenSocialアプリのような感じだけど、どうなんだろう。iframeのドメインが同じになってるので、上のFriend Connectのガジェットでログインした情報など共有してるのかな。
Sign Inのガジェットは、Friend Connectのプレビュー版の登録申請をすればたぶん、埋め込めるようになると思う。とりあえず申し込んでおいた。
メインの方のOpenSocialアプリは、iLikeのアプリっぽいからiLikeなどの、OpenSocial準拠のサイトから提供されるものかな。

Sign Inを押してみた †

Sign Inを押してみたら次のような画面が表示された。
今回は、OpenIDを選んでみた。OpenID URL(http://shida.openid.ne.jp)を入力すると、こういう画面が表示された。
FacebookとorkutとGTalkで、「Link」にしてみた。shida.openid.ne.jpでは登録していなかったサムネイルが、Facebookから引っ張ってきたみたいで設定された。
なるほど、各SNSのプロフィールとか友達がリンクされるってことかな。
saveとすると、別窓が閉じて、ヘッダが、次のようになった。
あと、コメント投稿ガジェットで、いままで画像が出てなかったのが出るようになった。上のSign Inのガジェットと連動してるらしい。
メインのHTMLや、ヘッダ、メインのiframeそれぞれに、同じセッションIDがセットされたようだ。
Ingridさんのコメント入力のガジェットにコメント投稿できるようになった。ためしに投稿してみたら、ちゃんと投稿できた。
ヘッダのInviteをクリックすると、「Link」設定した、Facebook、Google Talk、Orkutの友達を招待する画面がでてきた。
Facebookの友人に届いた招待メールはこんな感じ。
```
 Yuki Shida yshida invited you to Ingrid Michaelson (live).
 Click here to view the invitation.18:17
```

まとめ †

自分たちが作ることになるのはメインのOpenSocialアプリのようなものの方だろう。
Friend Connectと連動しているようだけど、今のOpenSocialの仕様のまま作って、Friend Connectとも連動できるようになるんだろうか。
まだ、イマイチよく仕組みはわかりませんが面白そうです!

投稿者志田 | パーマリンク | コメント(0)

|

tag: OpenSocial

Menu

Movable Type用プラグイン Aシリーズ

ECサイト構築 Zen Cartハイエンド

Tag

最新の20件

2017-05-12

RecentDeleted

2014-04-30

JavaScript/クラス名を後から取得する方法

2013-09-16

ドメイン駆動開発/DDD体験ワークショップに参加しました（PHPカンファレンス2013）

2013-02-21

MenuBar

2012-09-04

2012-04-03

Ruby on Rails/rvm+passenger+mod_proxyの設定

2012-02-29

システム勉強会

2012-02-06

FrontPage

2012-01-19

2011-12-19

ネットワーク/socks5経由でsftp

2011-11-13

wakame/wakame-0.5.1 on Ubuntu-server 10.04 LTS Lucid Lynx

2011-08-08

mysql/groonga on Ubuntu-server 10.04 LTS Lucid Lynx

2011-07-07

2011-02-17

JavaScript/jQuery_Cycle_Pluginでメインビジュアルを作っていくチュートリアル

2010-12-02

paypalの決済の種類とビジネスモデルについて聞いてきました

2010-11-04

jQuery Mobileの使い方と挙動のまとめその１

2010-09-16

jQTouchの使い方とclass指定による挙動のまとめ

ARK-Webビジネスブログの最新記事

2014-01-08

Zen Cartのセキュリティー保守・脆弱性パッチ適用などでお困りなら

2014-01-07

コンテンツ・マーケティング：ダイナミックコンテンツ、スマートコンテンツという潮流

2014-01-06

新年あけましておめでとうございます（2014年最初のご挨拶）

2013-12-13

年末年始の休業期間のお知らせ（2013年～2014年）

2013-12-11

Zen Cartハイエンド版のモジュール：social_buttonsによりコンテンツを共有する

2013-11-29

「Zen Cartのカスタマイズ」ページを公開しました

2013-11-28

Zen Cartハイエンド版のモジュール：am_ajax_addressで郵便番号による住所自動入力をサポート

2013-11-26

北米NGO/NPOの７割はコンテンツマーケティングを去年より強化、第一目的はファンドレイジング、Facebookをよく使う（CMIのレポートから）

2013-11-19

Zen Cart1.3.0.2 EUC-JP版とPHP5.4の組み合わせで日本語（マルチバイト文字）が表示されない障害

2013-10-28

【Movable Type】MT6の最新情報と活用ポイント紹介のセミナーに登壇します

2013-10-18

【消費税増税】Zen Cartで消費税を変更するには：1.3.0.2系と1.5.1系の場合

2013-10-15

【脆弱性対応】A-Form 3.7.7 / A-Member 3.7.7 / A-Reserve 3.7.7をリリースしました。

2013-10-11

【重要なお知らせ】MTプラグインA-Form・A-Member・A-Reserveの脆弱性について（2013年10月11日三版）

2013-09-26

Zen Cartハイエンド版のモジュール：product_csvで商品データの一括インポート・一括エクスポートをする

2013-09-24

NGO、NPOや震災被災企業・団体の方へ：弊社MTプラグインがすべて「無償」になりました

添付ファイル:

friend_connect4.PNG 1150件 [詳細]

friend_connect3.PNG 1070件 [詳細]

friend_connect2.PNG 1066件 [詳細]

friend_connect1.PNG 1099件 [詳細]

Last-modified: 2008-05-15 (木) 12:12:26 (5818d)

アークウェブのサービスやソリューションはこちら

サービス

Zen Cartソリューション

Movable Typeソリューション

その他ソリューション

アークウェブのCSR(企業の社会的責任)

アークウェブのCSR指針