こうなりました

新しくなった Codogue.com がこちらです。

少しずつ長い期間で地味に進めて来まして、ようやく形になったところ。
書き方の好みや開発環境もだいぶリリース当初から様変わりしているので、中身も全部書き直してます。
デザインは、途中で飽きましたが最後まで貫きました。

ついでに追加された 「Facebookmark」

せっかくの機会なので一つアプリを増やしてみました。

Facebookmark

これは、Facebook上で自分が「シェア」してきたリンクを一覧表示・検索するアプリです。
（Facebookへのログインが必要です）

何らかのソーシャルブックマークを使っているのなら勿論それで用は足りるのですが、
Facebookのシェア機能も、公開範囲を設定できたりコメントを残せたりと、わりとログを残す場として便利に使えたりします。
ただ、Facebook上だと昔にシェアした物を探すのは正直骨なので、このアプリを作ってみたわけです。

文字列検索機能は、自分がつけたコメントやリンクのサマリーも含んで検索してくれます。
（後からつけたコメントは含めない様です。残念。）

まとめ

他にもいくつか実験してみたいネタはあるのですが、そのうちいずれ…

今後共よろしくお願い致します。

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

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

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

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

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

1. 「基本設定」 で 「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は仕様の柔軟な可変性に定評がありますので、 今日ここで書いた内容は明日には間違ってるかもしれません。 その時は優しく叱ってください。

前編では、FQLとは何なのかをざっくりとご紹介します。

FQLについて

Facebook Query Language (FQL) – Facebook開発者

こちらが公式のドキュメント（英語）。 簡単に説明すると、SQLライクなクエリを送信し、Facebookのデータを取得出来るインターフェイスです。

取得できるデータは多岐に渡ります。 アプリに利用する場合は、シェアされた物やいいね！された物、プロフィールや友人関係などの情報を取得して使うことになるのでしょう。

多岐に渡るテーブルはこちらを参照 :
Facebook Query Language (FQL) Reference – Facebook開発者

何が出来るのかを試す (Graph API Explorer)

実際にFQLで何が出来るのかというのを試してみたいのならば、Graph API Explorerが便利。
Graph API Explorer- Facebook Developers

クエリを送ってみる

1. 「FQL Query」タブを選択
2. 「アクセストークンを取得」をクリックして、認証する
3. テキストエリアにFQLクエリを打ち込んで「送信」すると下にJSON形式の結果が表示される

例えば自分が投稿した写真の一覧を表示させてみます。

SELECT pid, caption, src_big, link FROM photo WHERE owner = me()

SQLを触った事がある人には大変馴染み深い文法です。 むしろこれに馴染みがあまりない人はFQLを無理して使う事はないでしょう。

me() は自分のidを返す関数です。この他にもいくつかの関数がクエリ内で利用できます。（後述）

結果が少ない、あるいはゼロだ

投稿したはずの内容が含まれていなかったり、全く内容がなかったりする場合は、アクセストークンにその権限がない場合があります。 例えば投稿の範囲が「友人のみ」に設定されているような場合は、

1. 「アクセストークンを取得」 で 「Select Permissions」 ダイアログを開く
2. この場合は 「User Data Permissions」 の 「user_photos」 にチェックを入れる
3. 「Get Access Token」

等とすると表示される事があります。 これもまた項目が非常に多いので、アプリを作る時は事前にここでどの権限が必要なのかチェックをしておきましょう。

ちょっと応用編

FQLでは LIKE演算子 が使えませんので、 strpos() をもって代用してみます。 下の例は、titleに”JavaScript”を含むデータをlinkテーブルから検索、取得します。

SELECT title, url, owner_comment, summary, caption FROM link
WHERE owner = me() AND strpos(title, "JavaScript") >= 0

さらに、キーワードを探すカラムを複数にし、大文字小文字を無視して検索したい場合は、 lower と concat を使って関数を入れ子にしてみます。

SELECT title, url, owner_comment, summary, caption FROM link
WHERE owner = me()
AND strpos(lower(concat(title, summary, owner_comment)), "javascript") >= 0

LIKE演算子に関わらず、SQLにはあってもFQLには無い物は沢山あります。 そんな時は、関数を使ってうまいこと工夫してみる必要がありますね。

FQLで出来る事出来ない事

• SELECTによる取得だけみたいです。データの操作は他のAPIで。
• SELECT * FROM … とかは出来ません。カラム名をきちんと指定する必要があります。
• me, now, rand, strlen, concat, substr, strpos, lower, upper 等の関数が使用できます。 これらのほとんどはドキュメントに明記されておらず、他にもまだあるかもしれません。
• IN や ORDER BY, LIMIT句も使用出来ます。
• 必ずインデックスとして使用されるフィールド(owner や id など）で絞りこまなければなりません。 それに加えて、ANDで条件を足して絞り込みましょう。

まとめ

FQLの概要をご紹介しました。
続く後編では、JavaScript SDKを使ってブラウザからFQLクエリを送信してみます。

私も早速試してみたので、雑感などを。

やはり友達がいると楽しいもの

私自身、Facebookに登録したのは去年の5月でしたが、
登録したっきり何をするわけでもなく放置してしまっていました。
というのも、Facebook上でやりとりする相手が居なかった。

今回のお祭り騒ぎでTwitterのフォロワーさんを中心に、
今までほぼ皆無だったFacebookの友人が増えました。
やっぱり、友達が居るとネットワークサービスは楽しい。当たり前ですが。

結局は周りに流されたい

そんなわけで、どうせ試すなら賑やかな今、便乗すべきですよね。
友達がいなければ機能を試そうにも試しようがないわけで。

結局の所ネットワークサービスは長いものに巻かれたい。
というよりは自分の周囲の人がどれだけ使っているかにあわせたい。
周りに流されてなんぼ、「周り」が居てこそ面白いんです。
ミーハー、大いに結構じゃないですか。

でもプラットフォームはあまり増やしたくない

今後使っていくかどうかは、
ひとえに周囲にあわせていく感じではあるのですが…

個人的には、プラットフォーム的な物をこれ以上増やしたくないという気持ちが強いです。
Twitter・Tumblr・ブログ、そしてFacebookと。
それぞれの活かし方をきちんと考えてあげないと、
自分の情報が色んなサービスに散らばってしまって管理が行き届かなくなってしまう。
Web上に漂う自分の分身がボケたりブレたりしてしまう感覚。
これは気持ち悪い！

発言を同期する程度の仕組みは用意されてますが、
それはちょっと求めている物と違います。
結局発言の先にあるコミュニケーションというのは、
それぞれのサービス自体の物に因る事になるわけですから。

とりあえず、祭に揉まれながら活かす道について思いを巡らしてみようと思います。
Facebookアプリにも少し興味がありますね！

以上、まとまりのない雑感でした。