SlideShare a Scribd company logo
1 of 44
Download to read offline
OpenSocialのアーキテクチャ

       えーじ




                     1
自己紹介
•  北村英志 (id: agektmr)
  ‒  NTTレゾナント株式会社(gooホーム)
  ‒  Google API Expert (OpenSocial)
  ‒  Shindig committer
  ‒  SocialWeb Japan主催
  ‒  ブログ: Tender Surrender
     http://devlog.agektmr.com/




                                      2
OpenSocial



             3
OpenSocialアプリとは?




                   4
成り立ち
•  2007年11月 Google Campfireで発表
•  MySpace、hi5、orkutといった米国大手のSNS
   が賛同
•  Googleの先導で始まったものの、現在は
   OpenSocial Foundationが取りまとめている




                               5
特徴
•  オープンな仕様
 ‒  Learn Once, Write Anywhere
•  オープンな仕様作成プロセス
 ‒  http://groups.google.com/group/opensocial
•  豊富な関連オープンソースプロダクト
 ‒  Apache Shindig
 ‒  OpenSocial Client Libraries
 ‒  OpenSocial Development Environment
 ‒  OpenSocial‒jQuery
 ‒  etc.                                        6
仕様策定プロセス
•  オープンなメーリングリストで議論
•  誰でも仕様の提案が可能
•  仕様について議論
•  投票
•  Apache Shindigで実装
•  仕様完成



                       7
OpenSocialの仕様




                8
2つの側面




•  JavaScript API (ガジェットプラットフォーム)
 ‒  SNS内に埋め込むアプリケーション
•  RESTful API (外部サーバー連携)
 ‒  SNS外にソーシャルグラフを提供
                                9
OpenSocialガジェットでできること

•  HTML, CSS, JavaScript, Flash等を使った、
   SNS上で動作するアプリケーションの開発
•  ソーシャルグラフの取得
•  プロフィールの取得
•  アクティビティの送信、取得
•  アプリデータの保存、取得
•  メッセージの送信
•  外部サーバーとの通信
•  etc.
                                        10
ガジェットの作り方




            11
手順
1.  XMLファイルを書く
2.  ウェブサーバーにアップロード
3.  OpenSocialコンテナに登録
4.  ガジェットを表示




                        12
XMLファイルの構成
•  メタ情報
 ‒  ガジェット名
 ‒  概要
 ‒  利用する機能(feature)
 ‒  その他設定、定義
•  ガジェットの表示内容
 ‒  ビューごとに指定
 ‒  HTML, CSS, JavaScript, Flash, etc.を記述


                                            13
OpenSocialのガジェットXML
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs title="タイトル" description="概要文" author="Eiji
   Kitamura" author_email="eiji@example.com" >
   <Require feature="opensocial-0.8" />
   <Require feature="dynamic-height" />
 </ModulePrefs>
 <Content type="html" view="canvas">
 <![CDATA[
 ガジェットに表示するソースコード
 ]]>
 </Content>
</Module>


                                                            14
サーバーにアップロード
•  Webサーバー
•  Google AppEngine
•  Dropbox




                      15
OpenSocialコンテナに登録



          mixiアプリ




 gooホーム
                    16
ガジェットを表示




           17
ガジェットはどうやって表示され
     ているのか?




              18
ブログパーツ?




          19
XSSを避ける4つの方法
•  ドメインを分ける
•  安全性の確認されたJavaScriptのみ許可する
•  JavaScriptの危険な部分のみ無力化する(Caja)
•  iframeで表示する




                               20
ShindigでのGadget表示方法




                      21
iframe対応による課題
•  認証方法
•  コンテナとShindigの通信方法
•  外部サーバーとの通信方法
•  セキュリティ




                       22
OpenSocialアーキテクチャ
            Database                                  External Service




                       metadata
                                                          Gadget
Container                         Shindig                  XML

                          json-rpc           proxy




                         opensocial         gadgets

  SNS                             Gadget

                   Browser
                                                                     23
ガジェットが表示されるまで




                24
1. ブラウザからSNSにアクセス
            Database                   External Service




                                           Gadget
Container                    Shindig        XML




                   Browser
                                                      25
2. ガジェットに関する情報を収集
             Database                        External Service




                        metadata
                                                 Gadget
 Container                         Shindig        XML




                    Browser
                                                            26
3. SNSをレンダリング
            Database                   External Service




                                           Gadget
Container                    Shindig        XML




  SNS

                   Browser
                                                      27
4. iframeにガジェットをレンダリング

             Database                   External Service




                                            Gadget
 Container                    Shindig        XML




      Token
   SNS                        Gadget

                    Browser
                                                       28
5. iframeにガジェットをレンダリング

             Database                   External Service




                                            Gadget
 Container                    Shindig        XML




   SNS                        Gadget

                    Browser
                                                       29
OpenSocial APIを使う




                    30
OpenSocial APIを使う
            Database                     External Service




                                             Gadget
Container                      Shindig        XML

                        json-rpc




                       opensocial
                               Token
  SNS                          Gadget

                   Browser
                                                        31
外部サーバーと通信する




              32
外部サーバーとの通信
            Database                             External Service




                                                     Gadget
Container                    Shindig                  XML

                                        proxy




                                       gadgets

  SNS                        Gadget

                   Browser
                                                                33
Signed Request
•  別名OAuth Consumer Request、2 Legged
   OAuth
•  ガジェットが外部サーバーと通信する際のオプ
   ション
•  リクエストに署名を付け加えることができる
•  外部サーバーは、署名を元にリクエスト内容が
   改ざんされていないかチェック可能



                                   34
ケース1

  悪意のあるサーバー	
                    External Service
      Evil




•  無関係なガジェットやサーバーからデータを書
   き換えられる



                                       35
ケース2

悪意のあるスクリプト	
   gadgets      proxy     External Service

    Gadget      Shindig

   Browser


 •  GreaseMonkey等を使って他人に成り済まされ
    る



                                       36
ケース3
             悪意のある仲介者	


 gadgets    proxy         External Service

 Gadget     Shindig

 Browser


•  通信途中のノードでリクエストを書き換えられ
   る



                                       37
Signed Requestで解決


  gadgets              proxy                   External Service
                                ............
                                .......
  Gadget              Shindig   ............
                                .........	


  Browser


•  サーバーで正確な情報を追加
 ‒  opensocial_viewer_id
 ‒  opensocial_owner_id
 ‒  opensocial_app_url
•  電子署名を追加                                                  38
OAuth
•  ガジェットが外部サーバーと通信する際のオプ
   ション
•  外部サーバーの認証の仕組みを使い、ガジェッ
   トが認可を得ることができる
•  OAuth Proxy




                       39
OAuthを用いないマッシュアップ



                 ID/Pass

 Browser    Application    Service




•  ユーザーは信頼できるとは限らないアプリケー
   ションに、サービスのクレデンシャル(ID/Pass)
   を預けざるを得なかった
                                     40
一般的なOAuth



                  Token
                                  ID/Pass
Browser      Application     Service




ユーザー        コンシューマ         サービスプロバイダ




                                       41
OpenSocialにおける
            OAuth Proxy



                           Token             ID/Pass
Browser     gadgets    proxy       External Service

             Gadget    Shindig



ユーザー                  コンシューマ
           コンシューマ?               サービスプロバイダ


                                                      42
OpenSocialアーキテクチャ
            Database                                  External Service




                       metadata
                                                          Gadget
Container                         Shindig                  XML

                          json-rpc           proxy




                         opensocial         gadgets

  SNS                             Gadget

                   Browser
                                                                     43
最後に
•  現在日本のOpenSocialコンテナはgoo、mixi
•  既にDeNA、リクルートが対応を表明
•  smart.fmも対応予定



    日本のソーシャルウェブを
    盛り上げて行きましょう!

                                  44

More Related Content

Similar to OpenSocialのアーキテクチャ

HCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdf
HCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdfHCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdf
HCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdfSoftware Info HCL Japan
 
Infomation Card と Windows CardSpace のご紹介
Infomation Card と Windows CardSpace のご紹介Infomation Card と Windows CardSpace のご紹介
Infomation Card と Windows CardSpace のご紹介shigeya
 
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏Developers Summit
 
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割技術選択とアーキテクトの役割
技術選択とアーキテクトの役割Toru Yamaguchi
 
Pyramid + socket.io 人狼を作ってみた
Pyramid + socket.io 人狼を作ってみたPyramid + socket.io 人狼を作ってみた
Pyramid + socket.io 人狼を作ってみたJunya Hayashi
 
SharePoint Business Connectivity Services を使用した外部アプリケーション連携
SharePoint Business Connectivity Services を使用した外部アプリケーション連携SharePoint Business Connectivity Services を使用した外部アプリケーション連携
SharePoint Business Connectivity Services を使用した外部アプリケーション連携Atsuo Yamasaki
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたNishoMatsusita
 
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~torisoup
 
WebIntents × SNS
WebIntents × SNSWebIntents × SNS
WebIntents × SNSRyo Ito
 
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?Daichi Isami
 
はじめてのWeb of Things
はじめてのWeb of ThingsはじめてのWeb of Things
はじめてのWeb of ThingsSaki Homma
 
Firefox OS and Web server
Firefox OS and Web serverFirefox OS and Web server
Firefox OS and Web serverTomoaki Konno
 
Windows Azure Active Directory for your cloud applications
Windows Azure Active Directory for your cloud applicationsWindows Azure Active Directory for your cloud applications
Windows Azure Active Directory for your cloud applicationskekekekenta
 
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践真吾 吉田
 
勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版
勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版
勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版junichi anno
 
Azure ADとIdentity管理
Azure ADとIdentity管理Azure ADとIdentity管理
Azure ADとIdentity管理Naohiro Fujie
 
エッジコンピューティングで実現できる活用シナリオ3選
エッジコンピューティングで実現できる活用シナリオ3選エッジコンピューティングで実現できる活用シナリオ3選
エッジコンピューティングで実現できる活用シナリオ3選Jun Ichikawa
 
Node-REDのノード開発容易化ツール Node generator
Node-REDのノード開発容易化ツールNode generatorNode-REDのノード開発容易化ツールNode generator
Node-REDのノード開発容易化ツール Node generatorBMXUG
 

Similar to OpenSocialのアーキテクチャ (20)

HCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdf
HCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdfHCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdf
HCL Nomad Web Sandbox アプリケーション検証手順-20230727.pdf
 
Android binder-ipc
Android binder-ipcAndroid binder-ipc
Android binder-ipc
 
Infomation Card と Windows CardSpace のご紹介
Infomation Card と Windows CardSpace のご紹介Infomation Card と Windows CardSpace のご紹介
Infomation Card と Windows CardSpace のご紹介
 
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
 
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
 
Pyramid + socket.io 人狼を作ってみた
Pyramid + socket.io 人狼を作ってみたPyramid + socket.io 人狼を作ってみた
Pyramid + socket.io 人狼を作ってみた
 
SharePoint Business Connectivity Services を使用した外部アプリケーション連携
SharePoint Business Connectivity Services を使用した外部アプリケーション連携SharePoint Business Connectivity Services を使用した外部アプリケーション連携
SharePoint Business Connectivity Services を使用した外部アプリケーション連携
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
 
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
 
WebIntents × SNS
WebIntents × SNSWebIntents × SNS
WebIntents × SNS
 
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
 
はじめてのWeb of Things
はじめてのWeb of ThingsはじめてのWeb of Things
はじめてのWeb of Things
 
Firefox OS and Web server
Firefox OS and Web serverFirefox OS and Web server
Firefox OS and Web server
 
Windows Azure Active Directory for your cloud applications
Windows Azure Active Directory for your cloud applicationsWindows Azure Active Directory for your cloud applications
Windows Azure Active Directory for your cloud applications
 
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
 
Scim and or graph
Scim and or graphScim and or graph
Scim and or graph
 
勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版
勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版
勉強会キット Windows Server 2012 R2 評価版 BYOD 編 v2 20131020 版
 
Azure ADとIdentity管理
Azure ADとIdentity管理Azure ADとIdentity管理
Azure ADとIdentity管理
 
エッジコンピューティングで実現できる活用シナリオ3選
エッジコンピューティングで実現できる活用シナリオ3選エッジコンピューティングで実現できる活用シナリオ3選
エッジコンピューティングで実現できる活用シナリオ3選
 
Node-REDのノード開発容易化ツール Node generator
Node-REDのノード開発容易化ツールNode generatorNode-REDのノード開発容易化ツールNode generator
Node-REDのノード開発容易化ツール Node generator
 

Recently uploaded

AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfFumieNakayama
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?akihisamiyanaga1
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineerYuki Kikuchi
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfFumieNakayama
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...博三 太田
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)UEHARA, Tetsutaro
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 

Recently uploaded (8)

AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 

OpenSocialのアーキテクチャ