Facebookアプリを開発してみよう

2011-02-15 10:00 (更新：2021-01-05 08:52)深谷歩Facebook

映画「ソーシャル・ネットワーク」が公開されたり、テレビや雑誌等のマスメディアでも取り上げられたりと、Facebookを利用する人が増えてきました。そこで今回はFacebookアプリケーションの作り方の基本を紹介します。まず簡単にFacebookアプリケーションがどのように動作するのかを説明しましょう。 Facebookアプリケーションは、「http://apps.facebook.com/アプリ名/」というURLにアクセスすると、あらかじめ設定してある外部Webサイトからコンテンツを取得し、実行します。外部Webサイトで稼働するアプリケーションにFacebookの認証を付け加えるというイメージです。既に稼働しているサービスであれば、認証部分の変更となるため、少々面倒かもしれませんが、Facebookで登録されたユーザ情報にアクセスできることがメリットです。最初に必要な条件を確認し、続いて設定方法を紹介ましょう。

必要な条件

・Webサーバ・PHPの基礎知識 Webサーバは外部に公開されている必要があります。また、FacebookのAPIを利用しますので、SSL(https)通信が必要になります。共有レンタルサーバを利用している場合、通信エラーが発生することがあります。これはFacebookが要求しているCA認証が共有のレンタルサーバに無いために発生します。/usr/local/share/certs/等の認証用ディレクトリにCA認証ファイルを置ければ良いのですが、通常はパーミッションがかかっており、このディレクトリには書き込みさせてくれないかもしれません。このような場合の代替案については後述します。続いて、PHPの基礎知識についてですが、この記事ではFacebookアプリケーションと呼ばれるものをどうやって動作させるかに主眼を置きますので、特に説明はしません。PHPを解説した記事や書籍はたくさんあるので、そちらを参照してください。

ステップ1. Webサーバ側にFacebookアプリケーションを設置するディレクトリを作成する

まずはFacebookアプリケーションを設置する場所を決めます。ここで作成した場所にあるindex.phpをFacebookが読み込みにいきます。好きな場所を設定することができますが、外部からアクセスできるディレクトリでなければなりません。ここでは例として、http://socialmediaexperience.jp/fb/smextestfirst/というディレクトリを作成しました。

ステップ2. Facebookでアプリケーション登録、および設定をする

次はFacebook側でアプリケーションの登録をします。登録するには、Facebookにログインしている必要があります。初めてFacebookアプリケーションを作成する場合は、こちらにアクセスしてください。以下のような画面が表示されますので、「許可する」をクリックします。

以下の画面に遷移しますので、赤枠の「Create one.」をクリックします。

開発者としての認証を促されますので、携帯電話、もしくはクレジットカードのいずれかで認証してください。

上記認証が終了したらこちらのページに遷移し、ページ右上の「+Set Up New App」をクリックします。

任意のアプリケーション名を入力し、「同意する」にチェックを入れたら、「アプリケーションを作成」をクリックしましょう。

セキュリティチェックの画面に遷移しますので、入力し、「送信」をクリックしてください。

Facebookアプリケーションの設定画面に遷移します。

今回はサンプルとして作成するので、最低限必要な項目である赤枠で囲んだ部分のみ入力します。「アプリケーション名」は先ほど入力した値があらかじめセットされています。「ユーザーサポートのアドレス」はサポート用のメールアドレスを入力します。URLを選択して、Webサイトのお問い合わせフォームに遷移させることも可能です。「連絡先メールアドレス」はFacebookからの連絡の際に利用されます。左メニューの「Facebook Integration」をクリックします。

Facebook Integrationの画面に遷移します。

まずは緑枠で囲んである「アプリケーションID」と「シークレットキー」をメモ帳などに保存しておいてください。後で必要になります。次に赤枠で囲んである部分を入力していきます。「キャンバスページ」には任意の文字列を入力しましょう。これがFacebookアプリケーションのURLになります。ただし、小文字のアルファベット以外は使用できません。「キャンバスページURL」を入力します。ここには先ほどのステップ1で設定したWebサーバ側のURLを入力します。URLの最後に「/(スラッシュ)」を入力するのを忘れずに。今回はFBMLで作成しますので、「Canvas Type」には「FBML」にチェックを入れます。以上でとりあえず動作させるためのFacebook側での設定は終了しました。「変更を保存」をクリックしましょう。入力サンプルは以下になります。

ステップ3. Webサーバ側にFacebookライブラリを設置する

次にFacebookが用意しているクライアントライブラリをWebサーバ側に設置します。ステップ2の最後で「変更を保存」をクリックすると「マイアプリ」画面に遷移します。ページ下部にある「クライアントライブラリをダウンロード」をクリックしてください

githubに遷移しますので、「Downloads」をクリックします。

「Download.zip」をクリックしてください。

2011.2.9時点では「facebook-php-sdk-2343fca」というファイルがローカルに保存されました。このファイルを解凍すると、以下のような階層構造になっています。

/srcディレクトリを開きます。「facebook.php」と「fb_ca_chain_bundle.crt」というファイルが入っていることを確認します。この2つのファイルが入っていることを確認したら、/srcディレクトリをステップ1で作成したWebサーバ側のディレクトリに設置します。以下のような構成になります。 /www/fb/smexnamescore/src/facebook.php /www/fb/smexnamescore/src/fb_ca_chain_bundle.crt

ステップ4. 実際にサンプルスクリプトを動作させてみましょう

以下のソースコードをテキストエディタ等にコピー&ペーストし、index.phpという名前で保存してください。その後、ステップ1で設定したWebサーバ側のディレクトリに設置します。3行目「アプリケーションID」と4行目「シークレットキー」にはステップ2でメモした数値にそれぞれ置き換えてください。

上記コードは自分(正確には、このアプリを使用しているユーザー)のユーザーIDを表示するものです。では実際に正しく表示されるか確認してみましょう。まずはこのFacebookアプリを認証します。下記アドレスをブラウザに貼り付けて遷移してみてください。赤字の部分は適宜変更してください。

https://www.facebook.com/dialog/oauth?client_id=アプリケーションID&redirect_uri=キャンバスページ

以下はサンプルです。

https://www.facebook.com/dialog/oauth?client_id=192562284106401 &redirect_uri=http://apps.facebook.com/smextestfirst/

このような画面が表示されますので、「許可する」をクリックします。

以下のような画面が表示されたでしょうか。赤字の部分が自分のユーザIDです。

Facebookアプリケーションを許可せずにこのキャンバスページに遷移したり、Facebookにログインしていない場合はユーザIDが取得できず、空白になります。ではログインしていない場合はログインを促すメッセージを表示するようにしましょう。

[code] <?php require 'src/facebook.php'; $facebook = new Facebook(array('appId' => 'アプリケーションID', 'secret' => 'シークレットキー', 'cookie' => true, )); $session = $facebook->getSession(); //セッション確立 $fb_uid = $facebook->getUser(); //ユーザーID取得 if($fb_uid){ echo 'welcome! your fb_uid is '; echo ''; echo $fb_uid; echo ''; } else { echo 'you are not logged in. please logged in and try again.'; exit(); } ?> [/code]

これでログインしていない場合には"you are not logged in. please logged in and try again."というメッセージが表示されるようになりました。 7行目でセッションを確立し、8行目でユーザーIDを取得しています。9行目以降はユーザーIDが取得できたか判断し、取得できていなければ"you are not loggend in. please logged in and try again."と表示させています。

次は自分の名前を取得してみましょう。 APIを使用して自分の名前を引き出すことができます。コードは以下のようになります。

[code] <?php require 'src/facebook.php'; $facebook = new Facebook(array('appId' => 'アプリケーションID', 'secret' => 'シークレットキー', 'cookie' => true, )); $session = $facebook->getSession(); $fb_uid = $facebook->getUser(); if($fb_uid){ echo 'welcome! your fb_uid is '; echo ''; echo $fb_uid; echo ''; } else { echo 'you are not logged in. please logged in and try again.'; exit(); } $me = $facebook->api('/me'); echo ' '; echo $me['name']; ?> [/code]

では、再度このコードを実行してみましょう。 http://apps.facebook.com/アプリ名/に遷移してみてください。どうでしょうか。以下のように名前が表示されましたか?

以下の部分がAPIにアクセスして自分の情報を$meに格納し、nameの値を表示している部分です。

[code] $me = $facebook->api('/me'); echo ' '; echo $me['name']; [/code] name以外にどんなものが格納されているかは、 [code] $me = $facebook->api('/me'); echo ' <pre>'; print_r($me); echo '</pre>'; [/code]

とすれば表示できます。もし名前が表示できずにFatal error: Uncaught CurlException: 60:というようなエラーメッセージが出る場合や、何も表示されない場合は、以下のように3行目と4行目を追加してみてください。これはSSL通信時のサーバ証明書の検証を無効にしています。サーバ環境にもよりますが、通常、これで通信できるようになると思います。

[code] <?php require 'src/facebook.php'; Facebook::$CURL_OPTS[CURLOPT_SSL_VERIFYPEER] = false; Facebook::$CURL_OPTS[CURLOPT_SSL_VERIFYHOST] = 2; $facebook = new Facebook(array('appId' => 'アプリケーションID', 'secret' => 'シークレットキー', 'cookie' => true, )); $session = $facebook->getSession(); $fb_uid = $facebook->getUser(); if($fb_uid){ echo 'welcome! your fb_uid is '; echo ''; echo $fb_uid; echo ''; } else { echo 'you are not logged in. please logged in and try again.'; exit(); } $me = $facebook->api('/me'); echo ' '; echo $me['name']; ?> [/code] ただし、これではSSL通信で暗号化していることの意味も無くなってしまいます。サーバ環境が許すのであれば、3行目と4行目は以下のようにして通信できるかどうか確認してみてください。「fb_ca_chain_bundle.crt」はクライアントライブラリの/srcディレクトリに入っています。 [code]

Facebook::$CURL_OPTS[CURLOPT_SSL_VERIFYPEER] = true; Facebook::$CURL_OPTS[CURLOPT_CAINFO] = '[PATH]/fb_ca_chain_bundle.crt'; [/code] [PATH]の部分は環境に合わせて変更してください。

まとめ

いかがでしたでしょうか。日本国内での情報がまだ少ないため、Facebookアプリケーションの開発は敷居が高く感じることもあるかもしれませんが、実際はそんなことはありません。次回はOAuthを使用して、同じことをやってみたいと思います。なお、今回のサンプルを利用して、ユーザー名を数値化してランキングにするプログラムを作成してみました。こちらからアクセスできるので是非試してみてください。