1

OpenSocial JavaScript API is good, Lightweight JavaScript API is better,

OpenSocial jQuery is best

Google DevFest 2010 Japan 2010年3月11日

なかじまんソフトウェア株式会社 中嶋信博 http://nakajiman.lrlab.to/

2

テーマは、 OpenSocial JavaScript API

と、ライブラリです。

3

Hello, Viewer

で、比較します。

4

<script type="text/javascript"> function init()

var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(

opensocial.IdSpec.PersonId.VIEWER), "viewer"); req.send(function(data)

var viewer = data.get("viewer").getData(); var id = viewer.getId(); var name = viewer.getDisplayName(); var thumbnailUrl = viewer.getField(

opensocial.Person.Field.THUMBNAIL_URL); );

gadgets.util.registerOnLoadHandler(init); </script>

OpenSocial JavaScript API is good

5

Lightweight JavaScript API is better <script type="text/javascript"> function init()

osapi.people.get( userId: '@viewer' ).execute( function(viewer)

var id = viewer.id; var name = viewer.nickname; var thumbnailUrl = viewer.thumbnailUrl;

); gadgets.util.registerOnLoadHandler(init); </script>

RPC Protocol­base API

6

OpenSocial jQuery is best <script type="text/javascript" src="opensocial­jquery.js"></script> <script type="text/javascript"> jQuery(document).ready(function($)

$.get('/people/@viewer', function(data) var viewer = data[0]; var id = viewer.id; var name = viewer.nickname; var thumbnailUrl = viewer.thumbnailUrl;

, 'data'); );</script>

REST Protocol­like Library

7

なぜって jQuery.ajax で …

ガジェットから、

クロスドメインで、

著名付きリクエストで、

外部サーバを呼び出せるし、

8

さらに jQuery.ajax で …

ガジェットから、 REST Protocol 仕様風の、

仮想エンドポイントを介して、

リソースにアクセスできるし、

9

People • GET /people/@viewer/@self • GET /people/@viewer/@friends • GET /people/@viewer/@friends/@app • GET /people/@owner/ … • GET /people/<id>/ …

10

AppData • GET or POST /appdata/@viewer/@self • GET /appdata/@viewer/@friends • GET /appdata/@viewer/@friends/@app • GET /appdata/@owner/ … • GET /appdata/<id>/ …

11

Activities • GET or POST /activities/@viewer/@self • GET /activities/@viewer/@friends • GET /activities/@owner/ … • GET /activities/<id>/ …

• POST /messages/@viewer/@outbox

Message

12

Albums and MediaItems • GET /albums/@viewer/@self • GET /albums/@owner/ … • GET /albums/<id>/ … • GET /mediaitems/@viewer/@self/<id> • GET /mediaitems/@owner/ … • GET /mediaitems/<id>/ …

13

Communities • GET /communities/@viewer/@self • GET /communities/@owner/ … • GET /communities/<id>/ …

• GET /schools/@viewer/@self • GET /schools/@selected

Classmates

14

つまり jQuery.ajax で …

ガジェットから、

ひとつの方法だけで、

あらゆるリソースに、

アクセスできるってことです。

15

Apache Shindig なら使えます http://shindig.apache.org/

• OpenSocial コンテナ – mixi アプリ for PC – goo ホームガジェット – CREYLE アプリ – iGoogle ガジェット – Google Friend Connect ガジェット

• Gadgets コンテナ – infoScoop OpenSource – Google Wave ガジェットなど

16

日本発の OpenSocial 向け JavaScript ライブラリもチェック!

• jOpenSocial –http://code.google.com/p/jopensocial/

• jQuery.opensocial_simple Plugin –http://tech.kayac.com/archive/jquery­ opensocial­simple.html

• mixi app framework mist.js –http://tech.kayac.com/archive/mixi­app­ framework­mist.js.html

17

OpenSocial JavaScript API is good, Lightweight JavaScript API is better,

OpenSocial jQuery is best

Check out this project: http://code.google.com/p/opensocial­jquery/