• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Facebook.JS (JavaScript)
 

Facebook.JS (JavaScript)

on

  • 5,915 views

Introducing the Facebook Platfome and FBJS (Facebook JavaScript) at "出張 Shibuya.JS 24" event in "Mozilla 24". September 15th, Tokyo, Japan.

Introducing the Facebook Platfome and FBJS (Facebook JavaScript) at "出張 Shibuya.JS 24" event in "Mozilla 24". September 15th, Tokyo, Japan.

Statistics

Views

Total Views
5,915
Views on SlideShare
5,875
Embed Views
40

Actions

Likes
2
Downloads
52
Comments
0

6 Embeds 40

http://paper.li 18
http://www.slideshare.net 10
http://s.deeeki.com 4
http://coderwall.com 4
http://kawanet.blogspot.com 3
http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Facebook.JS (JavaScript) Facebook.JS (JavaScript) Presentation Transcript

    • 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