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/
1

2. テーマは、
OpenSocial JavaScript API
と、ライブラリです。
2

3. Hello, Viewer
で、比較します。
3

4. OpenSocial JavaScript API is good
<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); 4
</script>

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
5

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
6

7. なぜって jQuery.ajax で …
ガジェットから、
クロスドメインで、
著名付きリクエストで、
外部サーバを呼び出せるし、
7

8. さらに jQuery.ajax で …
ガジェットから、
REST Protocol 仕様風の、
仮想エンドポイントを介して、
リソースにアクセスできるし、
8

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

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

11. Activities
• GET or POST /activities/@viewer/@self
• GET /activities/@viewer/@friends
• GET /activities/@owner/ …
• GET /activities/<id>/ …
Message
• POST /messages/@viewer/@outbox
11

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>/ …
12

13. Communities
• GET /communities/@viewer/@self
• GET /communities/@owner/ …
• GET /communities/<id>/ …
Classmates
• GET /schools/@viewer/@self
• GET /schools/@selected
13

14. つまり jQuery.ajax で …
ガジェットから、
ひとつの方法だけで、
あらゆるリソースに、
アクセスできるってことです。
14

15. Apache Shindig なら使えます
http://shindig.apache.org/
• OpenSocial コンテナ
– mixi アプリ for PC
– goo ホームガジェット
– CREYLE アプリ
– iGoogle ガジェット
– Google Friend Connect ガジェット
• Gadgets コンテナ
– infoScoop OpenSource
– Google Wave ガジェットなど
15

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
16

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/
17