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

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. ⽐較（１）従来型SNS
1
従来型 外部
SNS サービス
外部とは遮断されたSNS内のclosedな世界
2
従来型 外部
SNS サービス
feed
特定の提携サイトからのfeedを受け付ける程度
多くの従来型SNSは、システムが外部とは隔離されており、
SNS内で新サービスを提供する権限はSNS運営者が握っていた
5
出張 Shibuya.JS 24

6. ⽐較（２）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