Facebookアプリケーションを作ろう(JavaScript Client Library編)

昨日は東京・原宿で行われた"Facebook Developer Garage Tokyo"というイベントに参加してきた。
APIの話が概要だけで終わったりMark Zuckerbergが(昼まで日本にいたのに!)帰国した後だったり、というのは残念だったが、開発者が自らのアプリケーションをデモする場があり、何より豪華な晩飯にもありつけたので満足だ。Facebook太っ腹、Facebook大好き!

自分はまだデモできるようなものは持っていなかったのだが「OpenSocial時代のバイラル・ラーニング基盤」という大風呂敷を広げていることもあり、近いうちに開発に乗り出すことは間違いない。今回はAPIの中でもまだほとんど解説記事が書かれていない"JavaScript Client Library"を選び、ちょっとした練習を始めてみた。「自らの友人のプロフィール画像を全て取得し、ページ上にずらずら並べる」という超シンプルなものだ。

<div id='foo'></div>
<textarea style="width: 1000px; height: 300px;" id="_traceTextBox"></textarea>
<script src="http://static.ak.facebook.com/js/api_lib/v0.3/FeatureLoader.js" type="text/javascript">
</script>

<script type="text/javascript">
FB_RequireFeatures(["Api"], function(){
    // ApiClientオブジェクトを作る
    var api = new FB.ApiClient('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
                               '/~yori/facebook_js/xd_receiver.htm', null);
    // ログイン
    api.requireLogin(function(exception) {
        // 友人一覧を取る
        api.friends_get(null,function(result,exception){
            var str="";
            for(var i=0;i<result.length;i++){
                // 画像URLを取る
                api.users_getInfo(result[i],["uid","pic"],function(result2,exception){
                    // result2[0]["pic"]が何なのかわからない人は Debug.dump(result2) しよう
                    var img = result2[0]["pic"];
                    if(!img){ // 画像なかった場合
                        img = 'http://static.ak.fbcdn.net/pics/s_default.jpg';
                    }
                    str=str+'<img src="' + img + '">';
                    document.getElementById('foo').innerHTML = str;
                    // デバッグ情報
                    Debug.writeLine(result2[0]["uid"] +" " +result2[0]["pic"]);
                });
            }
        });
    });
});
</script>

↑実行例はこんな感じ(モザイク入り)、下部のtextareaにはデバッグ情報が出る。

Zipファイルでダウンロードできる文書を見るとわかる通り、このJavaScript用APIのドキュメントは驚くほど「充実していない」。上のサンプルコード中のapi.users.getInfoの使い方は結局、REST APIの使い方の中から似た名前のものを見つけて何となく推測、という感じで動かした。「サーバサイドのプログラムが要らない」「Facebook外のどんなサイトからでもAPIを呼べる」という大きなメリットがあるのに、これは勿体無いことだ。あれこれhackしながらユーザ(開発者)が自らドキュメントを書きつつ余力があれば日本語訳も、という流れは今後起こるかもしれない。

また、コールバック関数を使った非同期処理に慣れていないと実用的なプログラムを作ろうとする上で戸惑う、という場面も想像できる。そんな時にはamachang氏が触れていた「非同期処理を同期処理のように書く方法」のお世話になることがあると思う。

昨日のイベントは、先月のMySpaceの勉強会とは色々な意味で違っていた。日本法人があるかどうかの違いなのだろう。今回の企画は(一年くらい前から考えていたらしい)日本人ユーザの有志によるものだ。会場の雰囲気は神田さんが報じている通り。オープニングにはパフォーマー集団も登場していた。