facebook.js (javascript)

Facebook.JS（仮）

『出張 Shibuya.JS 24』2007年 9月 15日（土）

川﨑有亮

http://www.kawa.net/

出張 Shibuya.JS 24 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/


Facebook アプリケーション

Facebook APIにより、Facebookの機能を利用した独自サービスを構築可能。

開発したアプリをFacebookに登録すれば、一般ユーザ誰でも利用可能に。

友人が利用しているアプリも見れるので、クチコミ効果で伝播が速い特徴。

Facebookアプリが充実していくことで、Facebook自体の価値も向上する。

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


Facebook アプリの登録ユーザは、使いたいアプリケーションを登録（インストール）できる。


⽐較（１）従来型SNS

従来型SNS

外部サービス

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

1

従来型SNS

外部サービス

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

feed

2

多くの従来型SNSは、システムが外部とは隔離されており、SNS内で新サービスを提供する権限はSNS運営者が握っていた


⽐較（２）Facebook

Facebookでは、Facebook上で新サービスを提供する権限がサードパーティ（外部のサービスプロバイダ）に移譲された

外部サービス

外部サービス

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

API

独⾃アプリ

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

3

4


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アプリ

手軽に構築可能


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 のメソッド一覧


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


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

条件分岐など、たくさん用意されている


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 TT#1 (2006/04)


Animation.Cube（再）DEMO #1


・・・しかし、FBJSとして実行すると

style プロパティの操作は setStyle アクセサを利用する必要があり、エラー

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


WHERE’SDEMO #2

徳間インターメディア刊『MSX・FAN』誌（ファンダム）に掲載された1画面部門（MSX-BASIC 40桁×24行）の自作プログラムを移植


・・・しかし、FBJSとして実行すると

Facebook 側が提供する common.js 内でエラー（汗）

バグか！？

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


結論

これから、面白そう！

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

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

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

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

facebook.js (javascript)

Technology