Download - Facebook.JS (JavaScript)
Facebook.JS(仮)
『出張 Shibuya.JS 24』2007年 9月 15日(土)
川﨑 有亮
http://www.kawa.net/
出張 Shibuya.JS 24 2
会員数 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/
出張 Shibuya.JS 24 3
Facebook アプリケーション
Facebook APIにより、Facebookの機能を利用した独自サービスを構築可能。
開発したアプリをFacebookに登録すれば、一般ユーザ誰でも利用可能に。
友人が利用しているアプリも見れるので、クチコミ効果で伝播が速い特徴。
Facebookアプリが充実していくことで、Facebook自体の価値も向上する。
Facebookアプリケーションの登録
出張 Shibuya.JS 24 4
Facebook アプリの登録ユーザは、使いたいアプリケーションを登録(インストール)できる。
出張 Shibuya.JS 24 5
⽐較(1)従来型SNS
従来型SNS
外部サービス
外部とは遮断されたSNS内のclosedな世界
1
従来型SNS
外部サービス
特定の提携サイトからのfeedを受け付ける程度
feed
2
多くの従来型SNSは、システムが外部とは隔離されており、SNS内で新サービスを提供する権限はSNS運営者が握っていた
出張 Shibuya.JS 24 6
⽐較(2)Facebook
Facebookでは、Facebook上で新サービスを提供する権限がサードパーティ(外部のサービスプロバイダ)に移譲された
外部サービス
外部サービス
APIによりFacebook機能を外部から利⽤可能
API
独⾃アプリ
Facebook内に誰でもサービスを提供可能
3
4
出張 Shibuya.JS 24 7
Facebookアプリの実装形態
1. 外部ウェブサイト向けアプリケーション
2. デスクトップ向けアプリケーション
3. Facebook 内アプリケーション
– IFRAME アプリケーション
– FBML アプリケーション
website
browser
1. Request 2. HTML
5. XML
4. API
3. IFRAME
6. HTML
website
browser
1. Request 4. HTML
3. FBML
2. Callback
website3. XML
2. API
browser
1. Request 4. HTML
1.外部アプリ
3-1. IFRAMEアプリ 3-2. FBMLアプリ
手軽に構築可能
出張 Shibuya.JS 24 8
Facebook APIFacebook外のアプリケーションから
Facebookのセッション情報や、
ユーザ名・写真などプロフィール情報を
利用するためのAPIが公開されている。
時間帯(カリフォルニアは-8)timezone
出身地の国名~都市hometown_location
現住所の国名~都市current_location
写真URL(100~300ピクセル)pic
性別sex
誕生日birthday
プロフィール文about_me
姓last_name
名first_name
内容要素名
users.getInfo メソッドの主なレスポンス
users.getLoggedInUserusers.getInfousers.isAppAddedprofile.getFBML
profile.setFBMLphotos.uploadphotos.getTagsphotos.getAlbumsphotos.get
photos.createAlbumphotos.addTagnotifications.sendRequestnotifications.sendnotifications.get
groups.getMembersgroups.getfriends.getAppUsersfriends.getfriends.areFriends
fql.queryfeed.publishActionOfUserfeed.publishStoryToUserfbml.setRefHandlefbml.refreshRefUrl
fbml.refreshImgSrcevents.getMembersevents.getauth.getSessionauth.createToken
application
Facebook API のメソッド一覧
出張 Shibuya.JS 24 9
FBML
• HTMLのサブセットに、Facebook 向けの専用拡張タグを追加
• 既存のHTMLコンテンツ・アプリを 低限の改修で、Facebook化できる
< f b : n a m e u i d = " 1 2 3 4 5 " f i r s t n a m e o n l y = " t r u e " l a s t n a m e o n l y = " f a l s e " u s e y o u = " t r u e " l i n k e d = " t r u e " / >
(空)閲覧できない場合の代替表示ifcantsee
true本人の場合"you"と表示するuseyou
false名のみ表示するlastnameonly
trueプロフィール画面へリンクするlinked
false姓のみ表示するfirstnameonly
(必須)ユーザーID("loggedinuser"も可)uid
デフォルト内容パラメタ
Facebook Markup Language
出張 Shibuya.JS 24 10
FBML
f b : g r o u p l i n k f b : u s e r f b : u s e r - t a b l e f b : p r o n o u nf b : p r o f i l e - p i c f b : i s - i n - n e t w o r k f b : i f - c a n - s e e f b : i f - c a n - s e e - p h o t o f b : i f - i s - a p p - u s e r f b : i f - i s - f r i e n d s - w i t h - v i e w e r f b : i f - i s - g r o u p - m e m b e r f b : i f - i s - o w n - p r o f i l e f b : i f - i s - u s e r f b : i f - u s e r - h a s - a d d e d - a p p f b : u s e r l i n k f b : w i d ef b : n a r r o w f b : i f - i s - o w n - p r o f i l e f b : p r o f i l e - a c t i o n f b : s u b t i t l e f b : v i s i b l e - t o - o w n e r f b : v i s i b l e - t o - f r i e n d s f b : v i s i b l e - t o - u s e r f b : v i s i b l e - t o - a p p - u s e r s f b : v i s i b l e - t o - a d d e d - a p p - u s e r s f b : i f r a m e f b : p h o t o f b : m p 3 f b : s w f f b : f l v f b : s i l v e r l i g h tf b : c o m m e n t s f b : f r i e n d - s e l e c t o r f b : g o o g l e - a n a l y t i c s f b : i ff b : m o b i l e f b : m u l t i - f r i e n d - i n p u t f b : r a n d o m f b : s w i t c hf b : f b j s - s t r i n g f b : f b m l f b : f b m l v e r s i o n f b : r e d i r e c t f b : r e ff b : s h a r e - b u t t o n f b : t i m e f b : t i t l e f b : s u b m i tf b : a t t a c h m e n t - p r e v i e w f b : n o t i f - s u b j e c t f b : r e q - c h o i c e f b : r e q u e s t - f o r m f b : e r r o r f b : e x p l a n a t i o n f b : s u c c e s sf b : e d i t o r f b : d a s h b o a r d f b : h e a d e r f b : m e d i a h e a d e r f b : t a b sf b : d i a l o g f b : w a l l
Facebook Markup Language
条件分岐など、たくさん用意されている
出張 Shibuya.JS 24 11
FBJS
v a r f o o = ' H e l l o ' ;f u n c t i o n b a r ( o b j ) {
a l e r t ( f o o ) ;}
v a r a 2 3 5 3 9 4 X X X X _ f o o = ' H e l l o ' ;f u n c t i o n a 2 3 5 3 9 4 X X X X _ b a r ( a 2 3 5 3 9 4 X X X X _ o b j ) {
a 2 3 5 3 9 4 X X X X _ a l e r t ( a 2 3 5 3 9 4 X X X X _ f o o ) ;}
変換
セキュリティ対策変数名・関数名の先頭に自動的に接頭辞が付くサンドボックス方式で名前空間を隔離する仕組みなんだかセキュリティホールがありそう?
Facebook JavaScript
FBML中で<script>要素を記述するとFacebookサーバ内でFBJSとして変換される
出張 Shibuya.JS 24 12
Shibuya.JS TT#1 (2006/04)
出張 Shibuya.JS 24 13
Animation.Cube(再)DEMO #1
出張 Shibuya.JS 24 14
・・・しかし、FBJSとして実行すると
style プロパティの操作は setStyle アクセサを利用する必要があり、エラー
※実はDEMOはIFRAMEアプリ。FBJSとしては動かない
出張 Shibuya.JS 24 15
WHERE’SDEMO #2
徳間インターメディア刊『MSX・FAN』誌(ファンダム)に掲載された1画面部門(MSX-BASIC 40桁×24行)の自作プログラムを移植
出張 Shibuya.JS 24 16
・・・しかし、FBJSとして実行すると
Facebook 側が提供する common.js 内でエラー(汗)
バグか!?
※実はこのDEMOもIFRAMEアプリ。FBJSとしては動かない
出張 Shibuya.JS 24 17
結論
これから、面白そう!
日本語の開発者向けドキュメントがほとんどない。デバッグも大変!
正直、まだFBMLでガシガシJavaScript (FBJS)を使える段階でない
まだまだ日本人ユーザも少ない。開発者も少ない
Facebook アプリ開発者の同志を絶賛・募集中~!