OpenSocial/How To Build Your First Social Gadget (OpenSocial API v0.6) http://www.ark-web.jp/sandbox/wiki/373.html

以下、AIRS 加藤さんに訳していただきました。

[edit]

How To Build Your First Social Gadget (OpenSocial API v0.6)

[edit]

準備

[edit]

要件

このチュートリアルは以下をベースとする:

[edit]

ユーザー情報を表示する

  1. まずシンプルなGoogleガジェットを作成する。例えば、 HelloWorld Gadget
    http://hosting.gmodules.com/ig/gadgets/file/112012702325167846640/hello.xml
    <?xml version="1.0" encoding="UTF-8" ?>
    <Module>
      <ModulePrefs title="People API Howto" />
      <Content type="html">
      <![CDATA[
        Hello, world!
      ]]>
      </Content>
    </Module>
  2. 次に、ModulePrefs要素にRequire要素を追加することで、OpenSocial APIを使う為の設定をおこなう。
    <?xml version="1.0" encoding="UTF-8" ?>
    <Module>
      <ModulePrefs title="People API Howto">
        <Require feature="opensocial-0.6" />
      </ModulePrefs>
      <Content type="html">
      <![CDATA[
        Hello, world!
      ]]>
      </Content>
    </Module>
  3. これで、OpenSocial APIを使いユーザーの名前や写真など、役に立つ情報をつかってアプリケーションの本体をつくる準備が出来た。
    これらの情報は、opensocial.newDataRequestオブジェクトを使い、閲覧者の情報を取得するためのリクエストをサーバーへ送ることで取得出来る。
    今回の例は、opensocial.DataRequest.PersonId.VIEWER のキーの使い方と、opensocial.DataRequest.PersonId.OWNER のキーの使い方である。もし、AliceがBobのプロフィールを見ている場合、AliceはビューワーでBobはオーナーである。そしてアプリケーション開発者は適切なキーを利用して、どちらのユーザーの情報にもアクセスすることが出来る。
    ‘Hello, world’を以下のようなJavaScriptで置き換えて見て下さい:
    <div id="main"></div>
    <script type="text/javascript">
    _IG_RegisterOnloadHandler(request);
    function request() {
      var req = opensocial.newDataRequest();
      req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER), "viewer");
      req.send(response);
    }
    function response(data) {
      // do something with the data
    }
    </script>
    注意: sendメソッドは非同期で、パラメータとしてコールバック関数を受け取る。そして、このコールバック関数はサーバーからレスポンスを受け取った際に実行される。
  4. response関数では、サーバーからのレスポンスを受け取って、それをコンテンツとして表示することが出来る。
    以下のコードはビューワーの名前とプロフィール写真のURLを取得し、HTMLにdiv要素として表示する:
    function response(data) {
      var viewer = data.get("viewer").getData();
      var name = viewer.getDisplayName();
      var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
      var html = '<img src="' + thumb + '"/>' + name; 
      document.getElementById('main').innerHTML = html;
    }
  5. コンテナは常にopensocial.Person.Field.IDや、opensocial.Person.Field.NAMEや Opensocial.Person.Field.THUMBNAIL_URL のようなPersonオブジェクトの各フィールドを返す。しかし、開発者は、これらのフィールドより多くの情報を得たいと望むだろう。
    バージョン0.6のAPIから、開発者は newFetchPersonRequest を通じてエクストラパラメータを定義することが出来るようになった。これらのパラメータのひとつが、 opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS である。これによりユーザープロフィール内から取得したい部分を定義することが出来る。
    この使い方の説明のため、request関数をビューワーのプロフィールURLを取得するように書き換えます:
    function request() {
      var req = opensocial.newDataRequest();
      var opt_params = { };
      opt_params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
        opensocial.Person.Field.PROFILE_URL
      ];
      req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER, opt_params), "viewer");
      req.send(response);
    }
    これで、関数内でopt_paramsという変数を定義し、追加のプロフィールフィールドを返すように指定できた。この関数では、opensocial.Person.Field.PROFILE_URL を要求している。
    次にユーザー名からプロフィールにリンクするように、response関数を変更します:
    function response(data) {
      var viewer = data.get("viewer").getData();
      var name = viewer.getDisplayName();
      var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
      var profile = gadgets.util.getUrlParameters()["parent"] +
                      viewer.getField(opensocial.Person.Field.PROFILE_URL);
      var html = '<img src="' + thumb + '"/>' +
                 '<a href="' + profile + '" target="_top">' + name + '</a>';
      document.getElementById('main').innerHTML = html;
    }

変更されたコードは戻り値にopensocial.Person.Field.PROFILE_URLを含めるよう要求し、これをユーザープロフィールへリンクするために利用した。

おめでとう、あなたの最初のOpenSocaiアプリケーションが作れました。しかし、まだあなたの友達の事を忘れないで下さい。

[edit]

友達情報を表示する

ビューワーとして、自分自身の情報が表示できるようになったので、続いて友達のリストを取得して、その情報をガジェット内に表示するチュートリアルにすすむ。

First you need to modify your request to ask for the data about the viewer and the viewer’s friends. You can batch this request for two data sets by modifying the request function like this:

また、リクエストをビューワーとビューワーの友達を取得するように変更する必要がある。開発者は2つのデータのセットをまとめてリクエストすることができる。

request関数のコードを以下のように修正してください:

function request() {
  var req = opensocial.newDataRequest();
  var opt_params = { };
  opt_params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
    opensocial.Person.Field.PROFILE_URL
  ];
  req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER, opt_params), "viewer");
  req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, opt_params), "viewer_friends");
  req.send(response);
}

注意: newFetchPeopleRequestを追加すると沢山のpeopleのコレクションを受け取ることになります、newFetchPersonRequestは1人だけと返します。

これで、responseメソッドに友達の写真とプロフィールページへのリンクを表示するコードを追加することができる。

function response(data) {
  var viewer = data.get("viewer").getData();
  var name = viewer.getDisplayName();
  var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
  var profile = gadgets.util.getUrlParameters()["parent"] +
                 viewer.getField(opensocial.Person.Field.PROFILE_URL);
  var html = '<img src="' + thumb + '"/>' + 
             '<a href="' + profile + '" target="_top">' + name + '</a>';
  html += '<hr>'; 
  var viewer_friends = data.get("viewer_friends").getData();
  viewer_friends.each(function(person) {
    var thumb = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
    var profile = gadgets.util.getUrlParameters()["parent"] +
                    person.getField(opensocial.Person.Field.PROFILE_URL);
    html += '<a href="' + profile + '" target="_top" style="float:left">' +
            '<img src="' + thumb + '"/>' +
            '</a>'; 
  });
  document.getElementById('main').innerHTML = html;
}

友達のリストをPersionオブジェクトとして取得できるようになった。このサンプルではeachメソッドでPersonを繰り返し処理している。

以上で、ガジェットはあなたの友達を表示できるようになりました。

[edit]

アプリケーション全コード

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="People API Howto">
    <Require feature="opensocial-0.6" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
    <div id="main"></div>
    <script type="text/javascript">
      _IG_RegisterOnloadHandler(request);
      function request() {
        var req = opensocial.newDataRequest();
        var opt_params = { };
        opt_params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
          opensocial.Person.Field.PROFILE_URL
        ];
        req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER, opt_params), "viewer");   
        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, opt_params), "viewer_friends");
        req.send(response);
      }
      function response(data) {
        var viewer = data.get("viewer").getData();
        var name = viewer.getDisplayName();
        var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
        var profile = gadgets.util.getUrlParameters()["parent"] +
                       viewer.getField(opensocial.Person.Field.PROFILE_URL);
        var html = '<img src="' + thumb + '"/>' + 
                  '<a href="' + profile + '" target="_top">' + name + '</a>';
        html += '<hr>'; 
        var viewer_friends = data.get("viewer_friends").getData();
        viewer_friends.each(function(person) {
          var thumb = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
          var profile = gadgets.util.getUrlParameters()["parent"] +
                         person.getField(opensocial.Person.Field.PROFILE_URL);
          html += '<a href="' + profile + '" target="_top" style="float:left">' +
                  '<img src="' + thumb + '"/>' +
                  '</a>'; 
        });
        document.getElementById('main').innerHTML = html;
      } 
      </script>
  ]]>
  </Content>
</Module>

投稿者加藤? | パーマリンク

| append.gif

tag: OpenSocial


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-05-15 (木) 12:10:44 (4208d)

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