1. OpenSocial jQuery による
ウェブ制作スキルを活かした
OpenSocial アプリケーション開発
SocialWeb Conference vol.5
〜 OpenSocial Night #2 〜
2010年2月23日
なかじまんソフトウェア株式会社 中嶋信博
http://nakajiman.lrlab.to/ 1

2. 目次
• OpenSocial アプリの基本性質の振り返り
• OpenSocial jQuery の目的と概要の紹介
• OpenSocial jQuery による iGoogle ガジェッ
トの開発
• OpenSocial jQuery による mixi アプリの開
発
• パーミッションモデルと OpenSocial jQuery
のエラーハンドリング
2

3. OpenSocial アプリのつくりって …
Profile ビュー
Canvas ビュー
3

4. ビューがページのウェブアプリです
<?xml version="1.0" encoding="UTF­8" ?>
<Module>
<ModulePrefs title="Hello, world!" />
<Content type="html" view="profile"><![CDATA[
Hello, world!
]]></Content> ビュー = ページ = iframe
<Content type="html" view="canvas"><![CDATA[
Hello, world!
]]></Content> HTML + CSS + JavaScript
</Module>
4

5. ウェブアプリとの違いは OpenSocial
API を使い、その影響を受けること
• OpenSocial JavaScript API
– OpenSocial API: opensocial.*
– Gadgets API: gadgets.*
– 拡張 API: mixi.* goohome.* …
• OpenSocial RESTful API
– RESTful Protocol
– JSON­RPC Protocol
• パーミッションモデル
– 情報の取得や更新の制限 5

6. 例 OpenSocial JavaScript API
Hello, Viewer
<Content type="html"><![CDATA[
<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>
6
]]></Content>

7. OpenSocial アプリは
HTML + CSS + JavaScript
で開発できる典型的なウェブアプリ
OpenSocial jQuery の目的
OpenSocial アプリは
OpenSocial API + パーミッションモデル
で成り立つプラットフォーム専用アプリ 7

8. OpenSocial jQuery は、
OpenSocial JavaScript API を
jQuery で橋渡することで、
OpenSocial アプリをウェブアプ
リのように開発できるようにする
JavaScript ライブラリです
8

9. 例 OpenSocial jQuery
Hello, Viewer
<Content type="html"><![CDATA[
<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>
]]></Content>
9

10. OpenSocial jQuery への期待
• jQuery の高いシェア、広いターゲット層
– ウェブ制作の関係者
• jQuery によるウェブ制作スキルの活用
– ウェブ制作の開発手法、デザイン手法
• jQuery によるウェブ制作実績の活用
– ソースコードの移植性、jQuery プラグイン
• OpenSocial アプリの活性化
– SAP (Social Application Provider) の動機
10

11. OpenSocial jQuery の情報源
• ダウンロード v1.3.2.5 / v1.2.6.5
– http://code.google.com/p/opensocial­jquery
• ライセンス
– MIT License
– Apache License 2.0 (Templates プラグインのみ)
• ドキュメント en / ja
– http://code.google.com/p/opensocial­jquery/w
• メーリングリスト
– http://groups.google.com/group/opensocial­jquery
• コミッタ コントリビュータ
– @nakajiman @rkanbe @lackac @jonca.rafal 11

12. OpenSocial jQuery の対応環境
• mixi アプリ (PC)
• goo ホームガジェット
• CREYLE アプリ (最終確認中)
• iGoogle ガジェット
• Google Friend Connect ガジェット
Apache Shindig http://shindig.apache.org/
• OpenSocial: Orkut、hi5、Partuza …
• Gadgets: Google Wave …
12

13. OpenSocial jQuery の構成
OpenSocial JavaScript API
OpenSocial jQuery: opensocial­jquery.js
jQuery 1.3.2
JSDeferred 0.2.2 コアプラグイン
拡張プラグイン: opensocial­jquery.<name>.js
jQuery プラグイン
13
OpenSocial アプリ

14. OpenSocial jQuery の対応範囲
Gadgets API: gadgets.*
• jQuery.fn.ready • jQuery.view &
– ガジェットのロード jQuery.views
• jQuery.ajax & – ビューの判別と遷移
jQuery.getFeed • jQuery.fn.height &
– 外部サーバの呼び出し jQuery.fn.adjustHeight &
– 署名リクエスト jQuery.fn.autoHeight
– フィードの取得 – 高さの変更
• jQuery.pref & • jQuery.fn.minimessage
jQuery.prefArray – ミニメッセージの表示
– プリファレンスとパラメータの取得
14

15. OpenSocial jQuery の対応範囲
Gadgets API: gadgets.*
• jQuery.fn.tab • jQuery.fn.title
– タブの表示 – タイトルの変更
• jQuery.flash.version • jQuery.msg
– Flash バージョンの判別 – メッセージバンドルの取得
• jQuery.fn.flash • jQuery.container.cache
– Flash の埋め込み – キャッシュの制御
• jQuery.pub & jQuery.sub
– ガジェット間のメッセージ送受信
• jQuery.feature
– フィーチャーの判別とパラメータの取得 15

16. 外部サーバの呼び出し
<script type="text/javascript">
jQuery(document).ready(function($) {
$.ajax({
url: 'http://gdata.youtube.com/feeds/videos',
data: { vq: 'corgi', alt: 'json' }, dataType: 'json',
success: function(data, status) {
$.each(data.feed.entry, function(i, entry) {
var img = $('<img/>')
.attr('src', entry.media$group.media$thumbnail[0].url)
$('<li/>').append(img).appendTo('#videos');
});
}, error: function(xhr, status, e) {
$('<span/>').text(status).minimessage();
}
});
});
</script> <ul id="videos"></ul> 16

17. ビューの遷移 canvas へ
<Content type="html" view="home"><![CDATA[
<script type="text/javascript">
jQuery(document).ready(function($) {
$.getJSON('http://picasaweb.google.com/data/feed/api/all', {
q: $.pref('q'), alt: 'json', 'max­results': 20
}, function(data) {
$.each(data.feed.entry, function(i, entry) {
var img = $('<img/>')
.attr('src', entry.media$group.media$thumbnail[0].url)
.click(function() { $.view('canvas', { url: entry.content.src }); });
$('<li/>').append(img).appendTo('#photos');
});
});
});
</script> <ul id="photos"></ul>
]]></Content>
17

18. ビューの遷移 home から
<Content type="html" view="canvas"><![CDATA[
<script type="text/javascript">
jQuery(document).ready(function($, data) {
$(window).height(400);
$('<img/>').attr('src', data.url).appendTo('body');
});
</script>
]]></Content>
18

19. 署名リクエスト + OpenSocial Host
var form = $('form').submit(function() {
$.post('http://opensocialhost.com/data/insert signed', {
key1: data.url + new Date().getTime(), value1: this.note.value
}, function() { … }, 'json');
return false;
});
$.post('http://opensocialhost.com/data/search signed',
{ key: data.url }, function(res) { ... }, 'json');
<form>
<input name="note" type="text" />
<input type="submit" value="保存" />
</form>
<ul id="notes"></ul>
19

20. OpenSocial jQuery の対応範囲
OpenSocial API: opensocial.*
• jQuery.ajax & jQuery.getData
– プロフィール情報、友達情報の取得
– 永続化情報の取得と保存 (削除は未対応)
– アクティビティの取得と送信
– メッセージの送信
– アルバム情報、写真情報の取得
• jQuery.container
– コンテナの判別、ドメインの取得 20

21. 友達伝言板アプリ
21

22. プロフィール情報の取得
$.get('/people/@viewer', { fields: 'profileUrl' }, function(data) {
var person = data[0];
$('#self a').attr({ title: person.nickname, href: person.profileUrl });
$('#self a img').attr('src', person.thumbnailUrl);
}, 'data');
<div id="self">
<a target="_top"><img/></a>
</div>
22

23. 永続化情報の取得と保存
var form = $('form').submit(function() {
$.postData('/appdata/@viewer', { comment: this.comment.value });
return false;
});
$.getData('/appdata/@viewer', function(data) {
$.each(data, function(id, data) {
form[0].comment.value = data.comment || '';
});
});
<form>
<input name="comment" type="text" />
<input type="submit" value="更新" />
</form>
23

24. プロフィール情報と
永続化情報の同時取得
$.getData('/people/@viewer', { appData: 'comment' }, function(data) {
var person = data[0];
form[0].comment.value = person.appData.comment || '';
form.find('img').attr({ title: person.nickname, src: person.thumbnailUrl });
});
<form>
<img/>
<input name="comment" type="text" />
<input type="submit" value="保存" />
</form>
24

25. 友達情報の取得
$.getData('/people/@viewer/@friends', { appData: 'comment' },
function(data) {
$.each(data, function(i, person) {
var img = $('<img/>')
.attr({ title: person.nickname, src: person.thumbnailUrl });
$('<li/>').text(person.appData.comment || '').prepend(img)
.appendTo('#friends');
});
// data.startIndex
// data.itemsPerPage
// data.totalResults
});
<ul id="friends"></ul>
25

26. プロフィール情報、友達情報の取得
• GET /people/@viewer/@self
• GET /people/@viewer/@friends
• GET /people/@viewer/@friends/@app
• GET /people/@owner/ …
• GET /people/<id>/ …
@self は省略可 @viewer は @me でも可
• fields, appData, filterBy, sortBy, startIndex,
count パラメータ
26

27. 永続化情報の取得と保存
• GET or POST /appdata/@viewer/@self
• GET /appdata/@viewer/@friends
• GET /appdata/@viewer/@friends/@app
• GET /appdata/@owner/ …
• GET /appdata/<id>/ …
@self は省略可 @viewer は @me でも可
• fields パラメータ
• gadgets.json.stringify と parse を自動化
27

28. アクティビティの送信
var form = $('form').submit(function() {
$.postData('/appdata/@viewer', { comment: this.comment.value },
function() {
$.postData('/activities/@viewer', { title: 'コメントを更新しました' });
$('<span/>').text('コメントを更新しました').minimessage('slow');
}
); return false;
});
28

29. メッセージの送信
var img = $('<img/>')
.attr({ title: person.nickname, src: person.thumbnailUrl });
.click(function() {
$.postData('/messages/@viewer/@outbox', {
recipients: person.id, title: '',
body: 'コメントの催促です。コメントを更新してください。'
});
});
29

30. アクティビティの取得と送信
• GET or POST /activities/@viewer/@self
• GET /activities/@viewer/@friends
• GET /activities/@owner/ …
• GET /activities/<id>/ …
@self は省略可 @viewer は @me でも可
• title, body, url, mediaItems, … recipients
(mixi 拡張) パラメータ
30

31. メッセージの送信
• POST /messages/@viewer/@outbox
@viewer は @me でも可
• recipients, title, body パラメータ
31

32. OpenSocial jQuery の対応範囲
拡張 API: mixi.*
• jQuery.ajax
– 学校の選択
– 学校リストの取得
– コミュニティ情報の取得
• jQuery.invite
– 友達の招待
– 同級生の招待
• jQuery.view
– 外部サイトへの誘導 32

33. 友達の招待
$('#invite').click(function() {
$.invite(function(ids) {
$.postData('/appdata/@viewer', { inviteIds: ids });
}); return false;
});
<a id="invite" href="#invite">
友達を招待する</a>
33

34. おやおや？ Viewer や友達が
アプリをインストールしていないと …
34

35. OpenSocial API の制限を受けます
• Viewer がアプリをインストールしていない
– プロフィール情報の取得が ID のみに制限される
– 友達情報の取得がエラーになる
– 永続化情報の取得と保存がエラーになる
– アクティビティの送信がエラーになる
– メッセージの送信がエラーになる
– 友達の招待がエラーになる
• 友達がアプリをインストールしていない
– アプリに関するプライバシー設定にしたがい、
友達情報の取得が許可項目のみに制限される
35

36. 36

37. エラーハンドリング 3つの方法
$.ajax({
url: '/people/@viewer/@friends',
data: { fields: 'profileUrl', appData: 'comment' }, dataType: 'data',
success: function(data, status) { … },
error: function(xhr, status, e) {
$('<span/>').text('エラーが発生しました。').minimessage();
}
});
$('body').ajaxError(function(event, xhr, settings, e) {
$('<span/>').text('エラーが発生しました。').minimessage();
});
$.getData('/people/@viewer/@friends', { … }).next(function(data) {
…
}).error(function(data) {
$('<span/>').text('エラーが発生しました。').minimessage();
}); 37

38. アプリ説明ページに遷移し、
アプリのインストールを促す
$.getData('/people/@viewer', { … }, function(data) {
…
}).getData('/people/@viewer/@friends', { … }, function(data) {
…
}).error(function(e) {
var url = 'http://mixi.jp/view_appli.pl?' + $.param({ id: $.pref('app_id') });
window.open(url, '_top');
});
38

39. 取得できない項目を補うか、アプリを
インストールしている友達に限定する
var img = $('<img/>').attr({
title: person.nickname || 'ゲスト',
src: person.thumbnailUrl ||
'http://img.mixi.jp/img/basic/common/noimage_member76.gif'
});
$.getData('/people/@viewer/@friends/@app', { … }, function(data) {
…
})
39

40. そして、完成 … ウェブアプリと同じに
見えました? 違うように見えました?
40

41. ありがとうございました
ウェブ制作の関係者のみなさん
お持ちのウェブ制作スキルと実績で
OpenSocial アプリケーションを
開発してみませんか?
OpenSocial jQuery がきっと役立ちます
41