基本から学ぶ Faceebookアプリの作り方 ～いよいよアプリを作る その２～
今回は、アプリ自体のプログラムソースの説明です！
今回のアプリは、phpという言語を用いて作っています。
php自体はさほど難しい言語ではありませんが、主に画面に表示するだけが「仕事」の様な物なので、動きなどはjavascriptで作り込んでいきます。
プログラムは・・・
赤い文字⇒php
黒い文字⇒javascript
青い文字⇒Html
としてあります。
また、緑の文字はアプリ毎に変更せねばならない部分です
※//から始まる部分はコメントです
では実際のプログラムです。
<?php
// 初期処理
mb_internal_encoding("UTF-8");
// アプリURL(Canvas Pageに変更)
$APURL = "https://apps.facebook.com/アプリＩＤに変更";
// FacebookSDKの読み込み
require_once ('../lib/facebook/facebook.php');
// appIDとsecretを指定
$facebook = new Facebook(array('appId' => 'App IDに変更',
'secret' => 'App Secretに変更'));
// アプリ実行ユーザー取得
$user = $facebook->getUser();
// Facebookアプリを既に認証しているかのチェック
if ($user) {
// ユーザー情報が取得出来れば認証済みとなる
try {
//Facebookページへの「いいね！」が取得出来ているかを調べる
$likes = $facebook->api('/me/likes/いいね！してほしいFacebookページの番号');
if (!empty($likes['data'])){
//いいね! を押している人に表示する画像
$HtmlContent = "<img src='./img/thxiine.png' style='position: absolute; top: 350px;'>";
} else {
//いいね! を押していない人に表示する画像（いいね！リンク付）
$HtmlContent = "<img src='./img/noiine.png' style='position: absolute; top: 350px;'>";
}
} catch (FacebookApiException $e) {
// エラー表示後に終了
if (1) {
echo $e;
exit;
}
error_log($e);
$user = null;
}
} else {
// アプリを初めて使用するので、認証画面を表示
// 権限許可用のパーミッションを作成
$permis = "";
if (1) {
// ユーザーの「いいね！」を取得出来る権限を指定
$permis = "user_likes";
}
//認証画面用URL作成
$url = $facebook->getLoginUrl(array('scope' => $permis));
// アプリ初使用ユーザーなら facebook の認証ページへ遷移
echo "<script type='text/javascript'>top.location.href = '$url';</script>";
exit;
}
// Facebookとアプリ間の情報を取得
$signe = $facebook->getSignedRequest();
// もしFacebook外で呼ばれていたらFacebookのURLへ移動
if (!$signe["oauth_token"]) {
echo "<script type='text/javascript'>top.location.href = '$APURL';</script>";
exit;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基礎から学ぶFacebookアプリ</title>
<style type="text/css">
<!--
.container {
background: url('./img/top.jpg') no-repeat;
width:900px;
Height:800px;
}
.body {
width:810px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', // いいねが押されたら実行する
function() {
// いいね後に実行したい処理として、Canvas PageのＵＲＬにリダイレクト
location.href="Canvas PageのＵＲＬ";
}
);
FB.Event.subscribe('edge.remove', // いいねが押されたら実行する
function() {
// いいね後に実行したい処理として、Canvas PageのＵＲＬにリダイレクト location.href="Canvas PageのＵＲＬ";
}
);
};
</script>
<div class="container">
<div class="fb-like" data-href="https://www.facebook.com/pages/Windurst/313249438731521" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false" style="position: absolute; top: 600px; left: 500px;"></div>
<?php
echo "$HtmlContent";
?>
</div>
</body>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=App IDに変更&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</html>
難しそうに見えますか？
少しずつ見て行きましょう
まずは最初の部分、ここら辺は固定の様な物です。
緑の部分だけに注意してプログラミングすれば問題ありません。
<?php
// 初期処理
mb_internal_encoding("UTF-8");
// アプリURL(Canvas Pageに変更)
$APURL = "https://apps.facebook.com/アプリＩＤに変更";
// FacebookSDKの読み込み
require_once ('../lib/facebook/facebook.php');
// appIDとsecretを指定
$facebook = new Facebook(array('appId' => 'App IDに変更',
'secret' => 'App Secretに変更'));
// アプリ実行ユーザー取得
$user = $facebook->getUser();
次に、ここ・・・
// Facebookアプリを既に認証しているかのチェック
if ($user) {
ここは、アプリを動かすユーザーの情報を取得しています。
ユーザー情報が取得出来れば「既にアプリを使った事がる」と言う事になります。
以下の行は、「既にアプリを使った事がる」ユーザー用の処理です。
// ユーザー情報が取得出来れば認証済みとなる
try {
//Facebookページへの「いいね！」が取得出来ているかを調べる
$likes = $facebook->api('/me/likes/いいね！してほしいFacebookページの番号');
if (!empty($likes['data'])){
//いいね! を押している人に表示する画像
$HtmlContent = "<img src='./img/thxiine.png' style='position: absolute; top: 350px;'>";
} else {
//いいね! を押していない人に表示する画像（いいね！リンク付）
$HtmlContent = "<img src='./img/noiine.png' style='position: absolute; top: 350px;'>";
}
はい、ここまでの処理
こまでの処理は、指定されたFacebookページに対して、アプリを動かしているユーザーが「いいいね！」しているかどうかをチェックしています。
「いいね！」を押しているユーザーには、「いいねありがとう！」の画像を表示します。
「いいね！」を押していないユーザーには、「いいねおしてね！」の画像を表示します。
この下からの行は、ユーザー情報が取れなかった場合のエラー処理です。
まぁ・・・ 一旦はこのままで良いと思います
} catch (FacebookApiException $e) {
// エラー表示後に終了
if (1) {
echo $e;
exit;
}
error_log($e);
$user = null;
}
} else {
さて、この次からの処理が極めて重要です。
今年の５月で変更になった「要素」が盛り込まれています。
その「重要な要素」はいきなり出てきます
// アプリを初めて使用するので、認証画面を表示
// 権限許可用のパーミッションを作成
$permis = "";
if (1) {
// ユーザーの「いいね！」を取得出来る権限を指定
$permis = "user_likes";
}
//認証画面用URL作成
$url = $facebook->getLoginUrl(array('scope' => $permis));
// アプリ初使用ユーザーなら facebook の認証ページへ遷移
echo "<script type='text/javascript'>top.location.href = '$url';</script>";
exit;
}
はい！ ここまでが「重要な要素」です！！！
今までのFacebookアプリは、ほぼ全ての個人情報がいとも容易く取得出来ました。
この状況は、「スパムアプリ」を多発させる大きな要因となりました。
この状況を「重く見た」Facebookは、ユーザーの個人情報をアプリが取得する場合
「アプリ毎申請出しなさい！」と運用を変えたのです。
今回のアプリは、ユーザーの「いいね！」情報を使います。
「何故アプリで『いいね！』の情報が必要なのか、英文で提出」せねばなりません。
前回の回で 「何も知らないと、こんな画面に悩まされます・・・」と書いた画面
！マークの所
「このアプリ、申請出してないユーザー情報を使おうとしてて、問題あるんですけどー！」
と言っています。
この状態では、このアプリは正しく動きません。
※実際の申請の出し方は次回で・・・
この下からは、一旦このままで良いと思います
// Facebookとアプリ間の情報を取得
$signe = $facebook->getSignedRequest();// もしFacebook外で呼ばれていたらFacebookのURLへ移動
if (!$signe["oauth_token"]) {
echo "<script type='text/javascript'>top.location.href = '$APURL';</script>";
exit;
}
?>
ここまでがメインとなるプログラムです
この下からは、画面の表示と制御になります。
特に重要な所だけをかいつまんでご説明しましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基礎から学ぶFacebookアプリ</title>
<style type="text/css">
<!--
.container {
background: url('./img/top.jpg') no-repeat;
width:900px;
Height:800px;
}
.body {
width:810px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
はいここから下が重要です！
この下のjavascriptは、「いいね！」ボタンが押された時に動く処理です。
「いいね！」が押されると、edge.createの処理が動きます。
また、「いいね！」が取り消された場合は、edge.removeの処理が動きます。
いいね！が押されたら、「いいねありがとう」のページへ飛ばしたり、「いいね！が取り消された場合」はいいね！を催促するページに飛ばしたりなどいう処理を入れて行きます。
ここの部分は、いいね！ボタンの状況に応じて動きを変える大事な所となります。
<script>
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', // いいねが押されたら実行する
function() {
// いいね後に実行したい処理として、Canvas PageのＵＲＬにリダイレクト
location.href="Canvas PageのＵＲＬ";
}
);
FB.Event.subscribe('edge.remove', // いいねが押されたら実行する
function() {
// いいね後に実行したい処理として、Canvas PageのＵＲＬにリダイレクト location.href="Canvas PageのＵＲＬ";
}
);
};
</script>
あとは画面の表示ですね
<div class="container">
<div class="fb-like" data-href="https://www.facebook.com/pages/Windurst/313249438731521" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false" style="position: absolute; top: 600px; left: 500px;"></div>
ここで、「いいね、してる」と「いいね、してない」の画像を表示させています。
<?php
echo "$HtmlContent";
?>
後の残りは、このままで問題ないと思います。
</div>
</body>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=App IDに変更&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</html>
いかがでしたか？
初めての方には「難解」だと思いますが、一つ一つゆっくり読み解いていけば「理解」出来ると思います。
phpに関しては、さほど難しい言語ではありません、少しの勉強で誰にでも理解できる簡単な物です。
「プログラムの組み方」みたいな本があると良いかもしれませんね。
おそらく技術的に障害になるなら、javascriptではないでしょうか？
ではでは、次回もお楽しみに！！
 | 新品価格 |
 | 新品価格 |
