ColdFusionで開発するはじめてのfacebookアプリケーション【準備編】

作成日: 2011年4月13日
作成者:（有）デジタルムーン橋本　晴子
最終更新日: 2011年4月13日

Facebookアプリ開発には様々な言語でSDKが用意されています。ところがColdFusionの正式なSDKはありません。そこでJavascriptSDK（jQuery）を利用して簡単にColdFusionでfacebookアプリを開発する方法をご紹介いたします。今回は準備編です。

準備するもの

・ColdFusionソースファイルをアップロードするサーバー

今回の内容

・facebookのしくみ
・facebookにユーザー登録（まだサインアップされてない方）
・Developerアプリケーションの追加
・facebookアプリケーションを登録しAPIキーを取得
・JavascriptSDKのダウンロード
・facebookサーバーと通信可能なColdFusionアプリケーションを作成

Facebookのしくみ

facebookには様々なページがあります。少しわかり辛いのでMAPにしてみました。

個人プロフィール

ログインすると表示される自分のプロフィール画面です。

Facebookページ（旧ファンページ）

会社や団体などのページを作ることができます。
facebookページ作成　 http://www.facebook.com/pages/create.php

Developerアプリページ

facebookアプリを開発する最初に、このアプリを追加しておく必要があります。

Developerページ

アプリケーションを登録・管理できます。

開発ドキュメント

SDKやAPI、プラグインのドキュメントが用意されています。フォーラムや開発者ブログもあります。

マイアプリ

アプリの追加、設定の編集ができます。

アプリプロフィール

アプリを登録すると自動生成されます。ここでfacebookページにアプリを追加することができます。

facebook上のアプリページ

アプリケーションがiframeで表示されます。アプリケーション本体は外部サーバーにあります。

外部アプリケーション（本体）（ColdFusionページ）

ここが実際のアプリの場所です。　

Facebookアプリ開発の手順

1.facebookにユーザー登録する

2.Developerアプリケーションの追加

facebookにログインした状態で、Developerアプリケーションのページにアクセスします。
http://facebook.com/developers/
「許可する」をクリックします。

3.facebookアプリケーションの登録

facebookにログインした状態で、Developerアプリケーションのページにアクセスします。
http://facebook.com/developers/
「許可する」をクリックします。

アカウント認証を行う必要があります。携帯電話、またはクレジットカードのいずれかで認証してください。

認証が完了したら、Developerアプリケーションのページにアクセスします。
http://facebook.com/developers/
「SetUpNewApp」ボタンをクリック

作成するアプリケーション名を入力し、「同意する」にチェックして「アプリケーションを作成」ボタンをクリック

セキュリティチェック文字を入力し「送信」ボタンをクリック

アプリケーション編集ページ。　ひとまず言語を日本語に変更します。

左メニューの「Facebook Integration」をクリック。
Canvas Page と Canvas URL を入力し、「変更を保存」ボタンをクリック。

Canvas Page ：facebook上のURLです。
Canvas URL ：iframe内に表示される本体部分のURLです。（自分のサーバーのURL）　「/」で止める必要があるので「index.cfm」を用意します。
Canvas Type ：iframeにしておきます。

変更が保存されたか確認します。
Canvas Pagが既に存在する場合は、「変更を保存」ボタンを押すとエラーになります。

「マイアプリ」画面。　ここまででアプリ登録完了です！

4.Javascript SDK　ダウンロード

githubからfacebook JavascriptSDKをダウンロードしzipファイルを解凍します。
https://github.com/facebook/connect-js

facebook-connect-js-ec03d81

5.APIキーをセットして、サーバーにUP

jQueryのSDKを開きます。
facebook-connect-js-ec03d81examplesjquerylogin.html

<!doctype html>
<html>
<!-
Copyright Facebook Inc.

Licensed under the Apache License, Version 2.0 (the “License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
->
<head>
<meta http-equiv="content-type” content="text/html; charset=utf-8″>
<title>Connect JavaScript - jQuery Login Example</title>
</head>
<body>
<h1>Connect JavaScript - jQuery Login Example</h1>
<div>
<button id="login”>Login</button>
<button id="logout”>Logout</button>
<button id="disconnect”>Disconnect</button>
</div>
<div id="user-info” style="display: none;”></div>

<div id="fb-root”></div>
<script src="http://connect.facebook.net/en_US/all.js”></script>
<script>
// initialize the library with the API key
FB.init({ apiKey: ‘48f06bc570aaf9ed454699ec4fe416df’ });

// fetch the status on load
FB.getLoginStatus(handleSessionResponse);

$(’#login’).bind(’click’, function() {
FB.login(handleSessionResponse);
});

$(’#logout’).bind(’click’, function() {
FB.logout(handleSessionResponse);
});

$(’#disconnect’).bind(’click’, function() {
FB.api({ method: ‘Auth.revokeAuthorization’ }, function(response) {
clearDisplay();
});
});

// no user, clear display
function clearDisplay() {
$(’#user-info’).hide(’fast’);
}

// handle a session response from any of the auth related calls
function handleSessionResponse(response) {
// if we dont have a session, just hide the user info
if (!response.session) {
clearDisplay();
return;
}

// if we have a session, query for the user’s profile picture and name
FB.api(
{
method: ‘fql.query’,
query: ‘SELECT name, pic FROM profile WHERE id=’ + FB.getSession().uid
},
function(response) {
var user = response[0];
$(’#user-info’).html(’<img src=”‘ + user.pic + ‘”>’ + user.name).show(’fast’);
}
);
}
</script>
</body>
</html>

APIキーを自分のアプリの値に変更します。

// initialize the library with the API key
FB.init({ apiKey: ‘ここにAPIキーをセットして下さい。’ });

facebook Javascriptの言語を日本語にします。「en_US」→「ja_JP」に変更します。

ファイル名を「login.html」→「index.cfm」へ変更します。
ソースファイルのエンコードをUTF-8にします。
アプリ登録にて設定した「キャンバスページURL 」（外部サーバー）の場所にサーバーUPします。サンプルでは「http://www.cf-girl.net/facebook/cfmtestapp/」にFTPにてアップしています。

外部サーバーの表示を確認します。
http://www.cf-girl.net/facebook/cfmtestapp/

facebook上の「 Canvas Page 」からも同じものが見えます。
http://apps.facebook.com/cfmtestapp/

実施に動作を確認してみましょう。
「Login」ボタンをクリックすると、「アプリの許可」を求められます。「許可する」をクリック。

自分のプロフィール画像と名前が表示されたら成功です！

「キャンバスページURL 」（外部サーバー）にアクセスしても、同じように動作します。
http://www.cf-girl.net/facebook/cfmtestapp/　

6.Javascript SDK　のソースを見てみましょう。

index.cfm

7.Javascript SDK　ドキュメント。

「FB.login」「FB.api」などのコードについてはSDKのドキュメントが用意されています。
Developerページ　http://developers.facebook.com/
「Facebook.com上のアプリ」をクリック

「SDKs & Tools」メニューをクリック。

「JavaScript SDK」をクリック
SDKの説明があります。

8.マイアプリ

マイアプリではアプリの新規登録・編集・削除など、各種設定を行うことができます。
　

普通のfacebookページのフッターから「開発者」をクリックします。

Developerページに直接アクセスする場合はこちら。
http://developers.facebook.com/
　

「マイアプリ」をクリックすると「マイアプリ」画面へ遷移します。

「マイアプリ」画面

おわりに

いかがでしたか？
facebookのSDKは種類が豊富なので、どのSDKを利用すべきか迷うかもしれません。私はまだ試していませんが、ColdFusion9のSDKもあるようです。
http://facebooksdk.riaforge.org/
ご自分にあったSDKを探してみてくださいね。次回は実践編としてcfajaxを利用してColdFusion側でAPIを実行するサンプルをご紹介する予定です。