スクリーンショット

ソースコードと解説

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
  title="オンラインの友達"
  title_url="http://code.google.com/p/opensocial-jquery/wiki/ExampleFriendsOnline"
  description="オンラインの友達を表示します。(by opensocial-jquery)"
  height="48"
>

title と description は必須です。 title_url を指定して、キャンバスビューを代替します。 height を指定して、ガジェットの高さを指定します。

<Require feature="dynamic-height" />
<Require feature="minimessage" />
<Require feature="opensocial-0.8" />
<Require feature="opensocial-jquery" />

dynamic-height を使って、ガジェットの高さを自動調整します。 minimessage を使って、エラーメッセージを表示します。 opensocial-0.8 を使って、友達リストとアプリケーションのデータを操作します。

<Locale>
<msg name="loading">読み込み中 ...</msg>
<msg name="notfound">オンラインの友達はいません</msg>
</Locale>

インラインでメッセージを定義します。

<Icon>http://developmentor.lrlab.to/favicon.ico</Icon>
</ModulePrefs>

アイコンを指定しています。

<Content type="html" view="home"><![CDATA[
<script type="text/javascript">
jQuery(function($) {

  // refresh
  function refresh() {
    
    // people
    $.getData(
      '/people/@me/@friends/@app', { count: 100 }
    ).next(function(people) {

VIEWER の友達リストを取得します。このとき、同じガジェットをインストールしている友達のみに絞り込み、その条件を 100 人としています。

      // appdata
      return $.getData(
        '/appdata/@me/@friends', {}
      ).next(function(appdata) {
        return $.map(people, function(person) {
          person.data = appdata[person.id] || {};
          return person;
        });
      });

続けて、友達のアプリケーションのデータを取得しています。

    // success
    }).next(function(people) {
  
      $('#body').empty();

      people = $.grep(people, function(person) {
        return new Date().getTime() -
          (person.data.lastUpdate || 0) < 3600*1000; // 60min
      });

アプリケーションのデータの最終更新日時を使って、友達を絞り込みます。このとき、60 分以内をオンラインと仮定しています。

      $.each(people, function(i, person) {
      
        var img = $('<img width="30" height="30" />')
          .attr('alt', person.displayName)
          .attr('src', goohome.util.convertThumbnailSize(
            person.thumbnailUrl, goohome.ThumbnailUrl.Size.SMALL
          ));
      
        $('<a/>')
          .attr('title', person.displayName)
          .attr('href', person.profileUrl)
          .attr('target', '_top')
          .append(img)
          .appendTo('#body');
      });

オンラインの友達のサムネイルを表示し、プロフィールにリンクします。

      if (people.length == 0)
        $('#body').text('__MSG_notfound__');

オンラインの友達がいないときは、定義したメッセージを表示します。

      $(window).adjustHeight();

ガジェットの高さを自動調整します。

    // update
    }).next(function() {

      return $.postData(
        '/appdata/@me/@self', { lastUpdate: new Date().getTime() }
      );

VIEWER のアプリケーションのデータを保存します。このとき、最終更新日時を指定しています。

    // error
    }).error(function(e) {
    
      $('<span/>')
        .text('An unexpected error occurred: ' + e)
        .minimessage();
    
    });
  }

何らかのエラーが発生したとき、そのエラーメッセージを表示します。

  refresh(); setInterval(refresh, 60*1000); // 1min

60 秒の間隔で、オンラインの友達を探します。また、オンラインであることを記録します。

});
</script>
<style type="text/css">
<!--
body {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: .8em;
}

#body {
  padding: 5px;
}

#body img {
  border: 1px solid #ccc;
  margin: 1px;
  padding: 1px;
}

#body img:hover {
  border: 1px solid #333;
}
-->
</style>
<div id="body">__MSG_loading__</div>

ガジェットを表示したとき、定義したメッセージを表示します。

]]></Content>
</Module>

スクリーンショット

ソースコードと解説

関連リンク