Head First OpenSocial -...
Transcript of Head First OpenSocial -...
![Page 1: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/1.jpg)
Tokyo 2.0
Head First OpenSocial
2009.2.9 リクルート メディアテクノロジーラボ
engineer 石橋 利真
and
フリーランス engineer 長瀬 敦史
![Page 2: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/2.jpg)
![Page 3: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/3.jpg)
![Page 4: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/4.jpg)
hi I’m Toshi
![Page 5: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/5.jpg)
new gadget platform coming
![Page 6: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/6.jpg)
OpenSocial training camp!
※ブログレポートはこちら
![Page 7: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/7.jpg)
today's goal
• understand what OpenSocial is • be prepared for making your own gadget
![Page 8: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/8.jpg)
need for a common platform specification
FBML OrkML? MyML?
background
![Page 9: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/9.jpg)
Google came up with OpenSocial
![Page 10: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/10.jpg)
OpenSocial is
a technology specification for SNS gadget platform
![Page 11: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/11.jpg)
but ultimately...
extend the use of social data
![Page 12: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/12.jpg)
as for developer
• standard XML / HTML / JavaScript • write once, run anywhere
![Page 13: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/13.jpg)
OpenSocial enabled containers
live for all users
hi5 LinkedIn MySpace
Friendster Ning orkut
http://wiki.opensocial.org/index.php?title=Main_Page#Container_Information
open only for developers
iGoogle Yahoo!
![Page 14: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/14.jpg)
tech terms
• owner and viewer
toshi’s profile
app
toshi = owner andrew = viewer
![Page 15: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/15.jpg)
tech terms
• views
‒ home ‒ canvas ‒ profile
![Page 16: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/16.jpg)
home
![Page 17: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/17.jpg)
canvas
![Page 18: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/18.jpg)
profile
![Page 19: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/19.jpg)
tech terms
• views
home canvas profile
owner ○ ○ ○
viewer × × ○
![Page 20: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/20.jpg)
tech terms
• OAuth
web service external database
![Page 21: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/21.jpg)
things to learn
• 2 JavaScript APIs
‒ gadget.* API ‒ opensocial.* API
![Page 22: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/22.jpg)
things to learn
• gadget.* API
‒ basic framework (UI, Flash, content resizing) ‒ caching ‒ AJAX + OAuth
![Page 23: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/23.jpg)
things to learn
• opensocial.* API
‒ friend list ‒ activity alert ‒ data storage
![Page 24: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/24.jpg)
development tools
• partuza
‒ sample container ‒ download source code ‒ live version : http://www.partuza.nl/
![Page 25: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/25.jpg)
development tools
• jopensocial
‒ jQuery plugin for easy opensocial coding ‒ http://code.google.com/p/jopensocial/
![Page 26: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/26.jpg)
code examples
• live coding!
‒ by Atsushi Nagase ‒ http://blog.ngsdev.org/
![Page 27: Head First OpenSocial - iandeth.dyndns.orgiandeth.dyndns.org/mt/ian/archives/tokyo-2.0-200902/Tokyo2.0-Head... · Tokyo 2.0 Head First OpenSocial 2009.2.9 リクルート メディアテクノロジーラボ](https://reader030.fdocuments.net/reader030/viewer/2022032614/5b5eaab07f8b9a415d8cdc20/html5/thumbnails/27.jpg)
have fun
• online resource
‒ gadgets.* API • http://code.google.com/apis/gadgets/docs/
‒ opensocial.* API • http://code.google.com/apis/opensocial/
‒ my sample codes • http://iandeth.googlecode.com/svn/trials/
javascript/opensocial/