--- layout: old_post title: Google OpenSocial API - mixiに期待しつつJavaScript Gadgetを試す permalink: /tatsuya/show/406-google-opensocial-api-mixi-javascript-gadget ---

sandbox.orkut.com のアカウントが使えるようになったので、GoogleのOpenSocial APIを試してみた。OpenSocial Protocolについて詳細はこちらのサイトが詳しいようです

OpenSocial Protocol - たけまる

このブログに書いてある通り、OpenSocial Protocolは

の2種類があって、サーバ側 OpenSocial Data APIの実装はまだ無いみたい。ということで今回試したのはJavaScriptクライアントの方。ドキュメントへ書いてある通り、Orkut上で試してみる。あとこのドキュメントを開いとく

OpenSocial API Developer's Guide

sandbox.orkut.comへ登録

http://code.google.com/support/opensocialsignup/ から登録、数時間でメールが届いた。普通のwww.orkut.comとデータの互換性はある、唯一アプリケーションがsandboxでしか有効にならない。

Google Gadgets Editor

便利なので Google Gadgets Editorを利用する。

http://code.google.com/apis/gadgets/docs/gs.html#Scratchpad で自分のiGoogleホームに追加しておくと便利かも。自分のサーバがあれば、そこにXMLを置くだけでもOK。

Google Gadgets Editor

デフォルトのHello worldアプリで試してみた、右のhello.xmlのリンクURLをコピー。http://sandbox.orkut.com/MyApps.aspx を開いて「Add an application by URL:」へ張り付けて「add application」を実行。プロフィールを表示して「Hello, world!」が表示されればOK

OpenSocialAPIを叩く

まず試しということで「OpenSocial APIから自分(Owner)の情報を取ってプロフィールURLを見つける、そのURLをfooo.nameから検索して結果を画面に表示」をやってみた。

//自分の情報を取得
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('OWNER'), 'owner');
req.send(onLoadFriends);

複数件の情報取得を一度のリクエストでまとめて取ることを想定しているらしい。他にも色々とある http://code.google.com/apis/opensocial/docs/javascript/reference/opensocial.DataRequest.html

で、結果をコールバック関数のonLoadFriendsで処理する。ちなみにOwnerなのにonLoadFriendsという名前なのはサンプルコードをコピッてるから:)

var owner = dataResponse.get('owner').getData();
var url = owner.getField(opensocial.Person.Field.PROFILE_URL);

指定したキー(owner)でPersonオブジェクトを取得、この仕様に従って情報を抜き出す、今回はプロファイルURLを取った。あとはいつも通りJavaScriptで書けばOK

Open social gadget test

OrkutのプロファイルURLからfooo.nameで検索、結果を表示。自分の持ってる他のページ一覧が表示されている。本当は「フレンドの〜」てのがSNSぽくて面白いと思ったけど、Orkutのフレンドがいないのでできなかった:(

やってみて特別難しいことは無い、このパーツも結局IFrameで動くので普段通りJavaScriptで作ればOK、Google Gadgets作った経験のある人はさらに楽なのかも。作ったパーツがMySpace/mixi/VOX?/Friendster なんかで汎用的に動くのは良い。ただ今現在だと「OrkutでGoogle gadgetsが動く」という状況と変わらないのであんまり面白くないな、まずはmixiの対応に期待かも。

最初 GoogleがMySpaceがFacebookが、という話を聞いてる時点では割とどうでも良かったけど、mixiが参加するなら日本としても面白くなりそう。

適当だけど一応書いたコードこれ ↓ 途中PROFILE_URLが相対パスで「死ね」と思った、しかもパーツが動くドメインは変なドメインなので 「相対パスを絶対パスに変換する」この手も使えなかった。http://www.orkut.comベタ書き、駄目だなー

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs title="Open Social Test">
   <Require feature="opensocial-0.5"/>
 </ModulePrefs>
 <Content type="html">
 <![CDATA[
 <script type="text/javascript">
  function getData() {
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest('OWNER'), 'owner');
    req.send(onLoadFriends);
  }
  function onLoadFriends(dataResponse) {
    var owner = dataResponse.get('owner').getData();
    var url = owner.getField(opensocial.Person.Field.PROFILE_URL);
    url = absolutePath(url);
    insertScript("http://fooo.name/tako3/json/likely/"+url);
  }
  function tako3(res){
    var output = "";
    for(var i=0; i < res.length; i++){
      output += "<li>"+res[i]+"</li>";
    }
    document.getElementById("foooList").innerHTML += "<ul>"+output+"</ul>";
  }
  function insertScript(url){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild(script);
  }
  function absolutePath(path){
    return "http://www.orkut.com"+path;
  }
  _IG_RegisterOnloadHandler(getData);
  </script>
  <div id="foooList"> </div>
  ]]>
  </Content>
</Module>