1. Web API 標準の
OpenSocial の現状と今後
新世代UI/UXを実践！OpenSocialとGadget Server
2010年9月7日
なかじまんソフトウェア株式会社 中嶋 信博
Google API Expert (OpenSocial)
【参考】 Google Developer Relations Japan
http://sites.google.com/site/devreljp/Home/api-expert

2. アジェンダ
• OpenSocial ガジェットとは何か
• OpenSocial ガジェットの UI/UX
• OpenSocial 標準化の歩み
• OpenSocial ガジェットのエコシステム
• 日本の OpenSocial の歩み
• 日本の OpenSocial 対応サイトの紹介
• 2010年 Enterprise OpenSocial 元年
• そして今後 …

3. ウェブサイトの視点から
OpenSocial ガジェットとは何か

4. OpenSocial ガジェットとは、ウェブサイトに
組み込む小さなウェブアプリケーションのこと
ガジェットは、専用のサーバ
ソフトウェアを介して配信する
http://www.google.co.jp/ig
ウェブサイトは OpenSocial 対応することで
ガジェットを自由に組み込みできる

5. ガジェット記述方法と配信方法は
OpenSocial 仕様として標準化
•ガジェットの記述方法 ガジェットは XML ファイルで記述し、
Web 標準の HTML, CSS, JavaScript
•ガジェットXML を使って制作する
•JavaScript API
•ガジェットの配信方法
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.8" /> 専用のサーバソフトウェアは
</ModulePrefs>
ガジェットXML を HTML に変換して
<Content type="html"><![CDATA[
HTML, CSS, JavaScript
ウェブサイトに配信する
]]></Content> 【参考】 OpenSocial Specification
</Module> http://www.opensocial.org/page/specs-1

6. ウェブサイトが OpenSocial 対応することで
ユーザひとりひとりに合わせたサービスの提供
多くのガジェットを OpenSocial 対応 多くのガジェットを
自由に利用できる ウェブサイト 自由に登録できる
ユーザ ガジェット

7. ユーザの視点から
OpenSocial ガジェットの UI/UX

8. iGoogle / パーソナライズドホーム
• Google のコンテンツ
• Google のサービス
• 3rd パーティのコンテンツ
• 3rd パーティのサービス
http://www.google.co.jp/ig
ユーザ自身がガジェットを自由に XMLファイルのURL
選んで、自由に配置できる

9. iGoogle / CNN.com ガジェットの例
設定フォームでカスタマイズできる
最大化して
詳しく見ることができる
さらに
CNN.com サイト
ドラッグ&ドロップで に移動できる
上下左右の並び替え
ができる

10. iGoogle / Zoho CRM Tasks ガジェットの例
OpsnSocial 対応サイトなら
ガジェットを組み込むことで
•いつでも
•どこでも
•どんなことも
ウェブ上に点在するコンテンツや
サービスをまとめることができる 【参考】 Zoho CRM http://crm.zoho.com/

11. ガジェットの視点から
OpenSocial 標準化の歩み
OpenSocial ガジェットのエコシステム

12. OpenSocial は Google 主導から
オープンな Web API 標準へ
2008年9月 非営利団体
OpenSocial Foundation 発足
2007年11月
Google 主導による OpenSocial の提唱
2005年9月
Google Personalized Home 開始 (現在の iGoogle)

13. OpenSocial ガジェットの登場の背景
「Learn once, write anywhere」
一度 Web API の使い方を学べば、
どのウェブサイトでも動くガジェットが書ける
OpenSocial 以前 OpenSocial 以後
異なる Web API 仕様 共通の Web API 仕様

14. Google サービスのガジェット対応は
幅広く進んでいます (2009年9月)
• Gmail • Google Custom Search
• Google Calender • Google Chart
• Google Spreadsheets • Google AdWords
• Google Sites • Google Checkout
• Google Maps ….
• Google Friend Connect
• Blogger 【参考】Gadgets API - Google Code
http://code.google.com/intl/ja/apis/gadgets/index.html

15. 世界の OpenSocial 対応も
幅広く進んでいます (2009年9月)
51.com Atutor Avatars United Cyworld
FanBox Freebar Friendster GROU.PS hi5
Hyves IDtail itimes iWiW LinkedIn Lonely
Planet Mail.ru MySpace Netlog Ning orkut
phpFox Qme QuePasa RenRen Socialtext
Sonico Webjam Webon XING Yahoo! YiQi
Yonja VZ-Netzwerke GruveOn BIGADDA
lokalisten Yonja CityIN minglebox imeem
Tianya Viadeo OpenNetworx Plaxo …
【参考】 OpenSocial - It's Open. It's Social. It's up to you.
http://www.opensocial.org/

16. OpenSocial 仕様は
オープンな場で議論して策定
OpenSocial and Gadgets
Specification Discussion
仕様の提案 仕様の実現
OpenSocial
Apache Shindig
Community
リファレンス実装の提供 【参考】 Apache Shindig
http://shindig.apache.org/

17. 誰もがメリットを享受できる
OpenSocial ガジェットのエコシステム
ガジェット (3rd パーティ)
OpenSocial 対応 サービスの利用
ガジェットの提供
サービスの提供
ガジェットの提供
ウェブサイト ガジェットの利用 ユーザ

18. 日本の OpenSocial の歩み
日本の OpenSocial 対応サイトの紹介

19. 日本の OpenSocial は SNS と
ゲームの分野を中心に大きく発展
2010年1月 モバゲータウン
(携帯電話向け)
2009年8月 ミクシィ
2009年5月 gooホーム
2008年8月 グミ (携帯電話向け)

20. 日本での OpenSocial 対応サイト
• グミ http://gu3.jp/
• gooホーム http://home.goo.ne.jp/
• ミクシィ http://mixi.jp/
• クレイル http://creyle.jp/
• モバゲータウン http://www.mbga.jp/
• OCNマイページ http://mypage.ocn.ne.jp/
• パチパチゼクシィ http://patipatizexy.jp/
• グリー http://gree.jp/
• リアルワールド http://www.realworld.jp/
• Yahoo!モバゲー (9月21日)
• aima http://www.aima.jp/ (9月以降)
• ハンゲーム http://hangame.co.jp/ (9月以降)

21. gooホーム / ポータルサイトの例
gooニュース gooランキング
goo天気 goo音楽
goo占い goo映画
goo路線 3rd Vendor …
goo辞書
追加 配置 カスタマイズ
gooのコンテンツを集めて
自分のポータルサイトを作る

22. OCNマイページ / 会員サポートサイトの例
会員サポートのメニュー
• マイコンテンツ (ガジェット)
• 会員サポート
• 料金手続き 外部コンテンツ
• ポイントーク も多種多様
幅広いジャンルのコンテンツを集
めて、オリジナルのページを作る

23. クレイル / 情報コミュニティサイトの例
• みんなの掲示板
• みんなで調整さん
• アテンド
• 投票箱
• つぶやき
訪問者やメンバーと交流するオリ
ジナルのコミュニティサイトを作る

24. パチパチゼクシィ / 結婚コミュニティサイトの例
• 二次会・イベント案内
• 寄せ書き
• 友達関係図
• 婚約会見
• ふたりの紹介CM
• 調整さん
新郎新婦と友人をつなぐオリジナ
ルのコミュニティサイトを作る

25. ミクシィ / 商品キャンペーンの例
• 借りぐらしパズル
• 開運まねきねこダックゲーム
• なで猫オロニャイン
• のだめカンタービレ進級試験
初級
…
マイミクのつながりとゲーム性を
取り入れてキャンペーンを展開

26. 2010年 Enterprise OpenSocial 元年
そして今後 …

27. Google I/O 2010 では Enterprise OpenSocial に
賛同する企業と取り組み内容が紹介されました
【参考】 OpenSocial Wiki
The Enterprise OpenSocial Whitepaper
http://www.opensocial.org/page/enterpri
se-opensocial
OpenSocial のエンタープ
ライズ分野での要件文書
【参考】 Google I/ 2010
Best Practices for Implementing
OpenSocial in the Enterprise
http://code.google.com/events/io/2010/s
essions/opensocial-enterprise-panel.html

28. The Enterprise OpenSocial Whitepaper
Enterprise Considerations (考慮すべきこと)
• Manageability
– ウェブサイトとガジェット間のデータ、コンテンツ、イン
タラクションの管理基盤
• Interoperability
– OpenAjax, ActivityStreams, OAuth, CMIS などの相互運
用性
• Portability
– 「Write once, deploy anywhere」
– OpenSocial 仕様と実装の成熟
• Security
– 悪意のあるコード、クロスサイト攻撃
– プライバシー、データの提供範囲や条件

29. クラウド ビジネス アライアンス /
フロント連携ワーキンググループの例
OpenSocial ガジェットを軸に
• 短期間で各社 SaaS サービス
のフロント連携を実現
• 各種課題のディスカッション・
解決策検討
• フロント連携の実現による協業
の促進 【参考】 Computerworld BLOG » Cloud Business Alliance
http://blog.computerworld.jp/category/blogger/cba/

30. ウェブ技術の進歩による問題の解決
• モバイルの進化
– スマートフォン、携帯電話
– OpenSocial 仕様の策定
• インターネットの高速化
– 高速無線データ通信で、いつでも、どこでも
• ウェブブラウザの高速化
– ページ表示と JavaScript 実行速度の向上
• ウェブブラウザの HTML5 対応
– デスクトップ並みのリッチアプリケーション

31. 今後 OpenSocial は広い分野で
Web API 標準の役割が期待される
ウェブ技術の
進歩
Consumer Enterprise
OpenSocial 技術問題の解決 OpenSocial
ソーシャルウェブ 今後の エンタープライズ
C to C の拡大 OpenSocial 分野への適用
C to B の潮流
エコシステムのさらなる拡大