TitaniumにはFacebookと連携するためのオブジェクトが用意されており、非常に簡単にFacebookアカウントとアプリのユーザーとを紐付けたり、Facebookのウォールに投稿させたりということができます。この機能を利用するためにはFacebookでのアプリ開発者登録が必要なので、まずはそちらから解説していきます。大前提として、Facebookは利用中のものとして話を進めますので、アカウントを持っていない場合はアカウントを取得してください。

Facebookに登録する

まずfacebookにログインした状態で、https://developers.facebook.com/appsにアクセスします。初回は、“⁠Facebook開発者アプリ⁠”の認証が求められます。“⁠Facebook開発者アプリ⁠”が我々開発者の個人情報を取得する必要があるためです。この認証を許可すると、下のような画面になります。

画面右上の［Create New App］をクリックし、あたらしいFacebookアプリを登録します。アプリ名の入力が求められるので、名前を入力します。あとで変更も可能なので適当に入力しても大丈夫です。特に国際化して運用する予定がなければLocaleは日本語にしておきましょう。また、Facebook利用規約に同意する必要もあります。

さらにアカウントの認証も必要で、開発者のFacebookアカウントに携帯電話かクレジットカードを紐付ける必要があります。

これらをクリアすると、アプリ情報画面が表示され、TitaniumなどからAPIを呼び出すときに必要なApp IDが取得できます。

Facebookログインボタンを表示する

では早速アプリにFacebookログインボタンをつけてみましょう。

var win = Ti.UI.currentWindow;

Ti.Facebook.appid = '取得した App ID';
Ti.Facebook.permissions = ['publish_stream'];

var button = Ti.Facebook.createLoginButton();
win.add(button);

これだけのコードでFacebookにログインし、アプリのユーザーとFacebookアカウントを紐付ける画面を表示できます。

Ti.Facebook.permissionsで指定している文字列は、Facebookからどのような情報を取得するかを指定しています。指定しなかったものは取得できません。また、指定されているものについては、初回のFacebookログイン時にFacebook上のどのような情報が取得されるか表示されます。publish_streamに指定していると、ユーザーがすべてのFacebookユーザーに公開している情報を取得する権限と、ウォールへの投稿権限の許可が求められます。どのような権限が設定できるかはhttp://developers.facebook.com/docs/reference/api/permissions/から確認できます。

また、違うボタンを利用してログインさせることも可能です。

var myButton = Ti.UI.createButton({
    title: 'login',
    top: 50,
    left: 100,
    height: 50,
    width: 100,
});
myButton.addEventListener('click',function(){
    if ( Ti.Facebook.loggedIn ) {
        Ti.Facebook.logout();
    } else {
        Ti.Facebook.authorize();
    }
});
win.add(myButton);

すでにログインした状態でauthorizeメソッドを呼んでもなにも動作しません。loggedInパラメタを参照することでlogin状態を確認して利用してください。

ログインした状態であるとFacebookのGraph APIと呼ばれるAPIを通じでユーザーのFacebookでの情報を取得したり、ユーザーのウォールに投稿を行ったりすることができます。

ユーザーの情報を取得する

では早速ユーザーの情報をFacebookから取得してみましょう。

var getButton = Ti.UI.createButton({
    title: 'get',
    top: 200,
    left: 100,
    height: 50,
    width: 100,
});
getButton.addEventListener('click',function(){
    Ti.Facebook.requestWithGraphPath(
        'me',
        {},
        "GET",
        function(e) {
            if (e.success) {
                var obj = JSON.parse(e.result);
                alert("Success: " + obj.name);
            }
        }
    );
})
win.add(getButton);

このコードで表示されるgetボタンをタップすると、ユーザーの名前がアラートダイアログで表示されます。

Ti.Facebook.requestWithGraphPathがFacebookへの操作を行うための汎用的なメソッドになっています。第1引数で利用するAPIのパスを、第2引数でAPIに送信するデータを、第3引数でHTTPのメソッドを、第4引数でリクエストが終了したあとのcallback関数を指定しています。callback関数に渡されるオブジェクトのreslutパラメタにJSONでエンコードされた結果が入っていますので、JSON.parseメソッドを利用してオブジェクトに変換して利用してください。

ユーザーのウォールに投稿する

では、次にアプリを利用しているユーザーのウォールに投稿してみましょう。

var postButton = Ti.UI.createButton({
    title: 'post',
    top: 200,
    left: 100,
    height: 50,
    width: 100,
});
postButton.addEventListener('click',function(){
    Ti.Facebook.requestWithGraphPath(
        'me/feed',
        {
             message: "GraphAPIのテスト"
        },
        "POST",
        function(e) {
            if (e.success) {
                alert("Success" + e.result);
            }
        }
    );
})
win.add(postButton);

このコードで実装されるpostボタンをタップすると、ログインした状態になっていれば、自分のwallに「Graph APIのテスト」という文字列が見えるはずです。

Facebookには利用できるGraph APIが大量に用意されており、https://developers.facebook.com/docs/reference/api/から確認できます。それぞれのAPIによってこれらの引数は変わってきますので、前述のドキュメントを参考に値を設定してください。

まとめ

今回はFacebookからの情報の取得について簡単に解説しました。作ったアプリを普及させることは作成すること以上に困難があるものですが、その方策の一つとしてユーザーにソーシャルグラフを使って宣伝してもらうという手もあります。Facebook APIはかなり簡単に利用できるので、一つの候補としてみてはいかがでしょうか。