FQLと遊ぶ！ : Facebook Query Language (後編)

2013年06月25日 10:58 （2013年10月13日 16:09 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

今回は前編に続いて、FQLを実際にSDKを使って送信してみようというお話です。 Facebook JavaScript SDKを利用して、JavaScriptでやります。

FQLと遊ぶ！ : Facebook Query Language

それでは早速SDKを使用する下準備から。

アプリケーションを作成する

まずFacebookでアプリケーションを作成しましょう。

新しいアプリを作成

Facebook Developersへアクセス
「新しいアプリを作成」
適当な名前をつけて 「続行」 してキャプチャを入力
アプリができます。 App ID をメモっておきます。

続いて、基本的な設定を行います。

Facebookでログインするウェブサイト

「基本設定」 で 「Facebookでログインするウェブサイト」 で使用するサイトのURLを入力

ここでは実際にアプリケーションを動作させるURLを書いておきます。そのURL以外ではアプリケーションは動かないので、ローカルでテストする場合も簡易サーバーやローカルプロキシを使うなどして環境を整えましょう。

cf) すぐに使える簡易サーバーでHTMLをチェックする3つの方法 | Mach3.laBlog

SDKでアプリを初期化する

最低限必要な要素はこれくらい。

<div id="fb-root"></div>
<script src="http://connect.facebook.com/ja_JP/all.js"></script>

そして先程作成したアプリのIDで初期化します。

FB.init({appId: "/* あなたのアプリID　*/"});

App IDが正しくなかった場合、コンソールにエラーが表示されます。

Invalid App ID: アプリIDが正しくありません。

また、アプリケーションで設定したURLと異なっている場合は次のエラーが表示されます。

指定されたURLは、アプリケーションの設定で許可されていません。: 指定されたURLの中にアプリの設定で認められないものが含まれています。ウェブサイトまたはキャンバスのURLと一致しているか、ドメインがアプリのドメインのサブドメインである必要があります。

テスト環境ではサブドメインを利用するか、別途開発用のアプリを作っておくと捗りますね。

SDKでログインする

FB.login(callback, options);

でダイアログを表示してユーザーにログインを促します。

FB.login(
    function(response){
        if(response.authResponse){
            console.log("つながったよ！");
            doStuff(); // ログイン出来たので何かする
        } else {
            console.log("拒否されたよ！");
        }
    }, 
    {scope: "read_stream"}
);

第二引数の options の scope で上述の権限を追加する事ができます。複数の場合はカンマ区切りで入力します。

クエリを実行・データを取得する

doStuff() の中身でクエリを実行してみます。 FQLのクエリは、

FB.api("/fql", {q: "/* FQLクエリ */"}, callback);

のようにして送信し、コールバックで結果を受け取ります。

var doStuff = function(){
    FB.api(
        "/fql", 
        {q: "SELECT title, url FROM link WHERE owner = me()"}, 
        function(response){
            console.log(response.data); // 返されたデータが詰まっている
        }
    );
};

あとは返されたデータを煮たり焼いたり捌いたりしてアプリに組み込みましょう。

毎回ログインダイアログが出るのは邪魔だ

Facebook SDKのログインは、 FB.logout を呼ぶか、セッションが切れるまで生き続けます。上のコードのように直接 FB.login を呼んでいると、セッションの生死に関わらず毎度ログインダイアログが出てしまうので鬱陶しいですね。

FB.getLoginStatus や auth.statusChange イベントを使ってうまくコントロールしましょう。

FB.Event.subscribe(eventName, callback) : イベントハンドラを登録
FB.getLoginStatus(callback) : ログイン状態を取得してコールバックに渡す
“auth.statusChange” : （イベント）ログイン状態が変化した際に発火

FB.Event.subscribe("auth.statusChange", 
    function(response){
        if(response.status === "connected"){
        // ログインセッションがまだ生きているか、ログインが完了したところ
        doStuff(); 
    } 
});

FB.getLoginStatus(function(response){
    if(response.status !== "connected"){
        // ログイン状態にないのでログインします
        FB.login(null, {scope: "read_stream"}); 
    }
});

FB.login のくだりは、「FB.login を呼び出すボタンを表示する」に変更した方が自然ですね。その辺はアプリの挙動にあわせてよしなに。

ファイナルコード

(function(){
    var appId, doStuff;

    appId = "/* あなたのApp ID */";
    doStuff = function(){
        FB.api(
            "/fql", 
            {q: "SELECT title, url FROM link WHERE owner = me()"}, 
            function(response){
                console.log(response.data);
            }
        );
    };

    FB.init({appId: appId});
    FB.Event.subscribe("auth.statusChange", function(response){
        if(response.status === "connected"){
            doStuff();
        }
    });
    FB.getLoginStatus(function(response){
        if(response.status !== "connected"){
            FB.login(null, {scope: "read_stream"});
        }
    });
}());

不明な点は公式ドキュメントで

疑問を抱いたら、公式ドキュメントを訪れましょう。
JavaScript SDK Reference – Facebook開発者

まとめ

途中あまりFQLが関係なくなりましたが、JavaScript SDKのメモとして。

Facebookは仕様の柔軟な可変性に定評がありますので、今日ここで書いた内容は明日には間違ってるかもしれません。その時は優しく叱ってください。

コメントを書く