SlideShare a Scribd company logo
1 of 17
Download to read offline
Facebook.JS(仮)
     『出張 Shibuya.JS 24』
     2007年 9月 15日(土)
           川﨑 有亮
    http://www.kawa.net/
Facebook




               会員数 3,400万人(2007年6月現在)
               ※米国内の SNS で MySpace に次ぐ第2位のリーチ

               Facebook Platform により、サードパーティの開発者がプラグインのように
               オリジナル・アプリケーションを開発し、 Facebook の利用者に提供できる

               Facebook is a social utility that connects you with the people around you.
               次世代の「ソーシャルOS」、「WebOS」 とも呼ばれる存在に

                                       http://www.facebook.com/                         2
出張 Shibuya.JS 24
Facebook アプリケーション
                   Facebook APIにより、Facebookの機能を利用した独自サービスを構築可能。
                   開発したアプリをFacebookに登録すれば、一般ユーザ誰でも利用可能に。
                   友人が利用しているアプリも見れるので、クチコミ効果で伝播が速い特徴。
                   Facebookアプリが充実していくことで、Facebook自体の価値も向上する。


                            Facebookアプリケーションの登録




                                                                  3
出張 Shibuya.JS 24
Facebook アプリの登録
                   ユーザは、使いたいアプリケーションを登録(インストール)できる。




                                                      4
出張 Shibuya.JS 24
⽐較(1)従来型SNS
                       1
                           従来型           外部
                           SNS          サービス


                       外部とは遮断されたSNS内のclosedな世界



                      2
                           従来型           外部
                           SNS          サービス
                                 feed


                      特定の提携サイトからのfeedを受け付ける程度



                    多くの従来型SNSは、システムが外部とは隔離されており、
                   SNS内で新サービスを提供する権限はSNS運営者が握っていた
                                                    5
出張 Shibuya.JS 24
⽐較(2)Facebook
                       3
                                  API
                                         外部
                                        サービス


                       APIによりFacebook機能を外部から利⽤可能



                       4
                                         外部
                           独⾃           サービス
                           アプリ

                        Facebook内に誰でもサービスを提供可能



                   Facebookでは、Facebook上で新サービスを提供する権限が
                    サードパーティ(外部のサービスプロバイダ)に移譲された
                                                        6
出張 Shibuya.JS 24
Facebookアプリの実装形態
                                                                2. API
                                                                          website
                                                             3. XML
              1.   外部ウェブサイト向けアプリケーション
                                                                   1. Request   4. HTML
              2.   デスクトップ向けアプリケーション
              3.   Facebook 内アプリケーション
                                                                          browser
                   – IFRAME アプリケーション                      1.外部アプリ
                   – FBML アプリケーション

                                                           2. Callback
                    4. API
                               website                                    website
                     5. XML                                 3. FBML
                   3. IFRAME
1. Request                               1. Request   4. HTML
             2. HTML
                                                                   手軽に構築可能
                         6. HTML
       browser                                  browser
                        3-1. IFRAMEアプリ                      3-2. FBMLアプリ

                                                                                     7
出張 Shibuya.JS 24
Facebook API
                      Facebook外のアプリケーションから
                      Facebookのセッション情報や、
                                           users.getInfo メソッドの主なレスポンス
                      ユーザ名・写真などプロフィール情報を
                                           要素名                内容
                      利用するためのAPIが公開されている。
                                                                         first_name                   名

                                                                         last_name                    姓

                                                                         about_me                     プロフィール文

                                                                         birthday                     誕生日

                                                                         sex                          性別

                                           application                   pic                          写真URL(100~300ピクセル)

                                                                         current_location             現住所の国名~都市

                                                                         hometown_location            出身地の国名~都市

                                                                         timezone                     時間帯(カリフォルニアは-8)

 Facebook API のメソッド一覧
 auth.createToken     auth.getSession        events.get                    events.getMembers               fbml.refreshImgSrc

 fbml.refreshRefUrl   fbml.setRefHandle      feed.publishStoryToUser       feed.publishActionOfUser        fql.query

 friends.areFriends   friends.get            friends.getAppUsers           groups.get                      groups.getMembers

 notifications.get    notifications.send     notifications.sendRequest     photos.addTag                   photos.createAlbum

 photos.get           photos.getAlbums       photos.getTags                photos.upload                   profile.setFBML

 profile.getFBML      users.isAppAdded       users.getInfo                 users.getLoggedInUser

                                                                                                                                8
出張 Shibuya.JS 24
FBML
                                 Facebook Markup Language
                    •     HTMLのサブセットに、Facebook 向けの専用拡張タグを追加
                    •     既存のHTMLコンテンツ・アプリを最低限の改修で、Facebook化できる



<fb:name   uid=quot;12345quot;   firstnameonly=quot;truequot;    lastnameonly=quot;falsequot;   useyou=quot;truequot;     linked=quot;truequot;   />




                                       パラメタ                   内容                  デフォルト
                                 uid              ユーザーID(quot;loggedinuserquot;も可)        (必須)
                                 firstnameonly    姓のみ表示する                         false
                                 linked           プロフィール画面へリンクする                  true
                                 lastnameonly     名のみ表示する                         false
                                 useyou           本人の場合quot;youquot;と表示する                 true
                                 ifcantsee        閲覧できない場合の代替表示                   (空)

                                                                                                               9
出張 Shibuya.JS 24
FBML
                                 Facebook Markup Language
                   fb:   gro   upl   ink         fb:u     ser         fb:      use     r-ta    ble    fb:pronoun
                   fb:   pro   fil   e-p     i   c fb     :is     -   in-      net     work     fb   :if-can-see
                   fb:   if-   can   -se     e    -pho    to      f   b:i      f-i     s-ap    p-u   ser
                   fb:   if-   is-   fri     e    nds-    wit     h   -vi      ewe     r fb    :if   -is-group-member
                   fb:   if-   is-   own     -    prof    ile         fb:      if-      is-u   ser
                   fb:   if-   use   r-h     a    s-ad    ded     -   app          f    b:us   erl   ink      fb:wide
                   fb:   nar   row      fb   :    if-i    s-o     w   n-p      rof      ile
                   fb:   pro   fil   e-a     c    tion       fb   :   sub      tit      le f   b:vi     sib   le-t      o-owner
                   fb:   vis   ibl   e-t     o    -fri    end     s      fb    :vi      sibl   e-to     -us   er
                   fb:   vis   ibl   e-t     o    -app    -us     e   rs       fb:      visi   ble-     to-   adde      d-a   pp-   user   s
                   fb:   ifr   ame      fb   :    phot    o    fb     :mp      3   f    b:sw   f fb     :fl   v fb      :si   lve   rlig   ht
                   fb:   com   men   ts      f    b:fr    ien     d   -se      lec      tor     fb:g    oog    le-a     nal   yti   cs f   b:if
                   fb:   mob   ile      fb   :    mult    i-f     r   ien      d-i      nput      fb:   ran    dom      fb:   swi   tch
                   fb:   fbj   s-s   tri     n    g fb    :fb     ml       f   b:f      bmlv    ersi    on     fb:r     edi   rec   t fb   :ref
                   fb:   sha   re-   but     t     on f   b:t     ime          fb:      titl    e fb    :su    bmit
                   fb:   att   ach   men     t     -pre   vie     w        f   b:n      otif     -sub   jec    t fb     :req-choice
                   fb:   req   ues   t-f     o     rm f   b:e     rror          fb      :exp     lana   tio     n fb    :success
                   fb:   edi   tor      fb   :     dash   boa     rd f         b:h      eade     r fb   :me      diah   eader fb:tabs
                   fb:   dia   log      fb   :     wall
                                                                      条件分岐など、たくさん用意されている
                                                                                                                                                  10
出張 Shibuya.JS 24
FBJS
                               Facebook JavaScript
               var foo = 'Hello';
               function bar ( obj     )   {
                   alert( foo );
               }
                                    FBML中で<script>要素を記述すると
                         変換
                                    Facebookサーバ内でFBJSとして変換される

                   var a235394XXXX_foo = 'Hello';
                   function a235394XXXX_bar ( a235394XXXX_obj   )   {
                       a235394XXXX_alert( a235394XXXX_foo );
                   }
                           セキュリティ対策
                           変数名・関数名の先頭に自動的に接頭辞が付く
                           サンドボックス方式で名前空間を隔離する仕組み
                           なんだかセキュリティホールがありそう?
                                                                        11
出張 Shibuya.JS 24
Shibuya.JS TT#1 (2006/04)




                                               12
出張 Shibuya.JS 24
DEMO #1
                        Animation.Cube(再)




                                            13
出張 Shibuya.JS 24
・・・しかし、FBJSとして実行すると




                      ※実はDEMOはIFRAMEアプリ。FBJSとしては動かない




                   style プロパティの操作は setStyle アクセサを利用する必要があり、エラー
                                                                 14
出張 Shibuya.JS 24
DEMO #2
                              WHERE’S




                   徳間インターメディア刊『MSX・FAN』誌(ファンダム)に掲載された
                   1画面部門(MSX-BASIC 40桁×24行)の自作プログラムを移植
                                                         15
出張 Shibuya.JS 24
・・・しかし、FBJSとして実行すると




                    ※実はこのDEMOもIFRAMEアプリ。FBJSとしては動かない




                     Facebook 側が提供する common.js 内でエラー(汗)
                     バグか!?
                                                          16
出張 Shibuya.JS 24
結論

                   正直、まだFBMLでガシガシJavaScript (FBJS)を使える段階でない


                   日本語の開発者向けドキュメントがほとんどない。デバッグも大変!


                        まだまだ日本人ユーザも少ない。開発者も少ない




                                これから、面白そう!


                        Facebook アプリ開発者の同志を絶賛・募集中~!



                                                              17
出張 Shibuya.JS 24

More Related Content

What's hot

Identity Technology Trend Overview, February 2009
Identity Technology Trend Overview, February 2009Identity Technology Trend Overview, February 2009
Identity Technology Trend Overview, February 2009Tatsuo Kudo
 
Transparent Pitch
Transparent Pitch Transparent Pitch
Transparent Pitch louisapope
 
Web Content Management - Introduction
Web Content Management - IntroductionWeb Content Management - Introduction
Web Content Management - IntroductionAnthony Peruma
 
Open Source Type Pad Mobile
Open Source Type Pad MobileOpen Source Type Pad Mobile
Open Source Type Pad MobileHiroshi Sakai
 
Payday Loan Claims URL's
Payday Loan Claims URL'sPayday Loan Claims URL's
Payday Loan Claims URL'sNathan Wynne
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign拓樹 谷
 
Mobile Social Networks - peperonity.com - Mobile Media Summit 2008
Mobile Social Networks - peperonity.com - Mobile Media Summit 2008Mobile Social Networks - peperonity.com - Mobile Media Summit 2008
Mobile Social Networks - peperonity.com - Mobile Media Summit 2008Maciej Kuszpa
 
Cuon sach hoan hao ve ngon ngu co the
Cuon sach hoan hao ve ngon ngu co theCuon sach hoan hao ve ngon ngu co the
Cuon sach hoan hao ve ngon ngu co theTien Nguyen
 

What's hot (13)

Teste
TesteTeste
Teste
 
Identity Technology Trend Overview, February 2009
Identity Technology Trend Overview, February 2009Identity Technology Trend Overview, February 2009
Identity Technology Trend Overview, February 2009
 
Transparent
TransparentTransparent
Transparent
 
Transparent Pitch
Transparent Pitch Transparent Pitch
Transparent Pitch
 
Pitch
PitchPitch
Pitch
 
Web Content Management - Introduction
Web Content Management - IntroductionWeb Content Management - Introduction
Web Content Management - Introduction
 
Open Source Type Pad Mobile
Open Source Type Pad MobileOpen Source Type Pad Mobile
Open Source Type Pad Mobile
 
Details of website
Details of websiteDetails of website
Details of website
 
Payday Loan Claims URL's
Payday Loan Claims URL'sPayday Loan Claims URL's
Payday Loan Claims URL's
 
Blah2
Blah2Blah2
Blah2
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign
 
Mobile Social Networks - peperonity.com - Mobile Media Summit 2008
Mobile Social Networks - peperonity.com - Mobile Media Summit 2008Mobile Social Networks - peperonity.com - Mobile Media Summit 2008
Mobile Social Networks - peperonity.com - Mobile Media Summit 2008
 
Cuon sach hoan hao ve ngon ngu co the
Cuon sach hoan hao ve ngon ngu co theCuon sach hoan hao ve ngon ngu co the
Cuon sach hoan hao ve ngon ngu co the
 

Similar to Facebook.JS (JavaScript)

Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信Yusuke Kawasaki
 
英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5Yusuke Kawasaki
 
Development toolsforteamdevelopment
Development toolsforteamdevelopmentDevelopment toolsforteamdevelopment
Development toolsforteamdevelopmentTakao Tetsuro
 
095722121-期中報告-UGC
095722121-期中報告-UGC095722121-期中報告-UGC
095722121-期中報告-UGCcherish0906
 
081210 Idcon 04 Itoh Peopleservice
081210 Idcon 04 Itoh Peopleservice081210 Idcon 04 Itoh Peopleservice
081210 Idcon 04 Itoh PeopleserviceHiroki Itoh
 
Search Engines Chapter 1 Summary
Search Engines Chapter 1 SummarySearch Engines Chapter 1 Summary
Search Engines Chapter 1 Summarysleepy_yoshi
 
20090522 Candycane
20090522 Candycane20090522 Candycane
20090522 CandycaneYusuke Ando
 
CSS Nite In Ginza, Vol.36
CSS Nite In Ginza, Vol.36CSS Nite In Ginza, Vol.36
CSS Nite In Ginza, Vol.36Nobuya Sato
 
【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」
【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」
【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」devsumi2009
 
Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)Yusuke Kawasaki
 
20090418 イケテルRails勉強会 第2部Air編 解説
20090418 イケテルRails勉強会 第2部Air編 解説20090418 イケテルRails勉強会 第2部Air編 解説
20090418 イケテルRails勉強会 第2部Air編 解説mochiko AsTech
 
20090822 Arg Cafe.Final
20090822 Arg Cafe.Final20090822 Arg Cafe.Final
20090822 Arg Cafe.Finalkulibrarians
 
Where20 2009report
Where20 2009reportWhere20 2009report
Where20 2009reportToru Mori
 
Webken 03: Project Design for Optimaizing User Experience
Webken 03: Project Design for Optimaizing User ExperienceWebken 03: Project Design for Optimaizing User Experience
Webken 03: Project Design for Optimaizing User ExperienceNobuya Sato
 
称呼090212
称呼090212称呼090212
称呼090212xmhrt
 
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法devsumi2009
 

Similar to Facebook.JS (JavaScript) (20)

Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
 
英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5
 
Development toolsforteamdevelopment
Development toolsforteamdevelopmentDevelopment toolsforteamdevelopment
Development toolsforteamdevelopment
 
095722121-期中報告-UGC
095722121-期中報告-UGC095722121-期中報告-UGC
095722121-期中報告-UGC
 
081210 Idcon 04 Itoh Peopleservice
081210 Idcon 04 Itoh Peopleservice081210 Idcon 04 Itoh Peopleservice
081210 Idcon 04 Itoh Peopleservice
 
Search Engines Chapter 1 Summary
Search Engines Chapter 1 SummarySearch Engines Chapter 1 Summary
Search Engines Chapter 1 Summary
 
20090522 Candycane
20090522 Candycane20090522 Candycane
20090522 Candycane
 
CSS Nite In Ginza, Vol.36
CSS Nite In Ginza, Vol.36CSS Nite In Ginza, Vol.36
CSS Nite In Ginza, Vol.36
 
【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」
【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」
【13-C-4】 「もう業務はとまらない!オフライン機能を使った業務アプリケーションの実例と最新 Curl 情報」
 
Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)
 
20090418 イケテルRails勉強会 第2部Air編 解説
20090418 イケテルRails勉強会 第2部Air編 解説20090418 イケテルRails勉強会 第2部Air編 解説
20090418 イケテルRails勉強会 第2部Air編 解説
 
20090822 Arg Cafe.Final
20090822 Arg Cafe.Final20090822 Arg Cafe.Final
20090822 Arg Cafe.Final
 
Install Moodle
Install MoodleInstall Moodle
Install Moodle
 
Where20 2009report
Where20 2009reportWhere20 2009report
Where20 2009report
 
Webken 03: Project Design for Optimaizing User Experience
Webken 03: Project Design for Optimaizing User ExperienceWebken 03: Project Design for Optimaizing User Experience
Webken 03: Project Design for Optimaizing User Experience
 
ICT4KMT-20081225
ICT4KMT-20081225ICT4KMT-20081225
ICT4KMT-20081225
 
称呼090212
称呼090212称呼090212
称呼090212
 
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
 
Mhada
MhadaMhada
Mhada
 
Revolutions Side B
Revolutions Side BRevolutions Side B
Revolutions Side B
 

More from Yusuke Kawasaki

IR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwIR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwYusuke Kawasaki
 
Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権Yusuke Kawasaki
 
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet Yusuke Kawasaki
 
HTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% OffHTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% OffYusuke Kawasaki
 
Mashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 TokyoMashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 TokyoYusuke Kawasaki
 
MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3Yusuke Kawasaki
 
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoCorporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoYusuke Kawasaki
 
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf MeetingYAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf MeetingYusuke Kawasaki
 
Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 LisbonRecent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 LisbonYusuke Kawasaki
 
JSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of ARJSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of ARYusuke Kawasaki
 
The JUI Digest Taipei (JSAR) - OSDC.TW 2009
The JUI Digest Taipei (JSAR) - OSDC.TW 2009The JUI Digest Taipei (JSAR) - OSDC.TW 2009
The JUI Digest Taipei (JSAR) - OSDC.TW 2009Yusuke Kawasaki
 
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流Yusuke Kawasaki
 
Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)Yusuke Kawasaki
 
OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)Yusuke Kawasaki
 
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009Yusuke Kawasaki
 
ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)Yusuke Kawasaki
 
マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)Yusuke Kawasaki
 

More from Yusuke Kawasaki (17)

IR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwIR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctw
 
Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権
 
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
 
HTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% OffHTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% Off
 
Mashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 TokyoMashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 Tokyo
 
MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3
 
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoCorporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
 
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf MeetingYAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
 
Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 LisbonRecent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
 
JSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of ARJSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
 
The JUI Digest Taipei (JSAR) - OSDC.TW 2009
The JUI Digest Taipei (JSAR) - OSDC.TW 2009The JUI Digest Taipei (JSAR) - OSDC.TW 2009
The JUI Digest Taipei (JSAR) - OSDC.TW 2009
 
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
 
Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)
 
OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)
 
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
 
ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)
 
マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)
 

Recently uploaded

Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 

Recently uploaded (20)

Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 

Facebook.JS (JavaScript)

  • 1. Facebook.JS(仮) 『出張 Shibuya.JS 24』 2007年 9月 15日(土) 川﨑 有亮 http://www.kawa.net/
  • 2. Facebook 会員数 3,400万人(2007年6月現在) ※米国内の SNS で MySpace に次ぐ第2位のリーチ Facebook Platform により、サードパーティの開発者がプラグインのように オリジナル・アプリケーションを開発し、 Facebook の利用者に提供できる Facebook is a social utility that connects you with the people around you. 次世代の「ソーシャルOS」、「WebOS」 とも呼ばれる存在に http://www.facebook.com/ 2 出張 Shibuya.JS 24
  • 3. Facebook アプリケーション Facebook APIにより、Facebookの機能を利用した独自サービスを構築可能。 開発したアプリをFacebookに登録すれば、一般ユーザ誰でも利用可能に。 友人が利用しているアプリも見れるので、クチコミ効果で伝播が速い特徴。 Facebookアプリが充実していくことで、Facebook自体の価値も向上する。 Facebookアプリケーションの登録 3 出張 Shibuya.JS 24
  • 4. Facebook アプリの登録 ユーザは、使いたいアプリケーションを登録(インストール)できる。 4 出張 Shibuya.JS 24
  • 5. ⽐較(1)従来型SNS 1 従来型 外部 SNS サービス 外部とは遮断されたSNS内のclosedな世界 2 従来型 外部 SNS サービス feed 特定の提携サイトからのfeedを受け付ける程度 多くの従来型SNSは、システムが外部とは隔離されており、 SNS内で新サービスを提供する権限はSNS運営者が握っていた 5 出張 Shibuya.JS 24
  • 6. ⽐較(2)Facebook 3 API 外部 サービス APIによりFacebook機能を外部から利⽤可能 4 外部 独⾃ サービス アプリ Facebook内に誰でもサービスを提供可能 Facebookでは、Facebook上で新サービスを提供する権限が サードパーティ(外部のサービスプロバイダ)に移譲された 6 出張 Shibuya.JS 24
  • 7. Facebookアプリの実装形態 2. API website 3. XML 1. 外部ウェブサイト向けアプリケーション 1. Request 4. HTML 2. デスクトップ向けアプリケーション 3. Facebook 内アプリケーション browser – IFRAME アプリケーション 1.外部アプリ – FBML アプリケーション 2. Callback 4. API website website 5. XML 3. FBML 3. IFRAME 1. Request 1. Request 4. HTML 2. HTML 手軽に構築可能 6. HTML browser browser 3-1. IFRAMEアプリ 3-2. FBMLアプリ 7 出張 Shibuya.JS 24
  • 8. Facebook API Facebook外のアプリケーションから Facebookのセッション情報や、 users.getInfo メソッドの主なレスポンス ユーザ名・写真などプロフィール情報を 要素名 内容 利用するためのAPIが公開されている。 first_name 名 last_name 姓 about_me プロフィール文 birthday 誕生日 sex 性別 application pic 写真URL(100~300ピクセル) current_location 現住所の国名~都市 hometown_location 出身地の国名~都市 timezone 時間帯(カリフォルニアは-8) Facebook API のメソッド一覧 auth.createToken auth.getSession events.get events.getMembers fbml.refreshImgSrc fbml.refreshRefUrl fbml.setRefHandle feed.publishStoryToUser feed.publishActionOfUser fql.query friends.areFriends friends.get friends.getAppUsers groups.get groups.getMembers notifications.get notifications.send notifications.sendRequest photos.addTag photos.createAlbum photos.get photos.getAlbums photos.getTags photos.upload profile.setFBML profile.getFBML users.isAppAdded users.getInfo users.getLoggedInUser 8 出張 Shibuya.JS 24
  • 9. FBML Facebook Markup Language • HTMLのサブセットに、Facebook 向けの専用拡張タグを追加 • 既存のHTMLコンテンツ・アプリを最低限の改修で、Facebook化できる <fb:name uid=quot;12345quot; firstnameonly=quot;truequot; lastnameonly=quot;falsequot; useyou=quot;truequot; linked=quot;truequot; /> パラメタ 内容 デフォルト uid ユーザーID(quot;loggedinuserquot;も可) (必須) firstnameonly 姓のみ表示する false linked プロフィール画面へリンクする true lastnameonly 名のみ表示する false useyou 本人の場合quot;youquot;と表示する true ifcantsee 閲覧できない場合の代替表示 (空) 9 出張 Shibuya.JS 24
  • 10. FBML Facebook Markup Language fb: gro upl ink fb:u ser fb: use r-ta ble fb:pronoun fb: pro fil e-p i c fb :is - in- net work fb :if-can-see fb: if- can -se e -pho to f b:i f-i s-ap p-u ser fb: if- is- fri e nds- wit h -vi ewe r fb :if -is-group-member fb: if- is- own - prof ile fb: if- is-u ser fb: if- use r-h a s-ad ded - app f b:us erl ink fb:wide fb: nar row fb : if-i s-o w n-p rof ile fb: pro fil e-a c tion fb : sub tit le f b:vi sib le-t o-owner fb: vis ibl e-t o -fri end s fb :vi sibl e-to -us er fb: vis ibl e-t o -app -us e rs fb: visi ble- to- adde d-a pp- user s fb: ifr ame fb : phot o fb :mp 3 f b:sw f fb :fl v fb :si lve rlig ht fb: com men ts f b:fr ien d -se lec tor fb:g oog le-a nal yti cs f b:if fb: mob ile fb : mult i-f r ien d-i nput fb: ran dom fb: swi tch fb: fbj s-s tri n g fb :fb ml f b:f bmlv ersi on fb:r edi rec t fb :ref fb: sha re- but t on f b:t ime fb: titl e fb :su bmit fb: att ach men t -pre vie w f b:n otif -sub jec t fb :req-choice fb: req ues t-f o rm f b:e rror fb :exp lana tio n fb :success fb: edi tor fb : dash boa rd f b:h eade r fb :me diah eader fb:tabs fb: dia log fb : wall 条件分岐など、たくさん用意されている 10 出張 Shibuya.JS 24
  • 11. FBJS Facebook JavaScript var foo = 'Hello'; function bar ( obj ) { alert( foo ); } FBML中で<script>要素を記述すると 変換 Facebookサーバ内でFBJSとして変換される var a235394XXXX_foo = 'Hello'; function a235394XXXX_bar ( a235394XXXX_obj ) { a235394XXXX_alert( a235394XXXX_foo ); } セキュリティ対策 変数名・関数名の先頭に自動的に接頭辞が付く サンドボックス方式で名前空間を隔離する仕組み なんだかセキュリティホールがありそう? 11 出張 Shibuya.JS 24
  • 12. Shibuya.JS TT#1 (2006/04) 12 出張 Shibuya.JS 24
  • 13. DEMO #1 Animation.Cube(再) 13 出張 Shibuya.JS 24
  • 14. ・・・しかし、FBJSとして実行すると ※実はDEMOはIFRAMEアプリ。FBJSとしては動かない style プロパティの操作は setStyle アクセサを利用する必要があり、エラー 14 出張 Shibuya.JS 24
  • 15. DEMO #2 WHERE’S 徳間インターメディア刊『MSX・FAN』誌(ファンダム)に掲載された 1画面部門(MSX-BASIC 40桁×24行)の自作プログラムを移植 15 出張 Shibuya.JS 24
  • 16. ・・・しかし、FBJSとして実行すると ※実はこのDEMOもIFRAMEアプリ。FBJSとしては動かない Facebook 側が提供する common.js 内でエラー(汗) バグか!? 16 出張 Shibuya.JS 24
  • 17. 結論 正直、まだFBMLでガシガシJavaScript (FBJS)を使える段階でない 日本語の開発者向けドキュメントがほとんどない。デバッグも大変! まだまだ日本人ユーザも少ない。開発者も少ない これから、面白そう! Facebook アプリ開発者の同志を絶賛・募集中~! 17 出張 Shibuya.JS 24