2011/01/24

[ #koumeilabs ] Facebookアプリケーション クライアントサイド編

FacebookのAPIをいろいろ触ってみた。

触ってみた結果はこちら 。
http://koumei-labs.amazedkoumei.com/fbml/

今回もやはりホストはGoogle App Engine。

Google App Engineに載せてはいるが、上のページを表示するためのサーバサイドプログラムは一切動いていない。
すべてがFacebookが提供しているFBMLjavascriptSDKで動いている。

FBMLとはFacebook Markup Languageの略で、要するにFacebookで使用されている部品を流用するためのHTMLだと思ってもらえばいい。

名前は非常に仰々しいが大変シンプルに作られている。
例えばログインボタンを表示するために必要な記述はたったの3行だ。
  1. XMLNS属性 xmlns:fb="http://www.facebook.com/2008/fbml の指定
  2. http://connect.facebook.net/en_US/all.js (※1)をロードするSCRIPTタグ
  3. ログインボタンを表示する <fb:login-button></fb:login-button>

たったこれだけを記述するだけでログインボタンが表示される。
※1
/en_US/all.js は英語用のスクリプトだ。
日本語で表記したい場合は /ja_JP/all.js をロードすればいい。
/[言語コード]_[国2桁コード]/all.js という作りになっている。


ログイン後にログインボタンをログアウトボタンに変更する、や
ログインユーザにStreamの更新権限を与えない
といった、細々した設定は fb:login-buttonタグに属性指定するだけで変更可能だ。

ログイン後にログインボタンをログアウトボタンに変更する場合は
<fb:login-button autologoutlink="true"></fb:login-button>
のように、autologoutlink属性TRUEに設定してやるだけでいい。

例としてログインボタンを使ったが、Facebook上で使われているほとんどの部品を、このようなシンプルな記述で表現できる。また、これでも面倒臭いのだ、という人のためにコード生成用ページまでFacebookは準備している周到さだ。


『FacebookのUIは日本人には馴染まない』という意見をよく聞くが、『だったら好みのUIを作ればいいじゃないですか、日本のサードパーティさん』ってことなんでしょうかね。。


ちなみにこれにサーバサイドプログラムを組み合わせればより高度なことができる。
Facebookが閉じられた空間であることを考えれば、ウン千万円かけて作った社内システムと同程度、それ以上のものを作ってしまうこともできるのでは、とも思えるし、まったく別発想のアプリケーションだって生まれてくるはずだ。
フリーランスやベンチャーの働き方を根底から覆してしまうようなモノだって、ひょっとすると・・


まだ解析できていないがGoogle App Engine上で動作するFacebookアプリケーションのサンプルとしてRun with Friends(※2)にFacebookのディベロッパーページからリンクが貼られていたので、興味のある方は使ってみて欲しい。
※2「Today」をクリックした時にセットされる月の値が間違っているがまぁご愛嬌。

ソースコードは下記に公開されている。
https://github.com/facebook/runwithfriends


最後になったがFBMLjavascriptSDKを調べてみて日本語解説記事の少なさに驚いた。FBMLがいつ公開されたのかは知らないが、2007年にはすでに公開されていたと記憶している。

それだけ日本でのFacebookの浸透度が低いということなのだろうが、つい先日、映画「ソーシャルネットワーク」も公開され、今後ユーザ数も増えていくはずだ。

Comments