読了: 約 0 分

今日も雪が降りましたね。東京に住んで5年目ですが、こんなに降ったのは初めてです。
寒くて家に籠っていたので、何か作りたいなーと思って参考書を片手にFacebookアプリを作ってみました。
※途中段階ですので挙動はおかしいですが、どうかご勘弁下さい。

Facebookアプリってなんぞ

最近は診断系アプリが良く使われていて、スパムのようになったりするアプリも増えて来ていますよね。
制作会社にいる身+営業的な視点から考えると、この手のアプリは提案によってはかなりニーズがあると思います。
最近変わりましたが、Facebookページと同梱プランで提案なんて事も出来ますね。

キャンバスアプリ(App on Facebook)

iframe内に外部サイトのアプリのHTMLファイル等を読みこむ方法です。
WEBサイトのURLを指定しておけば、WEBサイトと同じCSS/JavaScript/PHPが読まれるので、
FBアプリの方は
Facebookアプリ
のようになりました。

自分のFacebookアカウントでログインすると自分のlikeしたアーティストと、
友達のlikeしたアーティストを表示してクリックすると音楽が再生されます。

Mobile

iPhone,androidなどで創りたい場合はネイティブアプリとして作成します。
いずれそっちも作ってみたいですね。

デベロッパー登録

下記からデベロッパー登録をして、キーを取得します。
https://developers.facebook.com/

Facebookページを作成する時の方法と同じなので割愛しますが、
ここは全然難しくありません。

Graph API

Facebookのソーシャルグラフを活用するためのAPIです。
これを使って友人の情報や自分のlikeの情報を取得してアプリケーションを作成出来ます。
アイデアさえあればどんどん創れるのでワクワクしますね!

JavaScript SDK

Facebook独自の書き方があります。

これがアプリの初期化です。

アプリの初期化

FB.init({
  appId:'アプリケーションID'
 cookie:true,
  oauth:true
});

ログイン状態の確認

FB.getLoginStatus(function(resp){
  if(resp.authResponse){
   //ログイン済みの場合の処理
   echotext();
  }else{
   //未ログインの時の処理
  $("#result").text("ログインしてください。");
  }
});

長くなってしまいますので、後JavaScriptSDKのロードの仕方を書いておきます。

javascript sdk のロード

$(function){
  (funciton(){
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
});

の様にロードします。

あとはログイン済みの時に実行する関数を作ってあげて、htmlの方も作ればログインしたかどうかだけ判定するものが
出来ると思います。

今回のものを進めていくとまだ完成版ではありませんが、下記の様なアプリが作れます。
YoutubeのAPIを使って、検索し、サムネイルをクリックしたら音楽が再生されるというものです。
※現在は友人をアプリに招待は出来ません。

これを少しアレンジすれば色々な人へのギフトアプリなども創れるのではないでしょうか。
またそういったものを作っていきたいと思います。

今回は一応HTML5/CSS3,JavaScript(jQuery)を使用して作成しております。

Facebookアプリドキュメントサイト

Facebook開発者向けドキュメントの日本語訳とTips

今回の参考書籍

初心者でもここまで創れるようになったのでおススメです。