socialweb conference vol.5 opensocial night #2
TRANSCRIPT
1
OpenSocial jQuery による
ウェブ制作スキルを活かした OpenSocial アプリケーション開発
SocialWeb Conference vol.5 〜 OpenSocial Night #2 〜
2010年2月23日
なかじまんソフトウェア株式会社 中嶋信博 http://nakajiman.lrlab.to/
2
目次
• OpenSocial アプリの基本性質の振り返り • OpenSocial jQuery の目的と概要の紹介 • OpenSocial jQuery による iGoogle ガジェッ
トの開発 • OpenSocial jQuery による mixi アプリの開
発 • パーミッションモデルと OpenSocial jQuery
のエラーハンドリング
3
OpenSocial アプリのつくりって …
Canvas ビュー
Profile ビュー
4
<?xml version="1.0" encoding="UTF8" ?> <Module> <ModulePrefs title="Hello, world!" /> <Content type="html" view="profile"><![CDATA[ Hello, world! ]]></Content> <Content type="html" view="canvas"><![CDATA[ Hello, world! ]]></Content> </Module>
ビューがページのウェブアプリです
HTML + CSS + JavaScript
ビュー = ページ = iframe
5
ウェブアプリとの違いは OpenSocial API を使い、その影響を受けること
• OpenSocial JavaScript API – OpenSocial API: opensocial.* – Gadgets API: gadgets.* – 拡張 API: mixi.* goohome.* …
• OpenSocial RESTful API – RESTful Protocol – JSONRPC Protocol
• パーミッションモデル – 情報の取得や更新の制限
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> ]]></Content>
7
OpenSocial アプリは HTML + CSS + JavaScript
で開発できる典型的なウェブアプリ
OpenSocial アプリは OpenSocial API + パーミッションモデル
で成り立つプラットフォーム専用アプリ
OpenSocial jQuery の目的
8
OpenSocial jQuery は、 OpenSocial JavaScript API を jQuery で橋渡することで、
OpenSocial アプリをウェブアプ
リのように開発できるようにする JavaScript ライブラリです
9
例 OpenSocial jQuery Hello, Viewer
<Content type="html"><![CDATA[ <script type="text/javascript" src="opensocialjquery.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>
10
OpenSocial jQuery への期待 • jQuery の高いシェア、広いターゲット層 –ウェブ制作の関係者
• jQuery によるウェブ制作スキルの活用 –ウェブ制作の開発手法、デザイン手法
• jQuery によるウェブ制作実績の活用 –ソースコードの移植性、jQuery プラグイン
• OpenSocial アプリの活性化 –SAP (Social Application Provider) の動機
11
OpenSocial jQuery の情報源 • ダウンロード v1.3.2.5 / v1.2.6.5
– http://code.google.com/p/opensocialjquery
• ライセンス – MIT License – Apache License 2.0 (Templates プラグインのみ)
• ドキュメント en / ja – http://code.google.com/p/opensocialjquery/w
• メーリングリスト – http://groups.google.com/group/opensocialjquery
• コミッタ コントリビュータ – @nakajiman @rkanbe @lackac @jonca.rafal
12
OpenSocial jQuery の対応環境 • mixi アプリ (PC) • goo ホームガジェット • CREYLE アプリ (最終確認中)
• iGoogle ガジェット • Google Friend Connect ガジェット
Apache Shindig http://shindig.apache.org/ • OpenSocial: Orkut、hi5、Partuza … • Gadgets: Google Wave …
13
OpenSocial jQuery の構成
OpenSocial jQuery: opensocialjquery.js
OpenSocial アプリ
jQuery プラグイン
拡張プラグイン: opensocialjquery.<name>.js
jQuery 1.3.2 JSDeferred 0.2.2 コアプラグイン
OpenSocial JavaScript API
14
OpenSocial jQuery の対応範囲 Gadgets API: gadgets.*
• jQuery.fn.ready – ガジェットのロード
• jQuery.ajax & jQuery.getFeed – 外部サーバの呼び出し – 署名リクエスト – フィードの取得
• jQuery.pref & jQuery.prefArray – プリファレンスとパラメータの取得
• jQuery.view & jQuery.views – ビューの判別と遷移
• jQuery.fn.height & jQuery.fn.adjustHeight & jQuery.fn.autoHeight – 高さの変更
• jQuery.fn.minimessage – ミニメッセージの表示
15
OpenSocial jQuery の対応範囲 Gadgets API: gadgets.*
• jQuery.fn.title – タイトルの変更
• jQuery.msg – メッセージバンドルの取得
• jQuery.container.cache – キャッシュの制御
• jQuery.fn.tab – タブの表示
• jQuery.flash.version – Flash バージョンの判別
• jQuery.fn.flash – Flash の埋め込み
• jQuery.pub & jQuery.sub – ガジェット間のメッセージ送受信
• jQuery.feature – フィーチャーの判別とパラメータの取得
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>
外部サーバの呼び出し
17
<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', 'maxresults': 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>
ビューの遷移 canvas へ
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>
19
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>
署名リクエスト + OpenSocial Host
20
OpenSocial jQuery の対応範囲 OpenSocial API: opensocial.*
• jQuery.ajax & jQuery.getData –プロフィール情報、友達情報の取得 –永続化情報の取得と保存 (削除は未対応) –アクティビティの取得と送信 –メッセージの送信 –アルバム情報、写真情報の取得
• jQuery.container –コンテナの判別、ドメインの取得
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>
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>
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>
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>
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 パラメータ
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 を自動化
28
アクティビティの送信 var form = $('form').submit(function()
$.postData('/appdata/@viewer', comment: this.comment.value , function()
$.postData('/activities/@viewer', title: 'コメントを更新しました' ); $('<span/>').text('コメントを更新しました').minimessage('slow');
); return false;
);
29
メッセージの送信 var img = $('<img/>')
.attr( title: person.nickname, src: person.thumbnailUrl );
.click(function() $.postData('/messages/@viewer/@outbox',
recipients: person.id, title: '', body: 'コメントの催促です。コメントを更新してください。'
); );
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 拡張) パラメータ
31
メッセージの送信 • POST /messages/@viewer/@outbox @viewer は @me でも可 • recipients, title, body パラメータ
32
OpenSocial jQuery の対応範囲 拡張 API: mixi.*
• jQuery.ajax – 学校の選択 – 学校リストの取得 – コミュニティ情報の取得
• jQuery.invite – 友達の招待 – 同級生の招待
• jQuery.view – 外部サイトへの誘導
33
友達の招待 $('#invite').click(function()
$.invite(function(ids) $.postData('/appdata/@viewer', inviteIds: ids );
); return false; );
<a id="invite" href="#invite"> 友達を招待する</a>
34
おやおや？ Viewer や友達が アプリをインストールしていないと …
35
OpenSocial API の制限を受けます • Viewer がアプリをインストールしていない
– プロフィール情報の取得が ID のみに制限される – 友達情報の取得がエラーになる – 永続化情報の取得と保存がエラーになる – アクティビティの送信がエラーになる – メッセージの送信がエラーになる – 友達の招待がエラーになる
• 友達がアプリをインストールしていない – アプリに関するプライバシー設定にしたがい、
友達情報の取得が許可項目のみに制限される
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();
);
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');
);
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) …
)
40
そして、完成 … ウェブアプリと同じに 見えました? 違うように見えました?
41
ありがとうございました
ウェブ制作の関係者のみなさん
お持ちのウェブ制作スキルと実績で OpenSocial アプリケーションを
開発してみませんか?
OpenSocial jQuery がきっと役立ちます