Feb 28, 2008

[SNS] OpenSocial JavaScript API にチャレンジ(5)

Orkut が管理している情報を外部サーバへ引き渡す

今回は Orkut の管理している情報(Orkut のユーザID)を外部サーバに引き渡してみた。

remoteservice.xml

Orkut へのディプロイ方法は前回と同じ。 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Remote Service">
    <Require feature="opensocial-0.7"/>
    <Require feature="settitle"/>
    <Require feature="views"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
<script>
// <!--
function getElement (id) {
  if (document.getElementById){
    return document.getElementById(id);
  } else if (document.all) {
    return document.all[id];
  } else if (document.layers) {
    return document.layers[id];
  } else {
    return null;
  }
}

function loadData() {
  var request = opensocial.newDataRequest();
  request.add(request.newFetchPersonRequest('OWNER'), 'owner');
  request.send(onLoadData);
}

function onLoadData(data) {
  // get owner info
  var owner = data.get('owner').getData();
  var ownerId = owner.getId();
  var ownerDisplayName = owner.getDisplayName();
  
  var s = "<dl>";
  s += "<dt>id</dt><dd>" + ownerId + "</dd>";
  s += "<dt>name</dt><dd>" + ownerDisplayName + "</dd>";
  s += "</dl>";

  getElement('owner').innerHTML = s;

  getElement('childframe').src = "http://www.in-vitro.jp/blog/entries/SNS/20080228_01/"
                                 + ownerId + ".html";
}
gadgets.util.registerOnLoadHandler(loadData);
loadData();
// -->
</script>
      <body>
        My local profile:<br />
        <div id="owner"></div><br />
        <br />
        My remote profile:<br />
        <iframe id="childframe"/><br />
      </body>
    ]]>
  </Content>
</Module>

[Orkut のユーザID].html

remoteservice.xml で指定した場所に設置。例) http://www.in-vitro.jp/blog/entries/SNS/20080228_01/[OrkutのユーザID].html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
  これはリモートサーバにあるプロフィール情報です。
</body>
</html>

実行結果

[remote service]
外部サーバに Orkut の管理している情報を引き渡すことができた。

Posted in SNS | WriteBacks (1) | このエントリーを含むはてなブックマーク はてなブックマーク | この記事をクリップ！ livedoor クリップ | Delicious Bookmark this on Delicious

Feb 27, 2008

[SNS] OpenSocial JavaScript API にチャレンジ(4)

外部サーバへの XMLHttpRequest アクセス

前回 iframe を使用して外部サーバにある HTML を表示できることが確認できたので、 今回は XMLHttpRequest を使用して外部サーバにアクセスしてみる。

remoteaccess.xml

Orkut へのディプロイ方法は前回と同じ。 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Remote Access">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <body>
        <iframe src="http://www.in-vitro.jp/blog/entries/SNS/20080227_01/child.html"/>
      </body>
    ]]>
  </Content>
</Module>

child.html

remoteaccess.xml で指定した場所に設置。例) http://www.in-vitro.jp/blog/entries/SNS/20080227_01/child.html 

<body>
<script type="text/javascript">
// <!--
var dataUrl = "/blog/entries/SNS/20080227_01/data.xml";

function start() {
  fetchData();
}

function fetchData() {
  var request = prepareHttpRequest();
  request.open("GET" , dataUrl , true);
  request.onreadystatechange = function() { 
    if (request.readyState == 4 && request.status == 200) { 
      var response  = request.responseXML;
      var messages = response.getElementsByTagName('message');
      var s = "<ul>";
      for(i = 0; i < messages.length; i++) {
        s += "<li>" + messages[i].firstChild.nodeValue + "</li>";
      }
      s += "</ul>";
      document.getElementById('main').innerHTML = s;
    }
  }
  request.setRequestHeader("Content-Type" , "text/xml");
  request.send(null);
}

function prepareHttpRequest(){
  if(window.ActiveXObject){
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (ex) {
          return null;
      }
    }
  } else if(window.XMLHttpRequest){
    return new XMLHttpRequest();
  } else {
    return null;
  }
}

start();
// -->
  </script>

  <div id="main"></div>
</body>

data.xml

child.html 内の JavaScript で指定した場所に設置。例) http://www.in-vitro.jp/blog/entries/SNS/20080227_01/data.xml 

<?xml version="1.0" encoding="UTF-8" ?>
<data>
  <message>こんにちは。</message>
  <message>お元気ですか？</message>
  <message>私ですか？</message>
  <message>いえいえ、そんなに元気じゃないですよ。</message>
</data>

実行結果

[remote access]
外部サーバに XMLHttpRequest でアクセスして XML を取得し、表示することができた。

Posted in SNS | WriteBacks (1) | このエントリーを含むはてなブックマーク はてなブックマーク | この記事をクリップ！ livedoor クリップ | Delicious Bookmark this on Delicious

Feb 26, 2008

[SNS] OpenSocial JavaScript API にチャレンジ(3)

iframe を使用した外部サーバ HTML の表示

今回は JavaScript API から離れて、アプリケーションから外部サーバの HTML を表示してみる。

usingiframe.xml

Orkut へのディプロイ方法は前回と同じ。 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Using iframe">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <iframe src="http://www.in-vitro.jp/blog/entries/SNS/20080226_01/child.html"/>
    ]]>
  </Content>
</Module>

child.html

usingiframe.xml 内の iframe で指定した場所に設置する。例) http://www.in-vitro.jp/blog/entries/SNS/20080226_01/child.html 

<div>
  This is child html.<br />
</div>

実行結果

[using iframe]
IFrame から外部サーバにある HTML を取得して表示することができた。

Posted in SNS | WriteBacks (2) | このエントリーを含むはてなブックマーク はてなブックマーク | この記事をクリップ！ livedoor クリップ | Delicious Bookmark this on Delicious

Feb 25, 2008

[SNS] OpenSocial JavaScript API にチャレンジ(2)

Friends データへのアクセス

今回もチュートリアルに沿って遊んでみる。 友人データを API 経由で取得して一覧表示する。 ちなみに、チュートリアルのコードは Orkut sandbox (OpenSocial API ver.0.7) では動作しなかった。

OpenSocial Tutorial
http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.7.html
API Reference - opensocial
http://code.google.com/apis/opensocial/docs/0.7/reference/opensocial.html
API Refenrece - opensocial.DataRequest
http://code.google.com/apis/opensocial/docs/0.7/reference/opensocial.DataRequest.html
API Refenrece - opensocial.DataRequest.PeopleRequestFields
http://code.google.com/apis/opensocial/docs/0.7/reference/opensocial.DataRequest.PeopleRequestFields.html
API Reference - opensocial.Person
http://code.google.com/apis/opensocial/docs/0.7/reference/opensocial.Person.html

listfriends.xml

Orkut へのディプロイ方法は前回と同じ。 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="List Friends">
    <Require feature="opensocial-0.7"/>
    <Require feature="settitle"/>
    <Require feature="views"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
<script>
// <!--
function getElement (id) {
  if (document.getElementById){
    return document.getElementById(id);
  } else if (document.all) {
    return document.all[id];
  } else if (document.layers) {
    return document.layers[id];
  } else {
    return null;
  }
}

function loadData() {
  // prepare request
  var request = opensocial.newDataRequest();

  // prepare required details
  var required = new Array();
  required[0] = opensocial.Person.Field.ID;
  required[1] = opensocial.Person.Field.NAME;
  required[2] = opensocial.Person.Field.THUMBNAIL_URL;
  required[3] = opensocial.Person.Field.PROFILE_URL;

  // prepare parameters
  var parameters = {};
  parameters[opensocial.DataRequest.PeopleRequestFields.MAX] = 1000;
  parameters[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = required;

  // send request
  request.add(request.newFetchPeopleRequest('OWNER_FRIENDS', parameters), 'friends');
  request.send(onLoadData);
}

function onLoadData(data) {
  // get all friends data
  var friends = data.get('friends').getData().asArray();

  // create html snippet
  var s = "<ul>";
  for (var i=0; i<friends.length; i++) {
    var person = friends[i];
    var id = person.getId();
    var name = person.getField(opensocial.Person.Field.NAME);
    var firstname = name.getField(opensocial.Name.Field.GIVEN_NAME);
    var lastname = name.getField(opensocial.Name.Field.FAMILY_NAME);
    var displayname = person.getDisplayName();
    var picUrl = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
    var profileUrl = person.getField(opensocial.Person.Field.PROFILE_URL);

    s += "<li>";
    s += "<a href='" + profileUrl + "'>" + displayname + "</a>";
    s += "</li>";
  }
  s += "</ul>";

  // display all friends
  getElement("friends").innerHTML = s;
}

// registerOnLoadHandler だけだとスタートしない Web ブラウザがある。何故??
gadgets.util.registerOnLoadHandler(loadData);
loadData();
// -->
</script>
<body>
<div id="friends"></div>
</body>
    ]]>
  </Content>
</Module>

実行結果

[remote access]
Orkut から JavaScript API 経由で友人リストを取得することができた。

Posted in SNS | WriteBacks (0) | このエントリーを含むはてなブックマーク はてなブックマーク | この記事をクリップ！ livedoor クリップ | Delicious Bookmark this on Delicious

Feb 23, 2008

[SNS] OpenSocial JavaScript API にチャレンジ

OpenSocial とは

OpenSocial は SNS の共通公開 API の JavaScript 版。 MySpace, FriendStar, Orkut, Hi5 など海外の大手 SNS が対 Facebook で始めた規格。 Google が音頭を取っている。 mixi も対応を表明しているが、実際に使えるようになるのはいつになるのだろう。

JavaScript API を使うとアプリケーションを SNS にディプロイ出来るようになる。 Orkut が開発者用の sandbox 環境を用意してくれているらしいので、とりあえず試してみた。

OpenSocial
http://code.google.com/apis/opensocial/
Getting Started Guide
http://code.google.com/apis/opensocial/gettingstarted.html

Orkut sandbox へのアクセス権取得

とりあえず Orkut へアクセスして、Orkut のアカウントを登録する。 その後で、その Orkut アカウントで sandbox へのアクセスを申請する。 詳細はリンク先を参照のこと。

Orkut
http://www.orkut.com/
Orkut Developer Home
http://code.google.com/apis/orkut/

Hello, OpenSocial!

チュートリアルがあったので、とりあえずはチュートリアル通り Hello World から。

OpenSocial Tutorial
http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.7.html

helloworld.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello World!">
    <Require feature="opensocial-0.7" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      Hello, world!
    ]]>
  </Content>
</Module>

helloworld.xml の設置

リモートから HTTP アクセスが可能な適当な場所に helloworld.xml を設置する。

例) http://www.in-vitro.jp/blog/entries/SNS/20080223_01/helloworld.xml

Orkut sandbox への登録

[orkut(1)] [orkut(2)]
[orkut(3)] [orkut(4)]
[orkut(5)]

Posted in SNS | WriteBacks (1) | このエントリーを含むはてなブックマーク はてなブックマーク | この記事をクリップ！ livedoor クリップ | Delicious Bookmark this on Delicious